Javascript 如何提高three.js中许多精灵的动态纹理性能？

我有很多雪碧。想一想成千上万个有着不同纹理的精灵。

现在我的场景设置动画，我想更改这些精灵的文本内容。我通过在每个帧上设置来实现：

var animate = function() {
   requestAnimationFrame(animate);

    for (var sprite in sprites) {
       newText = randomText(); // think some uniquely random text or number on each frame
       sprite.material.map = changeText(newText);
    }

    renderer.render(scene, camera);
}

changeText看起来像这样：

function changeText(newText) {
     var canvas = document.createElement('canvas');
     var context = canvas.getContext('2d');
     canvas.width = 40; canvas.height = 40;
     // ... set color etc
     ctx.fillRect(0, 0, 40, 40);
     // ... set another color then
     context.fillText(newText, 0, 0);

     var amap = new THREE.Texture(canvas);
    amap.needsUpdate = true;

    return amap;
}

现在这是可行的，但如果我在每一帧上都这样做，它绝对会爬行，而不是只做一次。也许createElement很贵。当我出于某种原因试图将画布设置为全局变量时，它会使精灵都具有相同的纹理，即使我正在为每个符号重新绘制画布。不管怎样，速度还是很慢，所以我没有进一步调查

---

我还注意到，如果我预先生成所有的文本，然后使用hashmap分配它们，那么它工作得又快又好。因此，正是纹理生成（在changeText（）中）使速度变慢。但是我需要纹理是完全动态的，所以我不能事先生成所有的文本。有什么想法吗？

正如您已经注意到的，动态创建小画布元素非常昂贵。您应该重复使用canvas元素，并在使用它之前清除它。您还应该创建一个较大的画布，而不是几个较小的画布，并将其用作精灵。例如：400x400画布相当于100幅40x40画布，4000x4000画布相当于10000幅40x40画布。根据您的需要对其进行尺寸标注。将纹理上载到GPU是一个瓶颈。这就是为什么实时游戏引擎总是在开始时加载所有要使用的纹理（加载屏幕），然后在整个游戏过程中保持存储在VRAM中的相同纹理。我认为上面提到的spritesheet是一个不错的选择，但是您需要编写自定义着色器。你可以看看，它只用于制作动画。我目前正在考虑只创建0到9的纹理，然后根据变化的数字将这些纹理的倍数放在一起创建一个数字。手动将数字缝合在一起可能会因为字母间距太小而不好看。但如果您只有数字，那么您可以为所有相邻数字的组合创建一个间距查找表。