Three.js中的缓存场景

Question

PIXI.js具有Container#cacheAsBitmap，这会导致容器将自身“渲染”到图像，进行保存，渲染图像而不是其子级，并且在添加或删除或更新子级时，将更新缓存

Three.js的替代方案是什么（但不是图像而是网格）？

Answer 1

我可能无法正确理解您的问题，但是您对Sabee答案的答复很有帮助。听起来您正在寻找将多个几何合并到单个网格中或实现一种模型实例化的目的，以减少绘制调用。

有多种方法可以完成此操作，具体取决于您的要求。您可以将多个几何合并到单个几何对象中，并提供一种材料或一组材料（其中每个索引对应于合并的几何之一）。您还可以使用GPU加速的实例化，仅对几何图形的一个副本即可达到类似的效果。

我将参考Dusan Bosnjak出色的实例化中级系列，从这里开始：https://medium.com/@pailhead011/instancing-with-three-js-36b4b62bc127

同样，这是有关实例化的three.js示例：https://threejs.org/examples/?q=instanc#webgl_buffergeometry_instancing_dynamic

Answer 2

Pixi.js是2D javascript库，使用WebGL将图像（帧）呈现为html5 canvas。 Three.js允许使用WebGL创建图形处理单元（GPU）加速的3D动画。 浏览器无法存储渲染的3D帧，这项工作允许GPU加速渲染缓存，这取决于它们运行的​​硬件。 Helpful post了解幕后情况。

但是您可以在浏览器中处理资产，例如图像，3D模型的json对象等。 在Three.js中，Cache class是一个全局对象，由资产加载器（TextureLoader，ImageLoader，AudioLoader ...）使用，默认情况下是禁用的（false）。要启用它，您可以设置THREE.Cache.enabled = true ;

我认为默认情况下，出于性能方面的考虑，浏览器应该缓存纹理，但是如果您要确保通过在Three.js中强制编码来启用缓存，则可以。 Three.js的创建者还回答了this question。