Three.JS Walking Map

Structure of Core Objects

Scene Graph Objects Scene Mesh Mesh(child) Light Camera
Geometry Vertex geometryGroups :Object(Hash) Face3 or Face4
geometryGroup :Object

WebGL objects

  • __webglFaceBuffer :WebGLBuffer
  • __webglVertexBuffer :WebGLBuffer
  • faces3 :Array
  • faces4 :Array

Basic Rendering Sequence

Preparation Phase

  1. *[Setup flattened list] For each scene graph object:
    1. *Init matrices.
    2. *Create geometry groups corresponding to face materials.
    3. [Setup buffers] For each geometry group object:
      1. *Create WebGL buffers.
      2. *Create Non-WebGL buffers.
      3. *Add an item to flattened list.
  2. *Update buffers (Vertex buffer, Index buffer...).

Rendering Phase

  1. *Update matrices on all of the descendants of scene.
  2. *Set up camera matrices.
  3. *[Setup-loop] For each flattened list item:
    1. *Set up matrix.
    2. *Pick materials.
  4. *[Draw-loop] For each flattened list item:
    1. *Set up shader programs(and textures).
    2. *Prepare buffers.
    3. *Draw primitives