Addon for triangulation of implicit surfaces

The THREEi addon is used to create indexed geometries for implicit surfaces.

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

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.



siehe / see



The addon also contains in the section … TriangulationSphereWithHoles … the sphere with holes.
See also Triangulation sphere with holes

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.

On GitHub:

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


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


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: last section
or directly


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