Сравнение методов создания материала скайбокса в three.js
Когда дело доходит до создания скайбоксов в 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 для текстур. Код без шейдеров легче (по крайней мере для меня) понять. Есть ли ситуации, в которых есть преимущество при использовании текстуры на основе шейдера?