Jump to content

Mesh Facet Depth Sort


Recommended Posts

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 :


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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...