Tuesday, February 2, 2016

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:

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.


Clovis Jobin said...
This comment has been removed by a blog administrator.
Unknown said...

I need something like meshlabs but
the (online) example(s) don't seem to work.

Unknown said...


Is it possible to extract the final histogram in a data file like .csv file?

Thanks a lot!!

Unknown said...

Nice suggestion add an issue on the github tracker


Clovis Jobin said...

Nice recommendation add this post.


Evan said...

Isnt blender used to be the 3d wireframing software. Just like the Creately used to be 2D wireframing software.

shmaguina said...

HI! I'm an architectural student, i made a mesh cloud of a street. My main interest is to have an 3D possible to then have sections to make some plans. But i cannot produce a file capable to be open in autocad or sketchup. I'm making a research mainly on google. And my professors do not now how to obtain this kind of results with an meshlab file. Do you know any tutorial, example or advise to achieve this results? Thank you for your attention.

Unknown said...
This comment has been removed by a blog administrator.
Apple Repair said...

Thanks for sharing informative post.
ipad glass replacement hk
ipad 3 screen repair hong kong

Anonymous said...

Thanks for such a great article here. I was searching for something like this for quite a long time and at last, I’ve found it on your blog. It was definitely interesting for me to read about their market situation nowadays.angularjs best training center in chennai | angularjs training in velachery | angularjs training in chennai | best angularjs training institute in chennai

Chanti said...

Thanks for sharing informative post.
javascript training in hyderabad

lost_in_woods said...

thank u for your post very informative and helpfull,
for any help link below:
Point Cloud to BIM conversion

Point Cloud to BIM conversion in USA

James jenny said...

Thanks for sharing. Please do visit the link below.
Point Cloud to BIM conversion in Uk

Twinkle said...

Nice post. It is really interesting. Thanks for sharing the post!
Web Design Company in Tuticorin | Domain Name Registration In India
Web Design Company In India | Digital Marketing Company in India
SEO Company India | PPC Services in India
Social Media Marketing Company in India

meritstep Technology said...

Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
angular js online training