Break out scenegraph module

visgl · Mar 15, 2019 · 494d971 · 494d971
1 parent 76058ce
commit 494d971
Show file tree

Hide file tree

Showing 102 changed files with 535 additions and 458 deletions.
diff --git a/examples/core/3d-texture/app.js b/examples/core/3d-texture/app.js
@@ -1,4 +1,4 @@
-import {AnimationLoop, setParameters, Model, Texture3D, Buffer} from 'luma.gl';
+import {AnimationLoop, setParameters, Model, Texture3D, Buffer} from '@luma.gl/core';
 import {Matrix4, radians} from 'math.gl';
 import {StatsWidget} from '@probe.gl/stats-widget';
 import {default as noise3d} from 'noise3d';

diff --git a/examples/core/cubemap/app.js b/examples/core/cubemap/app.js
@@ -1,5 +1,6 @@
 import GL from '@luma.gl/constants';
-import {AnimationLoop, TextureCube, Cube, setParameters} from 'luma.gl';
+import {AnimationLoop, TextureCube, setParameters} from '@luma.gl/core';
+import {Cube} from '@luma.gl/scenegraph';
 import {Matrix4, radians} from 'math.gl';
 
 const INFO_HTML = `

diff --git a/examples/core/dof/app.js b/examples/core/dof/app.js
@@ -2,15 +2,15 @@ import GL from '@luma.gl/constants';
 import {
   AnimationLoop,
   Framebuffer,
-  Cube,
   setParameters,
   clear,
   Program,
   Texture2D,
   VertexArray,
   Buffer,
   isWebGL2
-} from 'luma.gl';
+} from '@luma.gl/core';
+import {Cube} from '@luma.gl/scenegraph';
 import {Matrix4, radians} from 'math.gl';
 import {StatsWidget} from '@probe.gl/stats-widget';
 /* eslint-disable spaced-comment */

diff --git a/examples/core/fragment/concentrics-demo.js b/examples/core/fragment/concentrics-demo.js
@@ -1,10 +1,10 @@
-import {AnimationLoop, ClipSpace} from 'luma.gl';
+import {AnimationLoop, ClipSpace} from '@luma.gl/core';
 
 const INFO_HTML = `
 <p>
   Fragment shader based rendering.
 <p>
-A luma.gl <code>ClipSpaceQuad</code> rendering 3 lines of fragment shader code,
+A luma.gl <code>ClipSpace</code> rendering 3 lines of fragment shader code,
 using a single uniform <code>uTime</code>.
 `;
 

diff --git a/examples/core/fragment/random-noise-demo.js b/examples/core/fragment/random-noise-demo.js
@@ -1,6 +1,6 @@
 // RANDOM NOISE
 
-import {AnimationLoop, createGLContext, ClipSpaceQuad} from 'luma.gl';
+import {AnimationLoop, createGLContext, ClipSpace} from '@luma.gl/core';
 
 const RANDOM_NOISE_FRAGMENT_SHADER = `\
 precision highp float;
@@ -27,14 +27,14 @@ void main(void) {
 export default new AnimationLoop({
   onContext: () => createGLContext({canvas: 'canvas-1'}),
   onInitialize: ({gl}) => ({
-    clipSpaceQuad: new ClipSpaceQuad({gl, fs: RANDOM_NOISE_FRAGMENT_SHADER})
+    clipSpaceQuad: new ClipSpace({gl, fs: RANDOM_NOISE_FRAGMENT_SHADER})
   }),
   onRender: ({gl, canvas, tick, clipSpaceQuad}) => {
     canvas.width = canvas.clientWidth;
     canvas.style.height = `${canvas.width}px`;
     canvas.height = canvas.width;
     gl.viewport(0, 0, canvas.width, canvas.height);
 
-    clipSpaceQuad.render({uTime: tick * 0.01});
+    clipSpaceQuad.setUniforms({uTime: tick * 0.01}).draw();
   }
 });
diff --git a/examples/gltf/app.js → examples/core/gltf/app.js b/examples/gltf/app.js → examples/core/gltf/app.js
@@ -1,6 +1,7 @@
 import {GLTFParser} from '@loaders.gl/gltf';
 import {DracoDecoder} from '@loaders.gl/draco';
-import {AnimationLoop, setParameters, clear, createGLTFObjects, log} from 'luma.gl';
+import {AnimationLoop, setParameters, clear, log} from '@luma.gl/core';
+import {createGLTFObjects} from '@luma.gl/scenegraph';
 import {Matrix4, radians} from 'math.gl';
 import document from 'global/document';
 

diff --git a/examples/gltf/package.json → examples/core/gltf/package.json b/examples/gltf/package.json → examples/core/gltf/package.json
diff --git a/examples/gltf/webpack.config.js → examples/core/gltf/webpack.config.js b/examples/gltf/webpack.config.js → examples/core/gltf/webpack.config.js
@@ -10,8 +10,13 @@ const CONFIG = {
 
   plugins: [
     new HtmlWebpackPlugin({title: 'glTF'})
-  ]
+  ],
+
+  // TODO - fix in loaders.gl
+  node: {
+  	fs: false
+  }
 };
 
 // This line enables bundling against src in this repo rather than installed module
-module.exports = env => env ? require('../webpack.config.local')(CONFIG)(env) : CONFIG;
+module.exports = env => env ? require('../../webpack.config.local')(CONFIG)(env) : CONFIG;
diff --git a/examples/core/instancing/app.js b/examples/core/instancing/app.js
@@ -1,4 +1,5 @@
-import {AnimationLoop, setParameters, pickModels, Cube, picking, dirlight} from 'luma.gl';
+import {AnimationLoop, setParameters, picking, dirlight} from '@luma.gl/core';
+import {Cube} from '@luma.gl/scenegraph';
 import {Matrix4, radians} from 'math.gl';
 import {StatsWidget} from '@probe.gl/stats-widget';
 
@@ -158,11 +159,15 @@ class AppAnimationLoop extends AnimationLoop {
   }
 
   onRender(animationProps) {
-    const {gl, framebuffer, useDevicePixels, _mousePosition, statsWidget} = animationProps;
+    const {gl, statsWidget} = animationProps;
 
     statsWidget.update();
 
+    /* TODO - picking temporarily disabled
+    const {gl, framebuffer, useDevicePixels, _mousePosition} = animationProps;
+
     // "Pick" the cube under the mouse
+
     const pickInfo =
       _mousePosition &&
       pickModels(gl, {
@@ -177,6 +182,7 @@ class AppAnimationLoop extends AnimationLoop {
     this.cube.updateModuleSettings({
       pickingSelectedColor
     });
+    */
 
     // Draw the cubes
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

diff --git a/examples/core/mandelbrot/app.js b/examples/core/mandelbrot/app.js
@@ -1,4 +1,4 @@
-import {AnimationLoop, ClipSpace} from 'luma.gl';
+import {AnimationLoop, ClipSpace} from '@luma.gl/core';
 import {StatsWidget} from '@probe.gl/stats-widget';
 
 const INFO_HTML = `

diff --git a/examples/core/persistence/app.js b/examples/core/persistence/app.js
@@ -1,7 +1,5 @@
-import {
-  AnimationLoop, setParameters, IcoSphere, Model, clear,
-  Framebuffer, Program, Geometry
-} from 'luma.gl';
+import {AnimationLoop, setParameters, Model, clear, Framebuffer, Program, Geometry} from '@luma.gl/core';
+import {IcoSphere} from '@luma.gl/scenegraph';
 import { Matrix4, Vector3, radians } from 'math.gl';
 
 const INFO_HTML = `
@@ -249,9 +247,11 @@ const animationLoop = new AnimationLoop({
 
     // Render to screen
     clear(gl, {color: true, depth: true});
-    quad.render({
-      uTexture: currentFramebuffer.texture,
-      uRes: [width, height]
+    quad.draw({
+      uniforms: {
+        uTexture: currentFramebuffer.texture,
+        uRes: [width, height]
+      }
     });
   }
 });

diff --git a/examples/new/quasicrystal/app.js → examples/core/quasicrystals/app.js b/examples/new/quasicrystal/app.js → examples/core/quasicrystals/app.js
@@ -1,4 +1,4 @@
-import {AnimationLoop, ClipSpace} from 'luma.gl';
+import {AnimationLoop, ClipSpace} from '@luma.gl/core';
 
 const INFO_HTML = `
 <p>

diff --git a/examples/new/quasicrystal/package.json → examples/core/quasicrystals/package.json b/examples/new/quasicrystal/package.json → examples/core/quasicrystals/package.json
diff --git a/examples/new/quasicrystal/webpack.config.js → ...ples/core/quasicrystals/webpack.config.js b/examples/new/quasicrystal/webpack.config.js → ...ples/core/quasicrystals/webpack.config.js
diff --git a/examples/core/shadowmap/app.js b/examples/core/shadowmap/app.js
@@ -1,5 +1,6 @@
 import GL from '@luma.gl/constants';
-import {AnimationLoop, Framebuffer, Cube, setParameters, clear} from 'luma.gl';
+import {AnimationLoop, Framebuffer, setParameters, clear} from '@luma.gl/core';
+import {Cube} from '@luma.gl/scenegraph';
 import {Matrix4, radians} from 'math.gl';
 
 const INFO_HTML = `

diff --git a/examples/core/transform/app.js b/examples/core/transform/app.js
@@ -1,9 +1,8 @@
-/* eslint-disable camelcase */
 /* global window */
-import {AnimationLoop, Buffer, Model, pickModels, picking, Transform, isWebGL2} from 'luma.gl';
+import {AnimationLoop, Buffer, Model, picking, Transform, isWebGL2} from '@luma.gl/core';
 import {Log} from 'probe.gl';
 
-const RED = new Uint8Array([255, 0, 0, 255]);
+// const RED = new Uint8Array([255, 0, 0, 255]);
 
 /* eslint-disable max-len */
 const INFO_HTML = `
@@ -127,13 +126,15 @@ void main()
 const NUM_INSTANCES = 1000;
 const log = new Log({id: 'transform'}).enable();
 
-let pickPosition = [0, 0];
 let isDemoSupported = true;
+
+// TODO PIKCING TEMPORARILY DISABLED
+// let pickPosition = [0, 0];
 function mousemove(e) {
-  pickPosition = [e.offsetX, e.offsetY];
+  // pickPosition = [e.offsetX, e.offsetY];
 }
 function mouseleave(e) {
-  pickPosition = null;
+  // pickPosition = null;
 }
 
 const animationLoop = new AnimationLoop({
@@ -280,6 +281,8 @@ const animationLoop = new AnimationLoop({
     offsetBuffer.updateAccessor({divisor: 0});
     rotationBuffer.updateAccessor({divisor: 0});
 
+    /*
+    TODO - picking is temporarily disabled
     const pickInfo = pickPosition && pickModels(gl, {
       models: [renderModel],
       position: pickPosition,
@@ -293,7 +296,7 @@ const animationLoop = new AnimationLoop({
       pickingSelectedColor,
       pickingHighlightColor: RED
     });
-
+    */
   },
 
   onFinalize({renderModel, transform}) {

diff --git a/examples/lessons/01/app.js b/examples/lessons/01/app.js
@@ -1,4 +1,4 @@
-import {AnimationLoop, Program, VertexArray, Buffer, setParameters} from 'luma.gl';
+import {AnimationLoop, Program, VertexArray, Buffer, setParameters} from '@luma.gl/core';
 import {Matrix4} from 'math.gl';
 
 const INFO_HTML = `

diff --git a/examples/lessons/02/app.js b/examples/lessons/02/app.js
@@ -1,4 +1,4 @@
-import {AnimationLoop, Program, VertexArray, Buffer, setParameters} from 'luma.gl';
+import {AnimationLoop, Program, VertexArray, Buffer, setParameters} from '@luma.gl/core';
 import {Matrix4} from 'math.gl';
 
 const INFO_HTML = `

diff --git a/examples/lessons/03/app.js b/examples/lessons/03/app.js
@@ -1,6 +1,7 @@
 /* eslint-disable array-bracket-spacing, no-multi-spaces */
 import GL from '@luma.gl/constants';
-import {AnimationLoop, Model, Geometry, setParameters} from 'luma.gl';
+import {AnimationLoop, Geometry, setParameters} from '@luma.gl/core';
+import {ModelNode} from '@luma.gl/scenegraph';
 import {Matrix4} from 'math.gl';
 
 const INFO_HTML = `
@@ -68,8 +69,8 @@ const animationLoop = new AnimationLoop({
     });
 
     return {
-      triangle: new Model(gl, {geometry: triangleGeometry, vs: VERTEX_SHADER, fs: FRAGMENT_SHADER}),
-      square: new Model(gl, {geometry: squareGeometry, vs: VERTEX_SHADER, fs: FRAGMENT_SHADER})
+      triangle: new ModelNode(gl, {geometry: triangleGeometry, vs: VERTEX_SHADER, fs: FRAGMENT_SHADER}),
+      square: new ModelNode(gl, {geometry: squareGeometry, vs: VERTEX_SHADER, fs: FRAGMENT_SHADER})
     };
   },
 
@@ -84,20 +85,22 @@ const animationLoop = new AnimationLoop({
       .setPosition([-1.5, 0, -7])
       .setRotation([0, tick * 0.01, 0])
       .updateMatrix()
-      .render({
+      .setUniforms({
         uMVMatrix: triangle.matrix,
         uPMatrix: projection
-      });
+      })
+      .draw();
 
     // Draw Square
     square
       .setPosition([1.5, 0, -7])
       .setRotation([tick * 0.1, 0, 0])
       .updateMatrix()
-      .render({
+      .setUniforms({
         uMVMatrix: square.matrix,
         uPMatrix: projection
-      });
+      })
+      .draw();
   }
 });
 

diff --git a/examples/lessons/04/app.js b/examples/lessons/04/app.js
@@ -1,5 +1,5 @@
 import GL from '@luma.gl/constants';
-import {AnimationLoop, Model, Geometry, Program, setParameters} from 'luma.gl';
+import {AnimationLoop, Model, Geometry, Program, setParameters} from '@luma.gl/core';
 import {Matrix4} from 'math.gl';
 
 const INFO_HTML = `

diff --git a/examples/lessons/05/app.js b/examples/lessons/05/app.js
@@ -1,5 +1,6 @@
 import GL from '@luma.gl/constants';
-import {AnimationLoop, Cube, Texture2D, setParameters} from 'luma.gl';
+import {AnimationLoop, Texture2D, setParameters} from '@luma.gl/core';
+import {Cube} from '@luma.gl/scenegraph';
 import {Matrix4} from 'math.gl';
 
 const INFO_HTML = `
@@ -62,13 +63,15 @@ const animationLoop = new AnimationLoop({
   onRender({gl, tick, aspect, cube}) {
     gl.clear(GL.COLOR_BUFFER_BIT | GL.DEPTH_BUFFER_BIT);
 
-    return cube.render({
-      uPMatrix: new Matrix4().perspective({aspect}),
-      uMVMatrix: new Matrix4()
-        .lookAt({eye: [0, 0, 0]})
-        .translate([0, 0, -5])
-        .rotateXYZ([tick * 0.01, tick * 0.01, tick * 0.01])
-    });
+    return cube
+      .setUniforms({
+        uPMatrix: new Matrix4().perspective({aspect}),
+        uMVMatrix: new Matrix4()
+          .lookAt({eye: [0, 0, 0]})
+          .translate([0, 0, -5])
+          .rotateXYZ([tick * 0.01, tick * 0.01, tick * 0.01])
+      })
+      .draw();
   }
 });
 

diff --git a/examples/lessons/06/app.js b/examples/lessons/06/app.js
@@ -1,6 +1,7 @@
 import GL from '@luma.gl/constants';
-import {addEvents} from 'luma.gl/addons';
-import {AnimationLoop, Cube, Texture2D, setParameters, loadImage} from 'luma.gl';
+import {AnimationLoop, Texture2D, setParameters, loadImage} from '@luma.gl/core';
+import {Cube} from '@luma.gl/scenegraph';
+import {addEvents} from '@luma.gl/addons';
 import {Matrix4} from 'math.gl';
 
 const INFO_HTML = `
@@ -151,11 +152,13 @@ const animationLoop = new AnimationLoop({
       .rotateXYZ([tick * 0.01, tick * 0.01, tick * 0.01])
       .multiplyRight(cube.matrix);
 
-    cube.render({
-      uMVMatrix,
-      uPMatrix: new Matrix4().perspective({aspect}),
-      uSampler: textures[filters[filter]]
-    });
+    cube
+      .setUniforms({
+        uMVMatrix,
+        uPMatrix: new Matrix4().perspective({aspect}),
+        uSampler: textures[filters[filter]]
+      })
+      .draw();
   }
 });
 

diff --git a/examples/lessons/07/app.js b/examples/lessons/07/app.js
@@ -1,6 +1,7 @@
 import GL from '@luma.gl/constants';
-import {addEvents} from 'luma.gl/addons';
-import {AnimationLoop, Cube, Texture2D, setParameters} from 'luma.gl';
+import {AnimationLoop, Texture2D, setParameters} from '@luma.gl/core';
+import {Cube} from '@luma.gl/scenegraph';
+import {addEvents} from '@luma.gl/addons';
 import {Matrix4} from 'math.gl';
 
 export const INFO_HTML = `
@@ -233,14 +234,16 @@ const animationLoop = new AnimationLoop({
       ambientColor
     } = getHTMLControls();
 
-    cube.render({
-      uMVMatrix,
-      uPMatrix: new Matrix4().perspective({aspect}),
-      uAmbientColor: ambientColor,
-      uLightingDirection: lightDirection,
-      uDirectionalColor: [0.8, 0.8, 0.8],
-      uUseLighting: true
-    });
+    cube
+      .setUniforms({
+        uMVMatrix,
+        uPMatrix: new Matrix4().perspective({aspect}),
+        uAmbientColor: ambientColor,
+        uLightingDirection: lightDirection,
+        uDirectionalColor: [0.8, 0.8, 0.8],
+        uUseLighting: true
+      })
+      .draw();
   }
 });