Witch's Swill [SDF, MeshStandardMaterial]

Showcase
,
1

Hi community!

Video:

Demo: https://codepen.io/prisoner849/full/PwoPEaX

Inspired with this topic: How do you integrate Signed Distance Fields (SDF) into a basic three.js scene?

This time I tried to combine SDF and MeshStandardMaterial.
Essentially, all you need to do is to substitute values, passed from vertex shader, with values, you get with the raymarching (position and normal), in the lights_fragment_begin shader chunk:

vec3 geometryPosition = sdfModelViewPosition; //- vViewPosition;
vec3 geometryNormal = sdfNormal; //normal;
14 Likes
2

There is some witchcraftsmanship in the code. Tried it on an old laptop. Worked fine.

giphy

1 Like
3

Sooo good. Are the bubble positions passed in as uniforms?

Wondering how you got the sound to sync w the raymarch SDF?!

1 Like
4

Thanks! :blush:

Yes. The array uniform is this.uniforms.bubbles of Vector4() (x, y, z, radius), initialized in init() and processed in update().

The easiest way I could imagine: play sound the moment, when the bubble needs to be reset to the beginning of its way :sweat_smile:

      if(v.y > 2){ // 2 is the top limit
        ...
        if(v.sound) v.sound.play();
      }
2 Likes