SDF Ray-Marching and Fractal Images
Use Signed Distance Functions and ray-marching to produce interesting images with fractal properties, difficult to produce with rasterization. Many effects from ray-tracing, like shadows, can also be achieved with this model.
Goals
The rough goal is to end up with a scene, or a handful of scenes, demonstrating the various neat effects that can be achieved with ray-marching. Think demoscene-esque visuals.
Core
- Render basic primitives such as Spheres, Cuboids, Polyhedra, Tori, etc.
- Render combinations of shapes, through SDF union, intersection, difference, etc.
- Use a basic lighting model, with finite difference normals (e.g. Phong)
- A distance estimator for one fractal
Extensions
- [0.75] Shadows, along with soft variants
- [0.5] Ambient Occlusion
- [0.5] Fog
- [0.5] Reflections
- [0.5] Advanced fractal coloring, like orbit traps, iteration count
- [0.25] Soft intersection and union
- [0.5] Combining multiple fractals
- [1.0] Analytical normal for fractals
- [0.5] Real time interaction (zooming, rotation, panning, etc.)
- [0.5] Raymarching terrains
- [1.0] Bezier curves for camera trajectory
Schedule
Week 0
- Lúcás (Rendering a basic fractal set)
- Mohamed (Basic primitives)
- Noah (Phong Lighting)
Week 1
- Lúcás (Rendering more advanced fractal (Mandelbulb, Julia), with advanced coloring)
- Mohamed (Combinations of primitives (union, intersection, etc.))
- Noah (Fog)
Week 2
- Lúcás (Real time interaction)
- Mohamed (Shadows, soft shadows)
- Noah (Reflections)
Week 3
- Lúcás (Add support for multiple materials)
- Mohamed (Glow effects, or using distance in other interesting ways)
- Noah (Terrain)
Week 4
- All (Making artistic scenes)
Resources
The vast majority of our code is going to end up in a fragment shader, so apart from the basic boilerplate of setting up a WebGL pipeline, we're not going to be using any external libraries. On the other hand, we will shamelessly inspire ourselves from all of the many resources on ray-marched SDFs
Libraries
- regl.js (Maybe? We might also just setup a simple pipeline ourselves, we just need two triangles :P)
Resources