Generation of SDFGeometry online

In the post Triangulation of SDFs you can see some initial examples of SDF geometries and meshes.

The BETA version of the tool at SDFGeometry now generates SDF geometries based on certain primitives and operations.

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

A still incomplete little help with a few examples, see 2025-06-08 14.41.42

I would be grateful for any useful hints and suggestions for further development.

3 Likes

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

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

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.
{
"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

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

That’s all!

1 Like

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

Nevertheless this is amazing work!

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

@wenrenqiang
But what for?

1 Like

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

[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 (270 Bytes)

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.


UTF-8-BOM


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.

1 Like

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

Why do you use UTF-8 BOM otherwise?

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.

1 Like

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…

Check the Notepad settings.

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

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

390 function createSDFmeshFromData( data ) { ...
1 Like

OK @hofk … Thank You for the attention :wink:

Capsule has been added, also in the pdf.

No center, use from … to

{
  "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 } }
}
2 Likes

I want SDF collision detection for any 3D mesh

iamyoukou/sdf3d:3D 有符号距离场

用于与 GPU 粒子碰撞的交互式 SDF(由 VFX 图形制作):r/Unity3D

This might be an option: Three-mesh-bvh: A plugin for fast geometry raycasting and spatial queries! - #50 by gkjohnson

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

Ok, I’ll ask somewhere else