CODEWITHSUNDEEP
three.jsshaderlabel
Jared
Jared

Reputation: 607

rendering thousands of unique text labels using three.js

point cloud

I have a THREE.PointCloud that contains a large amount of points. In the screenshot above, each point is mapped to small purpleish circle.

I'm trying to figure out a way to display text labels beside each points.

My first attempt was to dynamically create text via the canvas and display the textures inside THREE.Sprite objects. This achieved the look I was going for, but the performance hit was significant. I quickly learned this wouldn't scale past just a few hundred points.

I'm thinking there may be a way to do this with shaders but I cannot figure out the approach. The method used in animating a million letters used a texture of glyphs, and mapped the letters to the glyphs:

glyph sheet

I'm thinking I could do the same by creating a THREE.Geometry object and pushing the vertices and faces for each text letter of the labels. The downside is that I want the labels to billboard so that they always face the camera. Billboarding in the vertex shader seems to be pretty straightforward.

My feeling is that there are already some examples out there that combine all of these ideas into a single working example. Any suggestions on how to do large-scale text labels would be greatly appreciated. Thanks!

Upvotes: 3

Views: 2149

Answers (1)

Jared
Jared

Reputation: 607

I figured it out. You have to use a glyph sheet and render each character as a quad using two faces.

The process is outlined pretty well in animating a million letters

I can get away with about a million on-screen characters before performance starts taking a hit.

Upvotes: 2

Related Questions