Issues with alphamap

[WilliamLiu-1997]

Set alphamap will make transparent material behind invisible

In the screenshot, an aphamap is applied on the pink patch and set the transparent = true. The blue patch also set transparent = true. It can be seen that the part of the blue patch that behind the pink patch is invisible. If the transparent = false (like purple patch), everything is fine.

Screenshots

Platform:

• Device: [Desktop]
• OS: [Windows]
• Browser: [Chrome]
• Three.js version: [dev]

[Mugen87]

Can you please share a screenshot of the expected result? A editable live example demonstrating the issue would be even more helpful.

[WilliamLiu-1997]

Yeah, and I just found that it seems to be an issue on transparent and opacity, not only on alphaMap.

And I just made a live example here: https://rawcdn.githack.com/WilliamLiu-1997/three.js/ef74e4830e7dd15653da8df7065b3dec779bf4ca/examples/alphamap_issue.html
In the demo, when you set all the material to be transparent=true and opacity <1, and look from the bottom of the plane, you can see some of the cylinders will disappear.
Thanks.

[Mugen87]

This is in fact a know issue of how transparent objects are rendered in three.js. It's a matter of render order, sorting and depth testing.

I suggest you search in the forum for workarounds. This was already often discussed e.g. in https://discourse.threejs.org/t/multiple-transparent-materials-rendering-issue/3599.

I suggest to mark this issue as a duplicate of #9977.