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

Question

我有很多精灵。想想成千上万具有不同纹理的精灵。 https://threejs.org/examples/webgl_sprites.html https://threejs.org/docs/#api/en/materials/SpriteMaterial

现在我的场景动画了，我想改变这些精灵的文本内容。我通过在每一帧上进行设置来做到这一点：

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 很昂贵。当我出于某种原因尝试将画布设置为全局变量时，即使我正在为每个符号重绘画布，它也会使精灵都具有相同的纹理。无论如何，它仍然很慢，所以我没有进一步调查。

我还注意到，如果我预先生成所有文本，然后只使用哈希图来分配它们，那么它工作得又快又好。所以只是纹理生成（在 changeText() 中）使这个速度变慢。但是我需要纹理是完全动态的，所以我不能事先生成所有文本。有任何想法吗？

标签： javascriptthree.js