A simple demo of rendering CPU-generated shaders using WebAssembly.
This project was created while I was learning about GPU architectures. I became curious about implementing similar rendering techniques directly on the CPU to see how they would perform. Because I have limited experience with web-native development, I chose to write the rendering engine in Rust and compile it to WebAssembly. I then used an LLM to assist with the HTML canvas integration and the JavaScript glue code. The final result is a basic demo capable of rendering and recording CPU-run shaders.
The following benchmarks were recorded on an 11th Gen Intel® Core™ i5-11400H @ 2.70GHz:
blackhole_3s_30fps_1920x1080.webm
fireworks_10s_30fps_1024x768.webm
sphere_10s_30fps_1920x1080.webm
recording_10s_30fps_712x712.webm
Shader formulas adapted from: Xor
As expected, CPU-bound real-time rendering is highly resource-intensive, making high-performance playback difficult to achieve on standard hardware. Nonetheless, this project serves as a valuable proof of concept and was highly educational to build.
The primary objective was to gain hands-on experience with WebAssembly, which was successfully achieved alongside generating these visual demos. While I do not have immediate plans for major updates, I will keep this repository as a reference for shader prototyping. In the future, I may revisit the code to experiment with further performance optimizations.
Prerequisites: Rust and wasm-pack. (Tested on Linux.)
# Build the Rust → WASM package
make build
# Start the dev server (auto-rebuilds on src/ changes)
make runOpen http://localhost:8000 in a browser. Use the slider to adjust resolution, set duration/FPS, and click Record to render and download a .webm video.
Switch shaders by editing the "shader" field in config.json (values 1–4 map to src/frag1.rs–src/frag4.rs).