Vertex alpha for custom Mesh (Transparency)

Hi all!

I am creating a mesh using VertexData. I have an array colors with different values ​​for alpha

I am using mesh.hasVertexAlpha = true

After that, I see this. This is an incorrect display. Can’t see walls and windows

Go ahead. I add material.forceDepthWrite = true. It gets better after that

Now let’s try to go to the window and see what is inside the building

Doesn’t look like a room! Let’s go into the room and see how it should look

So, I tried different combinations of so many settings to correctly display the building with transparent vertices. scene.useOrderIndependentTransparency seems to work well, but it sometimes causes the same artifacts. Here, too, the room inside is incorrectly displayed

What are the solutions to this problem?

Transparency can be really annoying :slight_smile: I would advise to have a look at Transparent Rendering | Babylon.js Documentation

1 Like

I have read this several times. Maybe there is something simple that I am missing.

nope there is no simple trick :frowning: You might try OIT and see how well it works in your case ?

1 Like

You should not set all your mesh as transparent. Setting only the windows transparent would probably help (but it means the windows must be multiple separate objects).


OIT works well if you set pass = 7. But it is very expensive and fps drops from 144 to 20 (for a small model). So OIT is a bad option for me.

I divided the large mesh into many smaller ones and then merged them using MergeMeshes. It has become very good, fps is more than 60. But this only works for small models. For big ones, no, fps = 2.

I’m looking for something that will work well specifically for big geometry. For one large mesh created from VertexData

Once you get the solution, you can hand it over to me, I will gladly take it :grin:
Else, I can recommend a few things. Make a merge of opaque objects only, keep all alpha blended meshes separate. use alphaIndex to order meshes transparency. Don’t use forceDepthWrite but instead use (on your alphablended meshes only) needDepthPrePass. Use it only when you are cumulating transparency (a window through a window) and use it in combination with the alphaIndex. Eventually have 2 materials (a clone) to allow for specific settings. The rest is a game of patience (similar to a puzzle :grinning:). Else, you can still try to use OIT but it comes with (a number of) limitations and following those on something already done can also become as tedious as taking the path of a custom/manual ordering.