BufferGeometry和Geometry有什么不同

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 可能对 程序员 更友好一些。