I have been working a lot with WebGL text in the past several months. Our current solution uses SDF with standard derivatives (crisp anti-aliasing regardless of zoom level) and supports kerning (depending on the font), batched glyphs, and word wrapping. It's not perfect, but it's pretty good for common use cases.<p>Since the OP is using modules already, they might enjoy some of the libraries and tools here:<p><a href="https://www.npmjs.com/package/text-modules" rel="nofollow">https://www.npmjs.com/package/text-modules</a><p>Or a ThreeJS specific implementation of bitmap / SDF:<p><a href="https://github.com/Jam3/three-bmfont-text" rel="nofollow">https://github.com/Jam3/three-bmfont-text</a><p>And lots more reading on the subject:<p><a href="http://mattdesl.svbtle.com/material-design-on-the-gpu" rel="nofollow">http://mattdesl.svbtle.com/material-design-on-the-gpu</a><p>Some practical implementations of it:<p>- npm dataviz: <a href="http://mattdesl.github.io/npm-names/" rel="nofollow">http://mattdesl.github.io/npm-names/</a> (over 40k glyphs, could go higher)<p>- physical text: <a href="http://mattdesl.github.io/physical-text/index.html" rel="nofollow">http://mattdesl.github.io/physical-text/index.html</a>
Drawing text <i>is</i> hard, and not something that should be solved at the OpenGL level. It involves coordinating with the window manager and user settings.<p>But I'm just responding to the gimmicky title. It looks like the article has some interesting technical content to it.
Google "loop blinn". There are a few papers by those guys on the topic of rendering smooth anti aliased cubic bezier paths, which is really what you want.<p>You can read font data directly from ttf e.g. And render text nicely with few polygons and shaders taking care of very nice accurate edge rendering.<p>I wrote a half finished c implementation a couple of years ago that might be useful as a reference if you want to look into this more : <a href="https://github.com/hansent/lbfont" rel="nofollow">https://github.com/hansent/lbfont</a><p>It's mainly based on the paper/article inter book GPU gems 3.<p>Accelerated 2D Vector graphics are hard, when I was working on this nvidia was announcing the nv_path_rendering extension; don't know how widely this is supported these days. But I doubt it's available in webgl.<p>Edit: few typos...writing on mobile
Feel free to do a PR with your solution, just so no one has to write a "It's 2016 and drawing text is still hard" blog post next year ;)
I have been building a tool for interactive data visualization using panda3d. Running absurd amounts hideously complex static geometry? No problem. Want to render short labels on a couple thousand objects? Draw calls aside, renderer slows to a crawl because it also uses the text geometry approach. Does anyone know if there are other approaches that work aside from the the SDF described in the article?
This site looks terrible in chrome.<p><a href="https://i.imgur.com/39warVl.png" rel="nofollow">https://i.imgur.com/39warVl.png</a>