由于使用場景的關(guān)系，我們的產(chǎn)品主要設(shè)備是ipad，使用軟件為chrome或者safari。對webgl無節(jié)制的使用，很容易造成災(zāi)難性的后果崩潰。所以我們要減少cpu和memory的使用。

原理

據(jù)，運(yùn)行效率會(huì)提高很多。

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

實(shí)現(xiàn)

實(shí)現(xiàn)非常的簡單，見一下案例代碼。官方API Geometry.merge

let geometry = new THREE.Geometry();

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

    let junction = getShapeGeometryFromPoints(point, false);

    geometry.merge(junction);
});

驗(yàn)證

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

• 我的blog: neverland.github.io

• 我的email enix@foxmail.com這里照抄一段webgl高級編程的原文。

  任何對WebGL API的調(diào)用都會(huì)帶來開銷。每個(gè)調(diào)用都會(huì)要求CPU進(jìn)行額外的處理和數(shù)據(jù)復(fù)制，這回占用時(shí)間并要求CPU做一些額外工作。通常，如果GPU接收到大批可并行處理的數(shù)