Three.js ライブラリ上で実行される WebGL プロジェクトに取り組んできました。いくつかの半透明のメッシュをレンダリングしていますが、カメラを傾ける角度に応じて、別のオブジェクトが上に表示されることに気付きました。
この問題を説明するために、3 つの半透明の立方体を使用して簡単なデモを作成しました。画面に対して垂直を超えて画像を回転させると、最小の立方体の後半部分が「ジャンプ」して見えなくなります。しかし、それはまだ表示されるべきではありませんか？ブレンド方程式をいくつか調整してみましたが、違いはないようです。
私が疑問に思っているのは、これが WebGL/Three のバグなのか、それとも私が修正できるものなのかということです。どんな洞察も大歓迎です:)
Well, that's something they weren't able to solve when they invented all this hardware accelerated graphics business and sounds like we'll have to deal with this for a long while.
The issue here is that graphic cards do not sort the polygons, nor objects. The graphics card is "dumb", you tell it to draw an object and it will draw the pixels that represent it and also, in another non-visible "image" called zbuffer (or depthbuffer), will draw the pixels that represent the object but instead of color it will draw the distance to the camera for each pixels. Any other objects that you draw afterwards, the graphics card will check if the distance to the camera for each pixel, and if it's farther, it won't draw it (unless you disable the check, that is).
This speeds up things a lot and gives you nice intersections between solid objects. But it doesn't play well with transparency. Say that you have 2 transparent objects and you want A to be drawn behind B. You'll need to tell the graphics card to draw A first and then B. This works fine as long as they're not intersecting. In order to draw 2 transparent objects intersecting then the graphics would have to sort all the polygons, and as the graphics card doesn't do that, then you'll have to do it.
It's one of these things that you need to understand and specifically tweak for your case.
In three.js, if you set material.transparent = true we'll sort that object so it's drawn before (earlier) other objects that are in front. But we can't really help you if you want to intersect them.