Question

我正在构建一个three.js应用程序，我有多个纹理，我必须动态生成（也可能在以后重新生成（更新））。现在我按照这样的纹理分配一个专用的屏幕外绘图画布，分配如下：

canvas = document.createElement('canvas');
canvasContext = canvas.getContext('2d');
mainTexture = new THREE.Texture(canvas);

然后，当我必须更新纹理时，我使用Canvas API将内容渲染到画布，然后调用

mainTexture.needsUpdate = true;

导致纹理在将来的某个时间从画布重新加载其内容。我需要用于画布渲染的任何图像我已经预加载和缓存，因此在进行渲染时它们不会导致更多延迟。

这个过程在更新周期后引起一段时间的抽搐，显然是由于延迟加载和/或多个画布浪费了不必要的大量内存（这只是一种预感;我不知道内存是如何的管理分配的html5画布）。

所以我的问题是，如何更有效地做到这一点？因此，我不能使用单个画布，因为如果我要同时更新多个纹理，由于纹理的延迟加载特性，它们的更新将覆盖之前完成的更新。有没有办法强制纹理同步并立即从画布重新加载？是否存在另一种不具备多幅画布的可行策略？

ty，

马蒂

Answer 1

您是否尝试从画布中制作精灵片，然后根据所需的纹理设置UV坐标或纹理偏移？

如果不是，试一试，spritesheets会创造奇迹！

但要注意画布尺寸。我不建议使用大于2048 * 2048的画布 - here's an interesting conversation that might give you hints