✳flâneur — a map of the web's best reading

GPU text rendering with vector textures · Will Dobbie

wdobbie.com · 1,459 words · saved by 1 readers

This post presents a new method for high quality text rendering using the GPU. Unlike existing methods it provides antialiased pixel accurate results at all scales with no runtime CPU cost. Click here to see the WebGL demo The standard way of rendering text with the GPU is to use a font atlas. Each glyph is rendered on the CPU and packed into a texture. Here’s an example from freetype-gl: Packed font atlas. Source: freetype-gl. The drawback with atlases is that you can’t store every glyph at every possible size or you’ll run out of memory. As you zoom in the glyphs will start to get blurry due to interpolation. One solution to this is to store the glyphs as a signed distance field. This became popular after a 2007 paper by Chris Green of Valve Software. Using this technique you can get fonts with crisp edges no matter how far you zoom in. The drawback is that sharp corners become rounded. To prevent this you’ll need to keep storing higher resolution signed distance fields for each glyp

GPU text rendering with vector textures · Will Dobbie Will Dobbie @wjdobbie Home About GPU text rendering with vector textures War and Peace and WebGL GPU text rendering with vector textures Sat, Jan 2, 2016 This post presents a new method for high quality text rendering using the GPU. Unlike existing methods it provides antialiased pixel accurate results at all scales with no runtime CPU cost. Click here to see the WebGL demo Font atlases The standard way of rendering text with the GPU is to use a font atlas. Each glyph is rendered on the CPU and packed into a texture. Here's an exampl

Explore this link on the map →

related reading