比较在three.js中创建天空盒材质的方法
comparing methods of creating skybox material in 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方面没有显着差异。没有着色器的代码更容易理解(至少对我来说)。在某些情况下,使用基于着色器的纹理有优势吗?
你有概念上的误解。
对于WebGL,这两种方法都涉及到着色器。MeshBasicMaterial
有一个顶点和片段着色器,已经为您编写方便。
两个示例之间的主要区别是第二个示例使用立方体映射作为输入。
如果您已经在反射材料中使用相同的立方体映射作为环境映射,则可以使用该方法,例如
第一个例子只是渲染天空盒的另一种方式,并且是两个中唯一一个将与CanvasRenderer
一起工作的。
three.js r.58
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- 有没有任何方法可以将控制器从文件加载到ui路由器$stateProvider中
- 数组在递归方法中设置为null
- 打破承诺链的好方法是什么
- 在使用Polymer'加载所有json文件后执行方法;s的核心ajax
- 使用“;这个“;JavaScript原型方法中的关键字
- 序列化数据属性中对象的最可靠方法
- 使用Objective-C的JavaScript注入方法
- 有没有一种方法可以添加相同的项目val=“0”;4〃;到JavaScript中数组的每个对象
- 有没有一种方法可以防止img get请求使用css或js发生
- Javascript,有没有一种方法可以将数组写成没有逗号或空格的单个文本字符串
- toBoolean方法类似于toString
- 如何在单击复选框后调用控制器方法
- 是否有任何方法可以使用jQuery替换在数组中定义值的文本
- 递归使用 eval() 是检查程序执行的好方法吗?
- 如何在webView,Android中从@JavascriptInterface方法调用Javascript
- toLocaleDateString和toLocaleString方法不尊重机器时区
- 有条件更新d3.js力图中节点的最佳方法
- TypeError:在不兼容的接收器nodejs上调用了方法Uint8Array.length
- jQuery插件-从插件中调用公共方法