Merged mesh with transparency looks weird

[Fenryll]

Hello!

I am working on a test projet to teach BabylonJS to a friend

the test case is a game called Blokus

The idea is to get some motivation by quickly creating some wow effect…

Not bad so far, but I really would like to get this shiny transparent plastic effect on the piece and as soon as I put some alpha on the material, it doesn’t behave as expected but as something is inverted:

I tried to play with the side orientation of the extruded polygon, but no luck so far… I also gave some tries on the material itslef mat.invertNormalMapX =true; mat.invertNormalMapY =true; but still not working…

So, I recreated the issue on this playground https://playground.babylonjs.com/ and would welcome any help on my issue or even more, if some material magician would have some killer parameters to get as close as possible to the reality, that would be super great

[Cedric]

your PG is missing the snippet id.
with blending is enabled, z test/write is disabled. so, the drawing order of triangle is more or less random and you get that.
one possibility is to enable back face culling

https://doc.babylonjs.com/features/featuresDeepDive/materials/using/materials_introduction#back-face-culling

this can mitigate the issue (a little)

[Fenryll]

Oh, I forgot to save

Here it is:

Babylon.js Playground

And thanks for the tip

[Deltakosh]

Thanks! one other way to fix it is to force the system to have a correct depth buffer beforehand with:
mat.needDepthPrePass = true;

blokus | Babylon.js Playground (babylonjs.com)

[Fenryll]

wow, thanks !

this actually kills two birds, as I had the same issue with my scrabble game: transparency was a possibility I considered to identify jokers

[lowclouds]

How would one know that needDepthPrePass is needed without seeing the result of the rendering?

[Deltakosh]

If you want transparent objects to always render the same way, then this is the way

[Fenryll]

complimentary question: as soon as I touch the material alpha, even a very little bit, the mesh stop to cast shadow… any quick fix ?

[11128]

look at this
shadowGenerator.transparencyShadow = true

[Fenryll]

Thanks!!