CODEWITHSUNDEEP
javascriptthree.jswebgl
Inoir
Inoir

Reputation: 96

Create 50000+ Text Particles in THREE.js

Im trying to create a character particlesystem with more than 50000 single letters.

Found something similar but written with XG here.

Problem with creating this is the performance of the application.

Here some short pseudo code:

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);

So my question is now, is there some example or something where i can see the best way to create this number of textsprites?!

I've also tried this example without a good result.

Upvotes: 3

Views: 1993

Answers (1)

travnik
travnik

Reputation: 730

As vals noted, you are creating material and a texture for every letter. The fact that you are creating a canvas too is beside the point, that's just a one-off overhead.

Every texture you create will have to take up graphics memory. After the fact of texture, every material is computed separately in every render pass, so for 50000 materials you have a lot of computation.

A simple way to speed what you have up would be to use look-up tables:

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);

Another thing i see that should be improved here is use of PointCloud. And lastly - I think it would be best to use a single texture and get relevant characters via UV.

Upvotes: 1

Related Questions