3

three.js でスカイボックスを作成することに関して、私は 2 つの異なる考え方を見てきました。コードがあると仮定すると

var imagePrefix = "images/mountains-";
var directions  = ["xpos", "xneg", "ypos", "yneg", "zpos", "zneg"];
var imageSuffix = ".jpg";
var skyGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 );

どちらの方法でも、非常に大きな立方体を作成し、テクスチャを適用します。違いは、シェーダーを使用するかどうかです。例えば：

シェーダーを使用しないマテリアル:

var materialArray = [];
for (var i = 0; i < 6; i++)
    materialArray.push( new THREE.MeshBasicMaterial({
        map: THREE.ImageUtils.loadTexture( imagePrefix + directions[i] + imageSuffix ),
        side: THREE.BackSide
    }));
var skyMaterial = new THREE.MeshFaceMaterial( materialArray );
var skyBox = new THREE.Mesh( skyGeometry, skyMaterial );
scene.add( skyBox );

シェーダーを使用したマテリアル:

var imageURLs = [];
for (var i = 0; i < 6; i++)
    imageURLs.push( imagePrefix + directions[i] + imageSuffix );
var textureCube = THREE.ImageUtils.loadTextureCube( imageURLs );
var shader = THREE.ShaderLib[ "cube" ];
shader.uniforms[ "tCube" ].value = textureCube;
var skyMaterial = new THREE.ShaderMaterial( {
    fragmentShader: shader.fragmentShader,
    vertexShader: shader.vertexShader,
    uniforms: shader.uniforms,
    depthWrite: false,
    side: THREE.BackSide
} );
var skyBox = new THREE.Mesh( skyGeometry, skyMaterial );
scene.add( skyBox );

私自身の非公式のパフォーマンス テストでは、テクスチャに 2048x2048 の画像を使用した場合、FPS に大きな違いは見られませんでした。シェーダーを使用しないコードの方が (少なくとも私にとっては) 理解しやすいです。シェーダーベースのテクスチャを使用する利点がある状況はありますか?

4

1 に答える 1

9

概念的な誤解があります。

WebGL の場合、どちらの方法にもシェーダーが含まれます。MeshBasicMaterialには、利便性のために作成された頂点シェーダーとフラグメント シェーダーがあります。

2 つの例の主な違いは、2 番目の例では入力にキューブ マップを使用していることです。

たとえば、反射マテリアルの環境マップと同じキューブ マップを既に使用している場合は、このアプローチを使用します。

最初の例は、スカイボックスをレンダリングするもう 1 つの方法であり、2 つのうち で機能する唯一の方法CanvasRendererです。

three.js r.58

于 2013-05-01T02:19:15.560 に答える