Sort alphaIndex of each face individually

Questions
1

Hello again amazing community,

I have this issue that I have managed to reproduce in the PG:
https://playground.babylonjs.com/#YIU90M#479

If I rotate the model around, the alphaIndex (not sure how to call it) on the meshes change as I move around.
What I’m trying to achieve is, as I look from one side to the other, to see everything in the correct order, without having these artifacts.

What I have here is 3 meshes, cylindrical in shape.

My configuration looks like this:

top-down
top-down800×800 68.6 KB

outside is red, cup is black and underprint is inside.

Looking from the side for example, I want to sort the meshes this way:

  1. red
  2. black
  3. green
  4. green
  5. black
  6. red

But because 1 = 6, and 2 = 3, I can’t manually assign alphaIndex values to them, as 6 would be rendered in front or 5, 5 in front of 4 and so on.

My questions are:

  1. Am I doing something wrong here? Is there something obvious that I’m not seeing?
  2. Is it possible to sort depth for each individual face? I know of Facet Depth Sorting, I have tried to apply it, but the meshes must be updatable (as far as I know), and I’m not sure that’s possible with imported meshes (or is it?).

Thanks,
jhn11

2

Hi there !
I haven’t worked with this specific case, but it seems right up the alley of PBR materials. What I would try to do is use one single mesh for you glass instead of three, and create a glass material with apparent backfaces (it would probably look more realistic as well !). I can’t fix it in your playground right now, but @PatrickRyan has made an awesome tutorial on babylon’s youtube channel, explaining how to achieve this using the node material editor :

If you’re having trouble with it, I’ll be glad to look further into and try to reproduce the effect on your glass over the weekend. :slight_smile:

3

I would advice in your case to split backface and front face meshes so you ll have 6 meshes you can order :slight_smile:

1 Like
4

@jhn11, there are a few things you can do here to render correctly. There are two threads that can help you with this. The first is one that dealt directly with a drinking glass where one of the best solutions was to split the inner faces from the exterior faces which allows you to make use of backface culling to manage some of the sorting issues.

Another thing that can help you is to handle the decal on the glass in the shader instead of with another mesh. There was a thread about this question in applying a decal to a skateboard deck so that you can see the wood grain beneath a decal that can be swapped on the fly.

Another example of something like this is the soda bottle demo we created for the last release which also uses a label on glass. In this example, the label uses alpha and transmission values from texture to create the opacity for the label separate from the refraction of the glass.

Let me know if you have any questions about any of these methods, but I think a combination of these examples should get you rolling in the right direction.

5

Once this PR is merged, you will simply have to enable OIT to have the objects rendered correctly :slight_smile:

6

I love all of the solutions presented.

I will go through each one individually and see what works best for me and I will eventually post results once it’s finished…or further questions if I have any :slight_smile:

Thank you all, I really appreciate it!

2 Likes