比较three.js中创建skybox材质的方法 [英] comparing methods of creating skybox material in three.js

问题描述

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

When it comes to making skyboxes in three.js, I have seen two different schools of thought. Assuming that we have the code

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

在这两种方法中，一个创建一个非常大的立方体并应用纹理.区别在于是否使用着色器.例如:

In both methods, one creates a really big cube and applies textures. The difference is whether shaders are used. For example:

不使用着色器的材质:

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

My own informal performance tests show no significant difference in FPS using 2048x2048 images for textures. The shader-free code is easier (at least for me) to understand. Are there situations in which there is an advantage to using the shader-based texture?

推荐答案

你有一个概念上的误解.

You have a conceptual misunderstanding.

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

For WebGL, both methods involve shaders. MeshBasicMaterial has a vertex and fragment shader that has been written for you for convenience.

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

The primary difference between the two examples is the second example uses a cube map for input.

例如，如果您已经在反射材质中使用与环境贴图相同的立方体贴图，您将使用这种方法.

You would use that approach if you were already using the same cube map as an environment map in a reflective material, for example.

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

The first example is just another way to render a skybox, and is the only one of the two that will work with CanvasRenderer.

three.js r.58

three.js r.58

这篇关于比较three.js中创建skybox材质的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！