# Generation of SDFGeometry online and locally

**URL:** <https://discourse.threejs.org/t/generation-of-sdfgeometry-online-and-locally/83262>\
**Category:** Resources\
**Tags:** buffergeometry, gltf, sdf, geometry\
**Created:** [May 28, 2025, 6:45pm UTC](https://discourse.threejs.org/t/generation-of-sdfgeometry-online-and-locally/83262 "2025-05-28T18:45:47Z")\
**Posts on this page:** 20\
**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:** [May 28, 2025, 6:45pm UTC](https://discourse.threejs.org/t/generation-of-sdfgeometry-online-and-locally/83262/1 "2025-05-28T18:45:47Z")

</div>

**Triangulation of SDFs to efficiently transfer SDFs into BufferGeometry.**

All primitives are generated with the functions ported from GLSL to PHP or JavaScript as SDF. A slightly modified triangulation algorithm (original according to E. Hartmann, see [https://www2.mathematik.tu-darmstadt.de/~ehartmann/cdgen0104.pdf](https://www2.mathematik.tu-darmstadt.de/~ehartmann/cdgen0104.pdf) page 81 ) is then applied to these SDFs.

Both versions of the tool generate SDF geometries based on a number of primitives and operations.

**Online version** at [SDFGeometry Server](https://hofk.de/SDFGeometry/)_(A bit slow on my very inexpensive rental server.)_

**Local version** of the SDF geometry generator is published on GitHub

[GitHub - hofk/SDFGeometry: Generation of SDFGeometry - SDF defined in JSON format, triangulation of a three.js BufferGeometry](https://github.com/hofk/SDFGeometry)

under a **license that permits private use and use for educational purposes** ,  
but not commercial use. ==\>\> See GitHub for details.

* * *

 ![2025-10-14 11.38.35](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/6/76ddbf2f8786df711154d5e44a529302c85fe4dc.png)

The available SDF primitives and operations with their parameters see

![2025-06-08 14.41.42](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/0/f0b112e845bd019f6fb18816094248507ec2141e.png) [https://hofk.de/SDFGeometry/Generation\_of\_SDFGeometry\_EN.pdf](https://hofk.de/SDFGeometry/Generation_of_SDFGeometry_EN.pdf)

There are also many examples with JSON input.

Additional json files: [https://hofk.de/SDFGeometry/examples.zip](https://hofk.de/SDFGeometry/examples.zip)

The geometries can be downloaded as three.js BufferGeometry definitions or GLTF meshes.

Examples:

 ![2025-07-17 18.33.16](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/4/84cd10d5688f45b788c5e4ca48c7a955fc33320c.png)  
 ![2025-09-16 21.09.23](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/9/a9ccfc731f2daf7079ac368dca13854b188d2583.png)  
 ![2025-09-02 09.35.22](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/f/ef38d2bd6fe1a1b0ae8b4a80bc76a23a5a57e8f5.png)

used: triangulation sequence \>\>\>\>\>

 ![2025-07-13 17.22.10](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/3/33f982b462e20f99d9a243dbb81aee9c928c16f3.png)

 ![2025-09-01 20.23.06](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/e/ce59e1f93e7465acec50a51e4fcc7f445c40a630.png)  
 ![2025-08-15 14.54.00](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/1/a1e6feb05a52de7231da386d71098d7d994043f9.png)

---

<div class="post-metadata">

**Author:** ![wenrenqiang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wenrenqiang/32/54020_2.png) [@wenrenqiang](https://discourse.threejs.org/u/wenrenqiang)\
**Post date:** [May 29, 2025, 1:00am UTC](https://discourse.threejs.org/t/generation-of-sdfgeometry-online-and-locally/83262/2 "2025-05-29T01:00:11Z")

</div>

Did not understand how to use it? Is there an example?

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [May 29, 2025, 7:01am UTC](https://discourse.threejs.org/t/generation-of-sdfgeometry-online-and-locally/83262/3 "2025-05-29T07:01:08Z")

</div>

> [@hofk](#):
>
> [https://hofk.de/SDFGeometry/Generation\_of\_SDFGeometry\_EN.pdf](https://hofk.de/SDFGeometry/Generation_of_SDFGeometry_EN.pdf)

Did you have a look at the pdf shared here by @hofk?

---

<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:** [May 29, 2025, 7:26am UTC](https://discourse.threejs.org/t/generation-of-sdfgeometry-online-and-locally/83262/4 "2025-05-29T07:26:26Z")

</div>

> [@wenrenqiang](#):
>
> Did not understand how to use it?

I also thought the PDF would be enough.

But here again step by step:

1. open a simple text editor on your computer,
2. click on the pdf help file and go to page 2,
3. copy one of the examples into the text file and save it on your computer, e.g.

```javascript
{
"Settings": { "tsl": 0.05 },
"Sph": { "type": "sphere", "r": 0.55 , "c": { "x": 0.0, "y": 0.75, "z": 0.25 } },
"Box": { "type": "box", "whd": { "x": 1.0, "y": 0.4, "z": 1.0 }, "s": 0.11 },
"Union": { "type": "union", "op1": "Sph", "op2": "Box", "s": 0.08 }
}

```

```
         // You can of course also create your own examples

```

1. move this file to the area | Drag SDF definition file (JSON) here. |  
of [SDFGeometry](https://hofk.de/SDFGeometry/)

2. export the result to your computer using the | export geometry or GLTF | button,

That’s all!

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [May 29, 2025, 7:58am UTC](https://discourse.threejs.org/t/generation-of-sdfgeometry-online-and-locally/83262/5 "2025-05-29T07:58:54Z")

</div>

> [@hofk](#):
>
> I also thought the PDF would be enough.

Some basic generator buttons and maybe text input with a submit button in the side panel would work wonders!

Nevertheless this is amazing work!

---

<div class="post-metadata">

**Author:** ![wenrenqiang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wenrenqiang/32/54020_2.png) [@wenrenqiang](https://discourse.threejs.org/u/wenrenqiang)\
**Post date:** [May 29, 2025, 8:38am UTC](https://discourse.threejs.org/t/generation-of-sdfgeometry-online-and-locally/83262/6 "2025-05-29T08:38:16Z")

</div>

Is there a way to convert GLTF 3D meshes to SDF?

---

<div class="post-metadata">

**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:** [May 29, 2025, 12:50pm UTC](https://discourse.threejs.org/t/generation-of-sdfgeometry-online-and-locally/83262/7 "2025-05-29T12:50:29Z")

</div>

@wenrenqiang  
But what for?

---

<div class="post-metadata">

**Author:** ![jrlazz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jrlazz/32/64383_2.png) [@jrlazz](https://discourse.threejs.org/u/jrlazz)\
**Post date:** [May 29, 2025, 2:16pm UTC](https://discourse.threejs.org/t/generation-of-sdfgeometry-online-and-locally/83262/8 "2025-05-29T14:16:40Z")

</div>

Hi @hofk …

I tried this example and after dragging I receive:

WebGL warning: drawArraysInstanced: Drawing to a destination rect smaller than the viewport rect. (This warning will only be given once)  
XHRPOST

> **[SDFGeometry](https://hofk.de/SDFGeometry/)**

[HTTP/1.1 500 Internal Server Error 2422ms]  
error: SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

at the console.

I am sure that I am doing something wrong!!!

PS: Here goes the file I used:  
[zem.zip](https://discourse.threejs.org/uploads/short-url/4Aw3qC6JeMY2VhXy7olRYkIg78I.zip) (270 Bytes)

---

<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:** [May 29, 2025, 4:21pm UTC](https://discourse.threejs.org/t/generation-of-sdfgeometry-online-and-locally/83262/9 "2025-05-29T16:21:35Z")

</div>

I have downloaded and unpacked your file. I think you copied the content from the help PDF?

When I use the file, I also get the error.

I wanted to compare the files with Notepad++ compare. Gives the message that there are different encodings.

 ![2025-05-29 18.14.29](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/7/171c69947c56bb963c81de01f9f33461272b7416.png)  
UTF-8-BOM

* * *

 ![2025-05-29 18.14.52](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/2/6270dfedf4e2592c89c0fb30df43780cdd67b980.png)

UTF-8

* * *

UTF-8-BOM (Byte Order Mark) is a special, invisible character string that can be inserted at the beginning of a file in UTF-8 encoding. It serves as an “identifier” that the file is a Unicode file in UTF-8

I think that’s the problem, use UTF-8.

* * *

However, the one extra character is only the space at the end of the sphere and is unimportant.

---

<div class="post-metadata">

**Author:** ![jrlazz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jrlazz/32/64383_2.png) [@jrlazz](https://discourse.threejs.org/u/jrlazz)\
**Post date:** [May 29, 2025, 4:46pm UTC](https://discourse.threejs.org/t/generation-of-sdfgeometry-online-and-locally/83262/10 "2025-05-29T16:46:28Z")

</div>

Thank You @hofk …  
I took the zem.JSON in notepad and exported it to UTF-8 as ben.JSON… and 😀 … 😉

---

<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:** [May 29, 2025, 4:50pm UTC](https://discourse.threejs.org/t/generation-of-sdfgeometry-online-and-locally/83262/11 "2025-05-29T16:50:09Z")

</div>

Why do you use UTF-8 BOM otherwise?

---

<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:** [May 29, 2025, 6:07pm UTC](https://discourse.threejs.org/t/generation-of-sdfgeometry-online-and-locally/83262/12 "2025-05-29T18:07:12Z")

</div>

> [@Lawrence3DPK](#):
>
> Some basic generator buttons and maybe text input with a submit button in the side panel would work wonders!

That sounds tempting at first.

However, it would require a complete editor in a popup, as the side panel is not sufficient. A number of primitives and operations have to be added. All parameters must also be supported.

Then you would have the JSON in a text area and if you don’t want it to be disposable, you also have to save it in a file.

This can be done more cheaply and, for example, with text modules from a simple word processor.  
I have chosen minimal abbreviations for the frequently required information in order to design the file effectively. The only thing that annoys me is the indispensable “… “.

That’s why I work with copy templates.

` "Settings": { "tsl": 0. , "maxDistance": , "startPoint": { "x": , "y": , "z": }, "direction": { "x": , "y": , "z": } },`

For the box as an example:

`"Box": { "type": "box", "whd": { "x": , "y": , "z": }, "c": { "x": , "y": , "z": }, "quat":{ "w": ,"x": ,"y": ,"z": }, "s": 0. },`

plus Euler variant with

`"order": " ", "rotx": , "roty": , "rotz": ,`

Once I have completed the primitives and operations, I will then try to change the core of E. Hartmann’s algorithm so that sharp edges are also possible. Since there will almost certainly be increased computational effort, I will realize a selection and keep the previous code at `"s" > 0`.

---

<div class="post-metadata">

**Author:** ![jrlazz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jrlazz/32/64383_2.png) [@jrlazz](https://discourse.threejs.org/u/jrlazz)\
**Post date:** [May 29, 2025, 6:10pm UTC](https://discourse.threejs.org/t/generation-of-sdfgeometry-online-and-locally/83262/13 "2025-05-29T18:10:28Z")

</div>

I did not used it… I just copied the text from Your post and saved in notepad.

Then by Your suggestion I oppened the bad file in notepad and exported it to utf-8.

PS: I tried to bring Your app to home but always give  
error: SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data…  
Even files that run at Your site…

---

<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:** [May 29, 2025, 6:19pm UTC](https://discourse.threejs.org/t/generation-of-sdfgeometry-online-and-locally/83262/14 "2025-05-29T18:19:56Z")

</div>

> [@jrlazz](#):
>
> saved in notepad

Check the Notepad settings.

> [@jrlazz](#):
>
> I tried to bring Your app to home

The calculation of the SDFs and the triangulation runs on the server!  
Look in the source code of the page (Ctrl U)

```javascript
450 function uploadFile(file) { // AJAX upload of the file using Fetch API
      ...
      createSDFmeshFromData(data);

```

```javascript

390 function createSDFmeshFromData( data ) { ...

```

---

<div class="post-metadata">

**Author:** ![jrlazz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jrlazz/32/64383_2.png) [@jrlazz](https://discourse.threejs.org/u/jrlazz)\
**Post date:** [May 29, 2025, 6:33pm UTC](https://discourse.threejs.org/t/generation-of-sdfgeometry-online-and-locally/83262/15 "2025-05-29T18:33:24Z")

</div>

OK @hofk … Thank You for the attention 😉

---

<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:** [May 29, 2025, 7:23pm UTC](https://discourse.threejs.org/t/generation-of-sdfgeometry-online-and-locally/83262/16 "2025-05-29T19:23:14Z")

</div>

Capsule has been added, also in the pdf.

 ![2025-05-29 21.22.31](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/0/b04ac6c206875185417e820fb75312d633e794c5.png)

No center, use from … to

```javascript
{
  "Settings": { "tsl": 0.25 },
  "Capsule": { "type": "capsule", "r": 0.8, "from": { "x": -0.1, "y": -0.5, "z": 0 }, "to": { "x": 0.2, "y": 1.5, "z": 0.3 } }
}

```

---

<div class="post-metadata">

**Author:** ![wenrenqiang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wenrenqiang/32/54020_2.png) [@wenrenqiang](https://discourse.threejs.org/u/wenrenqiang)\
**Post date:** [May 30, 2025, 7:07am UTC](https://discourse.threejs.org/t/generation-of-sdfgeometry-online-and-locally/83262/17 "2025-05-30T07:07:02Z")

</div>

I want SDF collision detection for any 3D mesh

[iamyoukou/sdf3d：3D 有符号距离场](https://github.com/iamyoukou/sdf3d)

---

<div class="post-metadata">

**Author:** ![wenrenqiang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wenrenqiang/32/54020_2.png) [@wenrenqiang](https://discourse.threejs.org/u/wenrenqiang)\
**Post date:** [May 30, 2025, 7:08am UTC](https://discourse.threejs.org/t/generation-of-sdfgeometry-online-and-locally/83262/18 "2025-05-30T07:08:37Z")

</div>

[用于与 GPU 粒子碰撞的交互式 SDF（由 VFX 图形制作）：r/Unity3D](https://www.reddit.com/r/Unity3D/comments/kkzcou/interactive_sdf_for_collision_against_gpu/)

---

<div class="post-metadata">

**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:** [May 30, 2025, 2:59pm UTC](https://discourse.threejs.org/t/generation-of-sdfgeometry-online-and-locally/83262/19 "2025-05-30T14:59:59Z")

</div>

This might be an option: [Three-mesh-bvh: A plugin for fast geometry raycasting and spatial queries! - #50 by gkjohnson](https://discourse.threejs.org/t/three-mesh-bvh-a-plugin-for-fast-geometry-raycasting-and-spatial-queries/26394/50)

PS We’re going off-topic. If you’ve got questions, then ask them in the respect category.

---

<div class="post-metadata">

**Author:** ![wenrenqiang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wenrenqiang/32/54020_2.png) [@wenrenqiang](https://discourse.threejs.org/u/wenrenqiang)\
**Post date:** [June 5, 2025, 10:02am UTC](https://discourse.threejs.org/t/generation-of-sdfgeometry-online-and-locally/83262/20 "2025-06-05T10:02:31Z")

</div>

Ok, I’ll ask somewhere else

[Next page](https://discourse.threejs.org/t/generation-of-sdfgeometry-online-and-locally/83262.md?page=2)