比較在three.js所

創建空中包廂材料當談到在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);

我自己的非正式性能測試表明採用2048×2048的圖像的紋理FPS無顯著差異。無着色器的代碼更容易理解（至少對我而言）。是否有使用基於着色器的紋理有優勢的情況？

來源

2013-05-01 Lee Stemkoski

你有一個概念上的誤解。

對於WebGL的，這兩種方法涉及着色器。 MeshBasicMaterial有一個頂點和片段着色器，爲了方便起見已經爲您寫入。

的兩個例子之間的主要差別是第二示例使用用於輸入的立方圖。

，如果你已經在使用相同的立方體貼圖作爲反射材料的環境地圖，例如你可以使用這種方法。

第一個例子是另一種方式來渲染天空盒，並且是兩個，將與CanvasRenderer工作的唯一一個。

three.js r.58

來源

2013-05-01 02:19:15 WestLangley

這肯定會清除此事 - 謝謝！ – 2013-05-01 02:31:41

比較在three.js所

回答

相關問題