Transparency alpha render issues


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?

At a guess, I think a Normal blend mode is set up on the material:
material.blendType = pc.BLEND_NORMAL;

And you likely want BLEND_ADDITIVE instead.

This just makes the material super bright. The doc also says BLEND_NORMAL is for translucent material.

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.

I’m after it being simply transparent without disappearing parts.

Without depth write (and without BLEND_ADDITIVE, because you’d see nothing otherwise) it looks a little better:

This is with BLEND_ADDITIVE:

maybe also try BLEND_ADDITIVEALPHA … but feel free to try other blend modes as well.

You could also try some dark color tint on those materials, to lower the overbrightening, with BLEND_ADDITIVE

Yeah that helps with the look, but the issue is parts of meshes disappearing.

It’s mostly a transparency sorting issue unfortunately. Is this one object/mesh or several on top of each other?

You may want to use layers where the meshes on the inside are rendered first and than the meshes on the outside.

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?

I believe Babylon may have additional sorting logic that we don’t have that goes beyond the mesh origin that is used for depth comparison?

Hm, if there’s no easy fix I think it will depend on the models to choose which engine to use for transparency.

To me this feels like the depth write was not set to off for all meshes - and meshes with depth write end up blocking other meshes.

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)

1 Like

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.

I gave you access. It’s kinda on the big side, I don’t even really know why, but maybe fork it urself because I’m already close to full space.

Got it, thanks! I take a look

Looks like the Shell was using a batch group:

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’


Using Alpha mode screen gets me closer to an effect/rendering that looks ‘ok’

1 Like

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.

1 Like