Wednesday, March 14, 2012

Ray Marching Distance Fields in Real-time on WebGL

I am interested in the topic of real-time rendering on WebGL. For my CIS 565 final project, I will explore a method to quickly visualize and render implicit surfaces. This method is ray marching of distance fields.

Ray marching is a rendering method most commonly used in volumetric rendering. The method is similar to ray tracing where a ray is casted into the scene for each output pixel. The ray takes discrete steps and at each step samples the density, which then finally translates to pixel color.

The ray marching method is then used to render a scene described by a distance field. Composed of one or more distance functions, distance fields describe the shortest distance from any given point to a surface in the scene.

Together, ray marching and distance fields provide an efficient method of rendering mathematical surfaces, such as constructive solid geometry, or more complex shapes that cannot be easily determined, such as recursive shapes and fractals.

Here’s how the method works. For each output pixel, a ray is casted into the scene. It then samples the distance field to determine the shortest distance to any point in the scene. This distance is equivalent to the maximum distance the ray can step without intersecting any surface in the scene. The ray takes a step equal to this distance and repeats the process until it can no longer take any more steps. This adaptive step size is fundamental to the efficiency of this method.

Moreover, because of the stepwise nature, the ray marching method can be extended to support ambient occlusion shadows and subsurface scattering.

The focus of this project is the robustness of the renderer itself. It should be able to render the scene in real-time, and it should be able to handle multiple types of distance functions. This includes CSGs, recursive shapes, fractals, and any other procedural shapes. In addition, it should be able to render the scene with ambient occlusion and subsurface scattering.

The renderer will run in the browser on WebGL. I am planning to use Three.js library to set up the framework. The rendering work will be done on the GLSL shader, and the output shaded onto a viewing-plane quad.

If time allows, I am planning to explore more complex surfaces such as recursive shapes and fractals.


Iñigo Quilez, “Rendering Worlds with Two Triangles”

Iñigo Quilez, Distance Functions

GPU Ray Marching with Distance Fields

D.J. Sandin, others, “Ray Tracing Deterministic 3-D Fractals”

No comments:

Post a Comment