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.

Thursday, January 7, 2016

MeshLab in javascript

We are proud to present the first beta, experimental, buggy, incomplete version of MeshLabJS, the client-side, run-in-browser port of MeshLab. 
Yes, a version of MeshLab that runs directly inside the browser.

It is still rudimental, very minimal, but yet it is a nice example of how current browsers are able to run C++ code compiled into a javascript (thanks to emscripten) at a pretty decent speed. WebGL (via three.js) is used for the rendering. 
Just to clarify it totally runs inside your browser, no 3D data is transferred to a server for processing, all the computation are done (in javascript) locally. Your data is safe as in a classical desktop app. 
It is a bit more than an experiment, there are only a few tens of filters (more to come!), and no fancy tools, but some classics like the renowned quadric simplifier and radiance scaling rendering mode, are available.

As usual everything is opensource, this time on github. If you like it star it on github and if you need some specific meshlab filter, just ask for it on the github issue page.

Monday, September 26, 2011

MeshLab for iOS

2 Big News:
  1. MeshPad has changed name: now its official name is MeshLab for iOS 
  2. MeshLab for iOS is available on the App Store!
    And it is free :)
If you have a iPad or an iPhone you can't miss it, go download it and share the news...

We are investing in it, so expect frequent updates. We feel that this kind of support (i.e. tablet) is really great for showing off results to a really broad spectrum of non technically skilled people. Every time that I give to some CH-only guy an iPad to with a gorgeous model ready to be browsed, well, it really pay off much more than asking him to sit down in front of a PC and passing him a mouse...

Wednesday, August 3, 2011


If you liked MeshLab and you have an iPad or an iPhone, you cannot miss this: an intuitive, cool 3D viewer to show your models. It is able to sustain the interactive browsing of detailed models (usable up to 2M triangles). Perfect for boldly show hi quality 3D scanned stuff to non-technical guys. Soon to be released.

More info can be found both on MeshPad official web page or on the facebook MeshPad page.

The viewer is well integrated in iOs, so it is automatically started whenever you encounter a 3D model in a recognized format (currently just ply stl obj off). It works with models on the web (see the second video) or with other cloud storage services like DropBox.

So for example it is easy to put a bunch of model on your dropbox account, to boldly show off them just when you need on your iPad.

Here are two videos showing MeshPad in action:

Stay tuned for the official release of the app!

Tuesday, March 15, 2011

MeshLab Video Tutorial

This blog has been quite lazy recently. But now great news!
We are proud to announce the birth of a dedicated YouTube channel for MeshLab tutorials.
We will upload some new tutorials in the next days. The first one is already online, and it's a basic one about navigation.

Stay in touch for news, and if you want to collaborate, you are welcome!

Tuesday, September 7, 2010

VAST 2010 MeshLab Tutorial

At VAST 2010 the 11th  International Symposium on Virtual Reality, Archaeology and Cultural Heritage. (Louvre, Paris, 21-24 Sept. 2010) there will be a full day tutorial of MeshLab.

It will be held by Marco Callieri and Guido Ranzuglia and will cover almost everything of MeshLab, from basic navigation hint to advanced remeshing, measuring and processing tasks. Obviously with a bit of Cultural Heritage pepper here and there.

Target Audience
  • People interested in a simple but powerful opensource tool for mesh processing.
  • People who need to visualize, edit and convert 3D models.
  • People who need small editing, batch process and mesh cleaning.
  • People trying to integrate/replace an existing mesh processing pipeline.
  • People interested in advanced, custom measuring/processing of 3D models, exploiting state-of-the-art algorithms.
Participants will be given the latest build of the tool plus some test dataset to experiment with the presented features. Bring your own laptop!

RSVP at the FaceBook Event Page

Tuesday, July 20, 2010

Remeshing and Texturing (1)

In the pipeline of processing 3D data, after you have aligned and merged your range maps, you ofter require to get a nice clean textured mesh. In the last release of MeshLab we included our state-of-the-art parametrization/remeshing algorithm based on abstract parametrization. Now some a two-part tutorial on his practical usage.
Let's start from a medium complexity mesh of a skull (kindly provided and scanned for the VCG Lab by Marco Callieri). You can see it depicted in the two small figures on the right.
The mesh of the skull is composed by 1.000.000 triangles, it has a meaningful per-vertex color (recovered from a set of photos) and, as it often happens, it is topologically dirty.
First of all it is non 2-manifold (there are 7 edges where more than two face are incident) than there are many small holes and handles that make difficult any kind of parametrization.

So the first step is to build a watertight, coarser but topologically sound model.  Poisson surface reconstruction is a perfect filter for this task. A reconstruction at depth 9 is usually good, that generates a mesh of 1.3M of faces.  For this kind of processing a quite faithful geometric representation is not needed, but it is strongly needed that the overall topology is the right one. In this case some portions of the skull are remarkably thin and at low resolutions the poisson surface reconstruction can create unwanted holes. 
After that a further simplification step is needed to bring the model size to a number reasonable for the Isoparametrization engine.  Remember that the when building an abstract parametrization you do not need the full accuracy model but just a model that shares the overall shape and the same topology. For the purpose of the parametrization small details have a very small influence on the overall quality of the parametrization. Side figure depict the watertight Poisson reconstructed surface, note how the nostril cavity was filled (as expected because it was a hole with boundary).

So simplify it our watertight skull up to 50000 triangles. Take care to check Normal Preservation and Topology preservation Flag. The second one is particularly important, infact the basic edge collapse simplification algorithms can during simplification change the topology of the mesh, and while this is usually a nice feature (it allows for example the closure of very small holes) when you start from a mesh that is surely clean (a 2-manifold watertight model) it is better to be sure that such properties are preserved.

After that you can start with creating the Abstract Isoparametrization, a technique we introduced in:

Nico Pietroni, Marco Tarini, Paolo Cignoni
Almost isometric mesh parameterization through abstract domains
IEEE Transaction on Visualization and Computer Graphics, Volume 16, Number 4, page 621-635 - July/August 2010

Without going into details, that you will find in the above paper, the main idea is rather simple. Usually textures are defined in a dominion that is just the (0,0)-(1,1) square on the plane. In our approach as a domain of the parametrization we use a different 2-dimensional domain, the surface of a very coarse simplicial complex that has the same topology of the original mesh and it is composed by just a few hundred triangles. Such an approach is interesting because this abstract parametrization can be used for a number of things, like for example remeshing, texturing, tangent space smoothing etc.

To build the abstract isoparametrization just start the corresponding filter called "Isoparametrization", (default params are ok, you can lower convergence precision to a '1' to speedup a bit and try to change a bit the targeted size of the abstract domain). It is a bit slow so wait some minutes for the processing. At the end of the process, you do not see anything directly but the structure is attached to the mesh and you can use it in the other filters. If you want re-use it for a later use you have to save both the processed mesh and as a separate step the isoparametrization using the "Isoparametrization Save Abstract Domain Filter".

The created isoparametrization can be used to build a standard parametrization over any mesh that is reasonably close to the original one.
In our example we take a simplified version of the original mesh, composed by just 10000 triangles ("Skull_10k.ply"). We transfer over this simplifed mesh the just build isoparametrization
and then using the filter "Iso Parametrization transfer between meshes", setting as source mesh the one with the abstract parametrization (skull_60k_isoparam.ply) and skull_10k.ply as target.

Now we can transform the transferred isoparametrization into a standard atlased parametrization using the "Isoparametrization Build Atlased Mesh" filter. The two image on the right seems equal but you can see that in the lower one the triangles of the mesh have been cut along the triangles of the abstract parametrization in order to get proper atlas regions. At this point your mesh has a standard texture parametrization and it is ready for use it for a variety of operation.

The First thing that we can do is just to transfer the color of the original 1M vertexes color onto a texture according this parametrization. This can be done by using the filter "Transfer color to texture (between 2 meshes)", choose a reasonable texture size (2048x2048 is good) and you will obtain a simplified textured mesh that looks strikingly similar to the original heavy 1M tri model (try to compare the first and last snapshots).

 Summarized Recipe
  1. take a 1M tri colored model
  2. make the model watertight using Poisson
  3. Simplify it to a 50k model (preserving topology)
  4. Build the Isoparametrization
  5. build another very simple 10k model from the original 1M model
  6. transfer the isoparametrization over the very simple model
  7. convert the isoparametrization into a standard atlased texture
  8. generate a texture with the color from the original 1M model
Next part of the tutorial with remeshing and other hints in a few days...