Text Label with WebGL

Questions
,
1

Hey, Im currently in need of multiple simple text labels in my WebGL rendered scene. I’ve gone through this topic probably two years ago already and it seems not much has changed from there.

I found a few techniques.

  1. Either you could create a Canvas, draw some text on it, make a Texture from Canvas, make a Sprite from the Texture and use it in the scene.
    This approach seems to be pretty performance heavy for me, because I need to update the label value constantly.

  2. Or you could make a HTML Element and project its position from 3D to 2D.
    This is pretty straight forward, but also has its flaws. The HTML is always overlapping the webGL canvas and is not nested in the webGL scene.

  3. Its probably possible to add a CSSRenderer and render a second scene on top of the other, but Im not sure if itll lead into other problems, like missing events? Also this seems to be pretty performance heavy.

Whats the best and most performant way of creating updatable 2D text labels with webGL?

Any help appreciated :slight_smile:

2

One of interesting solution how it’s done in games is make texture atlas (maybe with sdf effect) with alphabet and numbers, billboard instancing, custom shader for uv offset of letters etc.

1 Like
3

If you will using SDF effect for letters into perspective camera:
sdf text Troika-3d-text: library for SDF text rendering - #18 by mrdoob
sdf text thttps://github.com/protectwise/troika/tree/master/packages/troika-three-text
sdf generator troika/SDFGenerator.js at 3e7d4e0d278fc28fe897aa574aad329746e451a0 · protectwise/troika · GitHub

2 Likes
4

I made a simple prototype to create multiple text lables in single draw call. Maybe this would help you.

1 Like
5

There is also three-mesh-ui.

5 Likes