comparing methods of creating skybox material in three.js
javascript, shader, three.js
Solution
You have a conceptual misunderstanding.
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.
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
Problem
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: Material without using shader: ``` 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 ); ``` Material using shader: ``` 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 ); ``` 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?