Merge branch 'master' into serialization-gui

.gitignore

@@ -166,6 +166,7 @@ node_modules
 !dist/**/*.js.map
 !lib.d.ts
 !src/LibDeclarations/*.d.ts
+!Playground/libs/*.d.ts
 *.fragment.ts
 *.vertex.ts
 **/ShadersInclude/**/*.ts
@@ -181,6 +182,9 @@ localDev/src/*
 package-lock.json
 dist/preview release/package/
 
+# local dev WebGPU
+localDevWebGPU/src/*
+
 # viewer dist files
 /Viewer/dist/viewer.js
 /Viewer/dist/viewer.min.js
@@ -204,3 +208,7 @@ Playground/dist/
 Playground/temp/
 Sandbox/public/dist/
 ktx2Decoder/dist/
+
+# Symlinks
+inspector/src/sharedUiComponents/**/*
+nodeEditor/src/sharedUiComponents/**/*

.vscode/launch.json

@@ -226,6 +226,21 @@
             ]
         },        
         {
+            "name": "Launch Local Dev (Chrome Canary)",
+            "type": "chrome",
+            "request": "launch",
+            "url": "http://localhost:1338/localDevWebGPU/index.html",
+            "webRoot": "${workspaceRoot}/",
+            "sourceMaps": true,
+            "preLaunchTask": "run",
+            "userDataDir": "${workspaceRoot}/.tempChromeCanaryProfileForDebug",
+            "runtimeExecutable": "C:/Users/alexis/AppData/Local/Google/Chrome SxS/Application/Chrome.exe",
+            "runtimeArgs": [
+                "--enable-unsafe-es3-apis",
+                "--enable-unsafe-webgpu"
+            ]
+        },        
+        {
             "name": "Launch Local Dev (Edge)",
             "type": "edge",
             "version": "dev",

Playground/index-local.html

@@ -55,20 +55,35 @@
         <div id="host-element">
         </div>
         <script>
+            function GetAbsoluteUrl(url) {
+                const a = document.createElement("a");
+                a.href = url;
+                return a.href;
+            }
+
             // Load the scripts + map file to allow vscode debug.
-            BABYLONDEVTOOLS.Loader       
+            BABYLONDEVTOOLS.Loader
                 .require("index.js")
                 .load(() => {
                     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"
+                        wasmUrl: GetAbsoluteUrl("../dist/preview%20release/draco_wasm_wrapper_gltf.js"),
+                        wasmBinaryUrl: GetAbsoluteUrl("../dist/preview%20release/draco_decoder_gltf.wasm"),
+                        fallbackUrl: GetAbsoluteUrl("../dist/preview%20release/draco_decoder_gltf.js")
                     };
                     BABYLON.GLTFValidation.Configuration = {
-                        url: "../dist/preview%20release/gltf_validator.js"
+                        url: GetAbsoluteUrl("../dist/preview%20release/gltf_validator.js")
                     };
                     BABYLON.GLTF2.Loader.Extensions.EXT_meshopt_compression.DecoderPath =
-                        "../dist/preview%20release/meshopt_decoder.module.js";
+                        GetAbsoluteUrl("../dist/preview%20release/meshopt_decoder.js");
+                    BABYLON.KhronosTextureContainer2.URLConfig = {
+                        jsDecoderModule: GetAbsoluteUrl("../dist/preview%20release/babylon.ktx2Decoder.js"),
+                        wasmUASTCToASTC: GetAbsoluteUrl("../dist/preview%20release/ktx2Transcoders/uastc_astc.wasm"),
+                        wasmUASTCToBC7: GetAbsoluteUrl("../dist/preview%20release/ktx2Transcoders/uastc_bc7.wasm"),
+                        wasmUASTCToRGBA_UNORM: GetAbsoluteUrl("../dist/preview%20release/ktx2Transcoders/uastc_rgba32_unorm.wasm"),
+                        wasmUASTCToRGBA_SRGB: GetAbsoluteUrl("../dist/preview%20release/ktx2Transcoders/uastc_rgba32_srgb.wasm"),
+                        jsMSCTranscoder: GetAbsoluteUrl("../dist/preview%20release/ktx2Transcoders/msc_basis_transcoder.js"),
+                        wasmMSCTranscoder: GetAbsoluteUrl("../dist/preview%20release/ktx2Transcoders/msc_basis_transcoder.wasm")
+                    };
                 });
         </script>
     </body>

Playground/src/components/headerComponent.tsx

@@ -21,12 +21,24 @@ export class HeaderComponent extends React.Component<IHeaderComponentProps> {
         this._refVersionNumber = React.createRef();
 
         this.props.globalState.onLanguageChangedObservable.add(() => {
-            this.forceUpdate();
+            this.updateDescription();
+        });
+
+        this.props.globalState.onRunExecutedObservable.add(() => {
+            this.updateDescription();
         });
     }
 
-    componentDidMount() {
+    updateDescription() {
         this._refVersionNumber.current!.innerHTML = Engine.Version;
+
+        if (Engine.LastCreatedEngine) {
+            this._refVersionNumber.current!.innerHTML += ` (${Engine.LastCreatedEngine.name}${Engine.LastCreatedEngine.version > 1 ? Engine.LastCreatedEngine.version : ""})`;
+        }
+    }
+
+    componentDidMount() {
+        this.updateDescription();
     }
     
     public render() {

Playground/src/components/rendererComponent.tsx

@@ -94,6 +94,8 @@ export class RenderingComponent extends React.Component<IRenderingComponentProps
 
         const displayInspector = this._scene?.debugLayer.isVisible();
 
+        const useWebGPU = location.href.indexOf("webgpu") !== -1 ;
+
         if (this._engine) {
             try {
                 this._engine.dispose();
@@ -108,15 +110,32 @@ export class RenderingComponent extends React.Component<IRenderingComponentProps
             let canvas = this._canvasRef.current!;
             globalObject.canvas = canvas;
 
-            globalObject.createDefaultEngine = function () {
-                return new Engine(canvas, true, {
-                    preserveDrawingBuffer: true,
-                    stencil: true,
-                });
-            };
+            if (useWebGPU) {
+                globalObject.createDefaultEngine = async function() { 
+                    var engine = new BABYLON.WebGPUEngine(canvas);
+                    await engine.initAsync();
+                    return engine;
+                }                
+            } else {
+                globalObject.createDefaultEngine = function () {
+                    return new Engine(canvas, true, {
+                        preserveDrawingBuffer: true,
+                        stencil: true,
+                    });
+                };
+            }
 
             let zipVariables = "var engine = null;\r\nvar scene = null;\r\nvar sceneToRender = null;\r\n";
             let defaultEngineZip = "var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }); }";
+
+            if (useWebGPU) {
+                defaultEngineZip = `var createDefaultEngine = async function() { 
+                    var engine = new BABYLON.WebGPUEngine(canvas);
+                    await engine.initAsync();
+                    return engine;
+                }`;
+            }
+
             let code = await this.props.globalState.getCompiledCode();
 
             if (!code) {
@@ -155,26 +174,25 @@ export class RenderingComponent extends React.Component<IRenderingComponentProps
             }
 
             if (!createSceneFunction) {
-                this._engine = globalObject.createDefaultEngine() as Engine;
-                this._scene = new Scene(this._engine);
-
-                globalObject.engine = this._engine;
-                globalObject.scene = this._scene;
-
-                let runScript: any = null;
-                Utilities.FastEval("runScript = function(scene, canvas) {" + code + "}");
-                runScript(this._scene, canvas);
-
-                this.props.globalState.zipCode = zipVariables + defaultEngineZip + "var engine = createDefaultEngine();" + ";\r\nvar scene = new BABYLON.Scene(engine);\r\n\r\n" + code;
+                this.props.globalState.onErrorObservable.notifyObservers({
+                    message: "You must provide a function named createScene.",
+                });
+                return;
             } else {
                 code += `
-    var engine;
-    try {
-    engine = ${createEngineFunction}();
-    } catch(e) {
-    console.log("the available createEngine function failed. Creating the default engine instead");
-    engine = createDefaultEngine();
-    }`;
+                var engine;
+                var scene;
+                initFunction = async function() {               
+                    var asyncEngineCreation = async function() {
+                        try {
+                        return ${createEngineFunction}();
+                        } catch(e) {
+                        console.log("the available createEngine function failed. Creating the default engine instead");
+                        return createDefaultEngine();
+                        }
+                    }
+
+                    engine = await asyncEngineCreation();`;
                 code += "\r\nif (!engine) throw 'engine should not be null.';";
 
                 if (this.props.globalState.language === "JS") {
@@ -185,9 +203,13 @@ export class RenderingComponent extends React.Component<IRenderingComponentProps
                     code += "\n" + "scene = " + createSceneFunction + "();";
                 }
 
+                code += `}`;
+
                 // Execute the code
                 Utilities.FastEval(code);
 
+                await globalObject.initFunction();
+
                 this._engine = globalObject.engine;
 
                 if (!this._engine) {
@@ -273,7 +295,9 @@ export class RenderingComponent extends React.Component<IRenderingComponentProps
                     }
                 });
             } else {
-                this._engine.scenes[0].executeWhenReady(function () {});
+                this._engine.scenes[0].executeWhenReady(() => {
+                    this.props.globalState.onRunExecutedObservable.notifyObservers();
+                });
             }
         } catch (err) {
             this.props.globalState.onErrorObservable.notifyObservers(err);

Playground/src/globalState.ts

@@ -38,6 +38,7 @@ export class GlobalState {
     public zipCode = "";
 
     public onRunRequiredObservable = new Observable<void>();
+    public onRunExecutedObservable = new Observable<void>();
     public onSavedObservable = new Observable<void>();
     public onNewRequiredObservable = new Observable<void>();
     public onClearRequiredObservable = new Observable<void>();

Playground/src/scss/header.scss

@@ -86,6 +86,10 @@
                 .version-text {
                     display: none;
                 }
+                
+                .version-number {
+                    font-size: 16px;
+                }
             }
         }
     }
@@ -104,7 +108,6 @@
                 }
             }
         }
-
         
         .command-bar {  
             display: none;

Playground/src/tools/monacoManager.ts

@@ -234,6 +234,11 @@ class Playground {
             "https://preview.babylonjs.com/inspector/babylon.inspector.d.ts",
         ];
 
+        // Check for Unity Toolkit
+        if (location.href.indexOf("UnityToolkit") !== -1 || Utilities.ReadBoolFromStore("unity-toolkit", false)) {
+            declarations.push("https://playground.babylonjs.com/libs/babylon.manager.d.ts");
+        }
+
         let libContent = "";
         const responses = await Promise.all(declarations.map((declaration) => fetch(declaration)));
         for (const response of responses) {

Tools/Config/config.js

@@ -23,6 +23,10 @@ const tempTypingsFilePath = path.join(tempFolder, tempTypingsFileName);
 
 const tscPath = path.resolve(rootFolder, "node_modules/typescript/bin/tsc");
 
+const sharedUiComponentsFilesGlob = config.build.sharedUiComponentsSrc + "/**/*";
+const sharedUiComponentsSrcPath = path.join(rootFolder, config.build.sharedUiComponentsSrc);
+const es6SharedUiComponentsSrcPath = path.join(sourceES6Folder, config.build.sharedUiComponentsSrc);
+
 config.computed = {
     rootFolder,
     tempFolder,
@@ -39,7 +43,10 @@ config.computed = {
     tempTypingsFileName,
     tempTypingsAMDFilePath,
     tempTypingsFilePath,
-    tscPath
+    tscPath,
+    sharedUiComponentsFilesGlob,
+    sharedUiComponentsSrcPath,
+    es6SharedUiComponentsSrcPath,
 }
 
 config.additionalNpmPackages.forEach(package => {
@@ -90,7 +97,7 @@ allModules.map(function(module) {
     const packageJSONPath = settings.build.packageJSON ? 
         path.join(rootFolder, settings.build.packageJSON) : 
         path.join(distDirectory, 'package.json');
-
+    
     settings.computed = {
         mainDirectory,
         distDirectory,

Tools/Config/config.json

@@ -36,7 +36,8 @@
             "BABYLON"
         ],
         "typedocJSON": "../../.temp/babylon.typedoc.json",
-        "typedocValidationBaseline": "../../dist/preview release/typedocValidationBaseline.json"
+        "typedocValidationBaseline": "../../dist/preview release/typedocValidationBaseline.json",
+        "sharedUiComponentsSrc": "sharedUiComponents"
     },
     "modules": [
         "core",
@@ -47,8 +48,7 @@
         "serializers",
         "gui",
         "inspector",
-        "nodeEditor",
-        "uiControls"
+        "nodeEditor"
     ],
     "es6modules": [
         "core",
@@ -60,8 +60,7 @@
         "gui",
         "inspector",
         "viewer",
-        "nodeEditor",
-        "uiControls"
+        "nodeEditor"
     ],
     "apps": [
         "playground",
@@ -150,7 +149,8 @@
             "es6": {
                 "packageName": "@babylonjs/core",
                 "readme": "readme-es6.md",
-                "license": "license.md"
+                "license": "license.md",
+                "type": "module"
             }
         }
     },
@@ -252,7 +252,8 @@
             },
             "es6": {
                 "packageName": "@babylonjs/materials",
-                "readme": "dist/preview release/materialsLibrary/readme-es6.md"
+                "readme": "dist/preview release/materialsLibrary/readme-es6.md",
+                "type": "module"
             }
         }
     },
@@ -289,7 +290,8 @@
             },
             "es6": {
                 "packageName": "@babylonjs/post-processes",
-                "readme": "dist/preview release/postProcessesLibrary/readme-es6.md"
+                "readme": "dist/preview release/postProcessesLibrary/readme-es6.md",
+                "type": "module"
             }
         }
     },
@@ -366,7 +368,8 @@
             },
             "es6": {
                 "packageName": "@babylonjs/procedural-textures",
-                "readme": "dist/preview release/proceduralTexturesLibrary/readme-es6.md"
+                "readme": "dist/preview release/proceduralTexturesLibrary/readme-es6.md",
+                "type": "module"
             }
         }
     },
@@ -437,7 +440,8 @@
             },
             "es6": {
                 "packageName": "@babylonjs/loaders",
-                "readme": "dist/preview release/loaders/readme-es6.md"
+                "readme": "dist/preview release/loaders/readme-es6.md",
+                "type": "module"
             }
         }
     },
@@ -495,7 +499,8 @@
             },
             "es6": {
                 "packageName": "@babylonjs/serializers",
-                "readme": "dist/preview release/serializers/readme-es6.md"
+                "readme": "dist/preview release/serializers/readme-es6.md",
+                "type": "module"
             }
         }
     },
@@ -524,7 +529,8 @@
             },
             "es6": {
                 "packageName": "@babylonjs/gui",
-                "readme": "dist/preview release/gui/readme-es6.md"
+                "readme": "dist/preview release/gui/readme-es6.md",
+                "type": "module"
             }
         }
     },
@@ -545,6 +551,7 @@
                 "re-resizable",
                 "glTF"
             ],
+            "sharedUiComponents": "src/sharedUiComponents/",
             "umd": {
                 "packageName": "babylonjs-inspector",
                 "webpackRoot": "INSPECTOR",
@@ -608,6 +615,7 @@
                 "glTF",
                 "file-saver"
             ],
+            "sharedUiComponents": "src/sharedUiComponents/",
             "umd": {
                 "packageName": "babylonjs-node-editor",
                 "webpackRoot": "NODEEDITOR",
@@ -643,55 +651,6 @@
             }
         }
     },
-    "uiControls": {
-        "libraries": [
-            {
-                "output": "babylon.uiControls.js",
-                "entry": "./legacy/legacy.ts"
-            }
-        ],
-        "build": {            
-            "ignoreInWorkerMode": true,
-            "ignoreInTestMode": true,
-            "mainFolder": "./uiControls/",
-            "uncheckedLintImports": [
-                "react",
-                "react-dom"
-            ],
-            "umd": {
-                "packageName": "babylonjs-ui-controls",
-                "webpackRoot": "UICONTROLS",
-                "processDeclaration": {
-                    "filename": "babylon.uiControls.module.d.ts",
-                    "moduleName": "UICONTROLS",
-                    "importsToRemove": [],
-                    "classMap": {
-                        "babylonjs": "BABYLON",
-                        "react": "React",
-                        "@babylonjs/core": "BABYLON",
-                        "@fortawesome": false,
-                        "react-contextmenu": false
-                    }
-                }
-            },
-            "es6": {
-                "webpackBuild": true,
-                "buildDependencies": [
-                    "Tools/**/*"
-                ],
-                "packageName": "@babylonjs/ui-controls",
-                "readme": "dist/preview release/uiControls/readme-es6.md",
-                "packagesFiles": [
-                    "babylon.uiControls.max.js",
-                    "babylon.uiControls.max.js.map",
-                    "babylon.uiControls.module.d.ts",
-                    "readme.md"
-                ],
-                "typings": "babylon.uiControls.module.d.ts",
-                "index": "babylon.uiControls.max.js"
-            }
-        }
-    },
     "ktx2Decoder": {
         "tempFileName": "babylon.ktx2Decoder.js",
         "distFile": "/dist/preview release/babylon.ktx2Decoder.js",

Tools/DevLoader/BabylonLoader.js

@@ -40,6 +40,8 @@ var BABYLONDEVTOOLS;
         var min;
         var babylonJSPath;
 
+        var coreOnly;
+
         var localDevES6FolderName;
         var localDevUMDFolderName;
 
@@ -57,6 +59,7 @@ var BABYLONDEVTOOLS;
                 workerMode = true;
             }
             babylonJSPath = '';
+            coreOnly = false;
         }
 
         Loader.prototype.debugShortcut = function(engine) {
@@ -234,7 +237,14 @@ var BABYLONDEVTOOLS;
                 if (!useDist && module.isCore) {
                     this.loadCoreDev();
                 }
-                else {
+                else if (!coreOnly || module.isCore) {
+                    this.loadLibrary(moduleName, module.libraries[i], module);
+                }
+                // Allow also loaders in CORE.
+                else if (coreOnly && (moduleName === "loaders" ||
+                    moduleName === "inspector" ||
+                    moduleName === "nodeEditor" ||
+                    moduleName === "materialsLibrary")) {
                     this.loadLibrary(moduleName, module.libraries[i], module);
                 }
             }
@@ -282,6 +292,11 @@ var BABYLONDEVTOOLS;
             }
         }
 
+        Loader.prototype.loadCoreOnly = function() {
+            coreOnly = true;
+            return this;
+        }
+
         Loader.prototype.load = function(newCallback) {
             var self = this;
             if (newCallback) {

Tools/Gulp/gulpfile.js

@@ -21,6 +21,7 @@ require("./tasks/gulpTasks-remapPaths");
 require("./tasks/gulpTasks-npmPackages");
 require("./tasks/gulpTasks-dependencies");
 require("./tasks/gulpTasks-testsES6");
+require("./tasks/gulpTasks-symlink");
 
 /**
  * Temp cleanup after upgrade.
@@ -52,27 +53,27 @@ gulp.task("cleanup", function(cb) {
 /**
  * Full TsLint.
  */
-gulp.task("tsLint", gulp.series("typescript-libraries-tsLint"));
+gulp.task("tsLint", gulp.series("generate-symlinks", "typescript-libraries-tsLint"));
 
 /**
  * Full ImportLint.
  */
-gulp.task("importLint", gulp.series("typescript-libraries-importLint"));
+gulp.task("importLint", gulp.series("generate-symlinks", "typescript-libraries-importLint"));
 
 /**
  * Full Lint.
  */
-gulp.task("fullLint", gulp.series("tsLint", "importLint", "circularDependencies"));
+gulp.task("fullLint", gulp.series("generate-symlinks", "tsLint", "importLint", "circularDependencies"));
 
 /**
  * Validate compile the code and check the comments and style case convention through typedoc
  */
-gulp.task("typedoc-check", gulp.series("core", "gui", "loaders", "serializers", "typedoc-generate", "typedoc-validate"));
+gulp.task("typedoc-check", gulp.series("generate-symlinks", "core", "gui", "loaders", "serializers", "typedoc-generate", "typedoc-validate"));
 
 /**
  * Combine Webserver and Watch as long as vscode does not handle multi tasks.
  */
-gulp.task("run", gulp.series("cleanup", "watchCore", "watchLibraries", "watchApps", "webserver"));
+gulp.task("run", gulp.series("generate-symlinks", "cleanup", "watchCore", "watchLibraries", "watchApps", "webserver"));
 
 /**
  * Do it all (Build).
@@ -82,7 +83,7 @@ gulp.task("typescript-all", gulp.series("typescript-libraries", "typescript-es6"
 /**
  * Do it all (tests).
  */
-gulp.task("tests-all", gulp.series("tests-unit", "tests-modules", "deployAndTests-es6Modules", "tests-validation-virtualscreen", "tests-validation-browserstack"));
+gulp.task("tests-all", gulp.series("generate-symlinks", "tests-unit", "tests-modules", "deployAndTests-es6Modules", "tests-validation-virtualscreen", "tests-validation-browserstack"));
 
 /**
  * Get Ready to test Npm Packages.

Tools/Gulp/helpers/gulp-processConstants.js

@@ -33,9 +33,13 @@ function processConstants(sourceCode) {
     }
 
     for (var constant of constantList) {
-        var value = babylonConstants[constant];
         var regex = new RegExp(`(?<![_0-9a-zA-Z])Constants\.${constant}(?![_0-9a-zA-Z])`, "g");
-        sourceCode = sourceCode.replace(regex, value);
+        var value = babylonConstants[constant];
+        if (typeof(value) === "string") {
+            sourceCode = sourceCode.replace(regex, "`" + value + "`");
+        } else  {
+            sourceCode = sourceCode.replace(regex, value);
+        }
     }
 
     return sourceCode;

Tools/Gulp/tasks/gulpTasks-libraries.js

@@ -6,6 +6,7 @@ var cp = require('child_process');
 var path = require("path");
 var concat = require('gulp-concat');
 var minimist = require("minimist");
+var symlinkDir = require('symlink-dir');
 
 // Gulp Helpers
 var uncommentShaders = require('../helpers/gulp-removeShaderComments');
@@ -164,12 +165,30 @@ var processDTSFiles = function(libraries, settings, cb) {
 }
 
 /**
+ * Generate our required symlinked for the shared components.
+ */
+var generateSharedUiComponents = function(settings, done) {
+    if (!settings.build.sharedUiComponents) {
+        done();
+        return;
+    }
+
+    var sharedUiComponents = config.computed.sharedUiComponentsSrcPath;
+    var umdSharedUiComponents = path.resolve(settings.computed.mainDirectory, settings.build.sharedUiComponents);
+
+    symlinkDir(sharedUiComponents, umdSharedUiComponents).then(() => {
+        done();
+    });
+};
+
+/**
  * Dynamic module creation In Serie for WebPack leaks.
  */
 function buildExternalLibraries(settings, fast) {
     // Creates the required tasks.
     var tasks = [];
 
+    var sharedUiComponents = function(cb) { return generateSharedUiComponents(settings, cb); };
     var cleanup = function() { return cleanShaders(settings); };
     var shaders = function() { return buildShaders(settings); };
     var buildMin = function() { return buildExternalLibrariesMultiEntry(settings.libraries, settings, true) };
@@ -183,9 +202,9 @@ function buildExternalLibraries(settings, fast) {
     }
 
     if (fast) {
-        tasks.push(buildMax);
+        tasks.push(sharedUiComponents, buildMax);
     } else {
-        tasks.push(cleanup, shaders, buildMin, buildMax, buildAMDDTS, processDTS, ...appendLoseDTS);
+        tasks.push(sharedUiComponents, cleanup, shaders, buildMin, buildMax, buildAMDDTS, processDTS, ...appendLoseDTS);
     }
 
     return gulp.series.apply(this, tasks);

Tools/Gulp/tasks/gulpTasks-librariesES6.js

@@ -4,6 +4,7 @@ var path = require("path");
 var fs = require("fs-extra");
 var shelljs = require("shelljs");
 var concat = require('gulp-concat');
+var symlinkDir = require('symlink-dir');
 
 // Gulp Helpers
 var rmDir = require("../../NodeHelpers/rmDir");
@@ -78,6 +79,11 @@ var dep = function(settings) {
             const dependencyPath = path.join(config.computed.rootFolder, pathName);
             copyPaths.push(dependencyPath);
         }
+
+        if (settings.build.sharedUiComponents) {
+            const dependencyPath = path.join(config.computed.rootFolder, config.computed.sharedUiComponentsFilesGlob);
+            copyPaths.push(dependencyPath);
+        }
     }
 
     return gulp.src(copyPaths, { base: config.computed.rootFolder })
@@ -265,6 +271,23 @@ var copyWebpackDist = function(settings, module) {
 }
 
 /**
+ * Generate our required symlinked for the shared components.
+ */
+var generateSharedUiComponents = function(settings, done) {
+    if (!settings.build.sharedUiComponents) {
+        done();
+        return;
+    }
+
+    var es6SrcSharedUiComponents = config.computed.es6SharedUiComponentsSrcPath;
+    var es6SharedUiComponents = path.resolve(settings.computed.sourceES6Directory, settings.build.sharedUiComponents);
+
+    symlinkDir(es6SrcSharedUiComponents, es6SharedUiComponents).then(() => {
+        done();
+    });
+};
+
+/**
  * Dynamic es 6 module creation.
  */
 function buildES6Library(settings, module) {
@@ -278,6 +301,7 @@ function buildES6Library(settings, module) {
     }
     var copySource = function() { return source(settings); };
     var dependencies = function() { return dep(settings); };
+    var sharedUiComponents = function(cb) { return generateSharedUiComponents(settings, cb); };
     var adaptSourceImportPaths = function() { return modifySourcesImports(settings); };
     var adaptSourceConstants = function() { return modifySourcesConstants(settings); };
     var adaptTsConfigImportPaths = function(cb) { return modifyTsConfig(settings, cb); };
@@ -298,7 +322,7 @@ function buildES6Library(settings, module) {
         ];
     }
 
-    tasks.push(...cleanAndShaderTasks, copySource, dependencies, adaptSourceImportPaths, adaptSourceConstants, adaptTsConfigImportPaths, ...buildSteps);
+    tasks.push(...cleanAndShaderTasks, copySource, dependencies, sharedUiComponents, adaptSourceImportPaths, adaptSourceConstants, adaptTsConfigImportPaths, ...buildSteps);
 
     return gulp.series.apply(this, tasks);
 }

Tools/Gulp/tasks/gulpTasks-localRun.js

@@ -43,6 +43,11 @@ gulp.task("webserver", function () {
                             req.url = "/Playground/" + req.url.replace(/localDev/ig, "");
                         }
                     }
+                    if (referer.indexOf('/localdevwebgpu/') !== -1 && referer.indexOf(req.originalUrl) === -1) {
+                        if (!fs.existsSync(rootRelativePath + req.originalUrl)) {
+                            req.url = "/Playground/" + req.url.replace(/localdevwebgpu/ig, "");
+                        }
+                    }
                 }
 
                 const pgMath = req.url.match(/\/Playground\/pg\/(.*)/);

Tools/Gulp/tasks/gulpTasks-symlink.js

@@ -0,0 +1,52 @@
+// Import Dependencies.
+var gulp = require("gulp");
+var symlinkDir = require('symlink-dir')
+var path = require('path')
+
+// Import Build Config
+var config = require("../../Config/config.js");
+
+/**
+ * Generate our required symlinked for the shared components.
+ */
+var generateSharedUiComponents = function(settings, done) {
+    if (!settings.build.sharedUiComponents) {
+        done();
+        return;
+    }
+
+    var sharedUiComponents = config.computed.sharedUiComponentsSrcPath;
+    var umdSharedUiComponents = path.resolve(settings.computed.mainDirectory, settings.build.sharedUiComponents);
+
+    symlinkDir(sharedUiComponents, umdSharedUiComponents).then(() => {
+        done();
+    });
+};
+
+/**
+ * Dynamic build SymLinks.
+ */
+function buildSymLinks(settings) {
+    // Creates the required tasks.
+    var tasks = [];
+
+    var sharedUiComponents = function(cb) { return generateSharedUiComponents(settings, cb); };
+
+    tasks.push(sharedUiComponents);
+
+    return gulp.series.apply(this, tasks);
+}
+
+/**
+ * Dynamic symlinks creation.
+ */
+config.modules.map(function(module) {
+    const settings = config[module];
+    gulp.task(module + "-symlinks", buildSymLinks(settings));
+});
+
+/**
+ * Build all es 6 libs.
+ */
+gulp.task("generate-symlinks", gulp.series(config.modules.map((module) => module + "-symlinks")));
+

Tools/Publisher/tasks/processEs6Packages.js

@@ -69,6 +69,9 @@ function processEs6Packages(version) {
         umdPackageJson.module = es6Config.index || "index.js";
         umdPackageJson.esnext = es6Config.index || "index.js";
         umdPackageJson.typings = es6Config.typings || "index.d.ts";
+        if (es6Config.type) {
+            umdPackageJson.type = es6Config.type;
+        }
 
         if (es6Config.packagesFiles) {
             umdPackageJson.files = es6Config.packagesFiles;

Viewer/src/labs/texture.ts

@@ -220,7 +220,7 @@ export class TextureUtils {
             babylonTexture.gammaSpace = false;
 
             let internalTexture = new InternalTexture(scene.getEngine(), InternalTextureSource.CubeRaw);
-            let glTexture = internalTexture._webGLTexture;
+            let glTexture = internalTexture._hardwareTexture?.underlyingResource;
             //babylon properties
             internalTexture.isCube = true;
             internalTexture.generateMipMaps = false;
@@ -352,7 +352,7 @@ export class TextureUtils {
 
         let internalTexture = babylonTexture._texture;
         if (!internalTexture) { return; }
-        let glTexture = internalTexture._webGLTexture;
+        let glTexture = internalTexture._hardwareTexture?.underlyingResource;
         gl.bindTexture(target, glTexture);
 
         if (parameters.magFilter != null) { gl.texParameteri(target, gl.TEXTURE_MAG_FILTER, parameters.magFilter); }

Viewer/tests/validation/validation.js

@@ -51,27 +51,38 @@ function compare(renderData, referenceCanvas) {
     return (differencesCount * 100) / (width * height) > errorRatio;
 }
 
-function getRenderData(canvas, engine) {
+async function getRenderData(canvas, engine) {
     var width = canvas.width;
     var height = canvas.height;
 
-    var renderData = engine.readPixels(0, 0, width, height);
-    var numberOfChannelsByLine = width * 4;
-    var halfHeight = height / 2;
-
-    for (var i = 0; i < halfHeight; i++) {
-        for (var j = 0; j < numberOfChannelsByLine; j++) {
-            var currentCell = j + i * numberOfChannelsByLine;
-            var targetLine = height - i - 1;
-            var targetCell = j + targetLine * numberOfChannelsByLine;
-
-            var temp = renderData[currentCell];
-            renderData[currentCell] = renderData[targetCell];
-            renderData[targetCell] = temp;
-        }
-    }
+    return new Promise((resolve) => {
+        engine.onEndFrameObservable.addOnce(async () => {
+            var renderData = await engine.readPixels(0, 0, width, height);
+            var numberOfChannelsByLine = width * 4;
+            var halfHeight = height / 2;
+
+            for (var i = 0; i < halfHeight; i++) {
+                for (var j = 0; j < numberOfChannelsByLine; j++) {
+                    var currentCell = j + i * numberOfChannelsByLine;
+                    var targetLine = height - i - 1;
+                    var targetCell = j + targetLine * numberOfChannelsByLine;
+
+                    var temp = renderData[currentCell];
+                    renderData[currentCell] = renderData[targetCell];
+                    renderData[targetCell] = temp;
+                }
+            }
+            if (engine.isWebGPU) {
+                for (var i = 0; i < width * height * 4; i += 4) {
+                    var temp = renderData[i + 0];
+                    renderData[i + 0] = renderData[i + 2];
+                    renderData[i + 2] = temp;
+                }
+            }
 
-    return renderData;
+            resolve(renderData);
+        });
+    });
 }
 
 function saveRenderImage(data, canvas) {
@@ -106,9 +117,9 @@ function downloadDataUrlFromJavascript(filename, dataUrl) {
     document.body.removeChild(link);
 }
 
-function evaluate(test, resultCanvas, result, renderImage, index, waitRing, done) {
+async function evaluate(test, resultCanvas, result, renderImage, index, waitRing, done) {
     seed = 100000;
-    var renderData = getRenderData(currentViewer.canvas, currentViewer.engine);
+    var renderData = await getRenderData(currentViewer.canvas, currentViewer.engine);
     var testRes = true;
 
     // gl check
@@ -282,18 +293,44 @@ function prepareMeshForViewer(viewer, configuration, test) {
     console.log("sphere created");
 }
 
+function GetAbsoluteUrl(url) {
+    const a = document.createElement("a");
+    a.href = url;
+    return a.href;
+}
+
 function init() {
     BABYLON.SceneLoader.ShowLoadingScreen = false;
     BABYLON.SceneLoader.ForceFullSceneLoadingForIncremental = true;
 
     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"
+        wasmUrl: GetAbsoluteUrl("../../dist/preview%20release/draco_wasm_wrapper_gltf.js"),
+        wasmBinaryUrl: GetAbsoluteUrl("../../dist/preview%20release/draco_decoder_gltf.wasm"),
+        fallbackUrl: GetAbsoluteUrl("../../dist/preview%20release/draco_decoder_gltf.js")
     };
-
     BABYLON.GLTFValidation.Configuration = {
-        url: "../../dist/preview%20release/gltf_validator.js"
+        url: GetAbsoluteUrl("../../dist/preview%20release/gltf_validator.js")
+    };
+    BABYLON.GLTF2.Loader.Extensions.EXT_meshopt_compression.DecoderPath =
+        GetAbsoluteUrl("../../dist/preview%20release/meshopt_decoder.js");
+    BABYLON.KhronosTextureContainer2.URLConfig = {
+        jsDecoderModule: GetAbsoluteUrl("../../dist/preview%20release/babylon.ktx2Decoder.js"),
+        wasmUASTCToASTC: GetAbsoluteUrl("../../dist/preview%20release/ktx2Transcoders/uastc_astc.wasm"),
+        wasmUASTCToBC7: GetAbsoluteUrl("../../dist/preview%20release/ktx2Transcoders/uastc_bc7.wasm"),
+        wasmUASTCToRGBA_UNORM: GetAbsoluteUrl("../../dist/preview%20release/ktx2Transcoders/uastc_rgba32_unorm.wasm"),
+        wasmUASTCToRGBA_SRGB: GetAbsoluteUrl("../../dist/preview%20release/ktx2Transcoders/uastc_rgba32_srgb.wasm"),
+        jsMSCTranscoder: GetAbsoluteUrl("../../dist/preview%20release/ktx2Transcoders/msc_basis_transcoder.js"),
+        wasmMSCTranscoder: GetAbsoluteUrl("../../dist/preview%20release/ktx2Transcoders/msc_basis_transcoder.wasm")
+    };
+
+    BABYLON.KhronosTextureContainer2.URLConfig = {
+        jsDecoderModule: GetAbsoluteUrl("../../dist/preview%20release/babylon.ktx2Decoder.js"),
+        wasmUASTCToASTC: GetAbsoluteUrl("../../dist/preview%20release/ktx2Transcoders/uastc_astc.wasm"),
+        wasmUASTCToBC7: GetAbsoluteUrl("../../dist/preview%20release/ktx2Transcoders/uastc_bc7.wasm"),
+        wasmUASTCToRGBA_UNORM: GetAbsoluteUrl("../../dist/preview%20release/ktx2Transcoders/uastc_rgba32_unorm.wasm"),
+        wasmUASTCToRGBA_SRGB: GetAbsoluteUrl("../../dist/preview%20release/ktx2Transcoders/uastc_rgba32_srgb.wasm"),
+        jsMSCTranscoder: GetAbsoluteUrl("../../dist/preview%20release/ktx2Transcoders/msc_basis_transcoder.js"),
+        wasmMSCTranscoder: GetAbsoluteUrl("../../dist/preview%20release/ktx2Transcoders/msc_basis_transcoder.wasm")
     };
 
     viewerElement = document.createElement("babylon");

dist/preview release/glTF2Interface/babylon.glTF2Interface.d.ts

@@ -34,6 +34,7 @@ declare module BABYLON.GLTF2 {
          */
         FLOAT = 5126,
     }
+
     /**
      * Specifies if the attirbute is a scalar, vector, or matrix
      */
@@ -67,6 +68,7 @@ declare module BABYLON.GLTF2 {
          */
         MAT4 = "MAT4",
     }
+
     /**
      * The name of the node's TRS property to modify, or the weights of the Morph Targets it instantiates
      */
@@ -88,6 +90,7 @@ declare module BABYLON.GLTF2 {
          */
         WEIGHTS = "weights",
     }
+
     /**
      * Interpolation algorithm
      */
@@ -105,6 +108,7 @@ declare module BABYLON.GLTF2 {
          */
         CUBICSPLINE = "CUBICSPLINE",
     }
+
     /**
      * A camera's projection.  A node can reference a camera to apply a transform to place the camera in the scene
      */
@@ -118,6 +122,7 @@ declare module BABYLON.GLTF2 {
          */
         ORTHOGRAPHIC = "orthographic",
     }
+
     /**
      * The mime-type of the image
      */
@@ -131,6 +136,7 @@ declare module BABYLON.GLTF2 {
          */
         PNG = "image/png",
     }
+
     /**
      * The alpha rendering mode of the material
      */
@@ -148,6 +154,7 @@ declare module BABYLON.GLTF2 {
          */
         BLEND = "BLEND",
     }
+
     /**
      * The type of the primitives to render
      */
@@ -181,6 +188,7 @@ declare module BABYLON.GLTF2 {
          */
         TRIANGLE_FAN = 6,
     }
+
     /**
      * Magnification filter.  Valid values correspond to WebGL enums: 9728 (NEAREST) and 9729 (LINEAR)
      */
@@ -194,6 +202,7 @@ declare module BABYLON.GLTF2 {
          */
         LINEAR = 9729,
     }
+
     /**
      * Minification filter.  All valid values correspond to WebGL enums
      */
@@ -223,6 +232,7 @@ declare module BABYLON.GLTF2 {
          */
         LINEAR_MIPMAP_LINEAR = 9987,
     }
+
     /**
      * S (U) wrapping mode.  All valid values correspond to WebGL enums
      */
@@ -240,6 +250,7 @@ declare module BABYLON.GLTF2 {
          */
         REPEAT = 10497,
     }
+
     /**
      * glTF Property
      */
@@ -255,6 +266,7 @@ declare module BABYLON.GLTF2 {
          */
         extras?: any;
     }
+
     /**
      * glTF Child of Root Property
      */
@@ -264,6 +276,7 @@ declare module BABYLON.GLTF2 {
          */
         name?: string;
     }
+
     /**
      * Indices of those attributes that deviate from their initialization value
      */
@@ -281,6 +294,7 @@ declare module BABYLON.GLTF2 {
          */
         componentType: AccessorComponentType;
     }
+
     /**
      * Array of size accessor.sparse.count times number of components storing the displaced accessor attributes pointed by accessor.sparse.indices
      */
@@ -294,6 +308,7 @@ declare module BABYLON.GLTF2 {
          */
         byteOffset?: number;
     }
+
     /**
      * Sparse storage of attributes that deviate from their initialization value
      */
@@ -311,6 +326,7 @@ declare module BABYLON.GLTF2 {
          */
         values: IAccessorSparseValues;
     }
+
     /**
      * A typed view into a bufferView.  A bufferView contains raw binary data.  An accessor provides a typed view into a bufferView or a subset of a bufferView similar to how WebGL's vertexAttribPointer() defines an attribute in a buffer
      */
@@ -352,6 +368,7 @@ declare module BABYLON.GLTF2 {
          */
         sparse?: IAccessorSparse;
     }
+
     /**
      * Targets an animation's sampler at a node's property
      */
@@ -365,6 +382,7 @@ declare module BABYLON.GLTF2 {
          */
         target: IAnimationChannelTarget;
     }
+
     /**
      * The index of the node and TRS property that an animation channel targets
      */
@@ -378,6 +396,7 @@ declare module BABYLON.GLTF2 {
          */
         path: AnimationChannelTargetPath;
     }
+
     /**
      * Combines input and output accessors with an interpolation algorithm to define a keyframe graph (but not its target)
      */
@@ -395,6 +414,7 @@ declare module BABYLON.GLTF2 {
          */
         output: number;
     }
+
     /**
      * A keyframe animation
      */
@@ -408,6 +428,7 @@ declare module BABYLON.GLTF2 {
          */
         samplers: IAnimationSampler[];
     }
+
     /**
      * Metadata about the glTF asset
      */
@@ -429,6 +450,7 @@ declare module BABYLON.GLTF2 {
          */
         minVersion?: string;
     }
+
     /**
      * A buffer points to binary geometry, animation, or skins
      */
@@ -442,6 +464,7 @@ declare module BABYLON.GLTF2 {
          */
         byteLength: number;
     }
+
     /**
      * A view into a buffer generally representing a subset of the buffer
      */
@@ -463,6 +486,7 @@ declare module BABYLON.GLTF2 {
          */
         byteStride?: number;
     }
+
     /**
      * An orthographic camera containing properties to create an orthographic projection matrix
      */
@@ -484,6 +508,7 @@ declare module BABYLON.GLTF2 {
          */
         znear: number;
     }
+
     /**
      * A perspective camera containing properties to create a perspective projection matrix
      */
@@ -505,6 +530,7 @@ declare module BABYLON.GLTF2 {
          */
         znear: number;
     }
+
     /**
      * A camera's projection.  A node can reference a camera to apply a transform to place the camera in the scene
      */
@@ -522,6 +548,7 @@ declare module BABYLON.GLTF2 {
          */
         type: CameraType;
     }
+
     /**
      * Image data used to create a texture. Image can be referenced by URI or bufferView index. mimeType is required in the latter case
      */
@@ -539,6 +566,7 @@ declare module BABYLON.GLTF2 {
          */
         bufferView?: number;
     }
+
     /**
      * Material Normal Texture Info
      */
@@ -548,6 +576,7 @@ declare module BABYLON.GLTF2 {
          */
         scale?: number;
     }
+
     /**
      * Material Occlusion Texture Info
      */
@@ -557,6 +586,7 @@ declare module BABYLON.GLTF2 {
          */
         strength?: number;
     }
+
     /**
      * A set of parameter values that are used to define the metallic-roughness material model from Physically-Based Rendering (PBR) methodology
      */
@@ -582,6 +612,7 @@ declare module BABYLON.GLTF2 {
          */
         metallicRoughnessTexture?: ITextureInfo;
     }
+
     /**
      * The material appearance of a primitive
      */
@@ -619,6 +650,7 @@ declare module BABYLON.GLTF2 {
          */
         doubleSided?: boolean;
     }
+
     /**
      * Geometry to be rendered with the given material
      */
@@ -648,6 +680,7 @@ declare module BABYLON.GLTF2 {
             [name: string]: number;
         }[];
     }
+
     /**
      * A set of primitives to be rendered.  A node can contain one mesh.  A node's transform places the mesh in the scene
      */
@@ -661,6 +694,7 @@ declare module BABYLON.GLTF2 {
          */
         weights?: number[];
     }
+
     /**
      * A node in the node hierarchy
      */
@@ -702,6 +736,7 @@ declare module BABYLON.GLTF2 {
          */
         weights?: number[];
     }
+
     /**
      * Texture sampler properties for filtering and wrapping modes
      */
@@ -723,6 +758,7 @@ declare module BABYLON.GLTF2 {
          */
         wrapT?: TextureWrapMode;
     }
+
     /**
      * The root nodes of a scene
      */
@@ -732,6 +768,7 @@ declare module BABYLON.GLTF2 {
          */
         nodes: number[];
     }
+
     /**
      * Joints and matrices defining a skin
      */
@@ -749,6 +786,7 @@ declare module BABYLON.GLTF2 {
          */
         joints: number[];
     }
+
     /**
      * A texture and its sampler
      */
@@ -762,6 +800,7 @@ declare module BABYLON.GLTF2 {
          */
         source: number;
     }
+
     /**
      * Reference to a texture
      */
@@ -775,6 +814,7 @@ declare module BABYLON.GLTF2 {
          */
         texCoord?: number;
     }
+
     /**
      * The root object for a glTF asset
      */
@@ -1213,6 +1253,18 @@ declare module BABYLON.GLTF2 {
         ids: number[];
     }
 
+    /**
+     * Interfaces from the EXT_meshopt_compression extension
+     */
 
-
+    /** @hidden */
+    interface IEXTMeshoptCompression {
+        buffer: number;
+        byteOffset?: number;
+        byteLength: number;
+        byteStride: number;
+        count: number;
+        mode: "ATTRIBUTES" | "TRIANGLES" | "INDICES";
+        filter?: "NONE" | "OCTAHEDRAL" | "QUATERNION" | "EXPONENTIAL";
+    }
 }

dist/preview release/glTF2Interface/package.json

@@ -1,7 +1,7 @@
 {
     "name": "babylonjs-gltf2interface",
     "description": "A typescript declaration of babylon's gltf2 inteface.",
-    "version": "5.0.0-alpha.0",
+    "version": "5.0.0-alpha.2",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/gui/babylon.gui.d.ts

@@ -3352,6 +3352,95 @@ declare module BABYLON.GUI {
     }
 }
 declare module BABYLON.GUI {
+    /**
+     * Class used to create toggle buttons
+     */
+    export class ToggleButton extends Rectangle {
+        name?: string | undefined;
+        /**
+         * Function called to generate the toActive animation
+         */
+        toActiveAnimation: () => void;
+        /**
+         * Function called to generate the toInactive animation
+         */
+        toInactiveAnimation: () => void;
+        /**
+         * Function called to generate a pointer enter animation when the toggle button is active.
+         */
+        pointerEnterActiveAnimation: () => void;
+        /**
+         * Function called to generate a pointer out animation when the toggle button is active.
+         */
+        pointerOutActiveAnimation: () => void;
+        /**
+         * Function called to generate a pointer down animation when the toggle button is active.
+         */
+        pointerDownActiveAnimation: () => void;
+        /**
+         * Function called to generate a pointer up animation when the toggle button is active.
+         */
+        pointerUpActiveAnimation: () => void;
+        /**
+         * Function called to generate a pointer enter animation when the toggle button is inactive.
+         */
+        pointerEnterInactiveAnimation: () => void;
+        /**
+         * Function called to generate a pointer out animation when the toggle button is inactive.
+         */
+        pointerOutInactiveAnimation: () => void;
+        /**
+         * Function called to generate a pointer down animation when the toggle button is inactive.
+         */
+        pointerDownInactiveAnimation: () => void;
+        /**
+         * Function called to generate a pointer up animation when the toggle button is inactive.
+         */
+        pointerUpInactiveAnimation: () => void;
+        /** BABYLON.Observable raised when isActive is changed */
+        onIsActiveChangedObservable: BABYLON.Observable<boolean>;
+        /**
+         * Gets or sets a boolean indicating that the toggle button will let internal controls handle picking instead of doing it directly using its bounding info
+         */
+        delegatePickingToChildren: boolean;
+        private _image;
+        /**
+         * Returns the ToggleButton's image control if it exists
+         */
+        get image(): BABYLON.Nullable<Image>;
+        private _textBlock;
+        /**
+         * Returns the ToggleButton's child TextBlock control if it exists
+         */
+        get textBlock(): BABYLON.Nullable<TextBlock>;
+        private _group;
+        /** Gets or sets group name this toggle button belongs to */
+        get group(): string;
+        set group(value: string);
+        private _isActive;
+        /** Gets or sets a boolean indicating if the toogle button is active or not */
+        get isActive(): boolean;
+        set isActive(value: boolean);
+        /**
+         * Creates a new ToggleButton
+         * @param name defines the control name
+         * @param group defines the toggle group this toggle belongs to
+         */
+        constructor(name?: string | undefined, group?: string);
+        protected _getTypeName(): string;
+        /** @hidden */
+        _processPicking(x: number, y: number, pi: BABYLON.PointerInfoBase, type: number, pointerId: number, buttonIndex: number, deltaX?: number, deltaY?: number): boolean;
+        /** @hidden */
+        _onPointerEnter(target: Control, pi: BABYLON.PointerInfoBase): boolean;
+        /** @hidden */
+        _onPointerOut(target: Control, pi: BABYLON.PointerInfoBase, force?: boolean): void;
+        /** @hidden */
+        _onPointerDown(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number, pi: BABYLON.PointerInfoBase): boolean;
+        /** @hidden */
+        _onPointerUp(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean, pi: BABYLON.PointerInfoBase): void;
+    }
+}
+declare module BABYLON.GUI {
     /** Class used to render a grid  */
     export class DisplayGrid extends Control {
         name?: string | undefined;

dist/preview release/gui/babylon.gui.module.d.ts

@@ -3502,6 +3502,103 @@ declare module "babylonjs-gui/2D/controls/scrollViewers/scrollViewer" {
         dispose(): void;
     }
 }
+declare module "babylonjs-gui/2D/controls/toggleButton" {
+    import { Nullable } from "babylonjs/types";
+    import { Observable } from "babylonjs/Misc/observable";
+    import { Vector2 } from "babylonjs/Maths/math.vector";
+    import { Rectangle } from "babylonjs-gui/2D/controls/rectangle";
+    import { Control } from "babylonjs-gui/2D/controls/control";
+    import { TextBlock } from "babylonjs-gui/2D/controls/textBlock";
+    import { Image } from "babylonjs-gui/2D/controls/image";
+    import { PointerInfoBase } from "babylonjs/Events/pointerEvents";
+    /**
+     * Class used to create toggle buttons
+     */
+    export class ToggleButton extends Rectangle {
+        name?: string | undefined;
+        /**
+         * Function called to generate the toActive animation
+         */
+        toActiveAnimation: () => void;
+        /**
+         * Function called to generate the toInactive animation
+         */
+        toInactiveAnimation: () => void;
+        /**
+         * Function called to generate a pointer enter animation when the toggle button is active.
+         */
+        pointerEnterActiveAnimation: () => void;
+        /**
+         * Function called to generate a pointer out animation when the toggle button is active.
+         */
+        pointerOutActiveAnimation: () => void;
+        /**
+         * Function called to generate a pointer down animation when the toggle button is active.
+         */
+        pointerDownActiveAnimation: () => void;
+        /**
+         * Function called to generate a pointer up animation when the toggle button is active.
+         */
+        pointerUpActiveAnimation: () => void;
+        /**
+         * Function called to generate a pointer enter animation when the toggle button is inactive.
+         */
+        pointerEnterInactiveAnimation: () => void;
+        /**
+         * Function called to generate a pointer out animation when the toggle button is inactive.
+         */
+        pointerOutInactiveAnimation: () => void;
+        /**
+         * Function called to generate a pointer down animation when the toggle button is inactive.
+         */
+        pointerDownInactiveAnimation: () => void;
+        /**
+         * Function called to generate a pointer up animation when the toggle button is inactive.
+         */
+        pointerUpInactiveAnimation: () => void;
+        /** Observable raised when isActive is changed */
+        onIsActiveChangedObservable: Observable<boolean>;
+        /**
+         * Gets or sets a boolean indicating that the toggle button will let internal controls handle picking instead of doing it directly using its bounding info
+         */
+        delegatePickingToChildren: boolean;
+        private _image;
+        /**
+         * Returns the ToggleButton's image control if it exists
+         */
+        get image(): Nullable<Image>;
+        private _textBlock;
+        /**
+         * Returns the ToggleButton's child TextBlock control if it exists
+         */
+        get textBlock(): Nullable<TextBlock>;
+        private _group;
+        /** Gets or sets group name this toggle button belongs to */
+        get group(): string;
+        set group(value: string);
+        private _isActive;
+        /** Gets or sets a boolean indicating if the toogle button is active or not */
+        get isActive(): boolean;
+        set isActive(value: boolean);
+        /**
+         * Creates a new ToggleButton
+         * @param name defines the control name
+         * @param group defines the toggle group this toggle belongs to
+         */
+        constructor(name?: string | undefined, group?: string);
+        protected _getTypeName(): string;
+        /** @hidden */
+        _processPicking(x: number, y: number, pi: PointerInfoBase, type: number, pointerId: number, buttonIndex: number, deltaX?: number, deltaY?: number): boolean;
+        /** @hidden */
+        _onPointerEnter(target: Control, pi: PointerInfoBase): boolean;
+        /** @hidden */
+        _onPointerOut(target: Control, pi: PointerInfoBase, force?: boolean): void;
+        /** @hidden */
+        _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: PointerInfoBase): boolean;
+        /** @hidden */
+        _onPointerUp(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean, pi: PointerInfoBase): void;
+    }
+}
 declare module "babylonjs-gui/2D/controls/displayGrid" {
     import { Control } from "babylonjs-gui/2D/controls/control";
     import { Nullable } from 'babylonjs/types';
@@ -3626,6 +3723,7 @@ declare module "babylonjs-gui/2D/controls/index" {
     export * from "babylonjs-gui/2D/controls/scrollViewers/scrollViewer";
     export * from "babylonjs-gui/2D/controls/textBlock";
     export * from "babylonjs-gui/2D/controls/textWrapper";
+    export * from "babylonjs-gui/2D/controls/toggleButton";
     export * from "babylonjs-gui/2D/controls/virtualKeyboard";
     export * from "babylonjs-gui/2D/controls/rectangle";
     export * from "babylonjs-gui/2D/controls/displayGrid";
@@ -7902,6 +8000,95 @@ declare module BABYLON.GUI {
     }
 }
 declare module BABYLON.GUI {
+    /**
+     * Class used to create toggle buttons
+     */
+    export class ToggleButton extends Rectangle {
+        name?: string | undefined;
+        /**
+         * Function called to generate the toActive animation
+         */
+        toActiveAnimation: () => void;
+        /**
+         * Function called to generate the toInactive animation
+         */
+        toInactiveAnimation: () => void;
+        /**
+         * Function called to generate a pointer enter animation when the toggle button is active.
+         */
+        pointerEnterActiveAnimation: () => void;
+        /**
+         * Function called to generate a pointer out animation when the toggle button is active.
+         */
+        pointerOutActiveAnimation: () => void;
+        /**
+         * Function called to generate a pointer down animation when the toggle button is active.
+         */
+        pointerDownActiveAnimation: () => void;
+        /**
+         * Function called to generate a pointer up animation when the toggle button is active.
+         */
+        pointerUpActiveAnimation: () => void;
+        /**
+         * Function called to generate a pointer enter animation when the toggle button is inactive.
+         */
+        pointerEnterInactiveAnimation: () => void;
+        /**
+         * Function called to generate a pointer out animation when the toggle button is inactive.
+         */
+        pointerOutInactiveAnimation: () => void;
+        /**
+         * Function called to generate a pointer down animation when the toggle button is inactive.
+         */
+        pointerDownInactiveAnimation: () => void;
+        /**
+         * Function called to generate a pointer up animation when the toggle button is inactive.
+         */
+        pointerUpInactiveAnimation: () => void;
+        /** BABYLON.Observable raised when isActive is changed */
+        onIsActiveChangedObservable: BABYLON.Observable<boolean>;
+        /**
+         * Gets or sets a boolean indicating that the toggle button will let internal controls handle picking instead of doing it directly using its bounding info
+         */
+        delegatePickingToChildren: boolean;
+        private _image;
+        /**
+         * Returns the ToggleButton's image control if it exists
+         */
+        get image(): BABYLON.Nullable<Image>;
+        private _textBlock;
+        /**
+         * Returns the ToggleButton's child TextBlock control if it exists
+         */
+        get textBlock(): BABYLON.Nullable<TextBlock>;
+        private _group;
+        /** Gets or sets group name this toggle button belongs to */
+        get group(): string;
+        set group(value: string);
+        private _isActive;
+        /** Gets or sets a boolean indicating if the toogle button is active or not */
+        get isActive(): boolean;
+        set isActive(value: boolean);
+        /**
+         * Creates a new ToggleButton
+         * @param name defines the control name
+         * @param group defines the toggle group this toggle belongs to
+         */
+        constructor(name?: string | undefined, group?: string);
+        protected _getTypeName(): string;
+        /** @hidden */
+        _processPicking(x: number, y: number, pi: BABYLON.PointerInfoBase, type: number, pointerId: number, buttonIndex: number, deltaX?: number, deltaY?: number): boolean;
+        /** @hidden */
+        _onPointerEnter(target: Control, pi: BABYLON.PointerInfoBase): boolean;
+        /** @hidden */
+        _onPointerOut(target: Control, pi: BABYLON.PointerInfoBase, force?: boolean): void;
+        /** @hidden */
+        _onPointerDown(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number, pi: BABYLON.PointerInfoBase): boolean;
+        /** @hidden */
+        _onPointerUp(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean, pi: BABYLON.PointerInfoBase): void;
+    }
+}
+declare module BABYLON.GUI {
     /** Class used to render a grid  */
     export class DisplayGrid extends Control {
         name?: string | undefined;

dist/preview release/gui/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-gui",
     "description": "The Babylon.js GUI library is an extension you can use to generate interactive user interface. It is build on top of the DynamicTexture.",
-    "version": "5.0.0-alpha.0",
+    "version": "5.0.0-alpha.2",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "5.0.0-alpha.0"
+        "babylonjs": "5.0.0-alpha.2"
     },
     "engines": {
         "node": "*"

dist/preview release/inspector/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-inspector",
     "description": "The Babylon.js inspector.",
-    "version": "5.0.0-alpha.0",
+    "version": "5.0.0-alpha.2",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -29,12 +29,12 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "5.0.0-alpha.0",
-        "babylonjs-gui": "5.0.0-alpha.0",
-        "babylonjs-loaders": "5.0.0-alpha.0",
-        "babylonjs-materials": "5.0.0-alpha.0",
-        "babylonjs-serializers": "5.0.0-alpha.0",
-        "babylonjs-gltf2interface": "5.0.0-alpha.0"
+        "babylonjs": "5.0.0-alpha.2",
+        "babylonjs-gui": "5.0.0-alpha.2",
+        "babylonjs-loaders": "5.0.0-alpha.2",
+        "babylonjs-materials": "5.0.0-alpha.2",
+        "babylonjs-serializers": "5.0.0-alpha.2",
+        "babylonjs-gltf2interface": "5.0.0-alpha.2"
     },
     "peerDependencies": {
         "@types/react": ">=16.7.3",

dist/preview release/loaders/babylon.glTF1FileLoader.js

@@ -3751,7 +3751,7 @@ var GLTFValidation = /** @class */ (function () {
                 };
                 worker.addEventListener("error", onError);
                 worker.addEventListener("message", onMessage);
-                worker.postMessage({ id: "init", url: babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__["Tools"].GetAbsoluteUrl(_this.Configuration.url) });
+                worker.postMessage({ id: "init", url: _this.Configuration.url });
                 worker.postMessage({ id: "validate", data: data, rootUrl: rootUrl, fileName: fileName });
             });
         }

dist/preview release/loaders/babylon.glTF2FileLoader.js

@@ -641,44 +641,42 @@ var EXT_meshopt_compression = /** @class */ (function () {
         this.enabled = loader.isExtensionUsed(NAME);
         this._loader = loader;
         if (this.enabled) {
-            var url = babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__["Tools"].GetAbsoluteUrl(EXT_meshopt_compression.DecoderPath);
-            this._decoder = import(/* webpackIgnore: true */ url).then(function (result) {
+            this._decoderPromise = babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__["Tools"].LoadScriptAsync(EXT_meshopt_compression.DecoderPath).then(function () {
                 // Wait for WebAssembly compilation before resolving promise
-                var MeshoptDecoder = result.MeshoptDecoder;
-                return MeshoptDecoder.ready.then(function () { return MeshoptDecoder; });
+                return MeshoptDecoder.ready;
             });
         }
     }
     /** @hidden */
     EXT_meshopt_compression.prototype.dispose = function () {
+        this._loader = null;
+        delete this._decoderPromise;
     };
     /** @hidden */
     EXT_meshopt_compression.prototype.loadBufferViewAsync = function (context, bufferView) {
-        if (bufferView.extensions && bufferView.extensions[this.name]) {
-            var extensionDef = bufferView.extensions[this.name];
-            if (extensionDef._decoded) {
-                return extensionDef._decoded;
-            }
-            var view = this._loader.loadBufferViewAsync(context, extensionDef);
-            extensionDef._decoded = Promise.all([view, this._decoder]).then(function (res) {
+        var _this = this;
+        return _glTFLoader__WEBPACK_IMPORTED_MODULE_1__["GLTFLoader"].LoadExtensionAsync(context, bufferView, this.name, function (extensionContext, extension) {
+            var bufferViewMeshopt = bufferView;
+            if (bufferViewMeshopt._meshOptData) {
+                return bufferViewMeshopt._meshOptData;
+            }
+            var buffer = _glTFLoader__WEBPACK_IMPORTED_MODULE_1__["ArrayItem"].Get(context + "/buffer", _this._loader.gltf.buffers, extension.buffer);
+            var bufferPromise = _this._loader.loadBufferAsync("/buffers/" + buffer.index, buffer, (extension.byteOffset || 0), extension.byteLength);
+            bufferViewMeshopt._meshOptData = Promise.all([bufferPromise, _this._decoderPromise]).then(function (res) {
                 var source = res[0];
-                var decoder = res[1];
-                var count = extensionDef.count;
-                var stride = extensionDef.byteStride;
+                var count = extension.count;
+                var stride = extension.byteStride;
                 var result = new Uint8Array(new ArrayBuffer(count * stride));
-                decoder.decodeGltfBuffer(result, count, stride, source, extensionDef.mode, extensionDef.filter);
+                MeshoptDecoder.decodeGltfBuffer(result, count, stride, source, extension.mode, extension.filter);
                 return Promise.resolve(result);
             });
-            return extensionDef._decoded;
-        }
-        else {
-            return null;
-        }
+            return bufferViewMeshopt._meshOptData;
+        });
     };
     /**
-     * Path to decoder module; defaults to https://preview.babylonjs.com/meshopt_decoder.module.js
+     * Path to decoder module; defaults to https://preview.babylonjs.com/meshopt_decoder.js
      */
-    EXT_meshopt_compression.DecoderPath = "https://preview.babylonjs.com/meshopt_decoder.module.js";
+    EXT_meshopt_compression.DecoderPath = "https://preview.babylonjs.com/meshopt_decoder.js";
     return EXT_meshopt_compression;
 }());
 
@@ -3072,6 +3070,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 /**
  * Helper class for working with arrays when loading the glTF asset
  */
@@ -3230,10 +3229,9 @@ var GLTFLoader = /** @class */ (function () {
     /** @hidden */
     GLTFLoader.prototype.importMeshAsync = function (meshesNames, scene, forAssetContainer, data, rootUrl, onProgress, fileName) {
         var _this = this;
+        if (fileName === void 0) { fileName = ""; }
         return Promise.resolve().then(function () {
             _this._babylonScene = scene;
-            _this._rootUrl = rootUrl;
-            _this._fileName = fileName || "scene";
             _this._forAssetContainer = forAssetContainer;
             _this._loadData(data);
             var nodes = null;
@@ -3256,7 +3254,7 @@ var GLTFLoader = /** @class */ (function () {
                     return node;
                 });
             }
-            return _this._loadAsync(nodes, function () {
+            return _this._loadAsync(rootUrl, fileName, nodes, function () {
                 return {
                     meshes: _this._getMeshes(),
                     particleSystems: [],
@@ -3272,18 +3270,19 @@ var GLTFLoader = /** @class */ (function () {
     /** @hidden */
     GLTFLoader.prototype.loadAsync = function (scene, data, rootUrl, onProgress, fileName) {
         var _this = this;
+        if (fileName === void 0) { fileName = ""; }
         return Promise.resolve().then(function () {
             _this._babylonScene = scene;
-            _this._rootUrl = rootUrl;
-            _this._fileName = fileName || "scene";
             _this._loadData(data);
-            return _this._loadAsync(null, function () { return undefined; });
+            return _this._loadAsync(rootUrl, fileName, null, function () { return undefined; });
         });
     };
-    GLTFLoader.prototype._loadAsync = function (nodes, resultFunc) {
+    GLTFLoader.prototype._loadAsync = function (rootUrl, fileName, nodes, resultFunc) {
         var _this = this;
         return Promise.resolve().then(function () {
-            _this._uniqueRootUrl = (_this._rootUrl.indexOf("file:") === -1 && _this._fileName) ? _this._rootUrl : "" + _this._rootUrl + Date.now() + "/";
+            _this._rootUrl = rootUrl;
+            _this._uniqueRootUrl = (!babylonjs_Misc_deferred__WEBPACK_IMPORTED_MODULE_0__["StringTools"].StartsWith(rootUrl, "file:") && fileName) ? rootUrl : "" + rootUrl + Date.now() + "/";
+            _this._fileName = fileName;
             _this._loadExtensions();
             _this._checkExtensions();
             var loadingToReadyCounterName = _glTFFileLoader__WEBPACK_IMPORTED_MODULE_1__["GLTFLoaderState"][_glTFFileLoader__WEBPACK_IMPORTED_MODULE_1__["GLTFLoaderState"].LOADING] + " => " + _glTFFileLoader__WEBPACK_IMPORTED_MODULE_1__["GLTFLoaderState"][_glTFFileLoader__WEBPACK_IMPORTED_MODULE_1__["GLTFLoaderState"].READY];
@@ -4328,7 +4327,15 @@ var GLTFLoader = /** @class */ (function () {
         });
         return sampler._data;
     };
-    GLTFLoader.prototype._loadBufferAsync = function (context, buffer, byteOffset, byteLength) {
+    /**
+     * Loads a glTF buffer.
+     * @param context The context when loading the asset
+     * @param buffer The glTF buffer property
+     * @param byteOffset The byte offset to use
+     * @param byteLength The byte length to use
+     * @returns A promise that resolves with the loaded data when the load is complete
+     */
+    GLTFLoader.prototype.loadBufferAsync = function (context, buffer, byteOffset, byteLength) {
         var extensionPromise = this._extensionsLoadBufferAsync(context, buffer, byteOffset, byteLength);
         if (extensionPromise) {
             return extensionPromise;
@@ -4368,7 +4375,7 @@ var GLTFLoader = /** @class */ (function () {
             return bufferView._data;
         }
         var buffer = ArrayItem.Get(context + "/buffer", this._gltf.buffers, bufferView.buffer);
-        bufferView._data = this._loadBufferAsync("/buffers/" + buffer.index, buffer, (bufferView.byteOffset || 0), bufferView.byteLength);
+        bufferView._data = this.loadBufferAsync("/buffers/" + buffer.index, buffer, (bufferView.byteOffset || 0), bufferView.byteLength);
         return bufferView._data;
     };
     GLTFLoader.prototype._loadAccessorAsync = function (context, accessor, constructor) {
@@ -6292,7 +6299,7 @@ var GLTFValidation = /** @class */ (function () {
                 };
                 worker.addEventListener("error", onError);
                 worker.addEventListener("message", onMessage);
-                worker.postMessage({ id: "init", url: babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__["Tools"].GetAbsoluteUrl(_this.Configuration.url) });
+                worker.postMessage({ id: "init", url: _this.Configuration.url });
                 worker.postMessage({ id: "validate", data: data, rootUrl: rootUrl, fileName: fileName });
             });
         }

dist/preview release/loaders/babylon.glTFFileLoader.js

@@ -2993,44 +2993,42 @@ var EXT_meshopt_compression = /** @class */ (function () {
         this.enabled = loader.isExtensionUsed(NAME);
         this._loader = loader;
         if (this.enabled) {
-            var url = babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__["Tools"].GetAbsoluteUrl(EXT_meshopt_compression.DecoderPath);
-            this._decoder = import(/* webpackIgnore: true */ url).then(function (result) {
+            this._decoderPromise = babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__["Tools"].LoadScriptAsync(EXT_meshopt_compression.DecoderPath).then(function () {
                 // Wait for WebAssembly compilation before resolving promise
-                var MeshoptDecoder = result.MeshoptDecoder;
-                return MeshoptDecoder.ready.then(function () { return MeshoptDecoder; });
+                return MeshoptDecoder.ready;
             });
         }
     }
     /** @hidden */
     EXT_meshopt_compression.prototype.dispose = function () {
+        this._loader = null;
+        delete this._decoderPromise;
     };
     /** @hidden */
     EXT_meshopt_compression.prototype.loadBufferViewAsync = function (context, bufferView) {
-        if (bufferView.extensions && bufferView.extensions[this.name]) {
-            var extensionDef = bufferView.extensions[this.name];
-            if (extensionDef._decoded) {
-                return extensionDef._decoded;
-            }
-            var view = this._loader.loadBufferViewAsync(context, extensionDef);
-            extensionDef._decoded = Promise.all([view, this._decoder]).then(function (res) {
+        var _this = this;
+        return _glTFLoader__WEBPACK_IMPORTED_MODULE_1__["GLTFLoader"].LoadExtensionAsync(context, bufferView, this.name, function (extensionContext, extension) {
+            var bufferViewMeshopt = bufferView;
+            if (bufferViewMeshopt._meshOptData) {
+                return bufferViewMeshopt._meshOptData;
+            }
+            var buffer = _glTFLoader__WEBPACK_IMPORTED_MODULE_1__["ArrayItem"].Get(context + "/buffer", _this._loader.gltf.buffers, extension.buffer);
+            var bufferPromise = _this._loader.loadBufferAsync("/buffers/" + buffer.index, buffer, (extension.byteOffset || 0), extension.byteLength);
+            bufferViewMeshopt._meshOptData = Promise.all([bufferPromise, _this._decoderPromise]).then(function (res) {
                 var source = res[0];
-                var decoder = res[1];
-                var count = extensionDef.count;
-                var stride = extensionDef.byteStride;
+                var count = extension.count;
+                var stride = extension.byteStride;
                 var result = new Uint8Array(new ArrayBuffer(count * stride));
-                decoder.decodeGltfBuffer(result, count, stride, source, extensionDef.mode, extensionDef.filter);
+                MeshoptDecoder.decodeGltfBuffer(result, count, stride, source, extension.mode, extension.filter);
                 return Promise.resolve(result);
             });
-            return extensionDef._decoded;
-        }
-        else {
-            return null;
-        }
+            return bufferViewMeshopt._meshOptData;
+        });
     };
     /**
-     * Path to decoder module; defaults to https://preview.babylonjs.com/meshopt_decoder.module.js
+     * Path to decoder module; defaults to https://preview.babylonjs.com/meshopt_decoder.js
      */
-    EXT_meshopt_compression.DecoderPath = "https://preview.babylonjs.com/meshopt_decoder.module.js";
+    EXT_meshopt_compression.DecoderPath = "https://preview.babylonjs.com/meshopt_decoder.js";
     return EXT_meshopt_compression;
 }());
 
@@ -5424,6 +5422,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 /**
  * Helper class for working with arrays when loading the glTF asset
  */
@@ -5582,10 +5581,9 @@ var GLTFLoader = /** @class */ (function () {
     /** @hidden */
     GLTFLoader.prototype.importMeshAsync = function (meshesNames, scene, forAssetContainer, data, rootUrl, onProgress, fileName) {
         var _this = this;
+        if (fileName === void 0) { fileName = ""; }
         return Promise.resolve().then(function () {
             _this._babylonScene = scene;
-            _this._rootUrl = rootUrl;
-            _this._fileName = fileName || "scene";
             _this._forAssetContainer = forAssetContainer;
             _this._loadData(data);
             var nodes = null;
@@ -5608,7 +5606,7 @@ var GLTFLoader = /** @class */ (function () {
                     return node;
                 });
             }
-            return _this._loadAsync(nodes, function () {
+            return _this._loadAsync(rootUrl, fileName, nodes, function () {
                 return {
                     meshes: _this._getMeshes(),
                     particleSystems: [],
@@ -5624,18 +5622,19 @@ var GLTFLoader = /** @class */ (function () {
     /** @hidden */
     GLTFLoader.prototype.loadAsync = function (scene, data, rootUrl, onProgress, fileName) {
         var _this = this;
+        if (fileName === void 0) { fileName = ""; }
         return Promise.resolve().then(function () {
             _this._babylonScene = scene;
-            _this._rootUrl = rootUrl;
-            _this._fileName = fileName || "scene";
             _this._loadData(data);
-            return _this._loadAsync(null, function () { return undefined; });
+            return _this._loadAsync(rootUrl, fileName, null, function () { return undefined; });
         });
     };
-    GLTFLoader.prototype._loadAsync = function (nodes, resultFunc) {
+    GLTFLoader.prototype._loadAsync = function (rootUrl, fileName, nodes, resultFunc) {
         var _this = this;
         return Promise.resolve().then(function () {
-            _this._uniqueRootUrl = (_this._rootUrl.indexOf("file:") === -1 && _this._fileName) ? _this._rootUrl : "" + _this._rootUrl + Date.now() + "/";
+            _this._rootUrl = rootUrl;
+            _this._uniqueRootUrl = (!babylonjs_Misc_deferred__WEBPACK_IMPORTED_MODULE_0__["StringTools"].StartsWith(rootUrl, "file:") && fileName) ? rootUrl : "" + rootUrl + Date.now() + "/";
+            _this._fileName = fileName;
             _this._loadExtensions();
             _this._checkExtensions();
             var loadingToReadyCounterName = _glTFFileLoader__WEBPACK_IMPORTED_MODULE_1__["GLTFLoaderState"][_glTFFileLoader__WEBPACK_IMPORTED_MODULE_1__["GLTFLoaderState"].LOADING] + " => " + _glTFFileLoader__WEBPACK_IMPORTED_MODULE_1__["GLTFLoaderState"][_glTFFileLoader__WEBPACK_IMPORTED_MODULE_1__["GLTFLoaderState"].READY];
@@ -6680,7 +6679,15 @@ var GLTFLoader = /** @class */ (function () {
         });
         return sampler._data;
     };
-    GLTFLoader.prototype._loadBufferAsync = function (context, buffer, byteOffset, byteLength) {
+    /**
+     * Loads a glTF buffer.
+     * @param context The context when loading the asset
+     * @param buffer The glTF buffer property
+     * @param byteOffset The byte offset to use
+     * @param byteLength The byte length to use
+     * @returns A promise that resolves with the loaded data when the load is complete
+     */
+    GLTFLoader.prototype.loadBufferAsync = function (context, buffer, byteOffset, byteLength) {
         var extensionPromise = this._extensionsLoadBufferAsync(context, buffer, byteOffset, byteLength);
         if (extensionPromise) {
             return extensionPromise;
@@ -6720,7 +6727,7 @@ var GLTFLoader = /** @class */ (function () {
             return bufferView._data;
         }
         var buffer = ArrayItem.Get(context + "/buffer", this._gltf.buffers, bufferView.buffer);
-        bufferView._data = this._loadBufferAsync("/buffers/" + buffer.index, buffer, (bufferView.byteOffset || 0), bufferView.byteLength);
+        bufferView._data = this.loadBufferAsync("/buffers/" + buffer.index, buffer, (bufferView.byteOffset || 0), bufferView.byteLength);
         return bufferView._data;
     };
     GLTFLoader.prototype._loadAccessorAsync = function (context, accessor, constructor) {
@@ -8644,7 +8651,7 @@ var GLTFValidation = /** @class */ (function () {
                 };
                 worker.addEventListener("error", onError);
                 worker.addEventListener("message", onMessage);
-                worker.postMessage({ id: "init", url: babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__["Tools"].GetAbsoluteUrl(_this.Configuration.url) });
+                worker.postMessage({ id: "init", url: _this.Configuration.url });
                 worker.postMessage({ id: "validate", data: data, rootUrl: rootUrl, fileName: fileName });
             });
         }

dist/preview release/loaders/babylonjs.loaders.d.ts

@@ -1477,7 +1477,15 @@ declare module BABYLON.GLTF2 {
          */
         _loadAnimationChannelAsync(context: string, animationContext: string, animation: IAnimation, channel: IAnimationChannel, babylonAnimationGroup: AnimationGroup, animationTargetOverride?: Nullable<IAnimatable>): Promise<void>;
         private _loadAnimationSamplerAsync;
-        private _loadBufferAsync;
+        /**
+         * Loads a glTF buffer.
+         * @param context The context when loading the asset
+         * @param buffer The glTF buffer property
+         * @param byteOffset The byte offset to use
+         * @param byteLength The byte length to use
+         * @returns A promise that resolves with the loaded data when the load is complete
+         */
+        loadBufferAsync(context: string, buffer: IBuffer, byteOffset: number, byteLength: number): Promise<ArrayBufferView>;
         /**
          * Loads a glTF buffer view.
          * @param context The context when loading the asset
@@ -1713,11 +1721,11 @@ declare module BABYLON.GLTF2.Loader.Extensions {
          */
         enabled: boolean;
         /**
-         * Path to decoder module; defaults to https://preview.babylonjs.com/meshopt_decoder.module.js
+         * Path to decoder module; defaults to https://preview.babylonjs.com/meshopt_decoder.js
          */
         static DecoderPath: string;
         private _loader;
-        private _decoder;
+        private _decoderPromise?;
         /** @hidden */
         constructor(loader: GLTFLoader);
         /** @hidden */

dist/preview release/loaders/babylonjs.loaders.js

@@ -4376,44 +4376,42 @@ var EXT_meshopt_compression = /** @class */ (function () {
         this.enabled = loader.isExtensionUsed(NAME);
         this._loader = loader;
         if (this.enabled) {
-            var url = babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__["Tools"].GetAbsoluteUrl(EXT_meshopt_compression.DecoderPath);
-            this._decoder = import(/* webpackIgnore: true */ url).then(function (result) {
+            this._decoderPromise = babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__["Tools"].LoadScriptAsync(EXT_meshopt_compression.DecoderPath).then(function () {
                 // Wait for WebAssembly compilation before resolving promise
-                var MeshoptDecoder = result.MeshoptDecoder;
-                return MeshoptDecoder.ready.then(function () { return MeshoptDecoder; });
+                return MeshoptDecoder.ready;
             });
         }
     }
     /** @hidden */
     EXT_meshopt_compression.prototype.dispose = function () {
+        this._loader = null;
+        delete this._decoderPromise;
     };
     /** @hidden */
     EXT_meshopt_compression.prototype.loadBufferViewAsync = function (context, bufferView) {
-        if (bufferView.extensions && bufferView.extensions[this.name]) {
-            var extensionDef = bufferView.extensions[this.name];
-            if (extensionDef._decoded) {
-                return extensionDef._decoded;
-            }
-            var view = this._loader.loadBufferViewAsync(context, extensionDef);
-            extensionDef._decoded = Promise.all([view, this._decoder]).then(function (res) {
+        var _this = this;
+        return _glTFLoader__WEBPACK_IMPORTED_MODULE_1__["GLTFLoader"].LoadExtensionAsync(context, bufferView, this.name, function (extensionContext, extension) {
+            var bufferViewMeshopt = bufferView;
+            if (bufferViewMeshopt._meshOptData) {
+                return bufferViewMeshopt._meshOptData;
+            }
+            var buffer = _glTFLoader__WEBPACK_IMPORTED_MODULE_1__["ArrayItem"].Get(context + "/buffer", _this._loader.gltf.buffers, extension.buffer);
+            var bufferPromise = _this._loader.loadBufferAsync("/buffers/" + buffer.index, buffer, (extension.byteOffset || 0), extension.byteLength);
+            bufferViewMeshopt._meshOptData = Promise.all([bufferPromise, _this._decoderPromise]).then(function (res) {
                 var source = res[0];
-                var decoder = res[1];
-                var count = extensionDef.count;
-                var stride = extensionDef.byteStride;
+                var count = extension.count;
+                var stride = extension.byteStride;
                 var result = new Uint8Array(new ArrayBuffer(count * stride));
-                decoder.decodeGltfBuffer(result, count, stride, source, extensionDef.mode, extensionDef.filter);
+                MeshoptDecoder.decodeGltfBuffer(result, count, stride, source, extension.mode, extension.filter);
                 return Promise.resolve(result);
             });
-            return extensionDef._decoded;
-        }
-        else {
-            return null;
-        }
+            return bufferViewMeshopt._meshOptData;
+        });
     };
     /**
-     * Path to decoder module; defaults to https://preview.babylonjs.com/meshopt_decoder.module.js
+     * Path to decoder module; defaults to https://preview.babylonjs.com/meshopt_decoder.js
      */
-    EXT_meshopt_compression.DecoderPath = "https://preview.babylonjs.com/meshopt_decoder.module.js";
+    EXT_meshopt_compression.DecoderPath = "https://preview.babylonjs.com/meshopt_decoder.js";
     return EXT_meshopt_compression;
 }());
 
@@ -6807,6 +6805,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 /**
  * Helper class for working with arrays when loading the glTF asset
  */
@@ -6965,10 +6964,9 @@ var GLTFLoader = /** @class */ (function () {
     /** @hidden */
     GLTFLoader.prototype.importMeshAsync = function (meshesNames, scene, forAssetContainer, data, rootUrl, onProgress, fileName) {
         var _this = this;
+        if (fileName === void 0) { fileName = ""; }
         return Promise.resolve().then(function () {
             _this._babylonScene = scene;
-            _this._rootUrl = rootUrl;
-            _this._fileName = fileName || "scene";
             _this._forAssetContainer = forAssetContainer;
             _this._loadData(data);
             var nodes = null;
@@ -6991,7 +6989,7 @@ var GLTFLoader = /** @class */ (function () {
                     return node;
                 });
             }
-            return _this._loadAsync(nodes, function () {
+            return _this._loadAsync(rootUrl, fileName, nodes, function () {
                 return {
                     meshes: _this._getMeshes(),
                     particleSystems: [],
@@ -7007,18 +7005,19 @@ var GLTFLoader = /** @class */ (function () {
     /** @hidden */
     GLTFLoader.prototype.loadAsync = function (scene, data, rootUrl, onProgress, fileName) {
         var _this = this;
+        if (fileName === void 0) { fileName = ""; }
         return Promise.resolve().then(function () {
             _this._babylonScene = scene;
-            _this._rootUrl = rootUrl;
-            _this._fileName = fileName || "scene";
             _this._loadData(data);
-            return _this._loadAsync(null, function () { return undefined; });
+            return _this._loadAsync(rootUrl, fileName, null, function () { return undefined; });
         });
     };
-    GLTFLoader.prototype._loadAsync = function (nodes, resultFunc) {
+    GLTFLoader.prototype._loadAsync = function (rootUrl, fileName, nodes, resultFunc) {
         var _this = this;
         return Promise.resolve().then(function () {
-            _this._uniqueRootUrl = (_this._rootUrl.indexOf("file:") === -1 && _this._fileName) ? _this._rootUrl : "" + _this._rootUrl + Date.now() + "/";
+            _this._rootUrl = rootUrl;
+            _this._uniqueRootUrl = (!babylonjs_Misc_deferred__WEBPACK_IMPORTED_MODULE_0__["StringTools"].StartsWith(rootUrl, "file:") && fileName) ? rootUrl : "" + rootUrl + Date.now() + "/";
+            _this._fileName = fileName;
             _this._loadExtensions();
             _this._checkExtensions();
             var loadingToReadyCounterName = _glTFFileLoader__WEBPACK_IMPORTED_MODULE_1__["GLTFLoaderState"][_glTFFileLoader__WEBPACK_IMPORTED_MODULE_1__["GLTFLoaderState"].LOADING] + " => " + _glTFFileLoader__WEBPACK_IMPORTED_MODULE_1__["GLTFLoaderState"][_glTFFileLoader__WEBPACK_IMPORTED_MODULE_1__["GLTFLoaderState"].READY];
@@ -8063,7 +8062,15 @@ var GLTFLoader = /** @class */ (function () {
         });
         return sampler._data;
     };
-    GLTFLoader.prototype._loadBufferAsync = function (context, buffer, byteOffset, byteLength) {
+    /**
+     * Loads a glTF buffer.
+     * @param context The context when loading the asset
+     * @param buffer The glTF buffer property
+     * @param byteOffset The byte offset to use
+     * @param byteLength The byte length to use
+     * @returns A promise that resolves with the loaded data when the load is complete
+     */
+    GLTFLoader.prototype.loadBufferAsync = function (context, buffer, byteOffset, byteLength) {
         var extensionPromise = this._extensionsLoadBufferAsync(context, buffer, byteOffset, byteLength);
         if (extensionPromise) {
             return extensionPromise;
@@ -8103,7 +8110,7 @@ var GLTFLoader = /** @class */ (function () {
             return bufferView._data;
         }
         var buffer = ArrayItem.Get(context + "/buffer", this._gltf.buffers, bufferView.buffer);
-        bufferView._data = this._loadBufferAsync("/buffers/" + buffer.index, buffer, (bufferView.byteOffset || 0), bufferView.byteLength);
+        bufferView._data = this.loadBufferAsync("/buffers/" + buffer.index, buffer, (bufferView.byteOffset || 0), bufferView.byteLength);
         return bufferView._data;
     };
     GLTFLoader.prototype._loadAccessorAsync = function (context, accessor, constructor) {
@@ -10027,7 +10034,7 @@ var GLTFValidation = /** @class */ (function () {
                 };
                 worker.addEventListener("error", onError);
                 worker.addEventListener("message", onMessage);
-                worker.postMessage({ id: "init", url: babylonjs_Misc_tools__WEBPACK_IMPORTED_MODULE_0__["Tools"].GetAbsoluteUrl(_this.Configuration.url) });
+                worker.postMessage({ id: "init", url: _this.Configuration.url });
                 worker.postMessage({ id: "validate", data: data, rootUrl: rootUrl, fileName: fileName });
             });
         }

dist/preview release/loaders/babylonjs.loaders.module.d.ts

@@ -1385,7 +1385,7 @@ declare module "babylonjs-loaders/glTF/2.0/glTFLoader" {
     import { ISceneLoaderAsyncResult, ISceneLoaderProgressEvent } from "babylonjs/Loading/sceneLoader";
     import { Scene } from "babylonjs/scene";
     import { IProperty } from "babylonjs-gltf2interface";
-    import { IGLTF, ISampler, INode, IScene, IMesh, IAccessor, ICamera, IAnimation, IAnimationChannel, IBufferView, IMaterial, ITextureInfo, ITexture, IImage, IMeshPrimitive, IArrayItem as IArrItem } from "babylonjs-loaders/glTF/2.0/glTFLoaderInterfaces";
+    import { IGLTF, ISampler, INode, IScene, IMesh, IAccessor, ICamera, IAnimation, IAnimationChannel, IBuffer, IBufferView, IMaterial, ITextureInfo, ITexture, IImage, IMeshPrimitive, IArrayItem as IArrItem } from "babylonjs-loaders/glTF/2.0/glTFLoaderInterfaces";
     import { IGLTFLoaderExtension } from "babylonjs-loaders/glTF/2.0/glTFLoaderExtension";
     import { IGLTFLoader, GLTFFileLoader, GLTFLoaderState, IGLTFLoaderData } from "babylonjs-loaders/glTF/glTFFileLoader";
     import { IAnimatable } from 'babylonjs/Animations/animatable.interface';
@@ -1562,7 +1562,15 @@ declare module "babylonjs-loaders/glTF/2.0/glTFLoader" {
          */
         _loadAnimationChannelAsync(context: string, animationContext: string, animation: IAnimation, channel: IAnimationChannel, babylonAnimationGroup: AnimationGroup, animationTargetOverride?: Nullable<IAnimatable>): Promise<void>;
         private _loadAnimationSamplerAsync;
-        private _loadBufferAsync;
+        /**
+         * Loads a glTF buffer.
+         * @param context The context when loading the asset
+         * @param buffer The glTF buffer property
+         * @param byteOffset The byte offset to use
+         * @param byteLength The byte length to use
+         * @returns A promise that resolves with the loaded data when the load is complete
+         */
+        loadBufferAsync(context: string, buffer: IBuffer, byteOffset: number, byteLength: number): Promise<ArrayBufferView>;
         /**
          * Loads a glTF buffer view.
          * @param context The context when loading the asset
@@ -1814,11 +1822,11 @@ declare module "babylonjs-loaders/glTF/2.0/Extensions/EXT_meshopt_compression" {
          */
         enabled: boolean;
         /**
-         * Path to decoder module; defaults to https://preview.babylonjs.com/meshopt_decoder.module.js
+         * Path to decoder module; defaults to https://preview.babylonjs.com/meshopt_decoder.js
          */
         static DecoderPath: string;
         private _loader;
-        private _decoder;
+        private _decoderPromise?;
         /** @hidden */
         constructor(loader: GLTFLoader);
         /** @hidden */
@@ -4385,7 +4393,15 @@ declare module BABYLON.GLTF2 {
          */
         _loadAnimationChannelAsync(context: string, animationContext: string, animation: IAnimation, channel: IAnimationChannel, babylonAnimationGroup: AnimationGroup, animationTargetOverride?: Nullable<IAnimatable>): Promise<void>;
         private _loadAnimationSamplerAsync;
-        private _loadBufferAsync;
+        /**
+         * Loads a glTF buffer.
+         * @param context The context when loading the asset
+         * @param buffer The glTF buffer property
+         * @param byteOffset The byte offset to use
+         * @param byteLength The byte length to use
+         * @returns A promise that resolves with the loaded data when the load is complete
+         */
+        loadBufferAsync(context: string, buffer: IBuffer, byteOffset: number, byteLength: number): Promise<ArrayBufferView>;
         /**
          * Loads a glTF buffer view.
          * @param context The context when loading the asset
@@ -4621,11 +4637,11 @@ declare module BABYLON.GLTF2.Loader.Extensions {
          */
         enabled: boolean;
         /**
-         * Path to decoder module; defaults to https://preview.babylonjs.com/meshopt_decoder.module.js
+         * Path to decoder module; defaults to https://preview.babylonjs.com/meshopt_decoder.js
          */
         static DecoderPath: string;
         private _loader;
-        private _decoder;
+        private _decoderPromise?;
         /** @hidden */
         constructor(loader: GLTFLoader);
         /** @hidden */

dist/preview release/loaders/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-loaders",
     "description": "The Babylon.js file loaders library is an extension you can use to load different 3D file types into a Babylon scene.",
-    "version": "5.0.0-alpha.0",
+    "version": "5.0.0-alpha.2",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,8 +28,8 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs-gltf2interface": "5.0.0-alpha.0",
-        "babylonjs": "5.0.0-alpha.0"
+        "babylonjs-gltf2interface": "5.0.0-alpha.2",
+        "babylonjs": "5.0.0-alpha.2"
     },
     "engines": {
         "node": "*"

dist/preview release/materialsLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-materials",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "5.0.0-alpha.0",
+    "version": "5.0.0-alpha.2",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -28,7 +28,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs": "5.0.0-alpha.0"
+        "babylonjs": "5.0.0-alpha.2"
     },
     "engines": {
         "node": "*"

dist/preview release/meshopt_decoder.module.js

@@ -110,4 +110,14 @@ var MeshoptDecoder = (function() {
 	};
 })();
 
-export { MeshoptDecoder };
+// UMD-style export
+if (typeof exports === 'object' && typeof module === 'object')
+	module.exports = MeshoptDecoder;
+else if (typeof define === 'function' && define['amd'])
+	define([], function() {
+		return MeshoptDecoder;
+	});
+else if (typeof exports === 'object')
+	exports["MeshoptDecoder"] = MeshoptDecoder;
+else
+	(typeof self !== 'undefined' ? self : this).MeshoptDecoder = MeshoptDecoder;