Backside geometry face with vertexColor transparency hides FrontSide geometry face

Questions
,
1

Hello, here is example where “Backside geometry face with vertexColor transparency hides FrontSide geometry face”. Edit fiddle - JSFiddle - Code Playground Does anybody know how to fix it? Is there solution with which i would not have to split geometry, material ,mesh in two?

Here is example with desired output: Edit fiddle - JSFiddle - Code Playground

2

Looks like you have this solved :sweat_smile:

3

Manualy fliping face is not desirable :upside_down_face: . This is only example. With model which has 1000000 vertices I cant do that.

4

I took another look at your fiddle and it seems correct to me? Green triangle is in front of the yellow one, as it should be. Ah, wait, it is not transparent, I see… what about this then?

5

This looks good but performance and memory wise its twice as expensive. With large models its not option for me. Sorry that I am that finicky :sweat_smile:.

6

You could set depthWrite: false on the material, generally I would do that for any material where transparent = true. Bad things do tend to happen when mixing opaque and transparent triangles in the same mesh, or marking anything as transparent if it doesn’t need to be. Alpha blending transparency depends a ton on the render order, and three.js can sort objects dynamically but not triangles.

Setting up hashed alpha testing (PR) might be an option if you can’t otherwise avoid these sorting issues.

2 Likes