Threejs in autonomous driving -（3）merge geometry

由於使用場景的關係，我們的產品主要設備是ipad，使用軟件爲chrome或者safari。對webgl無節制的使用，很容易造成災難性的後果崩潰。所以我們要減少cpu和memory的使用。

原理

據，運行效率會提高很多。

這裏感謝一篇文章，詳細的介紹了merge geometry。裏面的API雖然經過版本迭代有所變化，但是效果依然。通過這種技術成功的使我們可以一次展示成千上萬個geometry。
performance-merging-geometry

實現

實現非常的簡單，見一下案例代碼。官方API Geometry.merge

let geometry = new THREE.Geometry();

junction.forEach(({point}) => {
    point.push(point[0]);

    let junction = getShapeGeometryFromPoints(point, false);

    geometry.merge(junction);
});

驗證

直觀上可以看到cpu和memory使用減少了，怎樣可以去量化呢。Threejs的renderer示例提供了一個可以接口，renderer.info屬性可以看到render的實時情況。使用renderer.info.calls可以對比一下前後的drawacall情況。

---

• 我的blog: neverland.github.io
• 我的email [email protected]這裏照抄一段webgl高級編程的原文。

  任何對WebGL API的調用都會帶來開銷。每個調用都會要求CPU進行額外的處理和數據複製，這回佔用時間並要求CPU做一些額外工作。通常，如果GPU接收到大批可並行處理的數