Mesh Facet Depth Sort

[jerome]

Hi ladies and Gentlemen,

Here comes a new feature in the FacetData pack.

As you may know, for performance reasons, the facets of a given mesh are always drawn in the same order. This comes to visual issues when the mesh is transparent and is no longer oriented in the right place from the camera :

http://playground.babylonjs.com/#FWKUY0

This new feature solves the self transparency issue by sorting the mesh facets from some location (the camera position by default) just before drawing them.  
The mesh is required to be updatable.  
The depth sort is done on each call to updateFacetData(). It can be disabled at any time to save CPU cycles if the mesh and the camera don't move any more.  
Usage :

    // the mesh must be updatable
    var mesh = BABYLON.MeshBuilder.CreateTorusKnot("mesh", {updatable: true}, scene);
    mesh.material = mat;                         // transparent material
    mesh.mustDepthSortFacets = true;             // enable the depth sort, can be disabled at any time
    
    scene.registerBeforeRender(function() {
        mesh.updateFacetData();     // sort the facets each frame
    });

Note that this feature uses more memory and more CPU than an usual standard mesh.

 

Please wait for the code review and the PR to be merged and to be pushed in the PG.  Demo : http://jerome.bousquie.fr/BJS/test/facetDepthSort.html

[GameMonetize]

He did it!!!

[jerome]

I will add the doc in the FacetData section and also in this doc : http://doc.babylonjs.com/resources/transparency_and_how_meshes_are_rendered#concave-meshes-and-transparency

As I can see, the CPU depth sort seems a bit better (but probably slower) than the GPU DepthPrePass because the transparent mesh keeps  then visible through itself, what is not got with DepthPrePass (try to see the torus through itself).

DepthPrePass : https://www.babylonjs-playground.com/#1PLV5Z#19

[GameMonetize]

Which makes sense as the pre-pass only relies on depth buffer

[jerome]

PG : http://playground.babylonjs.com/#FWKUY0#1

depth sorted on the left, standard on the right

[GameMonetize]

This one must go to the doc page

[jerome]

it will be.

[jerome]

Documented.

[jerome]

Of course, the facet depth sort still works on live updatable meshes : http://www.babylonjs-playground.com/#NL03HG

The tube path follows the curve used for Moebius ribbons