BufferGeometry 和 Geometry 有什么不同
如果你刚接触 Three.js,查看文档的时候,通过 BoxBufferGeometry
、SphereBufferGeometry
可以分别用来创建长方体、球体,同样通过 BoxGeometry
、SphereGeometry
也可以用来分别创建长方体、球体。BoxBufferGeometry
、SphereBufferGeometry
等 Three.js API 的基类是 BufferGeometry
,BoxGeometry
、SphereGeometry
等 Three.js API 的基类是Geometry
。
测试代码你会发现 BufferGeometry
和Geometry
可以实现同样的功能,这时候你可能至少会思考它们会有什么不同,简单的点说 BufferGeometry
和Geometry
对象的数据结构不同,但是都可以用来描述几何体的顶点信息。
学习建议
个人 WebGL/Three.js 技术博客
如果你想简单理解 BufferGeometry 和 Geometry 有什么不同, 就是两者的数据结构不同,缓冲类型几何体 BufferGeometry
相比普通几何体 Geometry
性能更好。
如果想深入理解,建议先有一定的原生 WebGL 基础,可以学习本博客的原生 WebGL 视频教程,另一方面可以学习 Three.js 视频教程中第 2 章对 BufferGeometry
和Geometry
的详细介绍。
顶点概念
如果你想深入理解 BufferGeometry
和Geometry
到底有什么不同,你至少要对几何体的顶点数据要有一定概念,比如顶点位置、顶点法向量、顶点颜色、顶点纹理坐标 UV 等数据,如果你有一定原生 WebGL 基础,对这些肯定是了解的。
无论是缓冲类型几何体对象 BufferGeometry
还是普通几何体对象Geometry
,它们本质上都是用来描述一个几何体顶点数据的对象,通过不用的属性来表示不同的顶点数据,这些构造函数也封装了一些相关方法。
数据结构
有了顶点的概念,你在浏览器的控制台打印查看 BufferGeometry
和Geometry
对象有哪些属性,这些属性的属性值分别表示顶点的什么数据。
var geometry = new THREE.BoxGeometry(10, 8, 9);
console.log('几何体数据结构',geometry);
console.log('顶点位置数据',geometry.vertices);
console.log('顶点纹理坐标',geometry.faceVertexUvs);
console.log('几何体三角形信息',geometry.faces);
var geometry = new THREE.BoxBufferGeometry(7, 6, 8);
console.log('几何体数据结构',geometry);
console.log('顶点位置、法向量、UV、颜色顶点等数据集合',geometry.attributes);
console.log('顶点位置数据',geometry.attributes.position);
console.log('顶点索引数据',geometry.index);
渲染过程
在执行 WebGL 渲染器 WebGLRenderer
渲染方法 .render()
的时候,渲染器会对场景和相机进行解析渲染,解析场景 Scene 自然会解析场景中模型对应的几何体对象 Geometry。关于渲染器是如何解析渲染场景和相机对象的,在《Three.js 进阶视频教程》中进行了介绍和讲解,有兴趣可以详细了解,这里不再展开详述,这里只说和几何体相关的内容。
Three.js 渲染器在解析几何体对象的时候,如果几何体对象是普通几何体对象 Geometry
,Three.js 的 WebGL 渲染器会把普通几何体对象Geometry
转化为缓冲类型几何体对象 BufferGeometry
,然后再提取BufferGeometry
包含的顶点信息,这里可以看出来直接使用 BufferGeometry
解析的时候相对 Geometry
少了一步,自然性能更高一些。不过从开发者使用的角度来看,Geometry
可能对程序员更友好一些。