WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 一对一班

Three.js更新机制

关于Threejs材质Material、几何体Geometry、纹理Texture、相机camera等对象如何更新也没必要刻意记忆,只要你能够理解Threejs渲染器的渲染过程,明白threejs为什么要设置一套更新机制,然后用到具体知识查看文档即可。

如果你想深入理解threejs渲染更新机制,首先最好有一定的原生WebGL基础,然后阅读threejs渲染器相关源码和学习本站发布的《threejs进阶课程》关于threejs系统原理的介绍。

在大多数场景下,Threejs渲染的时候很多数据不需要每次渲染都要更新,只是在特定的情况下才更新。为了更好的渲染性能,Threejs设置了一套默认的更新机制,对于一些不经常更新的对象,three.js默认是不更新,如果有相关的更新发生,可以手动更新。

threejs官方文档介绍:如何更新场景(How to update things)

纹理对象更新Texture

比如把canvas对象作为材质的颜色纹理贴图,如果canvas发生了变化就需要更新纹理对象,如果不更新纹理对象,canvas的变化不会反映到网格模型的贴图上。

如果你有兴趣可以阅读Three.js渲染器源码,Threejs渲染器在执行.render()方法进行渲染的时候,会判断纹理对象Texture.needsUpdate属性是是否是true,如果是就更新纹理,然后设置为false,如果下次执行的时候,threejs判断.needsUpdate属性值是false,就不用在浪费资源更新纹理,节约资源,提高性能。

texture.needsUpdate = true;
// 或者通过材质访问纹理对象
// mesh.material.map.needsUpdate = true;

相机对象

如果相机对象与投影矩阵相关的属性发生了变化,就需要手动更新相机的投影矩阵,执行camera.updateProjectionMatrix();的时候,threejs会重新计算相机对象的投影矩阵值,如果相机对象的投影矩阵相关属性没有变化,每次执行.render()方法的时候,都重新计算相机投影矩阵值,会浪费不必要的计算资源,一般来说就是首次渲染计算一次,后面不执行.updateProjectionMatrix()方法threejs不会读取相机相关属性重新计算投影矩阵值,直接使用原来的值就可以。

无论正投影相机还是投影投影相机对象的.near.far属性变化,都需要手动更新相机对象的投影矩阵。

比如透视投影相机对象的.aspect.fov属性变化,会影响相机的投影矩阵属性.projectionMatrix,需要执行.updateProjectionMatrix ()更新相机对象的投影矩阵属性

camera.aspect = window.innerWidth / window.innerHeight;
// 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
// 但是不会每渲染一帧,就通过相机的属性计算投影矩阵(节约计算资源)
// 如果相机的一些属性发生了变化,需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
camera.updateProjectionMatrix();

正投影相机对象的.left.right.top.bottom等属性变化,需要执行camera.updateProjectionMatrix ();更新相机对象的投影矩阵属性

// 重置相机投影的相关参数
k = window.innerWidth/window.innerHeight;
camera.left = -s*k;
camera.right = s*k;
camera.top = s;
camera.bottom = -s;
camera.updateProjectionMatrix ();

层级模型

threejs整个场景的模型是一个树结构,默认的情况下,在threejs执行渲染方法渲染场景的时候,threejs会计算每个节点模型对象的世界矩阵.matrixWorld和本地矩阵.matrix

关于模型对象矩阵更新的属性和方法可以查看threejs文档关于基类Object3D的介绍。.matrixAutoUpdate.matrixWorldNeedsUpdate属性,.updateMatrix ().updateMatrixWorld ()方法。

相关文章

1.https://www.jianshu.com/p/8aa21a1ae6a6

2.https://blog.csdn.net/tjj3027/article/details/82224843

3.https://zhidao.baidu.com/question/268518135983089685.html

4.https://blog.csdn.net/naooomi/article/details/7045795

本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com