Skip to content

Commit

Permalink
Refactor GLTFScenegraphLoader (#1062)
Browse files Browse the repository at this point in the history
  • Loading branch information
ibgreen committed Apr 14, 2019
1 parent fafc6a4 commit f96aea2
Show file tree
Hide file tree
Showing 9 changed files with 101 additions and 132 deletions.
93 changes: 44 additions & 49 deletions examples/core/gltf/app.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
/* eslint-disable camelcase */
/* global document, window */
import {loadFile, parseFile, registerLoaders} from '@loaders.gl/core';
import {AnimationLoop, setParameters, clear, log, lumaStats} from '@luma.gl/core';
import {
createGLTFObjects,
GLBScenegraphLoader,
GLTFScenegraphLoader,
GLTFEnvironment,
VRDisplay
} from '@luma.gl/addons';
import {load} from '@loaders.gl/core';
// eslint-disable-next-line import/no-unresolved
import {DracoLoader} from '@loaders.gl/draco';
import GL from '@luma.gl/constants';
import {AnimationLoop, setParameters, clear, log, lumaStats} from '@luma.gl/core';
import {GLTFScenegraphLoader, createGLTFObjects, GLTFEnvironment, VRDisplay} from '@luma.gl/addons';
import {Matrix4, radians} from 'math.gl';

const CUBE_FACE_TO_DIRECTION = {
Expand All @@ -26,14 +23,15 @@ const GLTF_ENV_BASE_URL =
'https://raw.githubusercontent.com/KhronosGroup/glTF-WebGL-PBR/master/textures';
const GLTF_MODEL_INDEX = `${GLTF_BASE_URL}model-index.json`;

const GLTF_DEFAULT_MODEL = 'DamagedHelmet/glTF-Binary/DamagedHelmet.glb';

const INFO_HTML = `
<p><b>glTF</b> rendering.</p>
<p>A luma.gl <code>glTF</code> renderer.</p>
<p><img src="https://img.shields.io/badge/WebVR-Supported-orange.svg" /></p>
<p><b>glTF Loader</b>.</p>
<p>Rendered using luma.gl.</p>
<div>
Model
<select id="modelSelector">
<option value="DamagedHelmet/glTF-Binary/DamagedHelmet.glb">Default</option>
<option value="${GLTF_DEFAULT_MODEL}">Default</option>
</select>
<br>
</div>
Expand Down Expand Up @@ -75,6 +73,7 @@ const INFO_HTML = `
</select>
<br>
</div>
<p><img src="https://img.shields.io/badge/WebVR-Supported-orange.svg" /></p>
`;

const LIGHT_SOURCES = {
Expand Down Expand Up @@ -161,26 +160,14 @@ const DEFAULT_OPTIONS = {
lights: false
};

registerLoaders([GLBScenegraphLoader, GLTFScenegraphLoader]);

async function loadGLTF(urlOrPromise, gl, options) {
let loadResult;
if (urlOrPromise instanceof Promise) {
const url = 'file:///.glb';
loadResult = await parseFile(await urlOrPromise, Object.assign({gl}, options), url);
} else {
loadResult = await loadFile(urlOrPromise, Object.assign({gl}, options));
}

const {gltfParser, gltf, scenes, animator} = loadResult;

log.info(4, 'gltfParser: ', gltfParser)();
log.info(4, 'scenes: ', scenes)();

scenes[0].traverse((node, {worldMatrix}) => {
log.info(4, 'Using model: ', node)();
const loadResult = await load(urlOrPromise, GLTFScenegraphLoader, {
...options,
gl,
DracoLoader
});

const {gltf, scenes, animator} = loadResult;
scenes[0].traverse((node, {worldMatrix}) => log.info(4, 'Using model: ', node)());
return {scenes, animator, gltf};
}

Expand All @@ -189,6 +176,10 @@ function loadModelList() {
}

function addModelsToDropdown(models, modelDropdown) {
if (!modelDropdown) {
return;
}

const VARIANTS = ['glTF-Draco', 'glTF-Binary', 'glTF-Embedded', 'glTF'];

models.forEach(({name, variants}) => {
Expand Down Expand Up @@ -270,15 +261,15 @@ export class DemoApp {
e.preventDefault();
if (e.dataTransfer.files && e.dataTransfer.files.length === 1) {
this._deleteScenes();
loadGLTF(
new Promise(resolve => {
const reader = new window.FileReader();
reader.onload = ev => resolve(ev.target.result);
reader.readAsArrayBuffer(e.dataTransfer.files[0]);
}),
this.gl,
this.loadOptions
).then(result => Object.assign(this, result));
const readPromise = new Promise(resolve => {
const reader = new window.FileReader();
reader.onload = ev => resolve(ev.target.result);
reader.readAsArrayBuffer(e.dataTransfer.files[0]);
});

loadGLTF(readPromise, this.gl, this.loadOptions).then(result =>
Object.assign(this, result)
);
}
};
}
Expand Down Expand Up @@ -310,16 +301,20 @@ export class DemoApp {
loadGLTF(this.modelFile, this.gl, options).then(result => Object.assign(this, result));
} else {
const modelSelector = document.getElementById('modelSelector');
loadGLTF(GLTF_BASE_URL + modelSelector.value, this.gl, this.loadOptions).then(result =>
const modelUrl = (modelSelector && modelSelector.value) || GLTF_DEFAULT_MODEL;
loadGLTF(GLTF_BASE_URL + modelUrl, this.gl, this.loadOptions).then(result =>
Object.assign(this, result)
);

modelSelector.onchange = event => {
this._deleteScenes();
loadGLTF(GLTF_BASE_URL + modelSelector.value, this.gl, this.loadOptions).then(result =>
Object.assign(this, result)
);
};
if (modelSelector) {
modelSelector.onchange = event => {
this._deleteScenes();
const modelUrl2 = (modelSelector && modelSelector.value) || GLTF_DEFAULT_MODEL;
loadGLTF(GLTF_BASE_URL + modelUrl2, this.gl, this.loadOptions).then(result =>
Object.assign(this, result)
);
};
}

loadModelList().then(models => addModelsToDropdown(models, modelSelector));
}
Expand All @@ -344,7 +339,7 @@ export class DemoApp {
if (iblSelector) {
iblSelector.onchange = event => {
this._updateLightSettings(iblSelector.value);
this._reloadModel();
this._rebuildModel();
};
}

Expand Down Expand Up @@ -379,7 +374,7 @@ export class DemoApp {
}
}

_reloadModel() {
_rebuildModel() {
// Clean and regenerate model so we have new "#defines"
// TODO: Find better way to do this
(this.gltf.meshes || []).forEach(mesh => delete mesh._mesh);
Expand Down
6 changes: 3 additions & 3 deletions examples/core/gltf/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
{
"name": "luma.gl-examples-gltf",
"description": "glTF for luma.gl.",
"description": "glTF loader using luma.gl for rendering.",
"contributors": [
"Georgios Karnas <georgios@uber.com>"
],
Expand All @@ -10,7 +9,8 @@
"open-vr": "adb reverse tcp:8080 tcp:8080 && adb shell am start -a android.intent.action.VIEW -d http://localhost:8080/"
},
"dependencies": {
"@loaders.gl/core": "v1.0.0-alpha.2",
"@loaders.gl/core": "^1.0.0",
"@loaders.gl/draco": "^1.0.0",
"@luma.gl/addons": "^7.0.0-beta",
"@luma.gl/constants": "^7.0.0-beta",
"@luma.gl/core": "^7.0.0-beta",
Expand Down
3 changes: 1 addition & 2 deletions examples/core/gltf/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,8 @@ const CONFIG = {

plugins: [new HtmlWebpackPlugin({title: 'glTF'})],

// TODO - fix in loaders.gl
node: {
fs: false
fs: 'empty'
}
};

Expand Down
4 changes: 1 addition & 3 deletions modules/addons/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,7 @@
"build-bundle": "webpack --display=minimal --config ../../scripts/bundle.config.js"
},
"dependencies": {
"@loaders.gl/core": "1.0.0-alpha.2",
"@loaders.gl/draco": "1.0.0-alpha.2",
"@loaders.gl/gltf": "1.0.0-alpha.2",
"@loaders.gl/gltf": "^1.0.0",
"@luma.gl/constants": "7.0.0-beta.9",
"math.gl": "^2.3.0"
},
Expand Down
63 changes: 31 additions & 32 deletions modules/addons/src/gltf/gltf-scenegraph-loader.js
Original file line number Diff line number Diff line change
@@ -1,51 +1,50 @@
/* global window */
import {GLTFParser} from '@loaders.gl/gltf';
import {DracoDecoder} from '@loaders.gl/draco';
import {assert} from '@luma.gl/core';
import {GLTFLoader} from '@loaders.gl/gltf';
import createGLTFObjects from './create-gltf-objects';

async function waitWhileCondition(condition) {
while (condition()) {
await new Promise(resolve => window.requestAnimationFrame(resolve));
}
}

async function parse(data, options, uri, loader) {
const gltfParser = new GLTFParser();
const gltf = await gltfParser.parse(data, {
assert(options.gl);

const gltf = await GLTFLoader.parse(data, {
...options,
uri,
decompress: true,
DracoDecoder
decompress: true
});

const gltfObjects = createGLTFObjects(options.gl, gltf, options);

if (options.waitForFullLoad) {
const remaining = [];

gltfObjects.scenes.forEach(scene => {
scene.traverse(model => {
Object.values(model.model.program.uniforms).forEach(uniform => {
if (uniform.loaded === false) {
remaining.push(uniform);
}
});
await waitForGLTFAssets(gltfObjects);
}

return Object.assign({gltf}, gltfObjects);
}

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);
}
});
});
});

await waitWhileCondition(() => remaining.some(uniform => !uniform.loaded));
}

return Object.assign({gltfParser, gltf}, gltfObjects);
return await waitWhileCondition(() => remaining.some(uniform => !uniform.loaded));
}

export const GLBScenegraphLoader = {
name: 'GLTF Binary Scenegraph Loader',
extension: 'glb',
parse
};
async function waitWhileCondition(condition) {
while (condition()) {
await new Promise(resolve => window.requestAnimationFrame(resolve));
}
}

export const GLTFScenegraphLoader = {
export default {
name: 'GLTF Scenegraph Loader',
extension: 'gltf',
extensions: ['gltf, glb'],
parse
};
4 changes: 2 additions & 2 deletions modules/addons/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ export {default as Display} from './webvr/display';
export {default as VRDisplay} from './webvr/vr-display';

// glTF Scenegraph Instantiator
export {default as createGLTFObjects} from './gltf/create-gltf-objects';
export {default as GLTFScenegraphLoader} from './gltf/gltf-scenegraph-loader';
export {default as GLTFEnvironment} from './gltf/gltf-environment';
export {GLBScenegraphLoader, GLTFScenegraphLoader} from './gltf/gltf-scenegraph-loader';
export {default as createGLTFObjects} from './gltf/create-gltf-objects';

// Misc
export {addEvents} from './events/add-events';
1 change: 0 additions & 1 deletion test/apps/wip/picking/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
"start-local": "webpack-dev-server --env.local --progress --hot --open -d"
},
"dependencies": {
"@loaders.gl/core": "^0.5.3",
"@luma.gl/core": "^7.0.0-beta"
},
"devDependencies": {
Expand Down
6 changes: 3 additions & 3 deletions website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@
"highlight.js": "^9.7.0",
"immutable": "^3.7.5",
"@luma.gl/core": "^7.0.0-beta",
"@loaders.gl/core": "^1.0.0-alpha",
"@loaders.gl/draco": "^1.0.0-alpha",
"@loaders.gl/gltf": "^1.0.0-alpha",
"@loaders.gl/core": "^1.0.0",
"@loaders.gl/draco": "^1.0.0",
"@loaders.gl/gltf": "^1.0.0",
"@probe.gl/stats-widget": "^3.0.1",
"marked": "^0.3.6",
"math.gl": "^2.3.1",
Expand Down
Loading

0 comments on commit f96aea2

Please sign in to comment.