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.