meshopt fixes and misc cleanup

Playground/index-local.html

@@ -62,19 +62,19 @@
             }
 
             // 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"),

Viewer/tests/validation/validation.js

@@ -282,18 +282,34 @@ 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")
     };
 
     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/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;

loaders/src/glTF/2.0/Extensions/EXT_meshopt_compression.ts

@@ -1,11 +1,18 @@
 import { Nullable } from "babylonjs/types";
 import { Tools } from "babylonjs/Misc/tools";
 import { IGLTFLoaderExtension } from "../glTFLoaderExtension";
-import { GLTFLoader } from "../glTFLoader";
+import { ArrayItem, GLTFLoader } from "../glTFLoader";
 import { IBufferView } from "../glTFLoaderInterfaces";
+import { IEXTMeshoptCompression } from "babylonjs-gltf2interface";
 
 const NAME = "EXT_meshopt_compression";
 
+declare var MeshoptDecoder: any;
+
+interface IBufferViewMeshopt extends IBufferView {
+    _meshOptData?: Promise<ArrayBufferView>;
+}
+
 /**
  * [Specification](https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Vendor/EXT_meshopt_compression)
  *
@@ -23,12 +30,12 @@ export class EXT_meshopt_compression implements IGLTFLoaderExtension {
     public 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
      */
-    public static DecoderPath: string = "https://preview.babylonjs.com/meshopt_decoder.module.js";
+    public static DecoderPath: string = "https://preview.babylonjs.com/meshopt_decoder.js";
 
     private _loader: GLTFLoader;
-    private _decoder: Promise<any>;
+    private _decoderPromise?: Promise<any>;
 
     /** @hidden */
     constructor(loader: GLTFLoader) {
@@ -36,46 +43,41 @@ export class EXT_meshopt_compression implements IGLTFLoaderExtension {
         this._loader = loader;
 
         if (this.enabled) {
-            var url = Tools.GetAbsoluteUrl(EXT_meshopt_compression.DecoderPath);
-
-            this._decoder = import(/* webpackIgnore: true */ url).then(function (result) {
+            this._decoderPromise = Tools.LoadScriptAsync(EXT_meshopt_compression.DecoderPath).then(() => {
                 // Wait for WebAssembly compilation before resolving promise
-                var MeshoptDecoder = result.MeshoptDecoder;
-                return MeshoptDecoder.ready.then(() => MeshoptDecoder);
+                return MeshoptDecoder.ready;
             });
         }
     }
 
     /** @hidden */
     public dispose() {
+        (this._loader as any) = null;
+        delete this._decoderPromise;
     }
 
     /** @hidden */
     public loadBufferViewAsync(context: string, bufferView: IBufferView): Nullable<Promise<ArrayBufferView>> {
-        if (bufferView.extensions && bufferView.extensions[this.name]) {
-            var extensionDef = bufferView.extensions[this.name];
-            if (extensionDef._decoded) {
-                return extensionDef._decoded;
+        return GLTFLoader.LoadExtensionAsync<IEXTMeshoptCompression, ArrayBufferView>(context, bufferView, this.name, (extensionContext, extension) => {
+            const bufferViewMeshopt = bufferView as IBufferViewMeshopt;
+            if (bufferViewMeshopt._meshOptData) {
+                return bufferViewMeshopt._meshOptData;
             }
 
-            var view = this._loader.loadBufferViewAsync(context, extensionDef);
-
-            extensionDef._decoded = Promise.all([view, this._decoder]).then(function (res) {
-                var source = res[0] as Uint8Array;
-                var decoder = res[1];
-                var count = extensionDef.count;
-                var stride = extensionDef.byteStride;
-                var result = new Uint8Array(new ArrayBuffer(count * stride));
-
-                decoder.decodeGltfBuffer(result, count, stride, source, extensionDef.mode, extensionDef.filter);
+            const buffer = ArrayItem.Get(`${context}/buffer`, this._loader.gltf.buffers, extension.buffer);
+            const bufferPromise = this._loader.loadBufferAsync(`/buffers/${buffer.index}`, buffer, (extension.byteOffset || 0), extension.byteLength);
 
+            bufferViewMeshopt._meshOptData = Promise.all([bufferPromise, this._decoderPromise]).then((res) => {
+                const source = res[0] as Uint8Array;
+                const count = extension.count;
+                const stride = extension.byteStride;
+                const result = new Uint8Array(new ArrayBuffer(count * stride));
+                MeshoptDecoder.decodeGltfBuffer(result, count, stride, source, extension.mode, extension.filter);
                 return Promise.resolve(result);
             });
 
-            return extensionDef._decoded;
-        } else {
-            return null;
-        }
+            return bufferViewMeshopt._meshOptData;
+        });
     }
 }
 

loaders/src/glTF/2.0/glTFLoader.ts

@@ -1479,7 +1479,15 @@ export class GLTFLoader implements IGLTFLoader {
         return sampler._data;
     }
 
-    private _loadBufferAsync(context: string, buffer: IBuffer, byteOffset: number, byteLength: number): Promise<ArrayBufferView> {
+    /**
+     * 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
+     */
+    public loadBufferAsync(context: string, buffer: IBuffer, byteOffset: number, byteLength: number): Promise<ArrayBufferView> {
         const extensionPromise = this._extensionsLoadBufferAsync(context, buffer, byteOffset, byteLength);
         if (extensionPromise) {
             return extensionPromise;
@@ -1525,7 +1533,7 @@ export class GLTFLoader implements IGLTFLoader {
         }
 
         const 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;
     }

loaders/src/glTF/glTFValidation.ts

@@ -131,7 +131,7 @@ export class GLTFValidation {
                 worker.addEventListener("error", onError);
                 worker.addEventListener("message", onMessage);
 
-                worker.postMessage({ id: "init", url: Tools.GetAbsoluteUrl(this.Configuration.url) });
+                worker.postMessage({ id: "init", url: this.Configuration.url });
                 worker.postMessage({ id: "validate", data: data, rootUrl: rootUrl, fileName: fileName });
             });
         }

localDev/index-views.html

@@ -117,15 +117,15 @@
             .require(indexjs)
             .load(function() {
                 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"),

localDev/index.html

@@ -86,15 +86,15 @@
             .require(indexjs)
             .load(function() {
                 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"),

sandbox/public/index-local.html

@@ -42,15 +42,15 @@
             .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"),

src/Meshes/Compression/dracoCompression.ts

@@ -164,14 +164,6 @@ function worker(): void {
     };
 }
 
-function getAbsoluteUrl<T>(url: T): T | string {
-    if (typeof document !== "object" || typeof url !== "string") {
-        return url;
-    }
-
-    return Tools.GetAbsoluteUrl(url);
-}
-
 /**
  * Configuration for Draco compression
  */
@@ -295,7 +287,7 @@ export class DracoCompression implements IDisposable {
         const decoderInfo: { url: string | undefined, wasmBinaryPromise: Promise<ArrayBuffer | string | undefined> } =
             (decoder.wasmUrl && decoder.wasmBinaryUrl && typeof WebAssembly === "object") ? {
                 url: decoder.wasmUrl,
-                wasmBinaryPromise: Tools.LoadFileAsync(getAbsoluteUrl(decoder.wasmBinaryUrl))
+                wasmBinaryPromise: Tools.LoadFileAsync(decoder.wasmBinaryUrl)
             } : {
                 url: decoder.fallbackUrl,
                 wasmBinaryPromise: Promise.resolve(undefined)
@@ -329,7 +321,7 @@ export class DracoCompression implements IDisposable {
                         worker.postMessage({
                             id: "init",
                             decoder: {
-                                url: getAbsoluteUrl(decoderInfo.url),
+                                url: decoderInfo.url,
                                 wasmBinary: decoderWasmBinary,
                             }
                         });

tests/validation/config.json

@@ -1,61 +1,61 @@
 {
     "root": "https://cdn.babylonjs.com",
-    "tests": [   
+    "tests": [
         {
             "title": "Sprites",
             "playgroundId": "#ZX8DJ3#1",
             "referenceImage": "Sprites.png"
         },
         {
-            "title": "Procedural texture with NME",       
+            "title": "Procedural texture with NME",
             "renderCount": 10,
-            "playgroundId": "#8S19ZC#1",            
+            "playgroundId": "#8S19ZC#1",
             "referenceImage": "procedural_nme.png"
-        },   
+        },
         {
             "title": "EXT_texture_webp",
-            "playgroundId": "#LSAUH2#2",            
+            "playgroundId": "#LSAUH2#2",
             "referenceImage": "webp.png"
-        }, 
+        },
         {
             "title": "CSGVertColor",
-            "playgroundId": "#R0H1IX#0",            
+            "playgroundId": "#R0H1IX#0",
             "referenceImage": "csgVertColor.png"
         },
         {
             "title": "Particle subemitters",
-            "playgroundId": "#1LK70I#20",            
+            "playgroundId": "#1LK70I#20",
             "renderCount": 50,
             "referenceImage": "subemitters.png"
-        },    
+        },
         {
             "title": "Black and White post-process",
             "playgroundId": "#N55Q2M#0",
             "referenceImage": "bwpp.png"
-        },           
+        },
         {
             "title": "Sprite maps",
             "playgroundId": "#ARLADE#23",
             "referenceImage": "sprite-maps.png"
-        },              
+        },
         {
             "title": "Point light shadows",
             "playgroundId": "#U2F7P9#4",
             "referenceImage": "point-light-shadows.png"
-        },             
+        },
         {
             "title": "Node material #0",
             "playgroundId": "#M5VQE9#20",
             "referenceImage": "node-material0.png",
             "renderCount": 5,
             "excludeFromAutomaticTesting": true
-        },    
+        },
         {
             "title": "Node material #1",
             "playgroundId": "#QJ71C6#1",
             "referenceImage": "node-material1.png",
             "renderCount": 20
-        },     
+        },
         {
             "title": "Node material #2",
             "playgroundId": "#WYM31D#4",
@@ -65,27 +65,27 @@
             "title": "Node material #3",
             "playgroundId": "#LWGVT0#2",
             "referenceImage": "node-material3.png"
-        },     
+        },
         {
             "title": "Node material #4",
             "playgroundId": "#ZYGRII#1",
             "referenceImage": "node-material4.png"
-        },        
+        },
         {
             "title": "Node material #5",
             "playgroundId": "#V8VH7B#0",
             "referenceImage": "node-material5.png"
-        },                     
+        },
         {
             "title": "Node material #6",
             "playgroundId": "#2XY3Z4#1",
             "referenceImage": "node-material6.png"
-        },    
+        },
         {
             "title": "Node material PBR 1",
             "playgroundId": "#D8AK3Z#17",
             "referenceImage": "node-material-pbr-1.png"
-        },    
+        },
         {
             "title": "Basis loader",
             "playgroundId": "#4RN0VF#0",
@@ -652,6 +652,11 @@
             "referenceImage": "gltfBuggyDraco.png"
         },
         {
+            "title": "GLTF Buggy with Meshopt Compression",
+            "playgroundId": "#CIYTF6#0",
+            "referenceImage": "gltfBuggyMeshopt.png"
+        },
+        {
             "title": "GLTF BoomBox with Unlit Material",
             "playgroundId": "#GYM97C#2",
             "referenceImage": "gltfUnlit.png"
@@ -764,7 +769,7 @@
             "playgroundId": "#QI7TL3#18",
             "referenceImage": "pbr_codecoverage3.png"
         },
-                {
+        {
             "title": "Texture cache",
             "playgroundId": "#20OAV9#237",
             "referenceImage": "texture cache.png"
@@ -955,7 +960,9 @@
             "title": "Shadows CSM and LODs",
             "playgroundId": "#24HWT9#0",
             "referenceImage": "shadowscsmandlod.png",
-            "excludedEngines": ["webgl1"]
+            "excludedEngines": [
+                "webgl1"
+            ]
         },
         {
             "title": "Glow layer and LODs",

tests/validation/validation.js

@@ -365,18 +365,34 @@ function runTest(index, done) {
 
 }
 
+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")
     };
 
     canvas = document.createElement("canvas");