Hi,
I’m experiencing some transparency issues after subdividing a mesh (with mesh.subdivide - to get a better performance for picking).
I’ve reproduced this issue in this playground:
Is there any way to fix this issues after subdividing?
Thanks!
There are couple of ways to deal with this. Generally transparency in WebGL have it’s own caveats you need to be aware of. If you want to go deeper into this you can read this out.
For you specific case I think the easiest solution is just to add depthPreePass to your material.
1 Like
Thanks @nogalo for your answer, but depthPrePass doesn´t help here. In fact, if you dont subdivide the mesh it works as expected but it removes the double transparency effect we need (to see one transparent mesh behind the other).
If you try to lower down the alpha you still see the problem:
We have sorted out the transparency issues on most of the cases, but the problem only comes after subdividing a mesh. Not sure if after subdividing, there’s some facet/transparency work done behind the scenes that is producing these glitches.
This playground provided is not the exact model and use case we are working on, but it shows the issue that comes after subdividing (we are not using the updateFacetData either as in the PG).
Here’s another simple scene:
Without subdividing:
After adding 15 subdivisions (it changes transparency):
Hello there!
For the example scenes, looks like Order Independent Transparency solves the issues: Facet Depth Sort | Babylon.js Playground (babylonjs.com), glTF Loader Demo | Babylon.js Playground (babylonjs.com) - Transparent Rendering | Babylon.js Documentation (babylonjs.com)
Thanks @carolhmj for your reply, but order independent transparency seems to be an experimental feature and it doesn´t work on Android (where it shows, the geometry appears dotted):
On ipad and other android devices the geometry is completely invisible.
It only seems to work on desktop, but it drops the framerate down from 60fps (or whatever the max fps is allowed for that screen) to aprox. 25-30fps.
The issue we are having with transparency comes after calling mesh.subdivide(nSubds)
Which Android device/browser are you using? @Evgeni_Popov and @CraigFeldspar might have an idea of what’s going on.
That screen capture with the order independent transparency enabled is from a Realme GT 2 pro.
But the issue with the meshes subdivision is happening in every device
OIT (when it works) is probably too much for a cell device.
Subdividing meshes won’t work correctly with facet sorting as the sorting is done globally for all faces but the mesh is still rendered as two submeshes. That essentially means that facet sorting is not usable when a mesh has more than one submesh because the (mesh) face list is reorganized in a way that makes it incompatible with submeshes.
I don’t see a way to fix that, unfortunately…
[EDIT] Hum, the indices are rewritten each frame to reorganize the faces from back to front, so the submeshes being unchanged (vertex start/vertex count/index start/index count are unmodified) it seems it should work…
[…] My bad, the (mesh) sorting is done at the submesh level, so sometimes (it depends on the relative position of the two bounding box centers) submesh #1 is displayed before submesh #0 and if fails!
You can fix the problem by overriding the sorting algorithm used by the transparent meshes (this algorithm is sorting according to the bounding box center distance to the camera): use the same algo than the one used for opaques meshes.
Fixed PG (see line 17):
2 Likes