# How do you integrate Signed Distance Fields (SDF) into a basic three.js scene? **URL:** \ **Category:** Questions\ **Tags:** sdf\ **Created:** [February 3, 2025, 5:24pm UTC](https://discourse.threejs.org/t/how-do-you-integrate-signed-distance-fields-sdf-into-a-basic-three-js-scene/77504 "2025-02-03T17:24:02Z")\ **Posts on this page:** 9\ **Page:** 2
**Author:** ![dubois](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dubois](https://discourse.threejs.org/u/dubois)\ **Post date:** [February 13, 2025, 2:27pm UTC](https://discourse.threejs.org/t/how-do-you-integrate-signed-distance-fields-sdf-into-a-basic-three-js-scene/77504/21 "2025-02-13T14:27:32Z")
TIL gl\_DepthRange. Wow! How long has this been available? ---
**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\ **Post date:** [February 13, 2025, 2:29pm UTC](https://discourse.threejs.org/t/how-do-you-integrate-signed-distance-fields-sdf-into-a-basic-three-js-scene/77504/22 "2025-02-13T14:29:11Z")
Hurray! it works. 🙂 Link overwritten with improved file. * * * Annotation: If I see it correctly, the last value for gl\_FragColor is the transparency. In the current version r173 you can reduce the value 1.0 and get a brighter display, at 0 .0 it was then only white. In the version up to r136 it doesn’t matter what number is there, it is obviously discarded. There must have been an internal change in three.js ? ---
**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\ **Post date:** [February 15, 2025, 7:00pm UTC](https://discourse.threejs.org/t/how-do-you-integrate-signed-distance-fields-sdf-into-a-basic-three-js-scene/77504/23 "2025-02-15T19:00:30Z")
I have now generated a variant of the integration of the SDFs into the three.js scene, which I like quite a bit. [06\_SDF-Shader-Raymarching](https://hofk.de/main/threejs/_SDF/06_SDF-Shader-Raymarching.html) But there is one strange thing when you call up or reload the page. The position of the SDFs is shifted and a piece is a bit off to the side. If you move the scene briefly (OrbitControls), the SDF jumps to the correct position and it is perfect. ![2025-02-15 18.34.26](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/8/18a25336f8774c98f107ab41c5763c8a1a5a2467.png) ![2025-02-15 18.34.45](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/f/df60fac2c1994645b6a07678d95cac481ffa944c.png) **UPDATE:** found 🙃 ```javascript camPos.copy(camera.position); cube.worldToLocal(camPos); shaderMaterial.uniforms.camPos.value.copy(camPos); ``` then `renderer.setAnimationLoop( () => { renderer.render(scene, camera);});` * * * The code: ```javascript 06_SDF-Shader-Raymarching ``` ---
**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\ **Post date:** [February 15, 2025, 7:13pm UTC](https://discourse.threejs.org/t/how-do-you-integrate-signed-distance-fields-sdf-into-a-basic-three-js-scene/77504/24 "2025-02-15T19:13:48Z")
Any plans for animation of SDF objects? ---
**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\ **Post date:** [February 15, 2025, 7:17pm UTC](https://discourse.threejs.org/t/how-do-you-integrate-signed-distance-fields-sdf-into-a-basic-three-js-scene/77504/25 "2025-02-15T19:17:02Z")
Seems, the answer is in the description of the issue. You set camera position without the casting it into object’s local space, when you instantiate material: ```javascript {camPos: {value: new THREE.Vector3().copy(camera.position)} ``` But, when you move the camera with the controls, now it it’s in object’s local space: ```javascript camPos.copy(camera.position); cube.worldToLocal(camPos); shaderMaterial.uniforms.camPos.value.copy(camPos); ``` ---
**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\ **Post date:** [February 15, 2025, 7:18pm UTC](https://discourse.threejs.org/t/how-do-you-integrate-signed-distance-fields-sdf-into-a-basic-three-js-scene/77504/26 "2025-02-15T19:18:32Z")
> [@PavelBoytchev](#): > > Any plans for animation of SDF objects? The SDFs are in a box. I can therefore move them as a whole. Let’s see what works. See [SDFs in the scene - raymarching - #29 by hofk](https://discourse.threejs.org/t/sdfs-in-the-scene-raymarching/78355/29) ---
**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\ **Post date:** [February 15, 2025, 7:21pm UTC](https://discourse.threejs.org/t/how-do-you-integrate-signed-distance-fields-sdf-into-a-basic-three-js-scene/77504/27 "2025-02-15T19:21:00Z")
> [@prisoner849](#): > > Seems, the answer is in the description of the issue. You’re so fast, I could have waited. When I posted it, I noticed it myself - but thank you!!! ---
**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\ **Post date:** [February 15, 2025, 8:10pm UTC](https://discourse.threejs.org/t/how-do-you-integrate-signed-distance-fields-sdf-into-a-basic-three-js-scene/77504/28 "2025-02-15T20:10:38Z")
I’ve added primitive combinations. [07\_SDF-Shader-Raymarching](https://hofk.de/main/threejs/_SDF/07_SDF-Shader-Raymarching.html) ```javascript distCol opUnion(distCol dc1, distCol dc2) { distCol dc; float d = min(dc1.d, dc2.d); vec3 c = d < dc2.d ? dc1.c : dc2.c; dc.d = d; dc.c = c; return dc; } distCol opSubtraction(distCol dc1, distCol dc2) { distCol dc; float d = max(-dc1.d, dc2.d); vec3 c = d > dc2.d ? dc1.c : dc2.c; dc.d = d; dc.c = c; return dc; } ``` ```javascript dc = opSubtraction(dcSph, dcTor); dc = opUnion(dc, dcRBox ); ``` ![2025-02-15 21.01.21](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/c/6c3bd1ed4f5f31fab6d80c78c37f6e188bf11008.png) * * * UPDATE SDF and mesh appear fully integrated . ---
**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\ **Post date:** [February 17, 2025, 10:28am UTC](https://discourse.threejs.org/t/how-do-you-integrate-signed-distance-fields-sdf-into-a-basic-three-js-scene/77504/29 "2025-02-17T10:28:03Z")
> [@PavelBoytchev](#): > > Any plans for animation of SDF objects? So far, something like this is already working in the test example. ```javascript vec3 pTransSph = p - vec3( 0.5*cos(time), 0.2, 0.3*sin(time)); // translate distCol dcSph; dcSph.d = sdSphere( pTransSph , 0.5 ); dcSph.c = vec3( 0.6, 0.6, 0.1 ); vec3 pTransTor = p - vec3( 0.4, -0.1, -0.3); vec3 pRotTor = rotateX(pTransTor, -0.3*time*PI); // radiant ( -angle) distCol dcTor; dcTor.d = sdTorus(pRotTor, vec2(0.575, 0.14)); dcTor.c = vec3( 0.5, 0.1, 0.5 ); distCol dcRBox; dcRBox.d = sdRoundBox(p, vec3(0.8, 0.1, 0.2), 0.04); dcRBox.c = vec3( 0.1, 0.2, 1.0 ); ``` * * * With movement of the box containing the SDF: [Previous page](https://discourse.threejs.org/t/how-do-you-integrate-signed-distance-fields-sdf-into-a-basic-three-js-scene/77504.md?page=1)