RayTracer Studio is a real-time, CPU-based ray tracer that runs in the browser. The rendering core is written in C++, compiled to WebAssembly with Emscripten, and paired with a React + Vite front end for interactive controls and documentation.
Role
Engineer & Creator
Year
2025
Category
Web / Graphics
Tech Stack
The problem
Note · 01Ship a real-time, CPU-based ray-tracing experience in the browser without a GPU-only stack: keep the hot path in C++ for clarity and performance, cross-compile to WebAssembly, and still deliver responsive controls, shadows, and reflections with instant feedback.
The approach
Note · 02Implemented the tracer in C++ with a WASM bridge (Emscripten) exposing render and parameter updates to React. The UI controls lights, materials, camera, and scene, while the engine handles recursive reflection (with Fresnel), Blinn-Phong shading, shadow rays, and a 3D ground grid for spatial context.
How it was built
Milestones from concept through delivery.
Built the C++ ray
Exposed a clean JS bridge so React can drive resolution, light positions, and scene parameters with instant feedback on the canvas.
Layered a React + Vite front end for controls, layout, and the project documentation site.
Wrote user
Deployed a production build to Vercel and published the story on Medium to share design decisions and stack choices.
Impact
Demo
Visuals
The live app at ray-tracing.vercel.app — C++ engine behind the canvas, React driving controls and state.
Adjust lights, materials, and camera; shadows and specular highlights update interactively.
Hosted docs at /docs cover features, the C++ engine, and the React front end (RayTracer Studio).
