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