Generation of SDFGeometry online

[hofk]

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 page 81 ) is then applied to these SDFs.

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.

{
"Settings": { "tsl": 0.03 },
"Box": { "type": "box", "whd": { "x": 1.2, "y": 0.75, "z": 1.2 } },
"Displ": { "type": "displace", "op": "Box", "func": "sinXYZ", "d": 0.1, "f": 3 }
}

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

The currently available SDF primitives and operations with their parameters:

---

---

A still incomplete help with examples,

see https://hofk.de/SDFGeometry/Generation_of_SDFGeometry_EN.pdf

Some examples as a picture. More with JSON input in the help.

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

[wenrenqiang]

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

[Lawrence3DPK]

@hofk

https://hofk.de/SDFGeometry/Generation_of_SDFGeometry_EN.pdf

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

[hofk]

@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.

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

4. move this file to the area | Drag SDF definition file (JSON) here. |
   of SDFGeometry

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

That’s all!

[Lawrence3DPK]

@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!

[wenrenqiang]

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

[prisoner849]

@wenrenqiang
But what for?

[jrlazz]

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

[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)

[hofk]

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.

[jrlazz]

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

[hofk]

Why do you use UTF-8 BOM otherwise?

[hofk]

@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.

[jrlazz]

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…

[hofk]

@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)

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

390 function createSDFmeshFromData( data ) { ...

[jrlazz]

OK @hofk … Thank You for the attention

[hofk]

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 } }
}

[wenrenqiang]

I want SDF collision detection for any 3D mesh

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

[wenrenqiang]

用于与 GPU 粒子碰撞的交互式 SDF（由 VFX 图形制作）：r/Unity3D

[prisoner849]

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.

[wenrenqiang]

Ok, I’ll ask somewhere else