Personal Project - Ray Tracing Distance Fields

Showcase
1

Greetings!

This is my personal project, I wanted to take a stab at ray tracing distance fields. I know, I know, it’s very similar to Shader toy, but it’s built with three.js as its foundation.

https://yunjd.github.io/distance-field/

Indeed, it draws a quad and makes the fragment Shader do all the heavy lifting. :grin:

7 Likes
2

I am interested to know more :slight_smile: link to source ?

3

Thanks for expressing interest! Unfortunately I’m not quite ready to share the full source code to that repository.

Instead, if you’re mainly interested in the THREE.js setup, the following Codepens I wrote a while back use the same technique:

2D Mandelbrot - https://codepen.io/Cubesy/pen/WJraJL
Binned random sampling using binary search - https://codepen.io/Cubesy/pen/NMNoeL

The main difference that I noticed so far from the older version of THREE.js is that the call

renderer.render(scene, camera, texResult)

//is now

renderer.setRenderTarget(texResult)
renderer.render(scene, camera)
4

I am looking for interesting stuf for code-CAD in JS. I am contributing to openjscad which deos CSG with meshes. I have seen SDF here and there and it is interesting to me from that perspective of modeling.

displaying SDF is explored a lot, but generating mesh from them is a tricky prospect.

1 Like