Three.js: Transparency and DoubleSide: A bottle neck of shader code or WebGL limitation?

[whatisor]

Description of the problem

From history, I got many answers of limitation of WebGL on self-transparency with double side.
However, recently I use sketchfab viewer and see very good result.
I think we should be able to do it in threejs, too.

Three.js version

• [ ] Dev

• [x ] r85

  Browser

• [x] All of them

• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

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

Hardware Requirements (graphics card, VR Device, ...)

[WestLangley]

I think we should be able to do it in threejs, too.

You can.

material.depthWrite = false;

Or, render front faces and back faces separately.

[whatisor]

Disable depth write is not solution.
I will try to render front and back separately then.
Thanks

[whatisor]

Hi, Rendering 2 times for 2 sides is not solution, it is same with Depth Write Disable.
Disable Depth Write means wrong depth order, you cannot get as good result as Sketchfab.
Do you think Geometry Face Ordering work?
I think we should support this feature. Without it, I alway heard it is rendering bug or limitation :)

[WestLangley]

Please show a live example demonstrating your use case, and explain why you feel neither approach is satisfactory.

[whatisor]

Hi, please just use Threejs sample, I configed like this:

[WestLangley]

Please provide a live example of self-transparency _that renders properly in sketchfab_, but not in three.js.

[whatisor]

Here you are
https://skfb.ly/68GTv

[whatisor]

this is almost perfect
https://skfb.ly/R6tZ

[mrdoob]

As you can see, even Sketchfab can't get transparencies right. Transparencies is one of those unsolved problems in realtime graphics. You can get things to look right, but you need to understand the problem well.

[whatisor]

Hi, although it is not perfect, I cannot see any problem with face color like our threejs.
Do you know what that it?(You can easily see dark and bright triangle in threejs screenshot)

[WestLangley]

Do you know what that is? (You can easily see dark and bright triangle in three.js screenshot)

We can't answer that question because we do not know what you are doing.

[whatisor]

Hi, ok, I knew issue now:
When I apply sortFacesByMaterialIndex to save performance (for some big geometry like this discussion https://github.com/mrdoob/three.js/issues/11510).
Transparent issue come like this:

Before:

After:

(Notice Triangle line)