Raycast for meshes and SDFs

Questions
, ,
1

There
SDFs in the scene - raymarching - #30 by hofk
I have a basic variant for moving an SDF via raycast.

Now I have combined raycasting for meshes and SDFs by creating two raycasters. I can move the meshes by clicking on them with the mouse on the vertical auxiliary plane.

07_SDF_ShaderSoloV4

However, I have problems with the SDF. It does not behave in the same way as the meshes. I have tried a number of variations, sometimes I get a properly moved SDF but the meshes don’t react or the other way around.

Maybe the approach with two separate raycasters doesn’t make sense? But how do you differentiate between mesh and SDF?

The Code


<!DOCTYPE html>
<!-- https://discourse.threejs.org/t/sdfs-in-the-scene-raymarching/78355  --> 
<html>
<head>
  <title>07_SDF_ShaderSoloV4</title>
  <meta charset="utf-8" />
  <style>
    body{
      overflow: hidden;
      margin: 0;
    }  
  </style>
</head>
<body></body>
<script type="module">
  
// @author hofk
import * as THREE from "../../jsm/three.module.173.js";
import { OrbitControls } from "../../jsm/OrbitControls.173.js";

document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup'  , onDocumentMouseUp  , false);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.01, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor(0xdedede);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.set(20, 10, 80);

const light = new THREE.AmbientLight(0x404040, 4.5); // soft white light
scene.add(light);
const directionalLight = new THREE.DirectionalLight(0xffffff, 2.5);
directionalLight.position.set(5, 15, 15);
scene.add(directionalLight);
const controls = new OrbitControls(camera, renderer.domElement);
const axesHelper = new THREE.AxesHelper(10);
scene.add(axesHelper);

let selectionMesh;
let selectionSDF;
let offsetMesh = new THREE.Vector3();
let offsetSDF = new THREE.Vector3();
 
let objectsToRaycast = [];
const raycasterSDF = new THREE.Raycaster();
const raycasterMesh = new THREE.Raycaster();

const mouse = new THREE.Vector2();

// Auxiliary layer for determining the mouse position and moving the clicked object in 3D
const auxPlaneGeo = new THREE.PlaneGeometry( 40, 40, 40, 40 );
const auxPlaneMat = new THREE.MeshBasicMaterial({color: 0xaaaaaa, transparent:true, opacity:0.3, side:THREE.DoubleSide, wireframe: true });
const auxPlane = new THREE.Mesh(auxPlaneGeo, auxPlaneMat); 
scene.add( auxPlane );
		
const cyl = new THREE.Mesh( new THREE.CylinderGeometry(1, 1, 2 ), new THREE.MeshPhongMaterial( { color: 0x00ff00, wireframe:false } )); 
objectsToRaycast.push(cyl);
scene.add(cyl);
const ico = new THREE.Mesh( new THREE.IcosahedronGeometry( 1, 4), new THREE.MeshPhongMaterial( { color: 0x00ffff, wireframe:false } )); 
objectsToRaycast.push(ico);
ico.translateY( 1 );
scene.add(ico);
 
// Vertex Shader
const vShader = `
  varying vec3 vPosition;
  varying vec2 vUv;
  void main() {
    vPosition = position;
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  }
`;

// Fragment Shader
const fShader = `
uniform float time;
uniform float boundingRadius;
uniform vec3 camPos;
uniform vec3 mousePosition;
uniform vec2 resolution;
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;

varying vec3 vPosition;
varying vec2 vUv;

#define MAX_STEPS 250
#define MAX_DIST 100.0
#define SURF_DIST 1e-4
#define PI 3.1415926

// distance color
struct distCol {
    float d;
    vec4 c;
};

float sdSphere( vec3 p, float s )
{
    return length(p)-s;
}

vec3 translateXYZ(vec3 p, vec3 q) {
    return p - q;
}

distCol GetDist(vec3 p) {
    distCol dc;
    distCol dcSphere;
    vec3 pMouse = translateXYZ(p, mousePosition);
    dcSphere.d = sdSphere( pMouse, boundingRadius);
    dcSphere.c = vec4(1.0, 0.0, 0.0, 1.0);
    dc = dcSphere; // apply to reserved dc
    return dc;
}

distCol RayMarch(vec3 ro, vec3 rd) {
    distCol dc;
    float dO = 0.0;
    for (int i = 0; i < MAX_STEPS; i++) {
        vec3 p = ro + rd * dO;
        dc = GetDist(p);
        dO += dc.d;
        if (dO > MAX_DIST || dc.d < SURF_DIST) break;
    }
    dc.d = dO;
    return dc;
}

vec3 GetNormal(vec3 p) {
    float d = GetDist(p).d;
    vec2 e = vec2(SURF_DIST, 0.0);
    float d1 = GetDist(p - e.xyy).d;
    float d2 = GetDist(p - e.yxy).d;
    float d3 = GetDist(p - e.yyx).d;
    vec3 n = d - vec3(d1, d2, d3);
    return normalize(n);
}

float GetAo(vec3 p, vec3 n) {
    float occ = 0.0;
    float sca = 1.0;
    for (int i = 0; i < 5; i++) {
        float h = 0.001 + 0.15 * float(i) / 4.0;
        float d = GetDist(p + h * n).d;
        occ += (h - d) * sca;
        sca *= 0.95;
    }
    return clamp(1.0 - 1.5 * occ, 0.0, 1.0);
}

float GetLight(vec3 p, vec3 lPos) {
    vec3 l = normalize(lPos - p);
    vec3 n = GetNormal(p);
    float dif = clamp(dot(n, l), 0.0, 1.0);
    return dif;
}

void main() {
    vec2 uv = vUv - 0.5;
    vec3 ro = camPos;
    vec3 rd = normalize(vPosition - ro);
    distCol dc = RayMarch(ro, rd);
    
    if (dc.d >= MAX_DIST) {
        gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0); // no hit
    } else {
        vec3 p = ro + rd * dc.d;
        vec3 lightPos = vec3(2.0, 16.0, 3.0);
        float diff = GetLight(p, lightPos);
        float ao = 0.051 * GetAo(p, GetNormal(p));
        vec4 ct = dc.c;
        vec3 c = ct.rgb;
        vec3 color = 0.7 * c + 0.5 * diff + 0.2 * ao;
    
        gl_FragColor = vec4(color, ct.a);
    }
}
`;

const boxParam = [ 50.0, 50.0, 50.0, 0.0, 0.0, 0.0 ];

let boxGeo;
let box;
let shaderMaterial;
let camPos;

boxGeo = new THREE.BoxGeometry(boxParam[0], boxParam[1], boxParam[2]);
boxGeo.translate( boxParam[3], boxParam[4], boxParam[5]);
//helper
scene.add(
  new THREE.Box3Helper(
    new THREE.Box3().setFromBufferAttribute(boxGeo.attributes.position),
    0x444444
  )
);

shaderMaterial = new THREE.ShaderMaterial({
    uniforms: { 
        camPos: { value: new THREE.Vector3().copy(camera.position) },
        mousePosition: { value: new THREE.Vector3() },
        time: { value: 0.0 },
        boundingRadius: { value: 1.2 },
        resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
    },
    vertexShader: vShader,
    fragmentShader: fShader,
    side: THREE.DoubleSide,
    transparent: true,  // false,  to display the box
});
box = new THREE.Mesh(boxGeo, shaderMaterial);
scene.add(box);
box.position.set(boxParam[3], boxParam[4], boxParam[5]);
box.renderOrder = Infinity;
camPos = new THREE.Vector3();

controls.addEventListener("change", event => {
    camPos.copy(camera.position);
    box.worldToLocal(camPos);
    shaderMaterial.uniforms.camPos.value.copy(camPos);
}, false);

camPos.copy(camera.position);
box.worldToLocal(camPos);
shaderMaterial.uniforms.camPos.value.copy(camPos);
 
animate();

function animate() {
    
    requestAnimationFrame(animate);
    //shaderMaterial.uniforms.time.value = t;
    renderer.render(scene, camera);
}

function onDocumentMouseDown(event) {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;  
    
    const vector = new THREE.Vector3(mouse.x, mouse.y, 1);
    vector.unproject(camera);
    raycasterMesh.set(camera.position, vector.sub(camera.position).normalize());
    const intersects = raycasterMesh.intersectObjects(objectsToRaycast);

    if (intersects.length > 0) {
        controls.enabled = false;
       selectionMesh = intersects[0].object;
       const planeIntersects = raycasterMesh.intersectObject(auxPlane);
       if (planeIntersects.length > 0) {
          offsetMesh.copy(planeIntersects[0].point).sub(auxPlane.position);
       }
    } else {
       raycasterSDF.setFromCamera(mouse, camera);
       const intersectsSDF = raycasterSDF.intersectObject(box);
       if (intersectsSDF.length > 0) {
          controls.enabled = false;
          selectionSDF = true;
          const planeIntersects = raycasterMesh.intersectObject(auxPlane);
          if (planeIntersects.length > 0) {
             offsetSDF.copy(planeIntersects[0].point).sub(auxPlane.position);
          }
       }
    }
}

function onDocumentMouseMove(event) {
    event.preventDefault();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
     
    const vector = new THREE.Vector3(mouse.x, mouse.y, 1);
    vector.unproject(camera);
    raycasterMesh.set(camera.position, vector.sub(camera.position).normalize());

    if (selectionMesh) {  
       const intersects = raycasterMesh.intersectObject(auxPlane);
       if (intersects.length > 0) {
          let newPos = intersects[0].point.clone().sub(offsetMesh);
          selectionMesh.position.copy(newPos);
       }
    } else if (selectionSDF) {
       const intersects = raycasterMesh.intersectObject(auxPlane);
       if (intersects.length > 0) {
          let newPos = intersects[0].point.clone().sub(offsetSDF);
          let sdfPos = newPos.clone();
          box.worldToLocal(sdfPos);
          box.material.uniforms.mousePosition.value.copy(sdfPos);
          
       }
    } else {
       const intersects = raycasterMesh.intersectObjects(objectsToRaycast);
       if (intersects.length > 0) {
          auxPlane.position.copy(intersects[0].object.position);
          auxPlane.lookAt(camera.position);
       } 
    }
}

function onDocumentMouseUp(event) {
    controls.enabled = true;
    selectionMesh = false;
    selectionSDF = false;
}
 
</script>
</html>
1 Like
2

I think using 2 raycasters is making the logic more confusing. The fact that one of the objects is an sdf proxy is a red herring. As far as threejs is concerned, it’s just a box mesh. Can’t you just use 1 raycaster, and check if the hit object is the “box” ?

3

The box itself is always hit, as the meshes are also in the box. I have therefore already made various attempts to differentiate between the two raycasters. But I have not found a practicable solution.

That’s why I’m going to try it with a raycaster soon, but I’m skeptical as to whether I’ll succeed better.

4

Oh ok. I misunderstood.. i though there was a mesh box proxy enclosing each of the sdfs? kinda like a bounding box?

5

In this example without Raycast, for example, I had several boxes. Then an SDF in each box.

03_SDF_Shader


const boxParam = []; // boxes for SDFs

//   define size and position of boxes containing the SDFs from  SDF_designs.js
// *****************************************************************************
//              width, height, depth, pos x, pos y, pos z
boxParam[ 0 ] = [  3.0,   3.0,   3.0,   0.0,   1.5,   0.0 ];
boxParam[ 1 ] = [  3.0,   3.0,   3.0,  -3.0,   1.5,  -3.0 ];
boxParam[ 2 ] = [  3.0,   3.0,   3.0,  -3.0,   1.5,   3.0 ];
boxParam[ 3 ] = [ ......
6

Right. I guess what i’m confused about is why SDF should change the behavior of raycasting at all?

7

Are you going to pass the ray itself into the raymarcher, and then output some kind of collision data as rgb values or smth?

1 Like
8

Is there the possibility of extending box for the sdf’s and changing it’s type to this.type = "sdfBox" and then raycast against the uv of sdfBox where if a pixel has been “discarded” ignore the intersection?

1 Like
9

I’m not that much of a raycast expert. I’m approaching it by trial and error. Hence my question post here.

2 Likes
10

The raycaster knowns nothing about the pixels in the framebuffer. It’s purely geometric. All it knows about is the geometry, and the Object3D transforms.

There is no way to get pixels back from the framebuffer without rendering to a rendertarget and reading the pixel data back to the CPU..

You could implement your own raycaster-in-a-shader for the SDFs, which would require sending the ray data in as a uniform (origin, direction) and rendering the SDF with this special raycasting shader that basically raymarches the raycaster ray, and then outputs a single RGBA (float) value.
The shader could write the collision normal in the RGB, and the distance of the hit along the ray, in A, or something negative if no collision.
You would then call this shader with a single pixel rendertarget, and read the single pixel value back after “rendering” your raycast shader.

None of this sounds easy. :smiley:

1 Like
11

Very true! :face_with_spiral_eyes:

The scheme for raycast mesh comes from an old example of mine. raycaster - drag and drop

2 Likes
12

Yup. And if you don’t care about pixel accuracy.. then you should be able to do it exactly the same yea? As long as your SDFs have a tight fitting mesh(boxGeometry()) to raycast against.

1 Like
13

This example is good. I would use a larger plane though, and instead of making the plane .lookAt the camera, make the plane look at its own position minus the camera direction vector. This way it will drag correctly in screenspace.. not drag it as a plane that is on a sphere whos origin is the camera position. (unless you’re specifically intending that)

r.e. using a mesh(boxgeometry as a collision proxy.. you would first see if the regular raycast hits this box.. and then do the custom raycast->render->single pixel framebuffer idea to get a pixel accurate collision point and normal. If you could make this scheme work, then it could work almost completely as a natural extension to the raycaster.

1 Like
14

very true, your recent suggestion sounds like the way to go, i was thinking of getting the intersected uv coord with intersects[0].uv

uv - U,V coordinates at point of intersection

but as you say this would mean drawing the intersected object’s texture to a renderTarget and checking the alpha value, here’s gpt’s naïve approach…

function checkTransparency(camera, scene, texture) {
    raycaster.setFromCamera(pointer, camera);
    const intersects = raycaster.intersectObject(scene, true);

    if (intersects.length > 0) {
        const intersect = intersects[0];

        // Get UV coordinates
        if (intersect.uv) {
            const uv = intersect.uv;

            // Assuming texture is a canvas-based texture
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');

            // Ensure texture image is loaded
            const image = texture.image;
            canvas.width = image.width;
            canvas.height = image.height;
            ctx.drawImage(image, 0, 0);

            // Convert UV to pixel coordinates
            const x = Math.floor(uv.x * image.width);
            const y = Math.floor(uv.y * image.height);

            // Read pixel data
            const pixel = ctx.getImageData(x, y, 1, 1).data;

            // Check alpha channel (A = pixel[3])
            if (pixel[3] === 0) {
                console.log("Intersection is transparent");
                return true;
            } else {
                console.log("Intersection is not transparent");
                return false;
            }
        }
    }
    return false;
}
15

I’ll take a closer look tomorrow.

16

This seems plausible but will only get you the texture that has been applied to the cube proxy? not some deeper information output by the sdf.

2 Likes
17

I now have a V11 variant. The mesh and SDF move, but the SDF always jumps to a certain distance from the mouse.

Obviously something is wrong with the offsetSDF. In contrast to offsetMesh. But what?

07_SDF_ShaderSoloV11

The Code:


<!DOCTYPE html>
<!-- https://discourse.threejs.org/t/sdfs-in-the-scene-raymarching/78355  --> 
<html>
<head>
  <title>07_SDF_ShaderSoloV11</title>
  <meta charset="utf-8" />
  <style>
    body{
      overflow: hidden;
      margin: 0;
    }  
  </style>
</head>
<body></body>
<script type="module">
  
// @author hofk
import * as THREE from "../../jsm/three.module.173.js";
import { OrbitControls } from "../../jsm/OrbitControls.173.js";

document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup'  , onDocumentMouseUp  , false);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.01, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor(0xdedede);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.set(1, 4, 100);

const light = new THREE.AmbientLight(0x404040, 4.5); // soft white light
scene.add(light);
const directionalLight = new THREE.DirectionalLight(0xffffff, 2.5);
directionalLight.position.set(5, 15, 15);
scene.add(directionalLight);
const controls = new OrbitControls(camera, renderer.domElement);
const axesHelper = new THREE.AxesHelper(10);
scene.add(axesHelper);

let selectionMesh;
let selectionSDF;
let offsetMesh 	= new THREE.Vector3();
let offsetSDF = new THREE.Vector3();
 
let objectsToRaycast = [];
const raycasterSDF = new THREE.Raycaster();
const raycasterMesh = new THREE.Raycaster();

const mouse = new THREE.Vector2();

// Auxiliary layer for determining the mouse position and moving the clicked object in 3D
const auxPlaneGeo = new THREE.PlaneGeometry( 40, 40, 40, 40 );
const auxPlaneMat = new THREE.MeshBasicMaterial({color: 0xaaaaaa, transparent:true, opacity:0.3, side:THREE.DoubleSide, wireframe: true });
const auxPlane = new THREE.Mesh(auxPlaneGeo, auxPlaneMat); 
scene.add( auxPlane );
		
const cyl = new THREE.Mesh( new THREE.CylinderGeometry(1, 1, 2 ), new THREE.MeshPhongMaterial( { color: 0x00ff00, wireframe:false } )); 
objectsToRaycast.push(cyl);
scene.add(cyl);
const ico = new THREE.Mesh( new THREE.IcosahedronGeometry( 1, 4), new THREE.MeshPhongMaterial( { color: 0x00ffff, wireframe:false } )); 
objectsToRaycast.push(ico);
ico.translateY( 1 );
scene.add(ico);
 
// Vertex Shader
const vShader = `
  varying vec3 vPosition;
  varying vec2 vUv;
  void main() {
    vPosition = position;
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  }
`;

// Fragment Shader
const fShader = `
uniform float time;
uniform float boundingRadius;
uniform vec3 camPos;
uniform vec3 mousePosition;
uniform vec2 resolution;
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;

varying vec3 vPosition;
varying vec2 vUv;

#define MAX_STEPS 250
#define MAX_DIST 100.0
#define SURF_DIST 1e-4
#define PI 3.1415926

// distance color
struct distCol {
    float d;
    vec4 c;
};

float sdSphere( vec3 p, float s )
{
    return length(p)-s;
}

vec3 translateXYZ(vec3 p, vec3 q) {
    return p - q;
}

distCol GetDist(vec3 p) {
    distCol dc;
    distCol dcSphere;
    vec3 pMouse = translateXYZ(p, mousePosition);
    dcSphere.d = sdSphere( pMouse, boundingRadius);
    dcSphere.c = vec4(1.0, 0.0, 0.0, 1.0);
    dc = dcSphere; // apply to reserved dc
    return dc;
}

distCol RayMarch(vec3 ro, vec3 rd) {
    distCol dc;
    float dO = 0.0;
    for (int i = 0; i < MAX_STEPS; i++) {
        vec3 p = ro + rd * dO;
        dc = GetDist(p);
        dO += dc.d;
        if (dO > MAX_DIST || dc.d < SURF_DIST) break;
    }
    dc.d = dO;
    return dc;
}

vec3 GetNormal(vec3 p) {
    float d = GetDist(p).d;
    vec2 e = vec2(SURF_DIST, 0.0);
    float d1 = GetDist(p - e.xyy).d;
    float d2 = GetDist(p - e.yxy).d;
    float d3 = GetDist(p - e.yyx).d;
    vec3 n = d - vec3(d1, d2, d3);
    return normalize(n);
}

float GetAo(vec3 p, vec3 n) {
    float occ = 0.0;
    float sca = 1.0;
    for (int i = 0; i < 5; i++) {
        float h = 0.001 + 0.15 * float(i) / 4.0;
        float d = GetDist(p + h * n).d;
        occ += (h - d) * sca;
        sca *= 0.95;
    }
    return clamp(1.0 - 1.5 * occ, 0.0, 1.0);
}

float GetLight(vec3 p, vec3 lPos) {
    vec3 l = normalize(lPos - p);
    vec3 n = GetNormal(p);
    float dif = clamp(dot(n, l), 0.0, 1.0);
    return dif;
}

void main() {
    vec2 uv = vUv - 0.5;
    vec3 ro = camPos;
    vec3 rd = normalize(vPosition - ro);
    distCol dc = RayMarch(ro, rd);
    
    if (dc.d >= MAX_DIST) {
        gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0); // no hit
    } else {
        vec3 p = ro + rd * dc.d;
        vec3 lightPos = vec3(2.0, 16.0, 3.0);
        float diff = GetLight(p, lightPos);
        float ao = 0.051 * GetAo(p, GetNormal(p));
        vec4 ct = dc.c;
        vec3 c = ct.rgb;
        vec3 color = 0.7 * c + 0.5 * diff + 0.2 * ao;
    
        gl_FragColor = vec4(color, ct.a);
    }
}
`;

const boxParam = [ 80.0, 80.0, 80.0, 10.0, 10.0, -5.0 ];

let boxGeo;
let box;
let shaderMaterial;
let camPos;

boxGeo = new THREE.BoxGeometry(boxParam[0], boxParam[1], boxParam[2]);

//helper
scene.add(
  new THREE.Box3Helper(
    new THREE.Box3().setFromBufferAttribute(boxGeo.attributes.position),
    0x444444
  )
);

shaderMaterial = new THREE.ShaderMaterial({
    uniforms: { 
        camPos: { value: new THREE.Vector3().copy(camera.position) },
        mousePosition: { value: new THREE.Vector3() },
        time: { value: 0.0 },
        boundingRadius: { value: 1.2 },
        resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
    },
    vertexShader: vShader,
    fragmentShader: fShader,
    side: THREE.DoubleSide,
    transparent: true,  // false,  to display the box
});
box = new THREE.Mesh(boxGeo, shaderMaterial);
scene.add(box);
box.position.set(boxParam[3], boxParam[4], boxParam[5]);
box.renderOrder = Infinity;
camPos = new THREE.Vector3();

controls.addEventListener("change", event => {
    camPos.copy(camera.position);
    box.worldToLocal(camPos);
    shaderMaterial.uniforms.camPos.value.copy(camPos);
}, false);

camPos.copy(camera.position);
box.worldToLocal(camPos);
shaderMaterial.uniforms.camPos.value.copy(camPos);
 
animate();

function animate() {
    
    requestAnimationFrame(animate);
    //shaderMaterial.uniforms.time.value = t;
    renderer.render(scene, camera);
}

function onDocumentMouseDown(event) {
    getMouse( event );
    const vector = new THREE.Vector3(mouse.x, mouse.y, 1);
    vector.unproject(camera);
    raycasterMesh.set(camera.position, vector.sub(camera.position).normalize());
    const intersects = raycasterMesh.intersectObjects(objectsToRaycast);

    if (intersects.length > 0) {
       controls.enabled = false;
       selectionMesh = intersects[0].object;
       const planeIntersects = raycasterMesh.intersectObject(auxPlane);
       if (planeIntersects.length > 0) {
          offsetMesh.copy(planeIntersects[0].point).sub(auxPlane.position);
       }
    } else {
       raycasterSDF.setFromCamera(mouse, camera);
       const intersectsSDF = raycasterSDF.intersectObject(box);
       if (intersectsSDF.length > 0) {
          controls.enabled = false;
          selectionSDF = true;
          const planeIntersects = raycasterSDF.intersectObject(auxPlane);
          if (planeIntersects.length > 0) {
             offsetSDF.copy(planeIntersects[0].point).sub(auxPlane.position);
          }
       }
    }
}

 function onDocumentMouseMove(event) {
    event.preventDefault();
    getMouse( event );
    const vector = new THREE.Vector3(mouse.x, mouse.y, 1);
    vector.unproject(camera);
    raycasterMesh.set(camera.position, vector.sub(camera.position).normalize());
    if (selectionMesh) {
       const intersects = raycasterMesh.intersectObject(auxPlane);
       if (intersects.length > 0) {
          let newPos = intersects[0].point.clone().sub(offsetMesh);
          selectionMesh.position.copy(newPos);
       }
    } else if (selectionSDF) {
       const intersects = raycasterMesh.intersectObject(auxPlane);
       if (intersects.length > 0) {
          let newPos = intersects[0].point.clone().sub(offsetSDF);
          let sdfPos = newPos.clone();
          box.worldToLocal(sdfPos);
          box.material.uniforms.mousePosition.value.copy(sdfPos);
       }
    } else {
       const intersects = raycasterMesh.intersectObjects(objectsToRaycast);
       if (intersects.length > 0) {
          auxPlane.position.copy(intersects[0].object.position);
          auxPlane.lookAt(camera.position);
       } 
    }
}

function onDocumentMouseUp(event) {
    controls.enabled = true;
    selectionMesh = false;
    selectionSDF = false;
}

function getMouse( e ) {
    mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;  
}
 
</script>
</html>
1 Like
18

A small cause - a big effect.

I am facing the problem with function drawray( sdfPos ){ ... and testVector to get to the bottom of it.

Difference SDF to mouse:

 //let newPos = intersects[0].point.clone().sub(offsetSDF); // Difference SDF to mouse
 let newPos = intersects[0].point.clone();

07_SDF_ShaderSoloV12

The code

<!DOCTYPE html>
<!-- https://discourse.threejs.org/t/sdfs-in-the-scene-raymarching/78355  --> 
<html>
<head>
  <title>07_SDF_ShaderSoloV12</title>
  <meta charset="utf-8" />
  <style>
    body{
      overflow: hidden;
      margin: 0;
    }  
  </style>
</head>
<body></body>
<script type="module">
  
// @author hofk
import * as THREE from "../../jsm/three.module.173.js";
import { OrbitControls } from "../../jsm/OrbitControls.173.js";

document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup'  , onDocumentMouseUp  , false);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.01, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor(0xdedede);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.set(1, 4, 100);

const light = new THREE.AmbientLight(0x404040, 4.5); // soft white light
scene.add(light);
const directionalLight = new THREE.DirectionalLight(0xffffff, 2.5);
directionalLight.position.set(5, 15, 15);
scene.add(directionalLight);
const controls = new OrbitControls(camera, renderer.domElement);
const axesHelper = new THREE.AxesHelper(10);
scene.add(axesHelper);

let selectionMesh;
let selectionSDF;
let offsetMesh 	= new THREE.Vector3();
let offsetSDF = new THREE.Vector3();
 
let objectsToRaycast = [];
const raycasterSDF = new THREE.Raycaster();
const raycasterMesh = new THREE.Raycaster();

const mouse = new THREE.Vector2();

// Auxiliary layer for determining the mouse position and moving the clicked object in 3D
const auxPlaneGeo = new THREE.PlaneGeometry( 40, 40, 40, 40 );
const auxPlaneMat = new THREE.MeshBasicMaterial({color: 0xaaaaaa, transparent:true, opacity:0.3, side:THREE.DoubleSide, wireframe: true });
const auxPlane = new THREE.Mesh(auxPlaneGeo, auxPlaneMat); 
scene.add( auxPlane );
		
const cyl = new THREE.Mesh( new THREE.CylinderGeometry(1, 1, 2 ), new THREE.MeshPhongMaterial( { color: 0x00ff00, wireframe:false } )); 
objectsToRaycast.push(cyl);
scene.add(cyl);
const ico = new THREE.Mesh( new THREE.IcosahedronGeometry( 1, 4), new THREE.MeshPhongMaterial( { color: 0x00ffff, wireframe:false } )); 
objectsToRaycast.push(ico);
ico.translateY( 1 );
scene.add(ico);
 
// Vertex Shader
const vShader = `
  varying vec3 vPosition;
  varying vec2 vUv;
  void main() {
    vPosition = position;
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  }
`;

// Fragment Shader
const fShader = `
uniform float time;
uniform float boundingRadius;
uniform vec3 camPos;
uniform vec3 mousePosition;
uniform vec2 resolution;
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;

varying vec3 vPosition;
varying vec2 vUv;

#define MAX_STEPS 250
#define MAX_DIST 100.0
#define SURF_DIST 1e-4
#define PI 3.1415926

// distance color
struct distCol {
    float d;
    vec4 c;
};

float sdSphere( vec3 p, float s )
{
    return length(p)-s;
}

vec3 translateXYZ(vec3 p, vec3 q) {
    return p - q;
}

distCol GetDist(vec3 p) {
    distCol dc;
    distCol dcSphere;
    vec3 pMouse = translateXYZ(p, mousePosition);
    dcSphere.d = sdSphere( pMouse, boundingRadius);
    dcSphere.c = vec4(1.0, 0.0, 0.0, 1.0);
    dc = dcSphere; // apply to reserved dc
    return dc;
}

distCol RayMarch(vec3 ro, vec3 rd) {
    distCol dc;
    float dO = 0.0;
    for (int i = 0; i < MAX_STEPS; i++) {
        vec3 p = ro + rd * dO;
        dc = GetDist(p);
        dO += dc.d;
        if (dO > MAX_DIST || dc.d < SURF_DIST) break;
    }
    dc.d = dO;
    return dc;
}

vec3 GetNormal(vec3 p) {
    float d = GetDist(p).d;
    vec2 e = vec2(SURF_DIST, 0.0);
    float d1 = GetDist(p - e.xyy).d;
    float d2 = GetDist(p - e.yxy).d;
    float d3 = GetDist(p - e.yyx).d;
    vec3 n = d - vec3(d1, d2, d3);
    return normalize(n);
}

float GetAo(vec3 p, vec3 n) {
    float occ = 0.0;
    float sca = 1.0;
    for (int i = 0; i < 5; i++) {
        float h = 0.001 + 0.15 * float(i) / 4.0;
        float d = GetDist(p + h * n).d;
        occ += (h - d) * sca;
        sca *= 0.95;
    }
    return clamp(1.0 - 1.5 * occ, 0.0, 1.0);
}

float GetLight(vec3 p, vec3 lPos) {
    vec3 l = normalize(lPos - p);
    vec3 n = GetNormal(p);
    float dif = clamp(dot(n, l), 0.0, 1.0);
    return dif;
}

void main() {
    vec2 uv = vUv - 0.5;
    vec3 ro = camPos;
    vec3 rd = normalize(vPosition - ro);
    distCol dc = RayMarch(ro, rd);
    
    if (dc.d >= MAX_DIST) {
        gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0); // no hit
    } else {
        vec3 p = ro + rd * dc.d;
        vec3 lightPos = vec3(2.0, 16.0, 3.0);
        float diff = GetLight(p, lightPos);
        float ao = 0.051 * GetAo(p, GetNormal(p));
        vec4 ct = dc.c;
        vec3 c = ct.rgb;
        vec3 color = 0.7 * c + 0.5 * diff + 0.2 * ao;
    
        gl_FragColor = vec4(color, ct.a);
    }
}
`;

const boxParam = [ 80.0, 80.0, 80.0, 10.0, 10.0, -5.0 ];

let boxGeo;
let box;
let shaderMaterial;
let camPos;

boxGeo = new THREE.BoxGeometry(boxParam[0], boxParam[1], boxParam[2]);

//box helper
scene.add(
  new THREE.Box3Helper(
    new THREE.Box3().setFromBufferAttribute(boxGeo.attributes.position),
    0x444444
  )
); 
 
// ray helper
 
const geoRay = new THREE.BufferGeometry().setFromPoints( [ new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3() ]); 
const lineRay = new THREE.Line(geoRay, new THREE.LineBasicMaterial({ color: 0xff00ff }));
scene.add( lineRay );


shaderMaterial = new THREE.ShaderMaterial({
    uniforms: { 
        camPos: { value: new THREE.Vector3().copy(camera.position) },
        mousePosition: { value: new THREE.Vector3() },
        time: { value: 0.0 },
        boundingRadius: { value: 1.2 },
        resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
    },
    vertexShader: vShader,
    fragmentShader: fShader,
    side: THREE.DoubleSide,
    transparent: true,  // false,  to display the box
});
box = new THREE.Mesh(boxGeo, shaderMaterial);
scene.add(box);
box.position.set(boxParam[3], boxParam[4], boxParam[5]);
box.renderOrder = Infinity;
camPos = new THREE.Vector3();

controls.addEventListener("change", event => {
    camPos.copy(camera.position);
    box.worldToLocal(camPos);
    shaderMaterial.uniforms.camPos.value.copy(camPos);
}, false);

camPos.copy(camera.position);
box.worldToLocal(camPos);
shaderMaterial.uniforms.camPos.value.copy(camPos);
 
let testVector; ////////////////////////////////////////////////////////////

animate();

function animate( ) {
    
    requestAnimationFrame(animate);
    //shaderMaterial.uniforms.time.value = t;
    renderer.render(scene, camera);
}


function drawray( sdfPos ){
    
    const rayArr = geoRay.attributes.position.array; 
    
    rayArr[ 0 ] = sdfPos.x;
    rayArr[ 1 ] = sdfPos.y;
    rayArr[ 2 ] = sdfPos.z;
    rayArr[ 3 ] = testVector.x; 
    rayArr[ 4 ] = testVector.y; 
    rayArr[ 5 ] = testVector.z;    
    //rayArr[ 6 ] = mouse.x; 
    //rayArr[ 7 ] = mouse.y; 
    //rayArr[ 8 ] = 1;    
    geoRay.attributes.position.needsUpdate = true;
    
}

function onDocumentMouseDown(event) {
    getMouse( event );
    const vector = new THREE.Vector3(mouse.x, mouse.y, 1);
    vector.unproject(camera);
    raycasterMesh.set(camera.position, vector.sub(camera.position).normalize());
    const intersects = raycasterMesh.intersectObjects(objectsToRaycast);

    if (intersects.length > 0) {
       controls.enabled = false;
       selectionMesh = intersects[0].object;
       const planeIntersects = raycasterMesh.intersectObject(auxPlane);
       if (planeIntersects.length > 0) {
          offsetMesh.copy(planeIntersects[0].point).sub(auxPlane.position);
       }
    } else {
       raycasterSDF.setFromCamera(mouse, camera);
       const intersectsSDF = raycasterSDF.intersectObject(box);
       if (intersectsSDF.length > 0) {
          controls.enabled = false;
          selectionSDF = true;
          const planeIntersects = raycasterSDF.intersectObject(auxPlane);
          if (planeIntersects.length > 0) {
          
              testVector = offsetSDF.add(auxPlane.position);////////////////////////////////////////////////
            
              offsetSDF.copy(planeIntersects[0].point).sub(auxPlane.position);
             
          }
       }
    }
    
}

 function onDocumentMouseMove(event) {
    event.preventDefault();
    getMouse( event );
    const vector = new THREE.Vector3(mouse.x, mouse.y, 1);
    vector.unproject(camera);
    raycasterMesh.set(camera.position, vector.sub(camera.position).normalize());
    if (selectionMesh) {
       const intersects = raycasterMesh.intersectObject(auxPlane);
       if (intersects.length > 0) {
          let newPos = intersects[0].point.clone().sub(offsetMesh);
          selectionMesh.position.copy(newPos);
       }
    } else if (selectionSDF) {
       const intersects = raycasterMesh.intersectObject(auxPlane);
       if (intersects.length > 0) {
       
          //let newPos = intersects[0].point.clone().sub(offsetSDF); // Difference SDF to mouse
          let newPos = intersects[0].point.clone();
          
          let sdfPos = newPos.clone();
          box.worldToLocal(sdfPos);
          box.material.uniforms.mousePosition.value.copy(sdfPos);
          
          drawray( sdfPos );///////////////////////////////////////////////
       }
    } else {
       const intersects = raycasterMesh.intersectObjects(objectsToRaycast);
       if (intersects.length > 0) {
          auxPlane.position.copy(intersects[0].object.position);
          auxPlane.lookAt(camera.position);
       } 
    }
    
}

function onDocumentMouseUp(event) {
    controls.enabled = true;
    selectionMesh = false;
    selectionSDF = false;
}

function getMouse( e ) {
    mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;  
}
 
</script>
</html>
19

A revised and extended version can be found in the Resources Post
SDFs in the scene - raymarching - #31 by hofk

2025-03-19 20.23.36
2025-03-19 20.23.36332×190 4.85 KB

1 Like