GitHub - mrdoob/three.wasm: 8x Faster JavaScript 3D Library.
Key Points
- 1three.wasm is an experimental project that reimagines Three.js by rewriting it entirely in WebAssembly, aiming for uncompromising performance.
- 2This initiative significantly reduces the library size to just 10KB, eliminates JavaScript overheads like garbage collection, and achieves over 480 frames per second for 3D graphics.
- 3Although currently demonstrating only a spinning cube, it showcases the potential of WebAssembly for raw, native-speed computations in rendering, humorously suggesting migration for production apps.
The three.wasm project presents a radical re-imagination of the Three.js library, proposing its complete rewrite in WebAssembly (Wasm) to achieve uncompromised performance and efficiency for 3D graphics rendering in web environments. The core premise is to overcome the inherent limitations of JavaScript, such as garbage collection pauses and Just-In-Time (JIT) compilation warm-up times, by leveraging WebAssembly's low-level, high-performance characteristics.
The core methodology revolves around compiling the entire 3D rendering engine into a compact WebAssembly binary. This approach aims to deliver several key advantages:
- Extreme Miniaturization: The project claims a total binary size of 10KB, a significant reduction from the typical 175KB of a full JavaScript-based Three.js build. This dramatically decreases load times and bandwidth consumption.
- Zero Dependencies: The WebAssembly module is asserted to be entirely self-contained, requiring no external dependencies, not even JavaScript itself for its core functionality.
- Enhanced Performance: By operating at a lower level than JavaScript,
three.wasmis designed to eliminate common performance bottlenecks. Specifically, it boasts the eradication of garbage collection pauses and JIT compiler warm-up phases, leading to smoother, more consistent frame rates. The document claims over 480 frames per second (fps) on a simple spinning cube. - Native Speed Computations: Critical operations like matrix mathematics are executed at near-native CPU speeds, contributing to overall rendering efficiency.
- WebGL2 Integration: The rendering pipeline is built upon WebGL2, allowing access to advanced graphics capabilities and optimized rendering techniques.
From a technical implementation standpoint, the project exposes a minimal, highly performant Application Programming Interface (API) through the WebAssembly instance.exports object. The interaction model is demonstrated through a JavaScript snippet:
- The WebAssembly module is asynchronously loaded, compiled, and instantiated using . The
envobject provides necessary imports for the Wasm module, such as anabortfunction for error handling. - Upon successful instantiation, two primary functions are exposed:
instance.exports.init(): This function is responsible for initializing the WebGL context and any necessary rendering resources.instance.exports.update(time, aspect): This function handles the per-frame rendering logic, taking the currenttime(likely for animation or scene updates) and theaspectratio of the viewport as parameters to ensure correct projection.
The project emphasizes WebAssembly's strongly typed instruction set (i32, i64, f32, f64), contrasting it with JavaScript's dynamic typing, as a contributor to predictable performance and fewer runtime errors. While presented with a humorous and somewhat hyperbolic tone, the underlying technical claims align with the theoretical benefits of WebAssembly for high-performance web graphics. The project's archived status on April 2, 2026, further contributes to its unique nature.