From ea197ed059176b1f4de77cd30113bd7e7d32ff16 Mon Sep 17 00:00:00 2001 From: Georgios Karnas Date: Thu, 7 Mar 2019 18:28:16 -0800 Subject: [PATCH] Add draco glTF compression support (#957) --- examples/gltf/app.js | 33 +++++++++---------- examples/gltf/package.json | 3 +- .../src/scenegraph/gltf/gltf-instantiator.js | 15 ++++++--- package.json | 3 +- yarn.lock | 32 +++++++++++++----- 5 files changed, 53 insertions(+), 33 deletions(-) diff --git a/examples/gltf/app.js b/examples/gltf/app.js index 7f1d3ab140..a4ed9ea7bf 100644 --- 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 index 264f7e118f..383730d85f 100644 --- 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 index d4c34d9470..6772a91723 100644 --- 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,7 +155,13 @@ 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 = {}; } @@ -163,7 +169,8 @@ export default class GLTFInstantiator { 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 index 54862b2e0c..3f6d8d1f28 100644 --- 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 index 4d4770e556..15bfc9d1e0 100644 --- 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"