Are there any alternatives to using TextGeometry for VR applications built with Three.JS that offer better performance?

Question

I just implemented a scoring system for a VR game that I'm working on. But performance is suffering and I think that it's because of how I'm rendering the score. Performance issues started right after I implemented scoring.

I'm creating a new THREE.Mesh with a new THREE.TextGeometry, and then adding it to the scene each time that the score changes. As far as I understand, the string that is being rendered in a TextGeometry object cannot be changed dynamically, so a whole new object needs to be created.

The following happens every time the score changes:

    this.scene.remove( this.text );
    this.material = this.assetStore.mainEmissiveMaterial;
    this.geometry = new THREE.TextGeometry( String(this.score), {
        font: this.assetStore.mainFont,
        size: 6,
        height: 0,
    } );
    this.geometry.translate(-10, 25, -40);
    this.text = new THREE.Mesh( this.geometry, this.material );
    this.scene.add( this.text );

My question: Is there an alternative way of showing text, that doesn't affect performance as much?

Answer 1

When dealing with geometries, you shouldn't create and destroy them each time you need to update. This kills your performance. Instead, create all 10 digits 0123456789, save them as your templates, and then re-use them. Show and hide them and duplicate them as necessary, but don't re-build thousands of vertices and faces each time the text changes.