Realtime Graphics on CPU — Rendering & Dynamics in WebAssembly

A DIFFERENT COMPUTE CANVAS

Every ray. Every constraint.
On the CPU.

Ray tracing, volumetric effects and grid solvers are natural GPU workloads. Here, C++ compiled to WebAssembly does the computation: coupled smoke and cloth, path tracing, and the final image effects. Explore what SIMD and threads accelerate—and where memory access and divergent work set the limit.

Coupled canopyLIVE SIMULATION

– fresh images / s0 samples / pixel448 × 336 CPU image– worker compute

The work behind the image

Measured C++ stage time

01DynamicsFluid + cloth + coupling–

02GeometryMesh + BVH rebuild–

03Light transportSurfaces + volume–

04Image finishHistory + denoise + effects–

CPU → finished RGBA image→WebGL2 → texture presentation only

Choose a study

START HERE

A rising plume pushes the canopy; the moving cloth becomes an obstacle in the fluid grid.

Motion & detail FIXED IMAGE BUDGET

448 × 336 · original detail · full 48³ fluid.

Stable surfaces accumulate while the scene moves. Pause to converge the entire image.

Coupled dynamics

Render participating mediaSingle-scattering smoke and volumetric emission. Cloth surfacePosition-based distance constraints; ray-traced triangle mesh. Two-way couplingFluid drags the sheet; the sheet obstructs the fluid. Off: scripted cloth breeze.

Cloth arrangement

Brass ring obstacleA static torus for cloth collision and the fluid grid. Sealed clothDense grid stamping closes the gaps between particles. Cloth resolution 45 columns

– particles · finer folds increase the serial cloth solver's work.

Surface & emission

Fire emission 0

Temperature drives light emitted inside the volume. The Emissive plume study raises the source above the sphere so its hot core is visible.

Change how the work runs

Initializing engine…

SIMD kernelsFour-lane ray packets and fluid stencils. Worker threads 1

A persistent worker team is reused between passes. The engine runs off the UI thread. More parallelism still does not guarantee lower time: compare the current scene at different thread counts.

Runtime checks

Cross-origin isolation: ?
Logical processors reported: ?
Scalar / SIMD self-check: ?
Simulation watchdog resets: 0

Load the scalar-only build ↗
Separate scalar and SIMD modules support an end-to-end build comparison.

Model & measurement scope

This is a CPU systems study with illustrative transport and materials. The volume uses single scattering with a heuristic ambient fill; rough metal and clearcoat are simplified shading models.

Cloth uses projected distance constraints. Its fluid coupling combines drag with moving grid obstacles, rather than a fully momentum-conserving joint solver. Each fresh image follows one fixed 0.1 s simulation update; presentation is not real-time physical pacing. Quality presets rebuild cloth at a different tessellation while retaining the 48³ fluid. Smooth adapts only the image resolution.

The startup self-check samples a renderer tile and a seeded fluid update. The complete engine frame runs in a dedicated worker, leaving controls responsive while the CPU works. Expensive scenes can still produce fewer fresh images.

Detailed live timings

Trace / sample: –
Fluid step: –
Cloth + mesh + coupling: –
Denoise: –
Vintage finish: –
Oil painting: –
C++ render + finish: –
Readout update · JS only: –

C++ render time excludes simulation and presentation. The image footer reports worker compute and framebuffer-copy time, excluding message transport and GPU presentation. Readout updates run at most six times per second; their timer excludes layout, paint and compositing.

Benchmark this workload

Measured on this device and scene, not reference scores. Each configuration is warmed up; the lowest sampled time is reported. CPU contention affects the result.

Scalar · 1 / N threads: –
SIMD path · 1 / N: –
SIMD ratio · 1 thread: –
Thread ratio · scalar: –

The fluid continues evolving during this comparison; its four measurements are not identical-state replays.

Simulation is frozen for the sweep. Path tracing only: excludes image effects. Ratios below 1 mean the tested path was slower.

Scalar / 1 thread: –
Scalar / N threads: –
SIMD path / 1 thread: –
SIMD path / N threads: –
SIMD ratio · 1 thread: –
SIMD ratio · N threads: –
Thread ratio · scalar: –
Combined ratio: –

In the scalar-only module, the “SIMD path” uses scalar emulation and is not a hardware SIMD measurement.

Every ray. Every constraint.On the CPU.

The work behind the image

Every ray. Every constraint.
On the CPU.