We want to calculate the area of the part of the circle that is covered by the glyph. We can treat each pixel as a circular window over some part of the glyph. If the glyph only partially covers the pixel we will output an alpha value somewhere between 0 and 1 - this is what gives us smooth antialiasing. Its goal is to figure out what fraction of the pixel is covered by the glyph and assign this to the pixel alpha value 3. Our shader will run for every pixel we need to output. All we need to do now is write a shader that reads the bezier curve control points from the atlas and determines what color the pixel should be. The bottom half of the image stores the control points for all beziers in all glyphs 2. Bezier curves are described by three control points each: a start point, an end point and an off-curve point 1. To avoid repetition, each grid cell stores just the indices of the bezier curves that intersect it. If we do that for all the glyphs used in a sample pdf we get an atlas that looks like this:ĭespite looking like a download error, this image is an atlas where the top part has a bunch of tiny grids, one for each glyph. We can chop up each glyph into a grid and in each cell store just the bezier curves that intersect it. GPUs like to calculate lots of pixels in parallel and we want to reduce the amount of work required for each pixel. What if we let the GPU render from the original vector data? The previous two techniques were based on taking the original glyph description, which is a list of bezier curves, and using the CPU to produce an image of it that can be consumed by the GPU. To prevent this you’ll need to keep storing higher resolution signed distance fields for each glyph, the same problem we had before.Īrtifacts from low resolution signed distance field. The drawback is that sharp corners become rounded. Using this technique you can get fonts with crisp edges no matter how far you zoom in. This became popular after a 2007 paper by Chris Green of Valve Software. One solution to this is to store the glyphs as a signed distance field. As you zoom in the glyphs will start to get blurry due to interpolation. The drawback with atlases is that you can’t store every glyph at every possible size or you’ll run out of memory. Each glyph is rendered on the CPU and packed into a texture. The standard way of rendering text with the GPU is to use a font atlas. Unlike existing methods it provides antialiased pixel accurate results at all scales with no runtime CPU cost.Ĭlick here to see the WebGL demo Font atlases This post presents a new method for high quality text rendering using the GPU. GPU text rendering with vector textures Sat, Jan 2, 2016
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |