Addon for triangulation of implicit surfaces/ forms with holes

The THREEi addon is used to create indexed geometries for implicit surfaces and forms with holes.

On GitHub: GitHub - hofk/THREEi.js: three.js addon for triangulation of implicit surfaces and for forms with holes. The addon generates indexed BufferGeometries.

The addon contains the sphere with holes. See also Triangulation sphere with holes


:white_check_mark: Update: August 8th

Added a version with limitation for infinite surfaces (e.g. cylinders) or cut surfaces by a limitation of the coordinate. It requires more code and execution effort, it is internal realised as an additional function. Description adjusted here.

:white_check_mark: Update: September 24th

Cylinder with holes was added to the addon. See also Triangulation cylinder with holes

:white_check_mark: Update: October 7th

Another variant of the sphere with holes was added. The rough side length of the triangles is to be indicated as with the cylinder. This allows the shapes to be joined together exactly.

:white_check_mark: Update: October 18th

The algorithm for the sphere with holes previously contained no check whether the current front overlaps. In very many cases with few holes this is not a problem. But it can lead to errors in more complicated cases!
:heavy_plus_sign: The overlap check has been completed.
The older, simpler and less expensive version of the sphere with holes was saved separately: THREEi_ONLY_SphereWithSomeHoles.js

:white_check_mark: Update 07th February 2020

:heavy_plus_sign: InnerGeometry, combines sphere, cylinder and other - with holes

examples
THREEi.js/InnerGeometryTHREEi_01.html at master · hofk/THREEi.js · GitHub
THREEi.js/InnerGeometryTHREEi_02.html at master · hofk/THREEi.js · GitHub


Algorithm based on E. Hartmann.

The algorithm was originally implemented in Pascal and visualized with POV-Ray.

The implementation of the algorithm with three.js/JavaScript deviates from the template in some places.

de: https://www2.mathematik.tu-darmstadt.de/~ehartmann/cdg0/cdg0n.pdf

en:
https://www2.mathematik.tu-darmstadt.de/~ehartmann/cdgen0104.pdf

siehe / see

de: Implizite Fläche – Wikipedia

en:

The addon THREEi.js capsules in the section … ImplicitSurface - Triangulation … the functions

function triangulation( isf, dx, dy, dz, xs, ys, zs, d, e, fc, pc )
function triangulationBounds( isf, dx, dy, dz, xs, ys, zs, d, e, fc, pc, b )

These can be copied and directly integrated into your own projects.

The implicit surfaces are defined in separate js files. See examples folder.

EXAMPLE

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

const xs = 0; // x START POINT
const ys = 3; // y START POINT
const zs = 0; // z START POINT

const e = 0.001; // epsilon 
const d = 0.08; // rough edge length of triangles

genus2

There are two variants for calling the function in the THREEi addon.

const g = new THREE.BufferGeometry( );
g.createImplicitSurface = THREEi.createImplicitSurface;

// use version (A) with opt for infinite surfaces such as cylinders and cones or for cuts
	/*opt optional object, all properties also optional
				{ 	
					fc:  faces //( max. number of triangles )
					pc:  positions // ( max. number of points )
					b:   bounds //  array [ xMax, xMin, yMax, yMin, zMax, zMin ]
				}
	*/

// (A) parameters from implicitSurface example.js, with object of optional parameters, contains bounds 
g.createImplicitSurface( isf, dx, dy, dz, xs, ys, zs, d, e, opt );

// (B) parameters from implicitSurface example.js with some default values
//g.createImplicitSurface( isf, dx, dy, dz, xs, ys, zs, d, e );

Try it out: http://sandbox.threejs.hofk.de/ last section
or directly http://sandboxthreei.threejs.hofk.de/

9 Likes

Storm of applause! :+1:

See original post above. :slightly_smiling_face:

:heavy_plus_sign: A small addition.

The calculation of the triangles of the implicit surfaces requires some effort. Therefore, it may be useful to export the result of the calculation as a complete three.js BufferGeometry definition.

I added it on GitHub.

The file triangulationImplicitSurfaceExportGeo.html serves this purpose. See folder Examples. If you press the export Def button, the JavaScript code is displayed and copied to the clipboard. The …32 arrays are shortened to the true length. This three.js BufferGeometry definition can be inserted into the file implicitSurfaceImport.html at the marked position. The definition can also easily be copied into your own projects.

1 Like

Is there any good way to get the formula using your plugin?

Some examples can be found there:
https://en.wikipedia.org/wiki/Implicit_surface

Short explanations only in German (you can simply translate them), see the formulas:
https://www.frassek.org/3d-flächen/implizite-flächen/

Thank you, ok


:white_check_mark: Update: September 24th

Cylinder with holes was added to the addon. See also Triangulation cylinder with holes


See original post above. :slightly_smiling_face:

The Examples folder contains a simple inner geometry of cylinders with holes. 17

See original post above.:slightly_smiling_face:

The Examples folder now contains both variants in one example. 25


:white_check_mark: Update: October 18 th

The algorithm for the sphere with holes previously contained no check whether the current front overlaps. The overlap check has been completed.


See original post above. :slightly_smiling_face:

:white_check_mark: Update 07th February 2020

:heavy_plus_sign: InnerGeometry, See original post above. :slightly_smiling_face:

Great work!
Also, have a look at Implisolid that we developed in 2016:

http://sohale.github.io/demos/implisolid-build/demo1/mp5_json_code.html

It is tailored for ThreeJS

Ideas and contributions are welcome

During the conversion to module, I discovered an error.

There is a bugfix. THREEi.js/THREEi.js at 6864a2786ca533edb59fb0bccf1df6bab1b664b9 · hofk/THREEi.js · GitHub
Also on my server for the examples.


Incorrect parameter passing for function createSphereWithHoles( arg1, arg2 )

Instead of arg1, arg2 the global variables detail and holes were used. This was not noticed because these variable names were always used in the examples.


The module version is available on Github at THREEi.js/THREEi.module.147 at master · hofk/THREEi.js · GitHub

1 Like