比较three.js中创建天空盒材质的方法答案

【问题标题】：comparing methods of creating skybox material in three.js比较three.js中创建天空盒材质的方法
【发布时间】：2013-04-25 00:31:36
【问题描述】：

当谈到在 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 没有显着差异。无着色器代码更容易理解（至少对我而言）。在某些情况下使用基于着色器的纹理有优势吗？

【问题讨论】：

标签： javascript three.js shader

【解决方案1】：

你有概念上的误解。

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

这两个示例的主要区别在于第二个示例使用立方体贴图作为输入。

例如，如果您已经在反射材料中使用与环境贴图相同的立方体贴图，则可以使用该方法。

第一个示例只是渲染天空盒的另一种方式，并且是两者中唯一可以与CanvasRenderer 一起使用的示例。

three.js r.58

【讨论】：