Three.js緩衝區管理

Question

我想提高我的webgl技能，並認爲最好的學習方法是通過查看three.js Three.js。我知道如何創建和綁定緩存，着色器etc.But什麼是我尋找的是如何做three.js所管理的例如結合緩衝過程

gl.createBuffer 
gl.bindBuffer 
gl.bufferData 

有人能解釋three.js所如何做下的工作油煙機？

Answer 1

此答案適用於Three.js r84。

three.js所使用3種類型的幾何形狀：

• Geometry
• BufferGeometry
• （DirectGeometry）

Geometry存儲幾何參數（頂點，法線，色彩，.. ）以一種用戶友好的方式。 BufferGeometry將BufferAttribute中的幾何存儲起來，它們只是緩衝區的包裝（或typed arrays），其中包含通常使用gl.bufferData()發送的數據。
（DirectGeometry僅用於轉換從Geometry到BufferGeometry）

基本上，公共three.js所渲染器，WebGLRenderer，與BufferGeometry而用Geometry用戶的交易的交易。

但是，只要您不渲染場景，就不會執行幾何轉換，也不會向GPU發送任何內容。 （沒有創建緩衝區）。

爲了防止引擎使用WebGL特定的東西（如緩衝區）污染用戶空間，Three.js實現了一些包含在渲染器中的包裝。其中兩種包裝是：

• WebGLGeometries其中存儲所有的BufferGeometry s;
• WebGLAttributes它存儲所有的WebGL緩衝區。

用戶對象和這些包裝內的對象之間的映射通過uuid屬性完成。

當請求渲染時，渲染器瀏覽場景的所有對象。如果一個對象uuid不存在於其中一個包裝中，則會執行一些處理並存儲轉換後的對象。

這就是事情變得有趣，因爲這是一個對象的Geometry轉換爲BufferGeometry的WebGLGeometries包裝內部與BufferGeometry使用您列出的功能轉化爲一個或多個WebGLBuffer的WebGLAttributes包裝內：

gl.createBuffer(); 
gl.bindBuffer(); 
gl.bufferData(); 

查詢此file找到實際的電話。

此外，當像Geometry這樣的對象更新時，其version計數器會增加，以致它不再匹配在包裝器中編寫的version。渲染器然後知道它應該更新包裝的對象。

最後，當一個對象被添加到一個包裝，一個監聽器，使得當一個對象被刪除的呈示得到通知，從而可以配置被包裝的對象連接到它。