◆
RayMarcher
This is a javascript raymarcher. It draws pictures using fractals and other complex shapes.
Writing a graphics engine in a web-browser has a lot of benefits. It runs everywhere, doesn't need to be compiled and installed, and has a good debugger.
Unfortunately it is also too slow. My original plan was to turn this into a cluster program, rendering a small part of the image in each open webpage. Instead, 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. 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.
- We draw a flat plane. We have to start somewhere.
- Something to look at. Colouring by normals.
- Diffuse lighting. Soft shading.
- Render primitives. The first primitives.
- Shadows. Proper lighting, but monochrome.
- Coloured lights. Lights have colours, but the objects don't.
- Fractals. The Mandelbrot fractal.
- Rotations and mirrors. Mirrored surfaces, and a camera that rotates.
- MD2 Loader. Load and render quake MD2 models.
- Diagnostic displays. A display window to show rendering hotspots (areas that take longer to render are brighter red).
- Cleanup. Code janitoring.
- Speedups. Pushing javascript harder.
- l-systems. An advanced shape language.
- Flood fill rendering. A speedup technique that renders pixels in a different order.
- Documentation. Improved the user experience.