Thread by @fradingue

Here is how you can use any #threejs objects inside a raymarching material with @polygonjs:

Live link at end of thread 👇

1/14

Adding SDFs representing objects to raymarching materials is powerful.

You can for instance blend those objects with the SDF primitives mentioned in my previous thread.

https://twitter.com/fradingue/status/1585044581019975680

2/14

And you can have multi-bounce reflections, refractions, fold space and repeat objects. It can feel a bit crazy. A bit like a mathematical Alice in wonderland.

Here is how you can create some in just a few steps:

3/14

Start by creating a box and assign a mat/raymarchingBuilder to it.

I also like to add a boxLine.

This allows me to see the bounds of the object, as it's not obvious when it has that material.

4/14

When you go into the raymarching material, you can see it has 2 spheres inside. We are going to replace those with the SDF representing a mesh.

Next step is to add a textureSDF node next to those spheres.

And plug it into the SDFContext.

5/14

Then go back up out of the material, and import an object.

Here I use the default of the fileGLTF to import an eagle model ( 🦅from threedscans.com)

6/14

Then link this object into a cop/SDFFromObject node.

This is the node that generates the SDF.

At the beginning, keep the voxelSize high enough. This ensures that the total resolution remains small. Otherwise, it can take a while to compute.

7/14

Now we need to tell the raymarching material to use this SDF.

On that node, go in the advanced tab, scroll down, and from the newly added textureSDF1 param, link the SDFFromObject.

8/14

And finally, right click on the node, and select "mat/rayMarchingBuilder"->"Update Texture SDF Bounds"

And bim, your SDF is displayed.

Although it still looks more like an ugly duckling 🦆 than an eagle 🦅.

9/14

To fix that, you can go back to the voxelSize and try smaller values until it looks good enough and remains quick to compute.

10/14

But chances it will take a couple seconds to compute a nice one, so you may prefer cachng it to disk, using the SDFExporter, and reload it with the SDFFromUrl.

11/14

Once you've set this up, you can start playing around. 😄

For instance, blend it with other shapes.

You can start by blending with the spheres that are already there.

You'll probably need to increase the padding when you do so.

12/14

And that's the gist of the setup.

Big shoutout to @garrettkjohnson whose three-mesh-bvh library powers one of the key algo in the creation of an SDF from objects (as well as many other parts of @polygonjs!).

github.com/gkjohnson/thre…

13/14

Here is the live link to the example scene:

polygonjs.com/demo?example=b…

And congrats if you made it this far down the thread 🙌

14/14