HighlightLayer shines through transparent plane

Hi there,
If I create a plane that get it’s alpha set by the albedo texture and have a mesh with highlight layer behind it the highlight shines through the mesh. I created a playground: Babylon.js Playground.
If you remove the “useAlphaFromAlbedoTexture” it works, but we need it in our system (couldn’t replicate that in the playground). Am i doing something wrong? Is this the expected behavior?

Adding @Evgeni_Popov as it is a regression from the latest change with alpha on highlights. (the case I was trying to look for on the PR last time :-))

but nevertheless, the highlights would be visible through the transparency as it can not handle it due to the missing depth info.

It would look like
image

Having a look at this, but I’m not sure the code we had for 4.1 was better, because if now you comment planeMaterial.useAlphaFromAlbedoTexture = true; in the PG we have:

4.1:

4.2:

yup you are right I wonder if there is a way to sort this one to use both behaviors from 4.1 on alphablend and 4.2 on alpha test ?

One way is simply to exclude the palm plane from the highlight layer so that it does not interfere with the stencil buffer:

https://www.babylonjs-playground.com/#6C452Q#2

With this change, whatever the alpha blend setting, we get:

yup could we do it automatically if alpha blend is on ?

I’m not sure… The problem is that the highlight layer does not know the meshes that should be removed from the layer if one did not call addExcludedMesh for this mesh.

We could do the check in _shouldRenderMesh because this method is called for all the meshes of the scene:

protected _shouldRenderMesh(mesh: Mesh): boolean {
    if (this._meshes && this._excludedMeshes && !this._meshes[mesh.uniqueId] && 
        !this._excludedMeshes[mesh.uniqueId] && mesh.material && 
        mesh.material.needAlphaBlendingForMesh(mesh)) {
            this._addExcludedMesh(mesh, true);
    }

    if (this._excludedMeshes && this._excludedMeshes[mesh.uniqueId] && 
        this._excludedMeshes[mesh.uniqueId]?._internalRemove && mesh.material && 
        !mesh.material.needAlphaBlendingForMesh(mesh)) {
            this.removeExcludedMesh(mesh);
    }
    [existing code follows]
}

We would need to keep track of the meshes that have been excluded this way to “unexclude” them in case the user updates the mesh and it no longer needs alpha blending => that’s the purpose of the _internalRemove flag.

I don’t know if it’s the right fix to apply or if we should let the user handles this themselves…

Ok so I vote for just adding the exclusion trick to the doc :slight_smile:

Ok, I will update the doc!

1 Like

You rock !!!

First of all thanks again guys for your quick responses, your community work is always astonishing me. I still have to ask, is this the expected behavior, in my opinion the mesh in the background should only shine through on that places where the plane is transparent. Please correct me if im wrong, but we would really need it in that fashion. Is there maybe an alternative to using a highlightingLayer?

The highlight is made by blurring the mesh, so it has no depth information attached to it, that’s why it’s always visible and not hidden by geometry.

I don’t know if it’s an option, but you can try with the glow layer:

https://playground.babylonjs.com/#WBZA8L#1

There is also the edges renderer:

https://playground.babylonjs.com/#WBZA8L#2

I have used a box instead of a sphere, because for some reason the edges renderer does not work well with spheres. I also had to enable depth pre-pass on the palm plane so that the depth buffer is updated correctly.

[EDIT]
The outline renderer does work with the sphere:

https://playground.babylonjs.com/#WBZA8L#3
[/EDIT]

1 Like