MeshLab JS 16.01 Tutorial

A new release of MeshLabJS, the javascript version of meshlab is out.

Obviously being a totally client based, run-in-browser application it is sufficient to open its web page to get the latest version. :). For a mesh processing system that runs inside your browser a new version is just the deploy of the html+js code on the server.

Now a very simple tutorial of what you can do with MeshLabJS v16.01: Remeshing, Comparing two meshes and showing the results.

Start it by simply opening the following web page:

http://www.meshlabjs.net

Press CTRL+f (or ⌘+f on OSX) to jump to the find box and type 'torus'. While you type the long list of available filters will reduce to only the ones matching with the typed text (in this case just one).

Click on the 'Create Torus' filter box and it will open to reveal the parameters. Just increase the 'Subdivision' parameter to 64 and press the '▶︎' (apply filter) button and you should see a torus appear on the right.


Click on the Rendering tab and you access to all the different rendering modes. Click on the wireframe icon to enable, for the current layer, the display of the edges of the mesh. In the space below you should see the parameters of the wireframe rendering (color, thickness etc).


Now press CTRL+f (⌘+f on OSX) again and type 'remesh', open the parameters of the 'Voronoi Remeshing' filter, raise to 2 the 'Refine Step' param, and turn off the 'Voronoi Coloring' option; press the apply filter '▶︎' button.  After one sec you should see a new layer appear in the list of the meshes, named something like 'Voronoi Remeshing of Torus'.  There are two meshes superimposed on the right, to see clearly both of them just click on the 'eye' icon to disable/enable the visualization of each layer.  The new mesh is a remeshing done using a simple sampling plus relaxation strategy followed by a Delaunay triangulation of these samples
done in the geodesic metric. The result is a base mesh that is refined and adapted over the original mesh. Enable wireframe for this mesh too and switch between the two layers to see the difference in meshing.

Now we want just to compute the difference between these two mesh. As it is well known basic differnce between 3D surfaces is well captured by Hausdorff Distance. So again  CTRL+f /⌘+f and type 'diff' , in the filter list should appear 'Compute Hausdorff Distance', open the parameter list and set: target mesh as voronoi remeshing of Torus', sample Num as 1.000.000, and check the 'Save Sample' flag'. Then just start the filter ( ▶︎) in a few secs (two secs on my laptop) you will have the (one sided) Hausdorff distance computed. In the lower left log window you should see numerical info about the computed distance, something like:

Hausdorff Distance computed
     Sampled 1008192 pts (rng: 0)  on Torus searched closest on Voronoi Remeshing of Torus 
     min : 0.000000   max 0.005136   mean : 0.001373   RMS : 0.001600 
Values w.r.t. BBox Diag (3.464102)
     min : 0.000000   max 0.001483   mean : 0.000396   RMS : 0.000462

You will notice also that there is another layer 'Haudorff Samples': a 1M point cloud with all the samples computed. For all these samples also the computed distance is stored as a scalar value, called for lazy traditional reasons, quality.

Lets color this point cloud according it with the distance computed.

 CTRL+f /⌘+f and type 'quality' , in the filter list should appear 'Generate Color from Vertex Quality'; apply it to the Hausdorff Samples layer, switch to the rendering tab and access to the parameter of the point rendering (just click on the small down arrow ▾ below the point rendering icon): Choose 'Per Vertex' as 'Color Source' and 'Flat' as 'Shading'. Now you have your nicely colored samples showing the difference between the original torus and the remeshed one.


Finally click on the histogram icon to get some insight on the distribution of the error and a more precise meaning of the color mapping used.

Creating Voronoi Sphere (2)

Second part of the description of how this voronoi sphere was created.

At the end of the previous post we ended with a thin surface representing a sphere holed with a voronoi pattern.

1. convert the paper-thin surface to a solid structure.
   This can be done by exploiting the offsetting capabilities of MeshLab. The filter "Remeshing->Uniform Mesh Resampling". In this filter a mesh is re-sampled by building a uniform distance-field volumetric representation where each voxel contains the signed distance from the original surface. The surface is then reconstructed using the marching cube algorithm over this volume. Resolution of the volume obviously affects the resolution (and the processing time!) of the final mesh. The distance field representation allows to easily create offset surfaces. There are various options for building offset surfaces, I will discuss them deeply in another post, for now just set the "Precision" parameter to 1.0%, and the offset value to 53.0% and check the "Absolute Distance" flag. After a few tens of secs you should get something like the side figure.
   
   
   


2. simplify a bit to get rid of the bad triangulation quality of a Marching Cube (there are a lot of thin bad shaped triangles around), a percentage reduction of .75 is usually enough to both reduce a bit the size of the mesh and to improve its quality without affecting in a significant way the precision of the result.
   
   
   
   
   
   
   
3. Apply a few times the Filter Remeshing->Curvature flipping optimization, that improves how the triangles adapt to the shape of the curvature without increasing their number.
   
   
   
   
   
   
   
   
   


4. Refine and smooth up to a mesh of approx 1.000.000 triangles.
   A rather overtessellated mesh is needed here to guarantee a good approximation of the geodesic distance.
   
   
   
   
   


5. At this point we repeat no this dense mesh the same steps we did on the original sphere. E.g. all the steps described in the previous post:


1. Generate 1000 poisson samples over the surface (it takes a bit of time this time...)
   
   
   
   
2. Color the mesh according to the back distance from these samples (voronoi coloring filter)
   
   
   
   
3. select the faces with quality in the range 0..epsilon
   
   
   
   
   
4. invert selection and delete
   
   
   
   
   
5. offset the thin surface to convert it into a watertight solid object. This final offsetting obviously require an higher precision (and higher processing times).
   
   
   
   
6. Some iteration of simplify-optimize-refine-smooth just to beautify the final mesh.
   

And that's all! Varying a bit the parameters in the middle of the whole process greatly affect the final result. For example you can easily get a fat donut style by increasing the offsetting value. Below a high res snap done with meshlab with ambient occlusion, and thin antialiased wire frame lines. A real, touchable 3D print of the object can be obtained on Shapeways.

Creating Voronoi Sphere

February 2016 update. You can make it online without even installing anything, by using the new browser based version of MeshLab: www.meshlabjs.net 

MeshLab is quite useful for a lot of classical mesh processing tasks, but sometimes it can be used for more weird things. A few weeks ago, after stumbling upon the cool Shapeways 3D printing service I uploaded there a few artsy mathematical sculptures that I created with MeshLab. Here is how I did this one, called Voronoi sphere.
It is a double Voronoi diagram, in the sense that there is a coarse Voronoi diagram over the sphere surface but also the surface that creates the edges of this diagram has been carved to create another finer Voronoi diagram. Such a shape is really very light and thin but much more robust that you could imagine.

1. Start from a sphere (file->new->Sphere),
   
   
   
   
   
2. Refine it using Filter>Remeshing>Loop Subdivision surfaces. repeat without shame (lowering the edge threshold parameter) until it becomes reasonably well tessellated. 300k faces are enough.
   
   
   
   
3. Create some well distributed samples over the surface using
   Filter>Sampling>Poisson Disk Sampling. 50 points are a good choice. Apparently the filters does nothing, but if you reveal the layer panel (guess the icon in the toolbar :)), you can see that there are two layers. Make invisible the first layer and switch the rendering mode to points: you will see the well distributed Poisson samples (hint: alt+mouse wheel change the drawn size of the points).
   
   
4. Create the actual Voronoi diagram by simply choosing the filter
   Color>Voronoi Vertex Coloring. As reported in the top of the parameter window, this filter, given a mesh M and a point-set P, project the points of P over M and color each vertex of M according to the geodesic distance from these projected points. Marking the backdistance flag in the parameter window the filter computes the distance from the borders of the Voronoi diagram instead of the projected sites itself. This filter, beside coloring the mesh, writes on each vertex of the mesh the distance value itself, in the all-purpose attribute named 'quality'.
   
   
   
5. Make the mesh layer active, and start the Select by vertex Quality filter. enable the preview option and enable visualization of selected faces. Play with the slider until you get something similar to the image on the right; in practice, exploiting the quality value stored onto the vertices that code the distance from the border of the Voronoi diagram we have just selected the faces very near to these borders.
   
   
   
   
   
6. Apply the Filter>Selection>Invert Selection and then delete the selected faces. Edges are probably quite jaggy, so apply a couple of times the simplest of all the smoothing filter, the old classical laplacian filter (Filter>Smoothing>Laplacian Smoothing).

Now stop and save the mesh. Next post will show you how to continue by transforming the current mesh, that is a surface, into a solid object ready to be printed. In the meantime if you like the sculpture, you can buy a small (10 cm) and cheap (less than 20$) copy of this sculpture here.