Three.js: Wrong visualization of transparent mesh

Created on 12 Jul 2018 · 4Comments · Source: mrdoob/three.js

Wrong visualization of transparent mesh

i build a cylinder with big top and small bottom, and i want to make it's opacity changing with from bottom to top, and i give it DoubleSide, AdditiveBlending and transparent property, but it got wrong on the right, got right on the left. set depthWrite to false can change the result to my expect.
I wonder the result of my visualization is a bug or caused by the depth buffer.
here is example: https://codepen.io/mysisi/pen/GBJJMy

Three.js version

[ ] Dev
[x ] r94
[ ] ...

Browser

[x ] All of them
[x ] Chrome
[ ] Firefox
[ ] Internet Explorer

OS

[ ] All of them
[ ] Windows
[x ] macOS
[ ] Linux
[ ] Android
[ ] iOS

Help (please use the forum)

Source

mysisi

Most helpful comment

I've fixed up the fiddle by using two separate meshes, with different materials, one with frontSide on and other with backSide on.
https://codepen.io/anon/pen/OwVyGP

The order you add them to the scene is important for automatically setting the renderOrder. If you swap the order then the effect is broken

In future, Please ask such help requests at the forum or stackoverflow.

calrk on 12 Jul 2018

👍2

All 4 comments

I've fixed up the fiddle by using two separate meshes, with different materials, one with frontSide on and other with backSide on.
https://codepen.io/anon/pen/OwVyGP

The order you add them to the scene is important for automatically setting the renderOrder. If you swap the order then the effect is broken

In future, Please ask such help requests at the forum or stackoverflow.

calrk on 12 Jul 2018

👍2

thx, @calrk, but i wonder why transparent does not work in one mesh...

mysisi on 13 Jul 2018

Please read https://github.com/mrdoob/three.js/issues/13889 for more information.

Mugen87 on 13 Jul 2018

thx, @calrk, but i wonder why transparent does not work in one mesh...

It's because the triangles of the mesh are stored in some sorted order, say going counter clockwise around the perimeter. Which is the same problem you have if you reverse the ideal sorting for transparency and render everything front to back. This still happens on the individual triangle level as they are painted one after another.

You might actually see it better if it was mirrored or from another side. If you were to break this mesh into individual triangles and let three sort them, it would be better but still could have issues depending on the shape.

The solve for this is not easy. Here's an example of one that works with three (but is slow) and another one that works with modified three.

https://raw.githack.com/pailhead/three.js/depth-peel-stencil/examples/webgl_materials_depthpeel.html
https://github.com/mrdoob/three.js/pull/15312