Skip to content

Commit

Permalink
Use web workers for glTF validation
Browse files Browse the repository at this point in the history
  • Loading branch information
@bghgary
bghgary committed Dec 12, 2019
1 parent 7145382 commit 85cde6e
Show file tree
Hide file tree
Showing 26 changed files with 262 additions and 139 deletions.
1 change: 0 additions & 1 deletion Playground/debug.html
View file
Expand Up @@ -52,7 +52,6 @@
<script src="https://preview.babylonjs.com/recast.js"></script>
<script src="https://preview.babylonjs.com/cannon.js"></script>
<script src="https://preview.babylonjs.com/Oimo.js"></script>
<script src="https://preview.babylonjs.com/gltf_validator.js"></script>
<script src="https://preview.babylonjs.com/babylon.max.js"></script>
<script src="https://preview.babylonjs.com/gui/babylon.gui.js"></script>
<script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
Expand Down
1 change: 0 additions & 1 deletion Playground/frame.html
View file
Expand Up @@ -29,7 +29,6 @@
<script src="https://preview.babylonjs.com/cannon.js"></script>
<script src="https://preview.babylonjs.com/Oimo.js"></script>
<script src="https://preview.babylonjs.com/earcut.min.js"></script>
<script src="https://preview.babylonjs.com/gltf_validator.js"></script>
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
<script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
Expand Down
1 change: 0 additions & 1 deletion Playground/full.html
View file
Expand Up @@ -17,7 +17,6 @@
<script src="https://preview.babylonjs.com/recast.js"></script>
<script src="https://preview.babylonjs.com/cannon.js"></script>
<script src="https://preview.babylonjs.com/Oimo.js"></script>
<script src="https://preview.babylonjs.com/gltf_validator.js"></script>
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
<script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
Expand Down
4 changes: 3 additions & 1 deletion Playground/index-local.html
View file
Expand Up @@ -33,7 +33,6 @@
<script src="../dist/preview%20release/recast.js"></script>
<script src="../dist/preview%20release/cannon.js"></script>
<script src="../dist/preview%20release/Oimo.js"></script>
<script src="../dist/preview%20release/gltf_validator.js"></script>
<script src="../dist/preview%20release/earcut.min.js"></script>
<!-- Monaco -->

Expand Down Expand Up @@ -409,6 +408,9 @@ <h1>Examples<img id="examplesButtonClose" src="css/img/clearButton.svg"></h1>
wasmBinaryUrl: "../dist/preview%20release/draco_decoder_gltf.wasm",
fallbackUrl: "../dist/preview%20release/draco_decoder_gltf.js"
};
BABYLON.GLTFValidation.Configuration = {
url: "../dist/preview%20release/gltf_validator.js"
};
});
</script>
</body>
Expand Down
1 change: 0 additions & 1 deletion Playground/index.html
View file
Expand Up @@ -27,7 +27,6 @@
<script src="https://preview.babylonjs.com/recast.js"></script>
<script src="https://preview.babylonjs.com/cannon.js"></script>
<script src="https://preview.babylonjs.com/Oimo.js"></script>
<script src="https://preview.babylonjs.com/gltf_validator.js"></script>
<script src="https://preview.babylonjs.com/earcut.min.js"></script>
<!-- Babylon.js -->
<script src="https://preview.babylonjs.com/babylon.js"></script>
Expand Down
1 change: 0 additions & 1 deletion Playground/indexWebGPU.html
View file
Expand Up @@ -27,7 +27,6 @@
<script src="https://preview.babylonjs.com/recast.js"></script>
<script src="https://preview.babylonjs.com/cannon.js"></script>
<script src="https://preview.babylonjs.com/Oimo.js"></script>
<script src="https://preview.babylonjs.com/gltf_validator.js"></script>
<script src="https://preview.babylonjs.com/earcut.min.js"></script>
<!-- Babylon.js -->
<script src="https://preview.babylonjs.com/glslang/glslang.js"></script>
Expand Down
1 change: 0 additions & 1 deletion Playground/zipContent/index.html
View file
Expand Up @@ -11,7 +11,6 @@
<script src="https://preview.babylonjs.com/ammo.js"></script>
<script src="https://preview.babylonjs.com/cannon.js"></script>
<script src="https://preview.babylonjs.com/Oimo.js"></script>
<script src="https://preview.babylonjs.com/gltf_validator.js"></script>
<script src="https://preview.babylonjs.com/earcut.min.js"></script>
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
Expand Down
1 change: 0 additions & 1 deletion Viewer/tests/validation/validate.html
View file
Expand Up @@ -6,7 +6,6 @@
<script src="https://preview.babylonjs.com/ammo.js"></script>
<script src="https://preview.babylonjs.com/cannon.js"></script>
<script src="https://preview.babylonjs.com/Oimo.js"></script>
<script src="https://preview.babylonjs.com/gltf_validator.js"></script>
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>

Expand Down
5 changes: 4 additions & 1 deletion Viewer/tests/validation/validation.js
View file
Expand Up @@ -286,13 +286,16 @@ function init() {
BABYLON.SceneLoader.ShowLoadingScreen = false;
BABYLON.SceneLoader.ForceFullSceneLoadingForIncremental = true;

// Draco configuration
BABYLON.DracoCompression.Configuration.decoder = {
wasmUrl: "../../dist/preview%20release/draco_wasm_wrapper_gltf.js",
wasmBinaryUrl: "../../dist/preview%20release/draco_decoder_gltf.wasm",
fallbackUrl: "../../dist/preview%20release/draco_decoder_gltf.js"
};

BABYLON.GLTFValidation.Configuration = {
url: "../../dist/preview%20release/gltf_validator.js"
};

viewerElement = document.createElement("babylon");
document.body.appendChild(viewerElement);

Expand Down
2 changes: 1 addition & 1 deletion dist/preview release/gltf_validator.js
View file
Expand Up @@ -185,7 +185,7 @@ process.chdir = function (dir) {
process.umask = function() { return 0; };

},{}],2:[function(require,module,exports){
window.GLTFValidator = require('gltf-validator');
GLTFValidator = require('gltf-validator');
},{"gltf-validator":4}],3:[function(require,module,exports){
(function (process,global,__filename,__argument0,__argument1,__argument2,__argument3,__dirname){
var self=Object.create(global);self.scheduleImmediate=self.setImmediate?function(e){global.setImmediate(e)}:function(e){setTimeout(e,0)},self.require=require,self.exports=exports,self.process=process,self.__dirname=__dirname,self.__filename=__filename,global.window||(self.location={get href(){return"file://"+(e=process.cwd(),"win32"!=process.platform?e:"/"+e.replace(/\\/g,"/"))+"/";var e}},function(){var e=null;self.document={get currentScript(){return null==e&&(e={src:function(){try{throw new Error}catch(n){var e=n.stack,r=new RegExp("^ *at [^(]*\\((.*):[0-9]*:[0-9]*\\)$","mg"),l=null;do{var t=r.exec(e);null!=t&&(l=t)}while(null!=t);return l[1]}}()}),e}}}(),self.dartDeferredLibraryLoader=function(e,r,l){try{load(e),r()}catch(e){l(e)}});(function(){var supportsDirectProtoAccess=function(){var z=function(){}
Expand Down
6 changes: 3 additions & 3 deletions inspector/src/components/actionTabs/actionTabsComponent.tsx
View file
Expand Up @@ -42,9 +42,9 @@ export class ActionTabsComponent extends React.Component<IActionTabsComponentPro
: props.initialTab

if (this.props.globalState) {
const validationResutls = this.props.globalState.validationResults;
if (validationResutls) {
if (validationResutls.issues.numErrors || validationResutls.issues.numWarnings) {
const validationResults = this.props.globalState.validationResults;
if (validationResults) {
if (validationResults.issues.numErrors || validationResults.issues.numWarnings) {
initialIndex = DebugLayerTab.Tools;
}
}
Expand Down
53 changes: 39 additions & 14 deletions inspector/src/components/actionTabs/tabs/tools/gltfComponent.tsx
View file
Expand Up @@ -9,13 +9,18 @@ import { MessageLineComponent } from "../../lines/messageLineComponent";
import { faCheck, faTimesCircle } from "@fortawesome/free-solid-svg-icons";
import { TextLineComponent } from "../../lines/textLineComponent";
import { GLTFLoaderCoordinateSystemMode, GLTFLoaderAnimationStartMode } from "babylonjs-loaders/glTF/index";
import { Nullable } from 'babylonjs/types';
import { Observer } from 'babylonjs/Misc/observable';
import { IGLTFValidationResults } from "babylonjs-gltf2interface";

interface IGLTFComponentProps {
scene: Scene;
globalState: GlobalState;
}

export class GLTFComponent extends React.Component<IGLTFComponentProps> {
private _onValidationResultsUpdatedObserver: Nullable<Observer<Nullable<IGLTFValidationResults>>> = null;

constructor(props: IGLTFComponentProps) {
super(props);

Expand Down Expand Up @@ -72,8 +77,28 @@ export class GLTFComponent extends React.Component<IGLTFComponentProps> {
return `${singularForm}`;
}

componentDidMount() {
if (this.props.globalState) {
this._onValidationResultsUpdatedObserver = this.props.globalState.onValidationResultsUpdatedObservable.add(() => {
this.forceUpdate();
});
}
}

componentWillUnmount() {
if (this.props.globalState) {
if (this._onValidationResultsUpdatedObserver) {
this.props.globalState.onValidationResultsUpdatedObservable.remove(this._onValidationResultsUpdatedObserver);
}
}
}

renderValidation() {
const validationResults = this.props.globalState.validationResults;
if (!validationResults) {
return null;
}

const issues = validationResults.issues;

return (
Expand All @@ -92,7 +117,7 @@ export class GLTFComponent extends React.Component<IGLTFComponentProps> {
<TextLineComponent label="Hints" value={issues.numHints.toString()} />
<TextLineComponent label="More details" value="Click here" onLink={() => this.openValidationDetails()} />
</LineContainerComponent>
)
);
}

render() {
Expand Down Expand Up @@ -125,20 +150,20 @@ export class GLTFComponent extends React.Component<IGLTFComponentProps> {
<MessageLineComponent text="You need to reload your file to see these changes" />
</LineContainerComponent>
<LineContainerComponent globalState={this.props.globalState} title="GLTF EXTENSIONS" closed={true}>
<CheckBoxLineComponent label="MSFT_lod" isSelected={() => extensionStates["MSFT_lod"].enabled} onSelect={value => extensionStates["MSFT_lod"].enabled = value} />
<CheckBoxLineComponent label="MSFT_lod" isSelected={() => extensionStates["MSFT_lod"].enabled} onSelect={(value) => extensionStates["MSFT_lod"].enabled = value} />
<FloatLineComponent label="Maximum LODs" target={extensionStates["MSFT_lod"]} propertyName="maxLODsToLoad" additionalClass="gltf-extension-property" isInteger={true} />
<CheckBoxLineComponent label="MSFT_minecraftMesh" isSelected={() => extensionStates["MSFT_minecraftMesh"].enabled} onSelect={value => extensionStates["MSFT_minecraftMesh"].enabled = value} />
<CheckBoxLineComponent label="MSFT_sRGBFactors" isSelected={() => extensionStates["MSFT_sRGBFactors"].enabled} onSelect={value => extensionStates["MSFT_sRGBFactors"].enabled = value} />
<CheckBoxLineComponent label="MSFT_audio_emitter" isSelected={() => extensionStates["MSFT_audio_emitter"].enabled} onSelect={value => extensionStates["MSFT_audio_emitter"].enabled = value} />
<CheckBoxLineComponent label="KHR_draco_mesh_compression" isSelected={() => extensionStates["KHR_draco_mesh_compression"].enabled} onSelect={value => extensionStates["KHR_draco_mesh_compression"].enabled = value} />
<CheckBoxLineComponent label="KHR_materials_pbrSpecularGlossiness" isSelected={() => extensionStates["KHR_materials_pbrSpecularGlossiness"].enabled} onSelect={value => extensionStates["KHR_materials_pbrSpecularGlossiness"].enabled = value} />
<CheckBoxLineComponent label="KHR_materials_clearcoat" isSelected={() => extensionStates["KHR_materials_clearcoat"].enabled} onSelect={value => extensionStates["KHR_materials_clearcoat"].enabled = value} />
<CheckBoxLineComponent label="KHR_materials_sheen" isSelected={() => extensionStates["KHR_materials_sheen"].enabled} onSelect={value => extensionStates["KHR_materials_sheen"].enabled = value} />
<CheckBoxLineComponent label="KHR_materials_specular" isSelected={() => extensionStates["KHR_materials_specular"].enabled} onSelect={value => extensionStates["KHR_materials_specular"].enabled = value} />
<CheckBoxLineComponent label="KHR_materials_unlit" isSelected={() => extensionStates["KHR_materials_unlit"].enabled} onSelect={value => extensionStates["KHR_materials_unlit"].enabled = value} />
<CheckBoxLineComponent label="KHR_lights_punctual" isSelected={() => extensionStates["KHR_lights_punctual"].enabled} onSelect={value => extensionStates["KHR_lights_punctual"].enabled = value} />
<CheckBoxLineComponent label="KHR_texture_transform" isSelected={() => extensionStates["KHR_texture_transform"].enabled} onSelect={value => extensionStates["KHR_texture_transform"].enabled = value} />
<CheckBoxLineComponent label="EXT_lights_image_based" isSelected={() => extensionStates["EXT_lights_image_based"].enabled} onSelect={value => extensionStates["EXT_lights_image_based"].enabled = value} />
<CheckBoxLineComponent label="MSFT_minecraftMesh" isSelected={() => extensionStates["MSFT_minecraftMesh"].enabled} onSelect={(value) => extensionStates["MSFT_minecraftMesh"].enabled = value} />
<CheckBoxLineComponent label="MSFT_sRGBFactors" isSelected={() => extensionStates["MSFT_sRGBFactors"].enabled} onSelect={(value) => extensionStates["MSFT_sRGBFactors"].enabled = value} />
<CheckBoxLineComponent label="MSFT_audio_emitter" isSelected={() => extensionStates["MSFT_audio_emitter"].enabled} onSelect={(value) => extensionStates["MSFT_audio_emitter"].enabled = value} />
<CheckBoxLineComponent label="KHR_draco_mesh_compression" isSelected={() => extensionStates["KHR_draco_mesh_compression"].enabled} onSelect={(value) => extensionStates["KHR_draco_mesh_compression"].enabled = value} />
<CheckBoxLineComponent label="KHR_materials_pbrSpecularGlossiness" isSelected={() => extensionStates["KHR_materials_pbrSpecularGlossiness"].enabled} onSelect={(value) => extensionStates["KHR_materials_pbrSpecularGlossiness"].enabled = value} />
<CheckBoxLineComponent label="KHR_materials_clearcoat" isSelected={() => extensionStates["KHR_materials_clearcoat"].enabled} onSelect={(value) => extensionStates["KHR_materials_clearcoat"].enabled = value} />
<CheckBoxLineComponent label="KHR_materials_sheen" isSelected={() => extensionStates["KHR_materials_sheen"].enabled} onSelect={(value) => extensionStates["KHR_materials_sheen"].enabled = value} />
<CheckBoxLineComponent label="KHR_materials_specular" isSelected={() => extensionStates["KHR_materials_specular"].enabled} onSelect={(value) => extensionStates["KHR_materials_specular"].enabled = value} />
<CheckBoxLineComponent label="KHR_materials_unlit" isSelected={() => extensionStates["KHR_materials_unlit"].enabled} onSelect={(value) => extensionStates["KHR_materials_unlit"].enabled = value} />
<CheckBoxLineComponent label="KHR_lights_punctual" isSelected={() => extensionStates["KHR_lights_punctual"].enabled} onSelect={(value) => extensionStates["KHR_lights_punctual"].enabled = value} />
<CheckBoxLineComponent label="KHR_texture_transform" isSelected={() => extensionStates["KHR_texture_transform"].enabled} onSelect={(value) => extensionStates["KHR_texture_transform"].enabled = value} />
<CheckBoxLineComponent label="EXT_lights_image_based" isSelected={() => extensionStates["EXT_lights_image_based"].enabled} onSelect={(value) => extensionStates["EXT_lights_image_based"].enabled = value} />
<MessageLineComponent text="You need to reload your file to see these changes" />
</LineContainerComponent>
{
Expand Down
10 changes: 7 additions & 3 deletions inspector/src/components/globalState.ts
View file
Expand Up @@ -20,8 +20,8 @@ export class GlobalState {

public sceneImportDefaults: { [key: string]: any } = {};

public validationResults: IGLTFValidationResults;
public onValidationResultsUpdatedObservable = new Observable<IGLTFValidationResults>();
public validationResults: Nullable<IGLTFValidationResults> = null;
public onValidationResultsUpdatedObservable = new Observable<Nullable<IGLTFValidationResults>>();

public onExtensionLoadedObservable: Observable<IGLTFLoaderExtension>;
public glTFLoaderExtensionDefaults: { [name: string]: { [key: string]: any } } = {};
Expand Down Expand Up @@ -81,7 +81,6 @@ export class GlobalState {
}

loader.onExtensionLoadedObservable.add((extension: IGLTFLoaderExtension) => {

var extensionState = this.glTFLoaderExtensionDefaults[extension.name];
if (extensionState !== undefined) {
for (const key in extensionState) {
Expand All @@ -90,6 +89,11 @@ export class GlobalState {
}
});

if (this.validationResults) {
this.validationResults = null;
this.onValidationResultsUpdatedObservable.notifyObservers(null);
}

loader.onValidatedObservable.add((results: IGLTFValidationResults) => {
this.validationResults = results;
this.onValidationResultsUpdatedObservable.notifyObservers(results);
Expand Down

0 comments on commit 85cde6e

Please sign in to comment.