16

three.jsで透明なオブジェクトの両面をレンダリングしようとしています。透明なオブジェクト内にある他のオブジェクトも表示する必要があります。悲しいことに、私も処理できないアーティファクトを取得します。テスト ページは次のとおりです: https://dl.dropbox.com/u/3778149/webgl_translucency/test.html

これがそのアーティファクトの画像です。それらは、基礎となる球のジオメトリに由来するようです。 ブレンド モードのアーティファクト: THREE.AdditiveBlending = 1

興味深いことに、ブレンド モード THREE.SubtractiveBlending = 2 ではアーティファクトは表示されません。 ここに画像の説明を入力

どんな助けでも大歓迎です！

アレックス

4

4 に答える 4

18

自己透過性は、WebGL と three.js では特に困難です。問題を本当に理解し、必要な効果が得られるようにコードを調整する必要があります。

three.js で両面の透明な球体の外観を実現するには、トリックを使用します。2 つの透明な球体をレンダリングする必要がmaterial.side = THREE.BackSideありますmaterial.side = THREE.FrontSide。

アーティファクトのない自己透明性が必要な場合、特にカメラやオブジェクトの移動を許可する場合は、通常、このような方法を使用する必要があります。

ここにフィドルがあります：http://jsfiddle.net/x5bm0qLf/

編集: フィドルを three.js r.105 に更新

于 2012-11-05T17:06:08.213 に答える
5

通常、透明なオブジェクトを実行するには、前後に並べ替える必要があります (three.js は既にこれを行っていると思います)。オブジェクトが凸面である場合 (両方がそうであるように)、各オブジェクトを 2 回レンダリングすることでうまくいく場合があります。たとえば、立方体が球の内側にある場合、効果的に行う

gl.enable(gl.CULL_FACE);
gl.cullFace(gl.CW);
drawSphere();  // draws the back of the sphere
drawCube();    // draws the back of the cube
gl.cullFace(gl.CCW);
drawCube();    // draws the front of the cube.
drawSphere();  // draws the front of the sphere.

three.jsでそれを行う方法がわかりません

これは、凸状で交差していないオブジェクトのみを処理します (一方のオブジェクトが他方のオブジェクトの中に完全に含まれています)。

于 2012-11-05T04:49:41.767 に答える
0

そのシーンをアルファ ブレンディングで正しくレンダリングするには、三角形を各フレームの後ろから前にレンダリングする必要があります。1 つのオブジェクトが別のオブジェクトの中にあり、両側をレンダリングすると、球体の一部をレンダリングし、次に立方体をレンダリングし、次に球体の残りをレンダリングする必要があるため、このシーンは特に困難です。three.js (または他のシーン グラフ ライブラリ) がこのケースを処理できるとは思えません。

加算ブレンディングまたは減算ブレンディングは、並べ替えを行わなくても機能しますが、見栄えはよくありません。

于 2012-11-04T20:58:22.200 に答える