What is the performant way to update text in TextGeometry?

Questions
1

I am using TextGeometry to display 3D text in a WebXR scene.The text updates per frame.

The https://threejs.org/examples/webgl_geometry_text.html example does this by creating new TextGeometry each time, however this is very costly.

What is the performant way to update the text content in a TextGeometry?

Thanks

2

Hi, welcome to the forum.

If you want to display some text in a WebXR scene, you don’t need to create a 3D geometry in the first place, did you check out this example ? This would reduce the number of polygons and help a bit, but it still produces meshes, and creating meshes every frame always lead to performance issues.

The best thing would be to pre-create the characters meshes, and only show/hide them with their visible property and position them to create new words.

This will help, but if your text is big, it’s still a lot of independent meshes, which is still a problem for performance. The solution is to use InstancedMesh, so you only have one mesh per character, visually duplicated by the GPU.

Be sure to check out this library to create WebXR user interfaces., it was created to address this kind of problem.

2 Likes
3

Avoid TextGeometry if you need to update the text every frame. Something like Troika-3d-text: library for SDF text rendering or GitHub - Experience-Monks/three-bmfont-text: renders BMFont files in ThreeJS with word-wrapping will work more efficiently for this.

2 Likes