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.)
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: http://www.copypastecode.com/188701/. Unfortunately, we do not have gl_VertexID in WebGL yet, but you could use it in desktop OpenGL.
ReplyDeleteVery Nice !
ReplyDeleteWe all appreciate with your post.Keep posting these kind of information.
Thanks for sharing.
PM Framework
This comment has been removed by a blog administrator.
ReplyDeleteHey, nice stuff! I'm starting a raymarcher too, and google took me to your blog.
ReplyDeleteJust a small comment: this is not a depth map but a ray steps map, isn't it? ;)
Thank you!
ReplyDeleteThis particular picture is ray marched, but the color's drawing out depth values.