Raymarching distance fields

After long time admiring IQ's work on raymarching (in his website or in ShaderToy), and specially on raymarching distance fields, I've always wanted to try to code one renderer of this kind on my own. I did a couple of basic raytracers in the past, and this technique seems even funnier, so I had to try it eventually.

Thinking of doing something for the current js1k javascript contest, I started a raymarcher in javascript. After some hours, this is what I got:

From top to bottom: basic 'hit test' render, normals render, ray steps render, basic color with haze (fake lighting), and render with basic shading (diffuse+specular+shadows).

Click here to try it. Please give it some time to render (about 9 secs on this Macbook)

View source code for the guts of it, it's fairly simple and short. Of course, the implementation is far of being optimal, good, or even decent. I even doubt it is useful for learning purposes, but maybe can help someone stuck in the first steps of the implementation of a raymarcher with distance fields. I just thought on being pragmatic and simple, didn't give a damn about speed or beauty code.

Very, very fun stuff! even funnier than raytracing, I'd say! :)

Juicy links on the topic (I thoroughly read the 4 first results)




← Return to blog