比较在three.js中创建天空盒材料的方法

Question

当谈到在three.js制作天空盒时,我已经看到了两种不同的思想流派.假设我们有代码

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没有显着差异.无着色器代码更容易理解(至少对我而言).是否存在使用基于着色器的纹理有优势的情况？

Answer 1

你有一个概念上的误解.

对于WebGL,这两种方法都涉及着色器.MeshBasicMaterial有一个顶点和片段着色器,为方便起见,已为您编写.

两个示例之间的主要区别是第二个示例使用立方体贴图进行输入.

例如,如果您已经使用相同的立方体贴图作为反射材质中的环境贴图,则可以使用该方法.

第一个例子是渲染天空盒的另一种方式,也是两个中唯一可以使用的方法CanvasRenderer.

three.js r.58