在THREE.js中创建50000+文本粒子

Create 50000+ Text Particles in THREE.js

本文关键字：50000+ 文本 粒子 创建 THREE js      更新时间：2023-09-26

我试图创建一个超过50000个单个字母的字符粒子系统。

发现类似的东西，但是用XG写在这里。

创建它的问题是应用程序的性能。

下面是一些简短的伪代码:

var field = new THREE.Object3D();
for (var i = 0; i < 50000; i++) {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    context.fillText(char);
    var texture = new THREE.Texture(canvas)
    texture.needsUpdate = true;
    var spriteMaterial = new THREE.SpriteMaterial({map: texture});
    var sprite = new THREE.Sprite(spriteMaterial);
    sprite .position.set(x, y, z);
    field.add(textSprite);
}
scene.add(field);

所以我的问题是现在，有一些例子或东西，我可以看到最好的方式来创建这个数量的文本精灵?!

我也试过这个例子，没有一个好的结果。

正如vals所指出的，您正在为每个字母创建材料和纹理。事实上，你也正在创建一个画布是无关紧要的，这只是一次性的开销。

您创建的每个纹理都必须占用图形内存。在纹理之后，每个材质在每个渲染通道中都是单独计算的，所以对于50000个材质，你有很多计算。

加快速度的一个简单方法是使用查找表:

var materialLUT = {};
function getMaterialForLetter(c){
    var m = materialLUT[c];
    if(m === void 0){
        //material doesn't exist, lets create it
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        context.fillText(c);
        var texture = new THREE.Texture(canvas)
        texture.needsUpdate = true;
        m = materialLUT[c] = new THREE.SpriteMaterial({map: texture});
    }
    return m;
}
var field = new THREE.Object3D();
for (var i = 0; i < 50000; i++) {
    var spriteMaterial = getMaterialForLetter(char);
    var sprite = new THREE.Sprite(spriteMaterial);
    sprite.position.set(x, y, z);
    field.add(textSprite);
}
scene.add(field);

我认为应该改进的另一件事是PointCloud的使用。最后-我认为最好使用单一纹理，并通过UV获得相关字符。

相关文章：