Add draco glTF compression support (#957)

visgl · Mar 8, 2019 · ea197ed · ea197ed
1 parent a591e5a
commit ea197ed
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 33 deletions.
diff --git a/examples/gltf/app.js b/examples/gltf/app.js
@@ -1,4 +1,5 @@
 import {GLTFParser} from '@loaders.gl/gltf';
+import {DracoDecoder} from '@loaders.gl/draco';
 import {AnimationLoop, setParameters, clear, createGLTFObjects, log} from 'luma.gl';
 import {Matrix4, radians} from 'math.gl';
 import document from 'global/document';
@@ -51,8 +52,12 @@ async function loadGLTF(urlOrPromise, gl, options = DEFAULT_OPTIONS) {
 
   const data = await promise;
 
-  const gltfParser = new GLTFParser({uri: urlOrPromise});
-  const gltf = await gltfParser.parseAsync(data);
+  const gltfParser = new GLTFParser();
+  const gltf = await gltfParser.parse(data, {
+    uri: urlOrPromise,
+    decompress: true,
+    DracoDecoder
+  });
 
   const {scenes, animator} = createGLTFObjects(gl, gltf, options);
 
@@ -70,23 +75,15 @@ function loadModelList() {
 }
 
 function addModelsToDropdown(models, modelDropdown) {
+  const VARIANTS = ['glTF-Draco', 'glTF-Binary', 'glTF-Embedded', 'glTF'];
+
   models.forEach(({name, variants}) => {
-    if (variants['glTF-Binary']) {
-      const option = document.createElement('option');
-      option.text = `${name} (GLB)`;
-      option.value = `${name}/glTF-Binary/${variants['glTF-Binary']}`;
-      modelDropdown.appendChild(option);
-    } else if (variants['glTF-Embedded']) {
-      const option = document.createElement('option');
-      option.text = `${name} (glTF-Embedded)`;
-      option.value = `${name}/glTF-Embedded/${variants['glTF-Embedded']}`;
-      modelDropdown.appendChild(option);
-    } else if (variants.glTF) {
-      const option = document.createElement('option');
-      option.text = `${name} (glTF)`;
-      option.value = `${name}/glTF/${variants.glTF}`;
-      modelDropdown.appendChild(option);
-    }
+    const variant = VARIANTS.find(v => variants[v]);
+
+    const option = document.createElement('option');
+    option.text = `${name} (${variant})`;
+    option.value = `${name}/${variant}/${variants[variant]}`;
+    modelDropdown.appendChild(option);
   });
 }
 

diff --git a/examples/gltf/package.json b/examples/gltf/package.json
@@ -9,7 +9,8 @@
     "start-local": "webpack-dev-server --env.local --progress --hot --open -d"
   },
   "dependencies": {
-    "@loaders.gl/gltf": "^0.7.2",
+    "@loaders.gl/draco": "^0.8.0",
+    "@loaders.gl/gltf": "^0.8.1",
     "luma.gl": "^6.2.0-beta"
   },
   "devDependencies": {

diff --git a/modules/core/src/scenegraph/gltf/gltf-instantiator.js b/modules/core/src/scenegraph/gltf/gltf-instantiator.js
@@ -139,14 +139,14 @@ export default class GLTFInstantiator {
     Object.keys(attributes).forEach(attrName => {
       loadedAttributes[attrName] = this.createAccessor(
         attributes[attrName],
-        this.createBuffer(attributes[attrName].bufferView, this.gl.ARRAY_BUFFER)
+        this.createBuffer(attributes[attrName], this.gl.ARRAY_BUFFER)
       );
     });
 
     if (indices) {
       loadedAttributes.indices = this.createAccessor(
         indices,
-        this.createBuffer(indices.bufferView, this.gl.ELEMENT_ARRAY_BUFFER)
+        this.createBuffer(indices, this.gl.ELEMENT_ARRAY_BUFFER)
       );
     }
 
@@ -155,15 +155,22 @@ export default class GLTFInstantiator {
     return loadedAttributes;
   }
 
-  createBuffer(bufferView, target) {
+  createBuffer(attribute, target) {
+    if (!attribute.bufferView) {
+      // Draco decoded files do not have a bufferView
+      attribute.bufferView = {};
+    }
+
+    const {bufferView} = attribute;
     if (!bufferView.lumaBuffers) {
       bufferView.lumaBuffers = {};
     }
 
     if (!bufferView.lumaBuffers[target]) {
       bufferView.lumaBuffers[target] = new Buffer(this.gl, {
         id: `from-${bufferView.id}`,
-        data: bufferView.data,
+        // Draco decoded files have attribute.value
+        data: bufferView.data || attribute.value,
         target
       });
     }

diff --git a/package.json b/package.json
@@ -57,7 +57,8 @@
     "@babel/plugin-transform-runtime": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/register": "^7.0.0",
-    "@loaders.gl/gltf": "^0.7.2",
+    "@loaders.gl/draco": "^0.8.0",
+    "@loaders.gl/gltf": "^0.8.1",
     "@probe.gl/bench": "^3.0.0-alpha.6",
     "@probe.gl/stats-widget": "^3.0.0-alpha.6",
     "@probe.gl/test-utils": "^3.0.0-alpha.6",

diff --git a/yarn.lock b/yarn.lock
@@ -727,20 +727,29 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
-"@loaders.gl/core@^0.7.1":
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/@loaders.gl/core/-/core-0.7.1.tgz#fd122d5518864d2ed2d851fd2a21a04d2613abe7"
-  integrity sha512-xdcevhaDcp8dEtvHXdD1JhxojAZVQj2mMvDgAAGS8rV7gD7/jOVVdp0nyilKbcXJxN/tIABBrYivTOkqoTMzPQ==
+"@loaders.gl/core@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@loaders.gl/core/-/core-0.8.0.tgz#fd5c53d816a5e3c022252f8c47e7cffbe5658727"
+  integrity sha512-KFMNoSt+yqpA/BIyn4EK9ZaVUrylSnVy6aW4bGsfPZWVMXGTfQ3STeBFYrAVdB0K4mDoNWxplrVeNO2fx4cH4Q==
   dependencies:
     "@babel/runtime" "^7.3.1"
     text-encoding "^0.6.4"
 
-"@loaders.gl/gltf@^0.7.2":
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/@loaders.gl/gltf/-/gltf-0.7.2.tgz#ace809c91efe1a47ff8f34c4305a8dff478e2053"
-  integrity sha512-Mzx3GqEQ4mTPIrn3vLkynFzTOLToE9aYPrKMcxmkqQ7UsvpGrUNSZK1ToOTQhOmQ72M33tN4mSxqlpePw/KkdQ==
+"@loaders.gl/draco@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@loaders.gl/draco/-/draco-0.8.0.tgz#2721557d4147324b84659c1ec933d25c580da824"
+  integrity sha512-CAPkBVe8jLeC50ZwsfLncwVtetEjIfeQHvE69EGJerW70eLLH4xeCdgtHkSTIhVS8KNqaVctmSGTDQqLY8elAg==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    "@loaders.gl/core" "^0.8.0"
+    draco3d "^1.3.4"
+
+"@loaders.gl/gltf@^0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@loaders.gl/gltf/-/gltf-0.8.1.tgz#a2d04bee05d531f5faf5566f7d3978ae2582353a"
+  integrity sha512-gSRUb05OdKG8fNnYaKLiBaX0NYfrFOZ2RAOBMDI/kyqZtEni1J350PDxtMVWxJkQ9d7Ry5H2FbLPRmC+kYJK1A==
   dependencies:
-    "@loaders.gl/core" "^0.7.1"
+    "@loaders.gl/core" "^0.8.0"
 
 "@luma.gl/glfx@^6.3.0-alpha.2":
   version "6.3.0"
@@ -2698,6 +2707,11 @@ dot-prop@^3.0.0:
   dependencies:
     is-obj "^1.0.0"
 
+draco3d@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/draco3d/-/draco3d-1.3.4.tgz#b17e4fedd4b4b946c9eb8df2e1d2f470a953cdb8"
+  integrity sha512-I7kAKyiSIb++K5VdWGeIC9xXWkoQ1HZ8wSCQhaRMf41KKxYX5jYmy+rRna/o7o3CrunxvCGbZBl6d6bdWVcJXw==
+
 duplexer3@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"