Hi, I was trying to use Babylon.js to create an semitransparent grid.
But I cant get it work right, sometimes meshes are rendered behind an item, making it difficult to distinguish axis and confusing the user. How to fix it? Is there some setting to enable? I dont care much about performance, the most important part is to give an realist rapresentation. Thanks
Here a grid: https://playground.babylonjs.com/#UZGNA#15
Here my project: Babylon.js Playground
You would probably need OIT (Order-independent transparency (OIT) · Issue #10187 · BabylonJS/Babylon.js · GitHub) for this to work, as all planes are intersecting each other.
you can try to limit the artefacts by splitting each planes into smaller planes so that sorting can work a bit better than when dealing only with large intersecting planes but it will have nonetheless some limits.
Uh, so seems like this is not an easy fix. Yes, will be trying to split in multiple groups, at least should work with parallel objects. Will be a bit difficult doing it with rotated planes. Thanks for the tip.
I would like to give a go to THREE.js. Do you know if it has the same problem?
Seems like it suffers from the same problem for now. Dang.
Feel free to give it a try but I’d rather rely on BJS to ‘elegantly’ fix this sort of issues in the future (my feeling only:)
Of course would be great if it was handled automagically 
Btw threejs has the same problem indeed: http://jsfiddle.net/62fcbux9/2/
Haha…‘Automagically’ is the world of @Evgeni_Popov , @RaananW and @PirateJC (and then, of course @Deltakosh and then of course, all the others… If there is a magic behind it, believe me, these Guys will find it and will also bring it to us 
Stay tuned…
