Merge 290b1df into 4daf7e5

examples/layer-browser/package.json

@@ -9,8 +9,9 @@
     "start-local-production": "webpack-dev-server --env.local --env.production --progress --hot --open"
   },
   "dependencies": {
-    "@loaders.gl/core": "^1.0.1",
-    "@loaders.gl/ply": "^1.0.1",
+    "@loaders.gl/core": "^1.1.5",
+    "@loaders.gl/ply": "^1.1.5",
+    "@loaders.gl/gltf": "^1.1.5",
     "@luma.gl/addons": "^7.2.0-alpha.1",
     "@luma.gl/debug": "^7.2.0-alpha.1",
     "colorbrewer": "^1.0.0",

examples/layer-browser/src/examples/mesh-layers.js

@@ -1,11 +1,12 @@
 import {SimpleMeshLayer, ScenegraphLayer} from '@deck.gl/mesh-layers';
 import {registerLoaders} from '@loaders.gl/core';
-import {GLTFScenegraphLoader, GLTFEnvironment} from '@luma.gl/addons';
+import {GLTFLoader} from '@loaders.gl/gltf';
+import {GLTFEnvironment} from '@luma.gl/addons';
 import GL from '@luma.gl/constants';
 
 import * as dataSamples from '../data-samples';
 
-registerLoaders([GLTFScenegraphLoader]);
+registerLoaders([GLTFLoader]);
 
 const GLTF_BASE_URL =
   'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/luma.gl/examples/gltf/';

modules/mesh-layers/package.json

@@ -33,6 +33,7 @@
     "@deck.gl/core": "^7.0.0"
   },
   "dependencies": {
+    "@luma.gl/addons": "^7.2.0-alpha.1",
     "@loaders.gl/core": "^1.0.3",
     "@loaders.gl/images": "^1.0.3"
   }

modules/mesh-layers/src/scenegraph-layer/gltf-utils.js

@@ -0,0 +1,23 @@
+/* global requestAnimationFrame */
+
+export async function waitForGLTFAssets(gltfObjects) {
+  const remaining = [];
+
+  gltfObjects.scenes.forEach(scene => {
+    scene.traverse(model => {
+      Object.values(model.model.program.uniforms).forEach(uniform => {
+        if (uniform.loaded === false) {
+          remaining.push(uniform);
+        }
+      });
+    });
+  });
+
+  return await waitWhileCondition(() => remaining.some(uniform => !uniform.loaded));
+}
+
+async function waitWhileCondition(condition) {
+  while (condition()) {
+    await new Promise(resolve => requestAnimationFrame(resolve));
+  }
+}

modules/mesh-layers/src/scenegraph-layer/scenegraph-layer.js

@@ -22,6 +22,8 @@
 import {Layer, createIterable} from '@deck.gl/core';
 import {fp64, ScenegraphNode, isWebGL2, pbr, log} from '@luma.gl/core';
 import {load} from '@loaders.gl/core';
+import {createGLTFObjects} from '@luma.gl/addons';
+import {waitForGLTFAssets} from './gltf-utils';
 
 import {MATRIX_ATTRIBUTES} from '../utils/matrix';
 
@@ -43,7 +45,8 @@ const defaultProps = {
     return fetch(url).then(response => response.json());
   },
 
-  getScene: scenegraph => (scenegraph && scenegraph.scenes ? scenegraph.scenes[0] : scenegraph),
+  getScene: scenegraph =>
+    scenegraph && scenegraph.scenes ? scenegraph.scenes[scenegraph.scene || 0] : scenegraph,
   getAnimator: scenegraph => scenegraph && scenegraph.animator,
   _animations: null,
 
@@ -90,44 +93,12 @@ export default class ScenegraphLayer extends Layer {
     });
   }
 
-  calculateInstancePositions64xyLow(attribute, {startRow, endRow}) {
-    const isFP64 = this.use64bitPositions();
-    attribute.constant = !isFP64;
-
-    if (!isFP64) {
-      attribute.value = new Float32Array(2);
-      return;
-    }
-
-    const {data, getPosition} = this.props;
-    const {value, size} = attribute;
-    let i = startRow * size;
-    const {iterable, objectInfo} = createIterable(data, startRow, endRow);
-    for (const point of iterable) {
-      objectInfo.index++;
-      const position = getPosition(point, objectInfo);
-      value[i++] = fp64LowPart(position[0]);
-      value[i++] = fp64LowPart(position[1]);
-    }
-  }
-
   updateState(params) {
     super.updateState(params);
     const {props, oldProps} = params;
 
     if (props.scenegraph !== oldProps.scenegraph) {
-      const getParams = {layer: this, gl: this.context.gl};
-      const scenegraph = props.getScene(props.scenegraph, getParams);
-      const animator = props.getAnimator(props.scenegraph, getParams);
-
-      if (scenegraph instanceof ScenegraphNode) {
-        this._deleteScenegraph();
-        this._applyAllAttributes(scenegraph);
-        this._applyAnimationsProp(scenegraph, animator, props._animations);
-        this.setState({scenegraph, animator});
-      } else if (scenegraph !== null) {
-        log.warn('invalid scenegraph:', scenegraph)();
-      }
+      this._updateScenegraph(props);
     } else if (props._animations !== oldProps._animations) {
       this._applyAnimationsProp(this.state.scenegraph, this.state.animator, props._animations);
     }
@@ -138,6 +109,42 @@ export default class ScenegraphLayer extends Layer {
     this._deleteScenegraph();
   }
 
+  _updateScenegraph(props) {
+    const {gl} = this.context;
+    let scenegraphData;
+    if (props.scenegraph instanceof ScenegraphNode) {
+      // Signature 1: props.scenegraph is a proper luma.gl Scenegraph
+      scenegraphData = {scenes: [props.scenegraph]};
+    } else if (props.scenegraph && !props.scenegraph.gltf) {
+      // Converts loaders.gl gltf to luma.gl scenegraph using the undocumented @luma.gl/addons function
+      const gltf = props.scenegraph;
+      const gltfObjects = createGLTFObjects(gl, gltf, this.getLoadOptions());
+      scenegraphData = Object.assign({gltf}, gltfObjects);
+
+      waitForGLTFAssets(gltfObjects).then(() => this.setNeedsRedraw());
+    } else {
+      // DEPRECATED PATH: Assumes this data was loaded through GLTFScenegraphLoader
+      log.deprecated(
+        'ScenegraphLayer.props.scenegraph',
+        'Use GLTFLoader instead of GLTFScenegraphLoader'
+      );
+      scenegraphData = props.scenegraph;
+    }
+
+    const options = {layer: this, gl};
+    const scenegraph = props.getScene(scenegraphData, options);
+    const animator = props.getAnimator(scenegraphData, options);
+
+    if (scenegraph instanceof ScenegraphNode) {
+      this._deleteScenegraph();
+      this._applyAllAttributes(scenegraph);
+      this._applyAnimationsProp(scenegraph, animator, props._animations);
+      this.setState({scenegraph, animator});
+    } else if (scenegraph !== null) {
+      log.warn('invalid scenegraph:', scenegraph)();
+    }
+  }
+
   _applyAllAttributes(scenegraph) {
     if (this.state.attributesAvailable) {
       const allAttributes = this.getAttributeManager().getAttributes();
@@ -268,6 +275,27 @@ export default class ScenegraphLayer extends Layer {
       });
     });
   }
+
+  calculateInstancePositions64xyLow(attribute, {startRow, endRow}) {
+    const isFP64 = this.use64bitPositions();
+    attribute.constant = !isFP64;
+
+    if (!isFP64) {
+      attribute.value = new Float32Array(2);
+      return;
+    }
+
+    const {data, getPosition} = this.props;
+    const {value, size} = attribute;
+    let i = startRow * size;
+    const {iterable, objectInfo} = createIterable(data, startRow, endRow);
+    for (const point of iterable) {
+      objectInfo.index++;
+      const position = getPosition(point, objectInfo);
+      value[i++] = fp64LowPart(position[0]);
+      value[i++] = fp64LowPart(position[1]);
+    }
+  }
 }
 
 ScenegraphLayer.layerName = 'ScenegraphLayer';

package.json

@@ -53,7 +53,7 @@
     "eslint-config-uber-jsx": "^3.3.3",
     "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-react": "^7.10",
-    "gl": "^4.2.2",
+    "gl": "^4.3.3",
     "glsl-transpiler": "^1.8.3",
     "jsdom": "^15.0.0",
     "ocular-dev-tools": "0.0.27",
@@ -70,3 +70,4 @@
     "test-fast"
   ]
 }
+