Javascript Ray Marcher

Render graphical scenes in your browser

Try the latest online demo .

RayMarcher

This is a javascript raymarcher. It draws pictures using fractals and other complex shapes, which ordinary raytracers can't use.

This project was the prototype for the C Real-Time RayMarcher. Writing a graphics engine in a web-browser had a lot of benefits. It runs everywhere, doesn't need to be compiled and installed, looks the same on all platforms, has a good debugger, etc. Unfortunately it is also too slow. My original plan was to turn this into a cluster program, by making it so that each web page would render a small part of the scene, and send that part to a central server to be combined into a final picture. However it is clear that doing this would require hundreds of machines in the cluster, and still not be very fast. So I rewrote everything in hand-optimised C, and now it runs in almost real time

Dev Blog

I documented my progress while writing the raymarcher. Well, I took some screenshots and wrote notes like "now more better". Regardless, you can see this program go from the tiny and incomplete first version up to the complex and (somewhat) performant code of the latest version.

Each version is still functional, so you can see the images being calculated in your web browser.

1. We draw a flat plane. We have to start somewhere.
2. Something to look at. Colouring by normals, a projection and a wavy plane.
3. Diffuse lighting. It is beginning to look like a real renderer now.
4. Render primitives. I add the ability to render spheres, and tidy up the code so that it will be easier to add more in the future.
5. Shadows. Things in the scene now cast shadows.
6. Coloured lights. Any surface not in shadow takes on the colours of the lights shining on it.
7. Fractals. Added the Mandelbrot fractal as a render primitive.
8. Rotations and mirrors. Added rotation code for camera and vectors. Code cleanup to make primitives into javascript objects. Mirrored surfaces.
9. MD2 Loader. Added routines to load and render quake MD2 models. Runs slowly but renders correctly. Textures not supported.
10. Diagnostic displays. Added display window to show rendering hotspots (areas that take longer to render are brighter red). Also a normal map. And a lot of render primitives. I forgot to take pictures and keep versions for a while. Drat.
11. No notes
12. No notes
13. No notes
14. No notes
15. Documentation. Added documentation, cleaned up code.

11, 12, 13, 14 I didn't keep notes, but the main changes were optimisations and render primitives. I did a few internal changes like fix the camera to the Z-axis and rotate the scene, so rather than having a proper general solution, I could special case many of the vector and surface finding routines to work the best in one direction. More primitives and code clean-up. 15 looks nice.