Fix examples

visgl · Oct 11, 2019 · 3e35645 · 3e35645
1 parent 1885867
commit 3e35645
Show file tree

Hide file tree

Showing 23 changed files with 366 additions and 387 deletions.
diff --git a/examples/core/animation/app.js b/examples/core/animation/app.js
@@ -1,6 +1,6 @@
 /* global document */
 
-import {AnimationLoop, setParameters, ModelNode, dirlight, CubeGeometry} from '@luma.gl/core';
+import {AnimationLoop, setParameters, Model, dirlight, CubeGeometry} from '@luma.gl/core';
 import {Timeline, KeyFrames} from '@luma.gl/addons';
 import {Matrix4, radians} from 'math.gl';
 
@@ -143,7 +143,7 @@ export default class AppAnimationLoop extends AnimationLoop {
         translation: translations[i],
         rotation: rotations[i],
         keyFrames: keyFrames[i],
-        model: new ModelNode(gl, {
+        model: new Model(gl, {
           vs,
           fs,
           modules: [dirlight],

diff --git a/examples/core/gltf/app.js b/examples/core/gltf/app.js
@@ -5,7 +5,7 @@ import {parse} from '@loaders.gl/core';
 import {DracoLoader} from '@loaders.gl/draco';
 import '@loaders.gl/polyfills'; // text-encoding polyfill for older MS browsers
 import GL from '@luma.gl/constants';
-import {AnimationLoop, setParameters, clear, log, lumaStats} from '@luma.gl/core';
+import {AnimationLoop, setParameters, clear, log, lumaStats, Model} from '@luma.gl/core';
 import {
   GLTFScenegraphLoader,
   createGLTFObjects,
@@ -170,7 +170,7 @@ async function loadGLTF(urlOrPromise, gl, options) {
     DracoLoader
   });
 
-  scenes[0].traverse((node, {worldMatrix}) => log.info(4, 'Using model: ', node)());
+  scenes[0].traverse(node => log.info(4, 'Using model: ', node)());
   return {scenes, animator, gltf};
 }
 
@@ -452,24 +452,30 @@ export default class AppAnimationLoop extends AnimationLoop {
 
     let success = true;
 
-    this.scenes[0].traverse((model, {worldMatrix}) => {
+    this.scenes[0].compileMatrices(model => {
+      const worldMatrix = model.worldMatrix;
       // In glTF, meshes and primitives do no have their own matrix.
-      const u_MVPMatrix = new Matrix4(uProjection).multiplyRight(uView).multiplyRight(worldMatrix);
-      this.applyLight(model);
-      success =
-        success &&
-        model.draw({
-          uniforms: {
-            u_Camera: cameraPos,
-            u_MVPMatrix,
-            u_ModelMatrix: worldMatrix,
-            u_NormalMatrix: new Matrix4(worldMatrix).invert().transpose(),
-
-            u_ScaleDiffBaseMR: this.u_ScaleDiffBaseMR,
-            u_ScaleFGDSpec: this.u_ScaleFGDSpec
-          },
-          parameters: model.props.parameters
-        });
+
+      if (model.children[0] instanceof Model) {
+        const u_MVPMatrix = new Matrix4(uProjection)
+          .multiplyRight(uView)
+          .multiplyRight(worldMatrix);
+        this.applyLight(model);
+        success =
+          success &&
+          model.draw({
+            uniforms: {
+              u_Camera: cameraPos,
+              u_MVPMatrix,
+              u_ModelMatrix: worldMatrix,
+              u_NormalMatrix: new Matrix4(worldMatrix).invert().transpose(),
+
+              u_ScaleDiffBaseMR: this.u_ScaleDiffBaseMR,
+              u_ScaleFGDSpec: this.u_ScaleFGDSpec
+            },
+            parameters: model.props.parameters
+          });
+      }
     });
 
     return success;

diff --git a/examples/core/instancing/app.js b/examples/core/instancing/app.js
@@ -1,7 +1,8 @@
 import {
   AnimationLoop,
   setParameters,
-  ModelNode,
+  Model,
+  ScenegraphNode,
   picking,
   dirlight,
   readPixelsToArray,
@@ -45,7 +46,7 @@ createModuleInjection('picking', {
 });
 
 // Make a cube with 65K instances and attributes to control offset and color of each instance
-class InstancedCube extends ModelNode {
+class InstancedCube extends ScenegraphNode {
   constructor(gl, props) {
     let offsets = [];
     for (let i = 0; i < SIDE; i++) {
@@ -112,23 +113,27 @@ void main(void) {
     const colorsBuffer = new Buffer(gl, colors);
     const pickingColorsBuffer = new Buffer(gl, pickingColors);
 
-    super(
-      gl,
-      Object.assign({}, props, {
-        vs,
-        fs,
-        modules: [dirlight, picking],
-        isInstanced: 1,
-        instanceCount: SIDE * SIDE,
-        geometry: new CubeGeometry(),
-        attributes: {
-          instanceSizes: new Float32Array([1]), // Constant attribute
-          instanceOffsets: [offsetsBuffer, {divisor: 1}],
-          instanceColors: [colorsBuffer, {divisor: 1}],
-          instancePickingColors: [pickingColorsBuffer, {divisor: 1}]
-        }
-      })
-    );
+    super({
+      children: [
+        new Model(
+          gl,
+          Object.assign({}, props, {
+            vs,
+            fs,
+            modules: [dirlight, picking],
+            isInstanced: 1,
+            instanceCount: SIDE * SIDE,
+            geometry: new CubeGeometry(),
+            attributes: {
+              instanceSizes: new Float32Array([1]), // Constant attribute
+              instanceOffsets: [offsetsBuffer, {divisor: 1}],
+              instanceColors: [colorsBuffer, {divisor: 1}],
+              instancePickingColors: [pickingColorsBuffer, {divisor: 1}]
+            }
+          })
+        )
+      ]
+    });
   }
 }
 

diff --git a/examples/core/persistence/app.js b/examples/core/persistence/app.js
@@ -2,12 +2,12 @@ import {
   AnimationLoop,
   setParameters,
   Model,
+  ScenegraphNode,
   clear,
   Framebuffer,
   Program,
   Geometry,
-  IcoSphereGeometry,
-  ModelNode
+  IcoSphereGeometry
 } from '@luma.gl/core';
 import {Matrix4, Vector3, radians} from 'math.gl';
 
@@ -145,12 +145,16 @@ export default class AppAnimationLoop extends AnimationLoop {
       geometry: quadGeometry
     });
 
-    sphere = new ModelNode(gl, {
-      id: 'electron',
-      geometry: new IcoSphereGeometry({
-        iterations: 4
-      }),
-      program: new Program(gl, {vs: SPHERE_VS, fs: SPHERE_FS})
+    sphere = new ScenegraphNode({
+      children: [
+        new Model(gl, {
+          id: 'electron',
+          geometry: new IcoSphereGeometry({
+            iterations: 4
+          }),
+          program: new Program(gl, {vs: SPHERE_VS, fs: SPHERE_FS})
+        })
+      ]
     });
 
     const dt = 0.0125;

diff --git a/examples/lessons/03/app.js b/examples/lessons/03/app.js
@@ -1,6 +1,6 @@
 /* eslint-disable array-bracket-spacing, no-multi-spaces */
 import GL from '@luma.gl/constants';
-import {AnimationLoop, Geometry, setParameters, ModelNode} from '@luma.gl/core';
+import {AnimationLoop, Geometry, setParameters, Model, ScenegraphNode} from '@luma.gl/core';
 import {Matrix4} from 'math.gl';
 
 const INFO_HTML = `
@@ -68,12 +68,20 @@ export default class AppAnimationLoop extends AnimationLoop {
     });
 
     return {
-      triangle: new ModelNode(gl, {
-        geometry: triangleGeometry,
-        vs: VERTEX_SHADER,
-        fs: FRAGMENT_SHADER
+      triangle: new ScenegraphNode({
+        children: [
+          new Model(gl, {
+            geometry: triangleGeometry,
+            vs: VERTEX_SHADER,
+            fs: FRAGMENT_SHADER
+          })
+        ]
       }),
-      square: new ModelNode(gl, {geometry: squareGeometry, vs: VERTEX_SHADER, fs: FRAGMENT_SHADER})
+      square: new ScenegraphNode({
+        children: [
+          new Model(gl, {geometry: squareGeometry, vs: VERTEX_SHADER, fs: FRAGMENT_SHADER})
+        ]
+      })
     };
   }
 

diff --git a/examples/lessons/06/app.js b/examples/lessons/06/app.js
@@ -4,7 +4,7 @@ import {
   Texture2D,
   setParameters,
   loadImage,
-  ModelNode,
+  Model,
   CubeGeometry
 } from '@luma.gl/core';
 import {Matrix4} from 'math.gl';
@@ -95,7 +95,7 @@ export default class AppAnimationLoop extends AnimationLoop {
     const image = loadImage('crate.gif');
 
     return {
-      cube: new ModelNode(gl, {
+      cube: new Model(gl, {
         geometry: new CubeGeometry(),
         vs: VERTEX_SHADER,
         fs: FRAGMENT_SHADER

diff --git a/examples/lessons/07/app.js b/examples/lessons/07/app.js
@@ -1,5 +1,5 @@
 import GL from '@luma.gl/constants';
-import {AnimationLoop, Texture2D, setParameters, ModelNode, CubeGeometry} from '@luma.gl/core';
+import {AnimationLoop, Texture2D, setParameters, Model, CubeGeometry} from '@luma.gl/core';
 import {Matrix4} from 'math.gl';
 
 export const INFO_HTML = `
@@ -196,7 +196,7 @@ export default class AppAnimationLoop extends AnimationLoop {
     });
 
     return {
-      cube: new ModelNode(gl, {
+      cube: new Model(gl, {
         geometry: new CubeGeometry(),
         vs: VERTEX_SHADER,
         fs: FRAGMENT_SHADER,

diff --git a/examples/lessons/08/app.js b/examples/lessons/08/app.js
@@ -1,6 +1,6 @@
 /* eslint-disable max-statements, array-bracket-spacing, no-multi-spaces */
 import GL from '@luma.gl/constants';
-import {AnimationLoop, Texture2D, setParameters, ModelNode, CubeGeometry} from '@luma.gl/core';
+import {AnimationLoop, Texture2D, setParameters, Model, CubeGeometry} from '@luma.gl/core';
 import {Matrix4} from 'math.gl';
 
 const INFO_HTML = `
@@ -194,7 +194,7 @@ export default class AppAnimationLoop extends AnimationLoop {
       }
     });
     return {
-      cube: new ModelNode(gl, {
+      cube: new Model(gl, {
         geometry: new CubeGeometry(),
         vs: VERTEX_SHADER,
         fs: FRAGMENT_SHADER,

diff --git a/examples/lessons/09/star.js b/examples/lessons/09/star.js
@@ -1,4 +1,4 @@
-import {Program, Geometry, ModelNode} from '@luma.gl/core';
+import {Program, Geometry, ScenegraphNode, Model} from '@luma.gl/core';
 
 const VERTEX_SHADER = `\
 attribute vec3 positions;
@@ -29,45 +29,49 @@ void main(void) {
 }
 `;
 
-export class Star extends ModelNode {
+export class Star extends ScenegraphNode {
   constructor(gl, opts = {}) {
     const program = new Program(gl, {
       fs: FRAGMENT_SHADER,
       vs: VERTEX_SHADER
     });
 
-    super(gl, {
-      program,
-      geometry: new Geometry({
-        attributes: {
-          // prettier-ignore
-          positions: new Float32Array([
-            -1.0, -1.0, 0.0,
-            1.0, -1.0, 0.0,
-            -1.0, 1.0, 0.0,
-            1.0, 1.0, 0.0
-          ]),
-          // prettier-ignore
-          texCoords: new Float32Array([
-            0.0, 0.0,
-            1.0, 0.0,
-            0.0, 1.0,
-            1.0, 1.0
-          ]),
-          indices: new Uint16Array([0, 1, 3, 3, 2, 0])
-        }
-      }),
-      uniforms: {
-        uSampler: opts.texture
-      },
-      onBeforeRender: () => {
-        // TODO: Fix this so user can control this with a check-box
-        const isTwinkle = false; // twinkle.checked;
-        const r = isTwinkle ? Math.min(1, this.r + this.twinklerR) : this.r;
-        const g = isTwinkle ? Math.min(1, this.g + this.twinklerG) : this.g;
-        const b = isTwinkle ? Math.min(1, this.b + this.twinklerB) : this.b;
-        this.setUniforms({uColor: [r, g, b]});
-      }
+    super({
+      children: [
+        new Model(gl, {
+          program,
+          geometry: new Geometry({
+            attributes: {
+              // prettier-ignore
+              positions: new Float32Array([
+                -1.0, -1.0, 0.0,
+                1.0, -1.0, 0.0,
+                -1.0, 1.0, 0.0,
+                1.0, 1.0, 0.0
+              ]),
+              // prettier-ignore
+              texCoords: new Float32Array([
+                0.0, 0.0,
+                1.0, 0.0,
+                0.0, 1.0,
+                1.0, 1.0
+              ]),
+              indices: new Uint16Array([0, 1, 3, 3, 2, 0])
+            }
+          }),
+          uniforms: {
+            uSampler: opts.texture
+          },
+          onBeforeRender: () => {
+            // TODO: Fix this so user can control this with a check-box
+            const isTwinkle = false; // twinkle.checked;
+            const r = isTwinkle ? Math.min(1, this.r + this.twinklerR) : this.r;
+            const g = isTwinkle ? Math.min(1, this.g + this.twinklerG) : this.g;
+            const b = isTwinkle ? Math.min(1, this.b + this.twinklerB) : this.b;
+            this.setUniforms({uColor: [r, g, b]});
+          }
+        })
+      ]
     });
 
     this.angle = 0;

diff --git a/examples/lessons/10/world.js b/examples/lessons/10/world.js
@@ -1,4 +1,4 @@
-import {Program, Geometry, ModelNode} from '@luma.gl/core';
+import {Program, Geometry, Model} from '@luma.gl/core';
 
 const VERTEX_SHADER = `\
 attribute vec3 positions;
@@ -52,7 +52,7 @@ function loadWorldGeometry(data) {
   });
 }
 
-export class World extends ModelNode {
+export class World extends Model {
   constructor(opts = {}) {
     const program = new Program(opts.gl, {
       fs: FRAGMENT_SHADER,

diff --git a/examples/lessons/14/app.js b/examples/lessons/14/app.js
@@ -1,12 +1,5 @@
 import GL from '@luma.gl/constants';
-import {
-  AnimationLoop,
-  Geometry,
-  Texture2D,
-  loadFile,
-  setParameters,
-  ModelNode
-} from '@luma.gl/core';
+import {AnimationLoop, Geometry, Texture2D, loadFile, setParameters, Model} from '@luma.gl/core';
 import {Matrix4, radians} from 'math.gl';
 
 const INFO_HTML = `
@@ -272,7 +265,7 @@ export default class AppAnimationLoop extends AnimationLoop {
         mipmap: true
       });
 
-      const teapot = new ModelNode(gl, {
+      const teapot = new Model(gl, {
         id: 'teapot-model',
         fs: FRAGMENT_LIGHTING_FRAGMENT_SHADER,
         vs: FRAGMENT_LIGHTING_VERTEX_SHADER,