3 ms·
I wonder how they are rendering the text in WebGL like that, I couldn't figure out if they were using the write the text on canvas then extract and image and us
by benjaminjackman 11y ago
I wonder how they are rendering the text in WebGL like that, I couldn't figure out if they were using the write the text on canvas then extract and image and use that as a sprite / texture. It looks quite a bit smoother and scales better than my attempts using that approach.
- zamalek 11y agoChronologically this is how rendering text has been typically tackled: 1. Rendering billboards from a texture atlas containing all the characters you could possibly emit (similar to your approach). Zooming results in blurriness 2. Turning the characters into a mesh on the CPU using a triangulation algorithm (such a Delaunay[1]) and pushing those straight to the GPU. Zooming results in straight lines on what should be smooth curves 3. Shaders. There are competing techniques but the differences are subtle.[2] High quality at all zoom levels [1]: http://en.wikipedia.org/wiki/Delaunay_triangulation http://en.wikipedia.org/wiki/Delaunay_triangulation [2]: http://http.developer.nvidia.com/GPUGems3/gpugems3_ch25.html http://http.developer.nvidia.com/GPUGems3/gpugems3_ch25.html
- benjaminjackman 11y agoWow thank you! This is very useful information, for now I have been going with something similar to approach 1 but have been hitting the blurriness problem you mention when zooming. The big challenge for me is the amount of text I have to render. It's quite a bit more than just a few health points in a video game, it's heavy duty analytics information from large datasets. I get the impression from working with webgl that it's focus, historically, hasn't been directed at all towards applications like this.