WebGL Tutorial
and more

WebGL Diagrams

撰写时间:2023-09-05

修订时间:2023-09-09

WebGL渲染管道总览

flowchart LR subgraph A[JavaScript Client] B(vertices array data) end subgraph C[WebGL Server] D(WebGL Buffer) end subgraph E[Graphics Card] direction LR F(GPU) --> G(FrameBuffer) end B --> D D --> F

Framework

WebGLApp

类图

classDiagram class WebGLApp { static +instance: WebGLApp$ constructor(opts) -initContext(bgColor) -initWebEvents() +doInInitViewports(callback) +doInInitMeshes(callback) +run() }

关系图

WebGLApp的主要职责是初始化了5个类:

classDiagram WebGLApp ..|> WebGLUtils: initialize WebGLApp ..|> CameraManager: initialize WebGLApp ..|> ViewportManager: initialize WebGLApp ..|> Scene: initialize WebGLApp ..|> Controls: initialize

时序图

sequenceDiagram autonumber actor User create participant WebGLApp User ->> WebGLApp: new WebGLApp WebGLApp -->> WebGLApp: initContext WebGLApp -->> User: instance returned rect rgb(60, 88, 63) User ->>+ WebGLApp: doInInitViewports(callback) create participant CameraManager WebGLApp ->>+ CameraManager: instance CameraManager -->>- WebGLApp : instance returned create participant ViewportManager WebGLApp ->>+ ViewportManager: instance ViewportManager -->>- WebGLApp: instance returned WebGLApp -->>- User: inject cameraManager, viewportManager User ->> CameraManager: set eyeDist User ->> ViewportManager: useLayout end rect rgb(121, 56, 98) User ->>+ WebGLApp: doInInitMeshes(callback) create participant Scene WebGLApp ->>+ Scene: instance Scene -->>- WebGLApp: instance returned WebGLApp -->>- User: inject scene loop for each mesh created User ->> Scene: add(mesh) end end rect rgb(33, 66, 99) User ->> WebGLApp: run create participant Controls WebGLApp ->>+ Controls: new Controls WebGLApp -->> WebGLApp: trigger resize event Controls ->>- ViewportManager: doOnResize end

详细类图

classDiagram class WebGLApp { -scene: Scene -viewportManager: ViewportManager +instance: WebGLApp$ constructor(opts) -initContext(bgColor) -initWebEvents() +doInInitViewports(callback) +doInInitMeshes(callback) +run() } class Scene { -objects: Array +instance: Scene$ +add(obj) +getMeshes() Array +getFaceMeshes() Array +getHelperMeshes() Array +renderMeshes() +renderMeshesInViewport(viewportRenderMode) } class ViewportManager { -viewports: Array -viewportLayout: VIEWPORT_LAYOUT -activeViewport: Viewport -isViewportMaximized: bool -viewprotsToRestore: Array -prevActiveViewport: Viewport -prevCamInSingleLayout: Camera -prevViewportLayout: VIEWPORT_LAYOUT -predefinedViewports: Object -layoutsOfParts: Object +instance: ViewportManager$ constructor() -getViewportPropName(value) String +cycleLayout(viewportsNum) +maximizeViewport() +restoreViewport() +useLayout(viewportLayout) +resetViewports() +activeViewport() Viewport +activeViewport(viewport) +doOnResize() +doOnCameraViewChanged() } class VIEWPORT_LAYOUT { <<enumeration>> Single Left_Right Left_2_Right Left_3_Right Left_Right_2 Left_Right_3 Left_2_Right_2 Top_Bottom Top_2_Bottom Top_3_Bottom Top_Bottom_2 Top_Bottom_3 } class Viewport { -camera: Camera -canvas: Canvas -cssBorderDOM: DOM -projectionMatrix: mat4 -viewportOpts: Object -rect: Object -scene: Scene -glu: WebGLUtils +initCSSBorderDOM() +initProjectionMatrix() +updateViewport() +updateCSSBorderDOM() +updateProjectionMatrix() +doOnResize() +doOnCameraViewChanged() +applyTransforms() +clearViewport() } class Camera { -fov: int -initialPosition: vec3 -position: vec3 -azimuth: float -elevation: float -type: CAMERA_TYPE -viewMatrix: mat4 constructor(fov, position, type) +copyFrom(src) +setFov(fov) +initPosition(position) +setPosition(position) +setAzimuth(degree) +setElevation(degree) +offsetPosition(dx, dy, dz) +offsetAzimuth(degree) +offsetElevation(degree) +zoom(dz) +pan(dx, dy) +rotate(dx, dy) +updateViewMatrix() +getViewMatrix() mat4 } class CAMERA_TYPE { <<enumeration>> USER_VIEW FRONT_VIEW BACK_VIEW LEFT_VIEW RIGHT_VIEW TOP_VIEW BOTTOM_VIEW } class Controls { -scene: Scene -viewportManager: ViewportManager constructor() +initWebEvents() +updateViewports() +updateViews() +selectActiveViewport(evt) +onMouseDown(evt) +onMouseUp(evt) +onMouseMove(evt) +onMouseWheel(evt) +onKeyDown(evt) } class Mesh { } class WebGLUtils { -canvas: Canvas -gl: WebGL2RenderingContext -program: WebGLProgram -initProgram([vShaderId, fShaderId], vertexAttribs, uniforms) constructor(opts) +getContext(canvasId) WebGL2RenderingContext +syncCanvasSize() +createVBO(arrData, compsSizes, attribsNames) +createIBO(vao, indices) +createPosVBO(arrData, compSize = 3) +createColorVBO(arrData, compSize = 4) +createPosColorVBO(arrData, compsSizes = [3, 4]) +bindVboToAttribs(vbo) +createVAO(...vbos) +renderVAO(vao, isWireframe = false) +markVerticesPos(vao, opts) } WebGLApp --o WebGLUtils WebGLApp --> Scene WebGLApp --> ViewportManager WebGLApp ..|> Controls ViewportManager --o VIEWPORT_LAYOUT ViewportManager --o Viewport ViewportManager --o Camera Viewport --o WebGLUtils Scene --o Mesh Camera --o CAMERA_TYPE Controls --o ViewportManager Controls --o Scene

ViewportManager

流程图

--- title: useLayout Flow Chart --- flowchart TB A0[/Start/] A0 --> A A[Select Camera Set] A --> A1[empty viewports] A1 --> A2[remove cssDOMs] A2 --> B{in stock?} B -->|No| C[create viewports] C --> D[save into stock] D --> E[push into viewports] B -->|Yes| F[load viewports] F --> G[viewports initCSSDOM] G --> H[push into viewports] E & H --> I[set activeViewport] I --> J[/End/]

predefinedViewports状态图

stateDiagram-v2 [*] --> predefinedViewports state if_state <<choice>> predefinedViewports --> if_state: useLayout(viewportLayout) if_state --> viewports: if in, push if_state --> predefinedViewports: if not in, crate and save in

状态图1

stateDiagram-v2 [*] --> predefinedViewports predefinedViewports --> resetViewports(): useLayout(viewportLayout) Note left of predefinedViewports: init to null state resetViewports() { [*] --> viewports: empty -- [*] --> viewportCSSDOMs: remove all } state if_state <<choice>> resetViewports() --> if_state if_state --> True: if NOT in predefinedViewports True --> predefinedViewports: save in if_state --> False: if in predefinedViewports predefinedViewports --> False: load state join_state <<join>> True --> join_state False --> join_state join_state --> viewports: push

类图

classDiagram class ViewportManager { constructor() +useLayout(viewportLayout) +doOnResize() }

Viewport

类图

classDiagram class Viewport { -viewportOpts: Object -rect: Object -projectionMatrix: mat4 -cssBorderDOM: HTMLDivElement -camera: Camera -scene: Scene -viewportRenderMode: Mesh.RENDER_MODE constructor(camera, viewportOpts) +initCSSBorderDOM() +initProjectionMatrix() +doOnResize() +doOnCameraViewChanged() +updateViewportRect() +updateCSSBorderDOM() +updateProjectionMatrix() +applyTransforms() +clearViewport() }

状态图

stateDiagram-v2 direction LR state onResize { [*] --> this.rect state fork_state <<fork>> this.rect --> fork_state fork_state --> this.cssBorderDOM fork_state --> this.projectionMatrix state join_state <<join>> this.cssBorderDOM --> join_state this.projectionMatrix --> join_state join_state --> [*] } state OnCameraViewChanged { state fork_state_2 <<fork>> [*] --> fork_state_2 fork_state_2 --> uProjectionMatrix fork_state_2 --> uViewMatrix state join_state_2 <<join>> uProjectionMatrix --> join_state_2 uViewMatrix --> join_state_2 state fork_state_3 <<fork>> join_state_2 --> fork_state_3 fork_state_3 --> gl.viewport() fork_state_3 --> gl.scissor() state join_state_3 <<join>> gl.viewport() --> join_state_3 gl.scissor() --> join_state_3 join_state_3 --> gl.clear() } [*] --> onResize onResize --> OnCameraViewChanged OnCameraViewChanged --> [*]

Mesh

类图

详细:

classDiagram class Mesh { +RENDER_MODE$ +WIREFRAME_COLOR$ +setGLUHolder(value)$ } class MeshInterface { +visible +markVerticesPos(opts) +render() } class AbstractMesh { -glu -modelMatrix -verticesVBO -wireframeVAO -#renderMode +renderMode constructor(vertices, wireframeIndices, wireframeColor = Mesh.WIREFRAME_COLOR) +translate(vector) +rotate(degree, vector) +render() +renderSolid() +renderWireframe() +renderSolidWireframe() } class WireframeMesh { constructor(vertices, wireframeIndices, wireframeColor = Mesh.WIREFRAME_COLOR) } class SolidMesh { -solidVAO constructor(vertices, colors, solidIndices, wireframeIndices) } class SoleColorMesh { constructor(vertices, soleColor, solidIndices, wireframeIndices) } class CompositeMesh { -childMeshes +set renderMode(value) +translate(vector) +rotate(degree, vector) constructor() +render() +renderInViewport(viewportRenderMode) } class HelperMesh class GridFloorMesh { constructor(cellSide = 0.5, num = 10) } class CoordsAxesMesh { constructor(axisLength, markGap = 1, markLen = 0.1) } class FaceMesh { +vertices2D constructor(vertices, facesIndices, facesColors) } class RegularPolygonMesh { constructor(radius, sidesNum, isNeedOrg = false, facesColors) } class CircularMesh { constructor(radius, pointsNum, isNeedOrg = false, facesColors) } class CubeMesh { constructor(sideLength, facesColors) } class CuboidMesh { constructor(length, width, height, facesColors) } class BoxMesh { constructor(length, width, height, lengthThick, widthThick, bottomThick, facesColors) } class ConeMesh { constructor(radius, sidesNum, height, facesColors) } class ConeFrustumMesh { constructor(bottomRadius, sidesNum, height, topRadius, facesColors) } class CylinderMesh { constructor(radius, sidesNum, height, facesColors) } Mesh <|-- MeshInterface MeshInterface <|-- AbstractMesh AbstractMesh <|-- WireframeMesh AbstractMesh <|-- SolidMesh SolidMesh <|-- SoleColorMesh MeshInterface <|-- CompositeMesh CompositeMesh <|-- HelperMesh HelperMesh <|-- GridFloorMesh HelperMesh <|-- CoordsAxesMesh CompositeMesh <|-- FaceMesh FaceMesh <|-- RegularPolygonMesh RegularPolygonMesh <|-- CircularMesh FaceMesh <|-- CubeMesh FaceMesh <|-- CuboidMesh FaceMesh <|-- BoxMesh FaceMesh <|-- ConeMesh FaceMesh <|-- ConeFrustumMesh FaceMesh <|-- CylinderMesh

简要:

classDiagram direction LR Mesh <|-- MeshInterface MeshInterface <|-- AbstractMesh AbstractMesh <|-- WireframeMesh AbstractMesh <|-- SolidMesh SolidMesh <|-- SoleColorMesh MeshInterface <|-- CompositeMesh CompositeMesh <|-- HelperMesh HelperMesh <|-- GridFloorMesh HelperMesh <|-- CoordsAxesMesh CompositeMesh <|-- FaceMesh FaceMesh <|-- RegularPolygonMesh RegularPolygonMesh <|-- CircularMesh FaceMesh <|-- CubeMesh FaceMesh <|-- CuboidMesh FaceMesh <|-- BoxMesh FaceMesh <|-- ConeMesh FaceMesh <|-- ConeFrustumMesh FaceMesh <|-- CylinderMesh CompositeMesh --* AbstractMesh: holds

SoleColorMesh

classDiagram direction TB class Mesh { static +RENDER_MODE static +WIREFRAME_COLOR } class MeshInterface { +render() +renderInViewport(mode) +translate(vector) +rotate(degree, vector) } class AbstractMesh { -glu -modelMatrix +visible +renderMode +vertices +vertices2D } class SimpleMesh { -verticesVBO -wireframeVAO constructor() } class WireframeMesh { } class SolidMesh { -solidVAO } class SoleColorMesh class CompositeMesh { -childMeshes constructor() } class HelperMesh Mesh <|-- MeshInterface MeshInterface <|-- AbstractMesh AbstractMesh <|-- SimpleMesh SimpleMesh <|-- WireframeMesh WireframeMesh <|-- SolidMesh SolidMesh <|-- SoleColorMesh AbstractMesh <|-- CompositeMesh CompositeMesh <|-- HelperMesh CompositeMesh <|-- FaceMesh CompositeMesh --* SimpleMesh HelperMesh <|-- GridFloorMesh HelperMesh <|-- CoordsAxesMesh

参考资源

  1. Mermaid Flowchart