HighlightLayer does not stack properly with translucent material

Questions
,
1

HighlightLayer does not stack properly with translucent material.
this page: HighlightLayer bug? | Babylon.js Playground (babylonjs-playground.com)
This is not what I want to see, what I want to ask is if there is a way I can make it look like grass0.alpha = 1.

2

You can exclude the sphere from the layer:

1 Like
3

I need to highlight some mesh in the scene. Now I am going to addMesh to HighlightLayer for all the mesh in the scene and addExcludedMesh and delete the selected mesh from ExcludedMesh. Will this method cause extra performance loss?

4

An exception was found where the order in which the material was created affected the effect of the overlay.
This is normal：
HighlightLayer bug? | Babylon.js Playground (babylonjs-playground.com)
This is an anomaly:
HighlightLayer bug? | Babylon.js Playground (babylonjs-playground.com)

5

The result of the highlight layer does depend on the order on which the meshes are rendered, at least when adding excluded meshes to the picture.

When moving the creation of the material in the 2nd PG you are modifying the uniqueId of this material, which is now greater than the uniqueId of the sphere material. Because Babylon.js is sorting the meshes based on their material, the sphere is now rendered before the ground, which leads to the display you can see because we are using the stencil buffer as part of the highlight layer processing, and when the ground is drawn after the sphere the stencil buffer is not updated at the sphere location (because the sphere is excluded from the layer).

cc @sebavan, but I think it’s a side-effect of the technique we use which is unavoidable.

No, there should be no impact. According to my explanations above, you should make sure the excluded meshes are displayed after all the included meshes (using renderingGroupId=1 for all excluded meshes, for eg) to get the right display.

6

Modifying groupRendingId is unacceptable to me.
Changing uniqueId seems to solve this problem, but does it cause location problems?
this page:
HighlightLayer bug? | Babylon.js Playground (babylonjs-playground.com)

7

No, changing the uniqueId property is ok. As it should be unique accross all materials, you should simply make sure it’s not used by any other materials.

8

But why does changing uniqueId work and why does it affect the layer rendering order?

9

I think I have explained it all here:

When moving the creation of the material in the 2nd PG you are modifying the uniqueId of this material, which is now greater than the uniqueId of the sphere material. Because Babylon.js is sorting the meshes based on their material, the sphere is now rendered before the ground, which leads to the display you can see because we are using the stencil buffer as part of the highlight layer processing, and when the ground is drawn after the sphere the stencil buffer is not updated at the sphere location (because the sphere is excluded from the layer).

cc @sebavan, but I think it’s a side-effect of the technique we use which is unavoidable.

Is there something missing?

10

What I want to ask is that I changed the uniqueId, which resulted in a change in the rendering order, but the document does not explain this. The document description is: (Gets or sets the unique id of the material). Is material rendering sequence based on uniqueId from small to large? If so, I might use this feature elsewhere.

11

Indeed, materials are sorted from low to high uniqueId values (this is new since v5.0) and meshes are rendered in this order.

1 Like
12

This is a very nice feature. However, the documentation does not explain this feature. I think it would help to understand if the documentation had instructions.

13

You’re right, I have updated the doc:

2 Likes