# Procedural mesh

**URL:** <https://discourse.threejs.org/t/procedural-mesh/22327>\
**Category:** Questions\
**Tags:** geometry, procedural\
**Created:** [January 11, 2021, 10:28pm UTC](https://discourse.threejs.org/t/procedural-mesh/22327 "2021-01-11T22:28:41Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jniac](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jniac/32/15536_2.png) [@jniac](https://discourse.threejs.org/u/jniac)\
**Post date:** [January 11, 2021, 10:28pm UTC](https://discourse.threejs.org/t/procedural-mesh/22327/1 "2021-01-11T22:28:41Z")

</div>

Hi there, hope everyone is fine.

I would like to compute a procedural mesh that could look like the following :

 ![Procedural-Mesh](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/6/6b50339ad40901e4c9aebe353d46ad453c8a1e43.jpeg)

I don’t know how to call it, it’s a kind of sphere, with kind of tentacles. It may look like a microbe.  
What should be parametric:

- The number of protuberances (tentacles)
- The size of protuberances
- Eventually the number of protuberance stage

I think i can achieve this from an Icosahedron, by taking some group of 6 faces (w Poisson Disc for regularity), extrude/scale them along the normal, and finally applying a kind of “HyperNurbs” modifier ([the examples give a solution](https://threejs.org/examples/?q=subdi#webgl_modifier_subdivision)).

Does anyone have advice or thoughts to share on how do to it?

Thx,  
Joseph

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [January 12, 2021, 7:33am UTC](https://discourse.threejs.org/t/procedural-mesh/22327/2 "2021-01-12T07:33:35Z")

</div>

Maybe you could look at the marching cubes example? [three.js webgl - marching cubes](https://threejs.org/examples/webgl_marchingcubes.html)

AKA: Metaballs

> <https://twitter.com/thespite/status/989227870852657154>

---

<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:** [January 12, 2021, 8:12am UTC](https://discourse.threejs.org/t/procedural-mesh/22327/3 "2021-01-12T08:12:44Z")

</div>

> [@jniac](#):
>
> I think i can achieve this from an Icosahedron, by taking some group of 6 faces (w Poisson Disc for regularity), extrude/scale them along the normal, …

For a constructive solution, in which different parameters can be set, a self-defined geometry is useful. I myself would take a sphere with holes as a base. (triangulation according to an algorithm by E. Hartmann)  
[Triangulation sphere with holes](https://discourse.threejs.org/t/triangulation-sphere-with-holes/8213)

The positions of the holes can be defined e.g. via quaternions. [Quaternion - Axis, Angle Visualization](https://discourse.threejs.org/t/quaternion-axis-angle-visualization/1358)

Then you can attach the tentacles. [Inner Geometry (Triangulation)](https://discourse.threejs.org/t/inner-geometry-triangulation/12565)

Example  
[https://hofk.de/main/threejs/Triangulation/InnerGeometrySphereCylinder.html](https://hofk.de/main/threejs/Triangulation/InnerGeometrySphereCylinder.html)

I did it for cylinders. You can use a function of the outside line instead of the cylinder with the linear outside line. Then you have to calculate the normals a little more complicated. But it’s certainly not that hard.

However, you may be able to take a CylinderBufferGeometry and change the distance of the vertices to the centerline (radius) according to a function.

_There are many variants._ 🙂

Inspirations:

[sandbox](https://hofk.de/main/threejs/sandbox/)

[Addon to create special / extended geometries](https://discourse.threejs.org/t/addon-to-create-special-extended-geometries/1855)  
[Addon. Produces almost infinite many time-varying geometries with functions](https://discourse.threejs.org/t/addon-produces-almost-infinite-many-time-varying-geometries-with-functions/262)

[hofk (Klaus Hoffmeister) · GitHub](https://github.com/hofk)

---

<div class="post-metadata">

**Author:** ![jniac](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jniac/32/15536_2.png) [@jniac](https://discourse.threejs.org/u/jniac)\
**Post date:** [January 12, 2021, 12:44pm UTC](https://discourse.threejs.org/t/procedural-mesh/22327/4 "2021-01-12T12:44:07Z")

</div>

@marquizzo You’re right Marching Cubes is a solution, i was thinking of “meta-ball”. I believed that “Marching” was referring to raymarching, (ie no meshes, compute shading only), but there’s a mesh here (marching is a general term for algorithm seeking for a solution step by step ex [Marching cube wikipedia](https://en.wikipedia.org/wiki/Marching_cubes)).

@hofk Your example are awesome. Dynamic triangulation should be considered, but I’m afraid of getting into complex math problems that I can’t solve on my own. I will take a look into your code.

After being able to produce the mesh, i would like to move some mobile on the surface of that mesh. In a way, in the same way that does [Paper IO 3D](https://paper-io.com/).

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/1/16684d9ed5c68cb2f516f9a1d686435cdd64615d.jpeg) ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/4/4077c4e6206ac2209147457dd5bc5256920a32f1.jpeg)

To move from on face to another adjacent one, i think that the position of any mobile should a combination of:

- face-index,
- (x,y) coords in the “local face frame”

the “local face frame” could be defined by two axis which, in a triangle ABC, could be:

- axe X = AB.normalized
- axe Y = (AB.normalized × AC.normalized) × AB.normalized

[![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/5/5af93a876a831027119fe5b89039903aa6611d5b.png)](https://jniac.github.io/three-point-text-helper/tests/examples-vanilla/triangle/)  
[https://jniac.github.io/three-point-text-helper/tests/examples-vanilla/triangle/](https://jniac.github.io/three-point-text-helper/tests/examples-vanilla/triangle/)

Is there a better way to define position on surface of a mesh?  
How do you think Paper IO 3D has made its physics (local 2D velocity/direction)?

---

<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:** [January 12, 2021, 2:21pm UTC](https://discourse.threejs.org/t/procedural-mesh/22327/5 "2021-01-12T14:21:57Z")

</div>

> [@jniac](#):
>
> Marching Cubes

[Marching Cubes](https://www.cs.carleton.edu/cs_comps/0405/shape/marching_cubes.html)

> [@jniac](#):
>
> , but I’m afraid of getting into complex math problems that I can’t solve on my own.

When I see what else you have planned, some mathematics will be necessary.

The mathematics for triangulation is not mine either. You just have to be able to adapt it to your needs.

[Surface triangulation - Wikipedia](https://en.wikipedia.org/wiki/Surface_triangulation)

> **[cdgen0104.pdf](https://www2.mathematik.tu-darmstadt.de/~ehartmann/cdgen0104.pdf)**
>
> 2.87 MB

page 81 (in english)

The other things I needed are not that complicated. These are the common things you need for 3D. Normals, binormals, tangents, circle equation in space etc.