Using WebAssembly for Efficient 3D Model Decoding in Web Applications

Introduction: In Web 3D rendering, detailed 3D models increase file size, so compression algorithms like Draco and Meshopt are applied to glTF files, requiring efficient decoding in the browser; WebAssembly provides high-performance CPU-intensive decoding without blocking the main thread, especially when combined with Web Workers.

Background: Porsche's live gift feature allows users to customize gift effects; the custom rendering engine initially loaded JSON model files, which were large and lacked standard compression; adopting glTF format with Draco or Meshopt compression reduces package size while maintaining quality.

glTF File and Compression Algorithms: glTF consists of a JSON descriptor (.gltf/.glb) and binary data (.bin); compression is applied to the binary buffer views via extensions KHR_draco_mesh_compression (Draco) and EXT_meshopt_compression (Meshopt). Draco, from Google, compresses geometry attributes (position, normal, UV, etc.) and offers a JavaScript and WebAssembly decoder with ~2× better performance in WASM. Meshopt, a community project, compresses vertex, index, morph target, and animation data, providing SIMD and non‑SIMD WASM decoders.

Decoding Framework: Each buffer view can be independently compressed; the glTF loader identifies compression type and selects the appropriate decoder; decoding can be parallelized across Web Workers. The overall architecture involves detecting compression, invoking the decoder (Draco or Meshopt) to produce geometry data, which the loader converts into engine objects (Mesh, Material, etc.) for rendering.

Draco WebAssembly Decoder: The official package provides draco_decoder.js, draco_decoder.wasm, and a JavaScript wrapper that asynchronously loads the suitable decoder based on WASM support. Usage example: DracoDecoderModule().then((decoderModule) => { const byteArray = new Uint8Array([0]); const buffer = new decoderModule.DecoderBuffer(); buffer.Init(byteArray, byteArray.length); const decoder = new decoderModule.Decoder(); const geometryType = decoder.GetEncodedGeometryType(buffer); let outputGeometry; let status; if (geometryType == decoderModule.TRIANGULAR_MESH) { outputGeometry = new decoderModule.Mesh(); status = decoder.DecodeBufferToMesh(buffer, outputGeometry); } else { outputGeometry = new decoderModule.PointCloud(); status = decoder.DecodeBufferToPointCloud(buffer, outputGeometry); } decoderModule.destroy(outputGeometry); decoderModule.destroy(decoder); decoderModule.destroy(buffer); });

Meshopt WebAssembly Decoder: First, SIMD support is detected using a small WASM snippet validated via WebAssembly.validate or the wasm-feature-detect library. Example detection code: (module (func (result v128) i32.const 0 i8x16.splat i8x16.popcnt)) . Then a WebAssembly instance is created via WebAssembly.instantiate or Module/Instance. The decoder exposes functions such as decodeGltfBufferAsync, which can optionally use Web Workers for parallel decoding. Worker initialization creates a blob containing the decoder instantiation and message handling, then spawns multiple workers to offload decoding.

Benefits: In Porsche's live gift scenario, four model variants were compared: JSON+bin, raw glTF, glTF‑draco, and glTF‑meshopt. Compressed glTF‑draco and glTF‑meshopt reduced ZIP package size to 1.8 MB and 1.9 MB respectively (vs. 2.9 MB for JSON+bin), giving compression ratios of 62 % and 65.5 %. Load‑time tests on iPhone12 showed glTF‑draco suffered from high variance (1043‑5089 ms) due to large WASM decoder size, while glTF‑meshopt offered stable, lower latency (≈ 2656 ms faster than draco) with only a 0.1 MB size increase. Consequently, glTF‑meshopt was chosen as the optimal balance of size, compression ratio, and decoding speed.

Conclusion: WebAssembly enables high‑performance, non‑blocking decoding of compressed 3D models in web applications. As WASM matures with SIMD, multithreading, and bulk memory, its role in 3D web experiences will grow.