Threejs-in-autonomous-driving-3merge-geometry

55次阅读

共计 709 个字符,预计需要花费 2 分钟才能阅读完成。

由于使用场景的关系,我们的产品主要设备是 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 enix@foxmail.com 这里照抄一段 webgl 高级编程 的原文。

    任何对 WebGL API 的调用都会带来开销。每个调用都会要求 CPU 进行额外的处理和数据复制,这回占用时间并要求 CPU 做一些额外工作。通常,如果 GPU 接收到大批可并行处理的数

正文完
 0