Thursday, March 22, 2012

Setting Up Framework

I spent this week reading up on the variable-step ray marching method and distance fields. At the moment I am still trying to wrap my head around distance field functions and how they represent geometry, since it is quite an unintuitive method of describing shapes.

What I also did this week was to set up a rendering framework on WebGL using GLSL. I draw a single rectangle in the scene as a viewing plane, and output of ray marching will be displayed on this rectangle through its shader material.

What I have so far is very basic per pixel ray marching in GLSL. I am only concerned with my ray marching method at the moment, which means I have not done anything on the rendering side yet, i.e., I have no shading of any kind. I am simply outputting the number of steps taken to intersect the scene as gray-scale pixels. I am testing with the most basic shape, the sdBox() (function given here.)

Here's what it looks like now. It basically shows a depth map of the scene from the camera. Runs pretty smoothly at real-time frame rates on a small enough resolution (my laptop is also very outdated.)


  1. Good progress Nop. As a side note, there are many interesting ways to rendering a full-screen quad or even large triangle covering the viewport, like this one that requires no vertex/index buffer: Unfortunately, we do not have gl_VertexID in WebGL yet, but you could use it in desktop OpenGL.

  2. Very Nice !
    We all appreciate with your post.Keep posting these kind of information.

    Thanks for sharing.
    PM Framework

  3. This comment has been removed by a blog administrator.

  4. Hey, nice stuff! I'm starting a raymarcher too, and google took me to your blog.

    Just a small comment: this is not a depth map but a ray steps map, isn't it? ;)

  5. Thank you!
    This particular picture is ray marched, but the color's drawing out depth values.