# Is there a library for Javascript distance functions?

**URL:** <https://discourse.threejs.org/t/is-there-a-library-for-javascript-distance-functions/80464>\
**Category:** Questions\
**Tags:** distance-function, sdf\
**Created:** [March 31, 2025, 4:31pm UTC](https://discourse.threejs.org/t/is-there-a-library-for-javascript-distance-functions/80464 "2025-03-31T16:31:48Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**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:** [March 31, 2025, 4:31pm UTC](https://discourse.threejs.org/t/is-there-a-library-for-javascript-distance-functions/80464/1 "2025-03-31T16:31:48Z")

</div>

After inserting SDFs into the three.js scene via shader ([SDFs in the scene - raymarching](https://discourse.threejs.org/t/sdfs-in-the-scene-raymarching/78355) ), I am now in the process of generating the SDFs directly as BufferGeometry. The solution that was temporarily integrated in three.js is too specialized and limited for me, see  
[How do you integrate Signed Distance Fields (SDF) into a basic three.js scene? - #2 by Mugen87](https://discourse.threejs.org/t/how-do-you-integrate-signed-distance-fields-sdf-into-a-basic-three-js-scene/77504/2)  
and  
[How do you integrate Signed Distance Fields (SDF) into a basic three.js scene? - #6 by hofk](https://discourse.threejs.org/t/how-do-you-integrate-signed-distance-fields-sdf-into-a-basic-three-js-scene/77504/6)

* * *

This is already working:

 ![2025-03-31 17.27.29](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/e/2e9239107620960f0eaa171eccc07a70325eda22.png)

I need the distance functions from Inigo Quilez  
[Inigo Quilez :: computer graphics, mathematics, shaders, fractals, demoscene and more](https://iquilezles.org/articles/distfunctions/)  
in the form of a closure.

Similar to the [SDF-JS-Renderer](https://hofk.de/main/threejs/_SDF/SDF-JS-Renderer.html)

```javascript
function Sphere(radius, shader) { 
    return function(p){
        const distance = p.norm() - radius;
        return new DistanceShaderPair(distance, shader );
    }
}

```

whereby no shader is returned.

So for example

```javascript
function sdEllipsoid( r3 ) {
  return (p) => {
    const q1 = divV3( p, r3 );
    const k0 = lengthV3( q1 );
    const q2 = divV3( p, mulV3( r3, r3 ) );
    const k1 = lengthV3( q2 );
    return k0*( k0 - 1.0)/ k1;
  };
}

```

in my current notation with functions such as  
`const lengthV3 = ( { x: x, y: y, z: z } ) => ( Math.sqrt( x * x + y * y + z * z ) );`

The adjustments require quite a lot of effort.

**My question:**

Are there already corresponding versions of the distance functions for Javascript somewhere?

---

<div class="post-metadata">

**Author:** ![Arthur](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arthur/32/22954_2.png) [@Arthur](https://discourse.threejs.org/u/Arthur)\
**Post date:** [March 31, 2025, 5:20pm UTC](https://discourse.threejs.org/t/is-there-a-library-for-javascript-distance-functions/80464/2 "2025-03-31T17:20:28Z")

</div>

Not that I’m aware of, but this is a great use case for using an LLM - just copy the whole page form IQ’s website and ask Chat GPT or other to transform it to the appropriate format.

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [March 31, 2025, 7:23pm UTC](https://discourse.threejs.org/t/is-there-a-library-for-javascript-distance-functions/80464/3 "2025-03-31T19:23:48Z")

</div>

You mean these functions ?

> **[three.js docs](https://threejs.org/docs/#api/en/math/Vector3.distanceTo)**

> **[three.js docs](https://threejs.org/docs/#api/en/math/Vector3.manhattanDistanceTo)**

> **[three.js docs](https://threejs.org/docs/#api/en/math/Vector3.distanceToSquared)**

---

<div class="post-metadata">

**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:** [March 31, 2025, 7:47pm UTC](https://discourse.threejs.org/t/is-there-a-library-for-javascript-distance-functions/80464/4 "2025-03-31T19:47:14Z")

</div>

No, the complete list of shader compatible SDF functions according to Inigo Quilez, but transformed similar to the example `function sdEllipsoid( r3 ) {...` from the original article.

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [March 31, 2025, 8:07pm UTC](https://discourse.threejs.org/t/is-there-a-library-for-javascript-distance-functions/80464/5 "2025-03-31T20:07:47Z")

</div>

Oh sorry didn’t catch that.

I second what @Arthur said. 😃

Thing is, IQs sdfs are more than just straight math.. it’s more like.. an expression of his art.. as soon as you get something more complex than the most basic primitives, the implementations become more interpretive, and the skill of the creator shows through..  
Things like.. the order of operations, magic constants to make them work/optimal etc.  
So there isn’t just some platonic fundamental taxonomy of implementations.

---

<div class="post-metadata">

**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:** [April 1, 2025, 7:52am UTC](https://discourse.threejs.org/t/is-there-a-library-for-javascript-distance-functions/80464/6 "2025-04-01T07:52:16Z")

</div>

> [@manthrax](#):
>
> Thing is, IQs sdfs are more than just straight math.. it’s more like.. an expression of his art.

That’s true, but most things can be created by combining the primitives. This also easily becomes an artistic task.  
I have already tried a few dines out of curiosity.

---

<div class="post-metadata">

**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:** [April 1, 2025, 7:22pm UTC](https://discourse.threejs.org/t/is-there-a-library-for-javascript-distance-functions/80464/7 "2025-04-01T19:22:26Z")

</div>

> [@Arthur](#):
>
> … and ask Chat GPT or other to transform it to the appropriate format

I tried it, but with my free version I only got a few new examples with some clever explanations in addition to the examples provided as a template.

The amount of code was probably too big. I’ll try it soon with small code snippets, bit by bit. At least that will save me from my constant mistakes.

 ![2025-04-01 21.21.26](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/6/86bda926f66f0a9091e897bab388827a20303770.jpeg)

```javascript

//..... define SDF ......................................
let SDF;
 
const sdf1 = sdSphere( center, r );
const sdf2 = sdSphere( { x: 0.5, y: 0.8, z: 0.5 }, 0.7 );
const sdf3 = sdEllipsoid( { x: 0.5, y: 0.0, z: 0.5 }, { x: 1.5, y: 1.1, z: 1.2 } );

SDF = opSmoothSubtraction( sdf2, sdf3, 0.6 );
SDF = opUnion( SDF, sdf1 );

```

---

<div class="post-metadata">

**Author:** ![Attila\_Schroeder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/attila_schroeder/32/36097_2.png) [@Attila\_Schroeder](https://discourse.threejs.org/u/Attila_Schroeder)\
**Post date:** [April 2, 2025, 1:18am UTC](https://discourse.threejs.org/t/is-there-a-library-for-javascript-distance-functions/80464/8 "2025-04-02T01:18:47Z")

</div>

Is this from gkjohnson in that vein? It helped me a lot.

> **[three-mesh-bvh - Complex Geometry Raycasting](https://gkjohnson.github.io/three-mesh-bvh/example/bundle/raycast.html)**

---

<div class="post-metadata">

**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:** [April 2, 2025, 7:35am UTC](https://discourse.threejs.org/t/is-there-a-library-for-javascript-distance-functions/80464/9 "2025-04-02T07:35:32Z")

</div>

> [@Attila\_Schroeder](#):
>
> Is this from gkjohnson in that vein?

No, it is a special approach and is based on E. Hartmann’s triangulation algorithm, which he implemented in Pascal over 20 years ago.

* * *

(partly German)  
[Implizite Fläche – Wikipedia](https://de.wikipedia.org/wiki/Implizite_Fl%C3%A4che)  
[https://www2.mathematik.tu-darmstadt.de/~ehartmann/cdgen0104.pdf](https://www2.mathematik.tu-darmstadt.de/~ehartmann/cdgen0104.pdf)  
[https://www2.mathematik.tu-darmstadt.de/~ehartmann/cdg0/cdg0n.pdf](https://www2.mathematik.tu-darmstadt.de/~ehartmann/cdg0/cdg0n.pdf)

* * *

I have already used this algorithm in a modified form several times.  
See  
[GitHub - hofk/THREEi.js: three.js addon for triangulation of implicit surfaces and for forms with holes. The addon generates indexed BufferGeometries.](https://github.com/hofk/THREEi.js)

[Single-branched geometry organically shaped in the web editor](https://discourse.threejs.org/t/single-branched-geometry-organically-shaped-in-the-web-editor/76129)

Specific changes must be made for each application. The original algorithm requires an implicit function whose partial derivatives must be given, e.g.

```javascript

// Example: implicit surface genus2:

const isf = ( x, y, z ) => ( 2*y*( y*y - 3*x*x )*( 1 - z*z ) + ( x*x + y*y )*( x*x + y*y ) - ( 9*z*z - 1 )*( 1 - z*z ) );// IMPLICIT SURFACE Function
const dx = ( x, y, z ) => ( -12*x*y*( 1 - z*z ) + 4*x*( x*x + y*y ) );// PARTIAL DERIVATE to x
const dy = ( x, y, z ) => ( 6*( y*y - x*x )*( 1 - z*z ) + 4*y*( x*x + y*y ) );// PARTIAL DERIVATE to y
const dz = ( x, y, z ) => ( -4*y*( y*y - 3*x*x )*z + 36*z*z*z - 20*z );// PARTIAL DERIVATE to z

```

I still have open problems with the adjustment to SDFs.  
For edges with external angles of 270° or more, the connection to the surface is no longer clear.  
Such angles also occur during subtraction and there are no clear tangents at the sharp cutting edges.

I still have to come up with something.  
I hope that these problems can be solved somehow. 🤔

---

<div class="post-metadata">

**Author:** ![Attila\_Schroeder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/attila_schroeder/32/36097_2.png) [@Attila\_Schroeder](https://discourse.threejs.org/u/Attila_Schroeder)\
**Post date:** [April 2, 2025, 10:34am UTC](https://discourse.threejs.org/t/is-there-a-library-for-javascript-distance-functions/80464/10 "2025-04-02T10:34:30Z")

</div>

I can’t yet assess whether what I’m doing here is suitable for that. So far, I’m interested in determining volume for real buoyancy. I could store the triangles that intersect the voxel in buffers for each voxel and then calculate the exact distances when a ray moves through the voxel. But these are just ideas so far. I’m busy with other things.

> **[GitHub - Spiri0/Threejs-WebGPU-Voxelizer: A small Threejs WebGPU repository that shows how...](https://github.com/Spiri0/Threejs-WebGPU-Voxelizer)**
>
> A small Threejs WebGPU repository that shows how to voxel meshes

---

<div class="post-metadata">

**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:** [April 5, 2025, 6:52pm UTC](https://discourse.threejs.org/t/is-there-a-library-for-javascript-distance-functions/80464/11 "2025-04-05T18:52:33Z")

</div>

A small experiment on determining the normals of SDFs. I did it because I’m having errors with the normals in my project, and it’s difficult to debug. The test shows that the functions used are fine. The error I’m looking for is apparently well hidden in the overall algorithm.

It drags on. 😵‍💫

 ![2025-04-05 20.49.01](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/d/ed93979406e7537c719001339baaf30807269c60.png)