Merge pull request #9368 from zeux/meshopt-compression

Implement support for EXT_meshopt_compression

Playground/index-local.html

@@ -59,8 +59,18 @@
             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"
+                    };
+                    BABYLON.GLTFValidation.Configuration = {
+                        url: "../dist/preview%20release/gltf_validator.js"
+                    };
+                    BABYLON.GLTF2.Loader.Extensions.EXT_meshopt_compression.DecoderPath =
+                        "../dist/preview%20release/meshopt_decoder.module.js";
                 });
         </script>
     </body>
 
-</html>
+</html>

dist/preview release/what's new.md

@@ -11,6 +11,10 @@
 
 - Added static CenterToRef for vectors 2/3/4  ([aWeirdo](https://github.com/aWeirdo))
 
+### Loaders
+
+- Added support for EXT_meshopt_compression for glTF loader. ([zeux](https://github.com/zeux))
+
 ### Materials
 
 - Added an `OcclusionMaterial` to simplify depth-only rendering of geometry ([rgerd](https://github.com/rgerd))

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

@@ -0,0 +1,82 @@
+import { Nullable } from "babylonjs/types";
+import { Tools } from "babylonjs/Misc/tools";
+import { IGLTFLoaderExtension } from "../glTFLoaderExtension";
+import { GLTFLoader } from "../glTFLoader";
+import { IBufferView } from "../glTFLoaderInterfaces";
+
+const NAME = "EXT_meshopt_compression";
+
+/**
+ * [Specification](https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Vendor/EXT_meshopt_compression)
+ *
+ * This extension uses a WebAssembly decoder module from https://github.com/zeux/meshoptimizer/tree/master/js
+ */
+export class EXT_meshopt_compression implements IGLTFLoaderExtension {
+    /**
+     * The name of this extension.
+     */
+    public readonly name = NAME;
+
+    /**
+     * Defines whether this extension is enabled.
+     */
+    public enabled: boolean;
+
+    /**
+     * Path to decoder module; defaults to https://preview.babylonjs.com/meshopt_decoder.module.js
+     */
+    public static DecoderPath: string = "https://preview.babylonjs.com/meshopt_decoder.module.js";
+
+    private _loader: GLTFLoader;
+    private _decoder: Promise<any>;
+
+    /** @hidden */
+    constructor(loader: GLTFLoader) {
+        this.enabled = loader.isExtensionUsed(NAME);
+        this._loader = loader;
+
+        if (this.enabled) {
+            var url = Tools.GetAbsoluteUrl(EXT_meshopt_compression.DecoderPath);
+
+            this._decoder = import(/* webpackIgnore: true */ url).then(function (result) {
+                // Wait for WebAssembly compilation before resolving promise
+                var MeshoptDecoder = result.MeshoptDecoder;
+                return MeshoptDecoder.ready.then(() => MeshoptDecoder);
+            });
+        }
+    }
+
+    /** @hidden */
+    public dispose() {
+    }
+
+    /** @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;
+            }
+
+            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);
+
+                return Promise.resolve(result);
+            });
+
+            return extensionDef._decoded;
+        } else {
+            return null;
+        }
+    }
+}
+
+GLTFLoader.RegisterExtension(NAME, (loader) => new EXT_meshopt_compression(loader));

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

@@ -1,5 +1,6 @@
 export * from "./EXT_lights_image_based";
 export * from "./EXT_mesh_gpu_instancing";
+export * from "./EXT_meshopt_compression";
 export * from "./EXT_texture_webp";
 export * from "./KHR_draco_mesh_compression";
 export * from "./KHR_lights_punctual";

localDev/index-views.html

@@ -118,6 +118,8 @@
                 BABYLON.GLTFValidation.Configuration = {
                     url: "../dist/preview%20release/gltf_validator.js"
                 };
+                BABYLON.GLTF2.Loader.Extensions.EXT_meshopt_compression.DecoderPath =
+                    "../dist/preview%20release/meshopt_decoder.module.js";
 
                 if (BABYLON.Engine.isSupported()) {
                     if (typeof createEngine !== "undefined") {
@@ -179,4 +181,4 @@
     </script>
 </body>
 
-</html>
+</html>

localDev/index.html

@@ -87,6 +87,8 @@
                 BABYLON.GLTFValidation.Configuration = {
                     url: "../dist/preview%20release/gltf_validator.js"
                 };
+                BABYLON.GLTF2.Loader.Extensions.EXT_meshopt_compression.DecoderPath =
+                    "../dist/preview%20release/meshopt_decoder.module.js";
 
                 if (BABYLON.Engine.isSupported()) {
                     if (typeof createEngine !== "undefined") {
@@ -151,4 +153,4 @@
     </script>
 </body>
 
-</html>
+</html>

sandbox/public/index-local.html

@@ -43,8 +43,10 @@
                 BABYLON.GLTFValidation.Configuration = {
                     url: "../../dist/preview%20release/gltf_validator.js"
                 };
+                BABYLON.GLTF2.Loader.Extensions.EXT_meshopt_compression.DecoderPath =
+                    "../../dist/preview%20release/meshopt_decoder.module.js";
             });
     </script>
 </body>
 
-</html>
+</html>