WebGPU × WebAssembly rendering and computing engine for scientific workloads in the browser
https://zushah.github.io/WasmGPU
-
⚙️ WebGPU engine in TypeScript.
- 🌐 Scene & assets: Meshes, pointclouds, glyphfields, nodelinks, splatfields, latticespaces, data materials, lights, cameras, glTF 2.0 assets with support for over a dozen extensions, mipmapped texture sampling, transparency including transmission rendering, animations, 4- or 8-influence skinning, and rich built-in geometry including cartesian and parametric curves and surfaces for mathematics.
- 🖼️ Rendering architecture: WebAssembly-powered frustum culling, previous-frame occlusion culling, opaque draw batching with automatic instanced rendering, GPU sorting for order-dependent scientific primitives, optional subpixel morphological anti-aliasing, configurable canvas format selection, and GPU ID-pass picking across meshes and scientific primitives for individual or regional queries with typed results.
- 🧭 Interaction, overlays, & diagnostics: Orbit, trackball, and fly controls for orthographic and perspective cameras with bounds-based scene framing and inspection views, plus a composable overlay and annotation toolkit with triads, grids, legends, markers, probes, and measurements.
- 🧮 Compute & interop: Compute subsystem with reusable pipelines and buffers, an extensive kernels library spanning parallel primitives, sorting, scaling, statistics, and linear algebra, an ndarray abstraction, asynchronous readback utilities, a unified scale-transform model shared across rendering and computing workflows, direct uploads from external WebAssembly memory, and Python-in-the-browser interoperability.
-
🦀 WebAssembly driver in Rust.
- 🧱 Data layout & transforms: Transforms stored in structure-of-arrays memory with per-index dirty tracking and partial local or world propagation plus model and normal matrix packing.
- 🎞️ Animation & asset hot paths: Animation sampling and joint-matrix generation executed in WebAssembly together with glTF accessor deinterleaving, sparse patch application, numeric conversion, richer import-side data preparation, and mesh normal generation.
- 👁️ Bounds, culling, & visibility: World-space bounds computation for geometry, pointclouds, glyphfields, nodelinks, splatfields, and latticespaces together with frustum plane extraction, sphere-frustum culling kernels, and CPU-side support for render-only occlusion filtering.
- 🔗 Array semantics & zero-copy staging: Ndarray indexing utilities for explicit shape-and-stride byte-offset math plus uniforms and instance data staged as zero-copy views into WebAssembly memory with explicit typed-slice handles and refreshable views over external WebAssembly memories.
- ⚡ Performance envelope: Transient work uses a frame arena while persistent allocations use reclaimable heap arenas with deterministic owning-object disposal, and builds are optimized through LLVM, Binaryen, and SIMD128 for higher throughput.
The diagram below reflects the implemented architecture of WasmGPU v0.9.0.
Solid arrows indicate creation, ownership, stored references, or call direction. Dashed arrows indicate data movement through WebAssembly memory or WebGPU resources.
Click here to interactively view the diagram if it doesn't properly appear below.
flowchart LR
subgraph API["Public API"]
APP["User Application"]
ENG["WasmGPU v0.9.0"]
FAC["Factory surface: scene, camera, controls, geometry, material, texture, mesh, pointcloud, glyphfield, nodelink, splatfield, latticespace, light, asset import, animation, overlay, annotation, interop"]
end
subgraph WGPU["WebGPU Engine"]
LOOP["Frame loop"]
REND["Renderer"]
SCALE["Scaling service"]
OVER["Overlay framework"]
ANNO["Annotation toolkit"]
PICK["Picking utility"]
COMP["Compute subsystem"]
CBUF["Buffer resource manager"]
CPIP["Pipeline controller"]
CDIS["Dispatch workgroup planner"]
CKER["Kernels library"]
CND["N-dimensional array model for CPU & GPU memory"]
CREAD["Asynchronous readback ring"]
CSCR["Scratch buffer pool"]
end
subgraph DATA["Object & Data Model"]
SCN["Scene"]
TSTORE["Transform store in SoA memory"]
MESH["Mesh with geometry, material, texture, morphing, & skinning"]
PGN["Pointcloud, glyphfield, nodelink, splatfield, & latticespace"]
CMAP["Colormapping"]
SKIN["Skinning instance data"]
ASTORE["Annotation store"]
ALOAD["Loader for glTF 2.0 asset data"]
ADEC["Accessor decoding & data conversion"]
AIMP["Importer from asset data to scene resources"]
AMETA["Imported nodes, metadata, variants, cameras, & lights"]
WINT["WebAssembly interop"]
PY["Python interop"]
end
subgraph WASM["WebAssembly Driver"]
WHEAP["Heap allocation for persistent typed memory"]
WFRAME["Frame arena for transient typed memory"]
WTRANS["Transform propagation"]
WMATH["Matrix, vector, & quaternion mathematics"]
WND["N-dimensional array indexing & stride-offsetting"]
WNORM["Mesh normal generation"]
WGLTF["glTF accessor decoding, sparse patching, & numeric conversion"]
WANIM["Animation sampling & joint matrix generation"]
WBOUNDS["Bounds computation"]
WCULL["Frustum culling"]
end
subgraph GPU["Browser Resources"]
DEV["Graphics device & queue"]
CACHE["Pipeline cache & bindgroup cache"]
RES["Buffers, textures, & samplers"]
RPASS["Render passes for opaques, transparents, transmissions, post-processing, & user interaction"]
CPASS["Compute passes for kernels"]
end
classDef darkblue fill:#4E79FF,stroke:#0B2B8F,stroke-width:2px,color:#06153D;
classDef green fill:#22D37D,stroke:#0A6D3C,stroke-width:2px,color:#04311A;
classDef lightblue fill:#17C9FF,stroke:#005E80,stroke-width:2px,color:#022433;
classDef yellow fill:#FFB238,stroke:#9A4D00,stroke-width:2px,color:#5A2C00;
classDef purple fill:#B18AFF,stroke:#5A2FA6,stroke-width:2px,color:#2E165E;
classDef pink fill:#FF5EA8,stroke:#9A2E62,stroke-width:2px,color:#4D1532;
class APP,ENG,FAC darkblue;
class LOOP,REND,SCALE,OVER,ANNO,PICK green;
class COMP,CBUF,CPIP,CDIS,CKER,CND,CREAD,CSCR lightblue;
class SCN,TSTORE,MESH,PGN,CMAP,SKIN,ASTORE,ALOAD,ADEC,AIMP,AMETA,WINT,PY yellow;
class WHEAP,WFRAME,WTRANS,WMATH,WND,WNORM,WGLTF,WANIM,WBOUNDS,WCULL purple;
class DEV,CACHE,RES,RPASS,CPASS pink;
APP --> ENG
ENG --> FAC
ENG --> LOOP
ENG --> REND
ENG --> COMP
ENG --> SCALE
ENG --> OVER
ENG --> ANNO
FAC --> SCN
FAC --> TSTORE
FAC --> MESH
FAC --> PGN
FAC --> ALOAD
FAC --> AIMP
FAC --> WINT
FAC --> PY
SCN --> MESH
SCN --> PGN
MESH --> TSTORE
PGN --> TSTORE
SKIN --> MESH
ALOAD --> ADEC
ADEC --> AIMP
AIMP --> SCN
AIMP --> MESH
AIMP --> SKIN
AIMP --> AMETA
CMAP --> MESH
CMAP --> PGN
SCALE --> CMAP
SCALE --> PGN
LOOP --> REND
LOOP --> WFRAME
REND --> DEV
REND --> CACHE
REND --> RES
REND --> RPASS
REND --> PICK
REND --> SCN
REND --> TSTORE
REND --> WCULL
REND --> WBOUNDS
PICK --> RPASS
OVER --> SCN
ANNO --> ASTORE
ANNO --> PICK
ANNO --> SCN
COMP --> CBUF
COMP --> CPIP
COMP --> CDIS
COMP --> CKER
COMP --> CND
COMP --> CREAD
COMP --> CSCR
CBUF --> RES
CPIP --> CPASS
CDIS --> CPASS
CKER --> CPASS
CND --> CBUF
CREAD --> RES
CSCR --> RES
CPASS --> DEV
TSTORE -.-> WTRANS
MESH -.-> WNORM
MESH -.-> WBOUNDS
PGN -.-> WBOUNDS
ADEC -.-> WGLTF
SKIN -.-> WANIM
CND -.-> WND
REND -.-> WFRAME
REND -.-> WMATH
COMP -.-> WHEAP
WINT -.-> CBUF
PY --> WHEAP
PY --> WFRAME
WHEAP -.-> RES
WFRAME -.-> RES
The two tables below reflect the fundamental requirements (as of July 27, 2026) for properly running the latest release of WasmGPU. They have been fact-checked against official online sources from the respective publishers of the web browsers, operating systems, runtimes, and hardware, but they are not a claim that WasmGPU has been tested on all combinations of them.
Browser and driver support naturally changes over time. Therefore, if an entry in the two tables below is inaccurate or misleading, please open an issue with as much relevant information as possible, including the web browser, operating system, runtime, hardware devices and drivers, and a minimal reproduction.
| Browser | Platform | Status | WebGPU availability |
|---|---|---|---|
| Chromium | Windows (AMD64), MacOS, ChromeOS | ✅ | Available by default from Chromium 113 on Windows with a Direct3D 12 adapter, MacOS, and ChromeOS devices with Vulkan support. Use the latest stable browser and current graphics drivers. |
| Chromium | Windows (ARM64) | 🧪 | Disabled by default and available only through an unsafe WebGPU flag. |
| Chromium | Android | Available from Chromium 121 on Android 12 or newer for supported ARM Mali, Qualcomm Adreno, and Intel GPUs, and from Chromium 139 on Android 16 or newer for supported Imagination GPUs. Samsung Xclipse and other GPU families are not yet generally supported. | |
| Chromium | Linux | Available by default from Chromium 144 on Intel Gen12 or newer GPUs, and from Chromium 147 on NVIDIA driver 535.183.01 or newer under Wayland. Other Linux configurations remain experimental and probably require unsafe browser flags. | |
| Firefox | Windows | ✅ | Available by default from Firefox 141. |
| Firefox | MacOS | Available by default on Apple Silicon from Firefox 145 on MacOS 26 and from Firefox 147 across supported MacOS versions. Other MacOS configurations remain limited to Firefox Nightly. | |
| Firefox | Linux | 🧪 | Enabled in Firefox Nightly, but not in stable or beta releases. |
| Firefox | Android | 🧪 | Disabled by default, and current beta or Nightly builds require an advanced configuration flag. |
| Safari | MacOS 26, iOS 26, iPadOS 26 | ✅ | Available by default from Safari 26 through WebKit's Metal implementation. |
| Other browsers and embedded webviews | Any | Compatible only when the runtime exposes WebGPU, WebAssembly, and the required browser APIs. Engine support does not guarantee that a particular browser distribution or webview enables WebGPU. |
| Requirement | Compatibility rule |
|---|---|
| Secure context | WebGPU is exposed only in a secure context, so deploy through HTTPS or use a browser-recognized local development origin such as localhost. |
| Browser environment | Rendering requires a main-thread browser page with navigator.gpu, window, and a DOM-backed HTMLCanvasElement. Offscreen worker rendering is not currently a supported WasmGPU entry point. |
| WebGPU adapter | A core WebGPU adapter must be available. WasmGPU does not request WebGPU compatibility mode. The timestamp-query and primitive-index features are requested only when advertised, as GPU timing needs the former, while mesh-element picking needs the latter. |
| WebAssembly | The distributed WebAssembly driver requires WebAssembly with SIMD128 support. Shared WebAssembly memory and cross-origin isolation are not required by the default build. |
| Graphics card and driver | Compatibility ultimately depends on the browser accepting the installed graphics card and driver. Unsupported, outdated, remotely virtualized, or browser-blocklisted adapters may cause adapter acquisition to fail even on an operating system marked as available above. |
| Workload limits | The adapter must satisfy the buffer and binding limits requested by the application. Large pointcloud, glyphfield, nodelink, splatfield, latticespace, texture, or compute workloads can exceed the resources of otherwise compatible devices. |
Examples:
./examples/benchmark.htmlto see how the performance of WasmGPU compares to Three.js and Babylon.js for both rendering and computing../examples/esm.htmlto see how to get started with the ESM build../examples/iife.htmlto see how to get started with the IIFE build../examples/gltf.htmlto see how a glTF model of a T-rex can be loaded and imported../examples/controls.htmlto see how the camera controls and navigation functionalities work../examples/picking.htmlto see how the picking, probing, and selecting utility works../examples/scaling.htmlto see how the scaling service and colormapping works../examples/overlay.htmlto see how the overlay framework and annotation toolkit works../examples/mandelbulb.htmlto see how the compute subsystem can be used to render a Mandelbulb fractal../examples/galaxy.htmlto see how a pointcloud can be used with Python intero via Pyodide and the compute subsystem to render a realistic galaxy../examples/fluid.htmlto see how a glyphfield and a pointcloud can be used with Python interop, the compute subsystem, navigation, selection, and overlay features to render a fluid dynamics demo../examples/graphing.htmlto see how the mathematical function primitives and data materials can be used with Python interop, navigation, selection, and overlay features to render for a 3D graphing calculator../examples/protein.htmlto see how a nodelink can be used with Python interop, navigation, selection, colormap, and overlay features to render a visualization of a protein structure (hemoglobin) from the Protein Data Bank../examples/terrain.htmlto see how a Gaussian splatfield can be used with a custom material and fly controls to render a procedurally-generated terrain../examples/lego.htmlto see how a Gaussian splatfield glTF model of a lego set can be loaded and imported../examples/quantum.htmlto see how a couple of latticespaces can be used with picking to create a quantum orbitals visualizer.
Here's a super basic example to render a cube:
// Setup
import { WasmGPU } from "@zushah/wasmgpu"; // or from "https://cdn.jsdelivr.net/gh/Zushah/WasmGPU@0.9.0/dist/WasmGPU.min.js"
const canvas = document.querySelector("canvas");
const wgpu = await WasmGPU.create(canvas, { antialias: true});
// Scene, camera, and controls
const scene = wgpu.createScene([0.05, 0.05, 0.1]);
const camera = wgpu.createCamera.perspective({
fov: 60,
near: 0.1,
far: 1000
});
camera.transform.setPosition(-2, 2, -2);
camera.lookAt(0, 0, 0);
const controls = wgpu.createControls.orbit(camera, canvas);
// Light
scene.addLight(wgpu.createLight.directional({
direction: [1, -1, -1],
color: [1, 1, 1],
intensity: 1.5
}));
// Cube
const cube = wgpu.createMesh(
wgpu.geometry.box(1, 1, 1),
wgpu.material.standard({
color: [1, 0, 0],
metallic: 0.7
})
);
scene.add(cube);
// Render
wgpu.run((dt, time) => {
controls.update(dt);
wgpu.render(scene, camera);
});Using the IIFE bundle instead of the ESM bundle is exactly the same as above, except you must use an HTML script tag instead of a JavaScript import statement:
<script src="https://cdn.jsdelivr.net/gh/Zushah/WasmGPU@0.9.0/dist/WasmGPU.iife.min.js"></script>To get started with the comprehensive documentation, consider visiting the pages for these fundamentals first:
WasmGPU.createWasmGPU.compute.createPipelineWasmGPU.createMeshWasmGPU.createCamera.perspectiveWasmGPU.createControls.orbitWasmGPU.webassemblyWasmGPU.pythonWasmGPU.math
Asking questions, reporting bugs, suggesting features, and contributing code is very welcome. The guidelines can be found here.
- @Zushah: main author.
- @ZacharyVarley: LU factor and solve kernels (#3) in
v0.8.0. - @L1quidH2O: optimization of pointcloud shader (#1) in
v0.7.0.
WasmGPU is available under the Mozilla Public License 2.0.