4

three.jsを使用して 3D 環境でシェーダーを試すことができる小さなテストを作成しました。

シーンには、シェーダーを示す球があります。

私が作成したデモ シェーダーは、2D ノイズの実装を使用する非常に単純なシェーダーです。球の大部分は黒のままで、透明にしました。球の反対側も見えるようにしたいです。そのため、透明度を有効にし、レンダリング面を両面に設定しました。

material = new THREE.ShaderMaterial({
    'uniforms': uniforms,
    'fragmentShader': $('textarea#input-fragment').val(),
    'vertexShader': $('textarea#input-vertex').val()
});

material.side = THREE.DoubleSide;
material.transparent = true;

この例では、バグに気づきやすくなっています。

球を上から見ると、シェーダーは外側からしか見えません。横から見ると少しガタがあるように見えますが、下から見ると機能しているように見えます。

これらはさまざまな角度です (上 - 横 - 下):

上面図 側面図 底面図

私のフラグメントシェーダーの重要な部分は次のとおりです。

void main() {
    float r = cnoise(vNormal.yz * 2.0 + t);
    float g = cnoise(vNormal.xz * -1.0 + t);
    float b = cnoise(vNormal.xy * -2.0 + t);

    // opacity ranges assumable from 0 - 3, which is OK
    gl_FragColor = vec4(r, g, b, r + g + b);
}

では、なぜ途切れ途切れのエッジが表示され、視野角が重要なのですか?

4

2 に答える 2

4

シェーダーに問題はありません。次のように設定すると、効果を確認することもできます。

gl_FragColor = vec4( 1.0, 1.0, 1.0, 0.5 );

three.js では、自己透過性は扱いにくいものです。

のパフォーマンス上の理由からWebGLRenderer、深度ソートはオブジェクト間でのみ(位置に基づいて) 機能し、単一のオブジェクト内では機能しません。

オブジェクト内の個々の面のレンダリング順序は制御できません。

これが、見る角度によっては、シーンが他の角度よりもよく見える理由です。

回避策の 1 つは、ジオメトリをそれぞれ 1 つの面の個別のメッシュに分解することです。

別の回避策（最善の策、IMO）は、透明な両面球を同じ場所にある2つの透明な球（前面と背面）に置き換えることです。

three.js r.56

于 2013-03-05T17:56:10.033 に答える