Threejs-處理幾何頂點上的部分變換的最佳方法

Question

我的網格具有大約5k頂點的幾何形狀。 這是由於合並了多個幾何圖形而導致的所有結果都在一個平面陣列中。 到目前為止，一切都很好，我可以修改單個頂點，並通過設置標志verticesNeedUpdate = true可以看到反映在網格上的更改。 我的問題是我需要在其中一些頂點上進行平移和旋轉，我想知道是否有更好的方法為每個集合應用變換，除了修改循環中的每個頂點位置以應用變換之外。

我曾經有一個想法是創建一個新的幾何圖形並指定頂點子集（通過引用），這樣我就可以進行變換了，但這似乎很奇怪，所以我停下來問這個問題。

我看了一下這個示例https://threejs.org/examples/?q=constr#webgl_buffergeometry_constructed_from_geometry，但是我不知道如何旋轉/縮放頂點組。

同樣，據我了解，這將通過僅上傳一組頂點而不是進行數百次調用來減少對GPU的調用。 但是，我想知道是否在每個框架上修改此幾何頂點是否違背了完成所有這些操作的全部目的？

Answer 1

如我所見，該示例創建了多個心形（幾何形狀）並應用了變換，然后將變換后的頂點組合到一個幾何形狀（bufferGeometry）中 。 因此，所有的心都在相同的幾何圖形中，並且一次調用即可繪制。 缺點是，您不能單獨操縱心臟。

這里的線索是，轉換最初已完成，並且轉換后的坐標已上傳到GPU。 您不想通過cpu更新每幀的頂點。

geometry.lookAt( vector );
geometry.translate( vector.x, vector.y, vector.z );

在將頂點添加到bufferGeometry之前，負責轉換頂點。

---

如果可以為每個頂點添加一個“索引”，則可以使用UBO來存儲矩陣，並在同一繪制調用中為頂點提供不同的轉換（在頂點着色器中）。