Javascript 在three.js中创建skybox材质的方法比较
说到在three.js中制作Skybox,我看到了两种不同的思想流派。假设我们有代码Javascript 在three.js中创建skybox材质的方法比较,javascript,three.js,shader,Javascript,Three.js,Shader,说到在three.js中制作Skybox,我看到了两种不同的思想流派。假设我们有代码 var imagePrefix = "images/mountains-"; var directions = ["xpos", "xneg", "ypos", "yneg", "zpos", "zneg"]; var imageSuffix = ".jpg"; var skyGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 ); 在这两种
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 );
var materialArray=[];
对于(变量i=0;i<6;i++)
材料排列。推动(新的三网格基本材料({
映射:三个.ImageUtils.loadTexture(imagePrefix+方向[i]+imageSuffix),
侧面:三。背面
}));
var skyMaterial=新的三个网格面材质(materialArray);
var skyBox=new THREE.Mesh(skyGeometry,skyMaterial);
场景.添加(skyBox);
使用着色器的材质:
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 );
var-imageurl=[];
对于(变量i=0;i<6;i++)
push(imagePrefix+directions[i]+imageSuffix);
var textureCube=THREE.ImageUtils.loadTextureCube(imageURLs);
var shader=THREE.ShaderLib[“立方体”];
shader.uniforms[“tCube”].value=textureCube;
var skyMaterial=新的三个着色器材质({
fragmentShader:shader.fragmentShader,
vertexShader:shader.vertexShader,
制服,制服,
depthWrite:false,
侧面:三。背面
} );
var skyBox=new THREE.Mesh(skyGeometry,skyMaterial);
场景.添加(skyBox);
我自己的非正式性能测试表明,使用2048x2048图像作为纹理时,FPS没有显著差异。无着色器代码更容易理解(至少对我来说)。使用基于着色器的纹理是否有优势?您在概念上存在误解 对于WebGL,这两种方法都涉及着色器
MeshBasicMaterial
有一个为方便起见而编写的顶点和片段着色器
这两个示例之间的主要区别在于,第二个示例使用立方体映射作为输入
例如,如果已在反射材质中使用与环境贴图相同的立方体贴图,则可以使用该方法
第一个示例只是渲染skybox的另一种方法,也是两种方法中唯一可以使用CanvasRenderer
的一种
3.js r.58