I’m currently trying to convert my Babylon.js project to PlayCanvas and hit a roadblock when trying to get transparency to work. In Babylon it pretty much worked on its own, maybe also with some more settings as they seem to have more options exposed than the PlayCanvas editor.
Maybe there’s some value in PlayCanvas one can change that I haven’t tried yet.
I tried creating a new layer, which helped with the interaction between different mesh instances, just not when a mesh is overlapping with itself.
Other than that I also tried setting the materials blendMode to no avail.
This is how the rendering behaves in PlayCanvas:
And how it supposedly should look in Babylon:
This is quite the dealbreaker in terms of which engine to use… why does it seem to be so complicated to use transparency in PlayCanvas?
Isn’t supper bright what you are after? That’s what the second video seems to be doing.
Also, if you additionally turn off depth write on the material, combination of both would stop the sorting issue.
There are multiple meshes, but it seems as if only the outer mesh is having troubles and I put that one on a seperate layer rendering last.
I don’t want to have to edit the meshes again and divide them up into more parts. Is Babylon just handling this differently? There has to be a similar setting right?
To explain the problem a bit more. For transparent meshes to render correctly amongst other transparent meshes, it has to render the furthest mesh first and work towards the camera.
The difficulty comes is determining what is furthest away as a mesh is not a point, it occupies an area so a long mesh can be both the closest and furthest object depending which end of the mesh is considered.
Disabling depth write means that the mesh no longer writes to the depth buffer which mitigates the issue but the colour may be slightly off depending on which mesh is rendered first in which case using a different blend mode may help (which Martin mentioned earlier)
Even with depth write off there are sorting issues.
Sadly the settings in PlayCanvas seem to be really limited for alpha rendering. Babylon just seems to have more options in that regard that you can utelize and make it work, even if the meshes intersect and such. It is what it is.
Would you be able to share a private fork of the project for us to take a look at please? Even if we can’t make it work for you, it be really helpful for us to look at what challenges developers are facing with this.
This was causing issues in in the render order for some reason. Removing it means that it now renders consistently and correctly when you are looking at it from the outside.
There is still the issue of the render order of when you can see inside it where the shell renders after the internal wiring even though it’s supposed to be ‘in front’
To put this another way, what is the ‘look’ you are going for? It looks like you want to to show off the wiring but the opacity of the case makes it hard to see due to the opacity and colour of the shell.
You could make the wiring render last?
Unfortunately, our renderer does have problem with complex transparent objects and the only really workaround is to split meshes into smaller pieces.
