Сравнивая методы создания материала skybox в three.js

Question

Когда дело доходит до создания skyboxes в 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); 

Мои собственные неофициальные тесты производительности не показывают существенных различий в FPS с помощью 2048x2048 изображений для текстур. Без шейдерного кода легче (по крайней мере для меня) понять. Существуют ли ситуации, в которых есть преимущество использования текстуры на основе шейдеров?

Answer 1

У вас есть концептуальное недоразумение.

Для WebGL оба метода включают шейдеры. MeshBasicMaterial имеет вершинный и фрагментарный шейдер, который был написан для вас для удобства.

Основное отличие между двумя примерами - второй пример использует карту куба для ввода.

Вы использовали бы этот подход, если бы вы уже использовали ту же карту куба, что и карта окружения в отражающем материале.

Первый пример - это еще один способ визуализации skybox, и он является единственным из двух, который будет работать с CanvasRenderer.

three.js r.58