Rendering Fonts Quickly on the GPU(outercloud.dev)
outercloud.dev
Rendering Fonts Quickly on the GPU
https://www.outercloud.dev/blogs/webgpu-font-rendering/
3 comments
I've been working on a WebGPU animation renderer and at some point I needed to implement font rendering. Wanting the technical challenge I elected to try implementing a new method I had heard about which actually comes from a recently expired Microsoft patent! I get a bit into spline rendering and a super cool idea about how to render curves efficiently on the GPU.
Small correction, you're wrong about the details.
You say ttf and otf are the same, but that's not true, one utilizes quadratic curves, the other cubic curves. Also one is patented, the other isn't (most notably its bytecode vm).
Also, you say curve and spline is the same. They are not. Spline is a series of curves where you don't store the starting points, because those are the same as previous curve's ending points. So a spline requires less space to store than a list of the same curves, hope this makes sense to you.
I've also implemented a very fast font renderer, which supports bitmap, pixmap, quadratic and cubic curves, even mixed. I took a different path though: I've designed a very efficient font format, and provided a tool to convert ttf, otf, ps, etc. fonts into that format. This way the computational heavy parts are done beforehand, and the renderer can be small and fast (it's just a single header library, with source of 32k).
https://gitlab.com/bztsrc/scalable-font2
Using GPU for rasterizing is a good idea, but my font renderer is extremely portable so it's deliberately dependency-free and uses CPU integer arithmetic only. So it had a different design goal than yours, but still, it might be useful to study and it might give you ideas on further optimizations.
You say ttf and otf are the same, but that's not true, one utilizes quadratic curves, the other cubic curves. Also one is patented, the other isn't (most notably its bytecode vm).
Also, you say curve and spline is the same. They are not. Spline is a series of curves where you don't store the starting points, because those are the same as previous curve's ending points. So a spline requires less space to store than a list of the same curves, hope this makes sense to you.
I've also implemented a very fast font renderer, which supports bitmap, pixmap, quadratic and cubic curves, even mixed. I took a different path though: I've designed a very efficient font format, and provided a tool to convert ttf, otf, ps, etc. fonts into that format. This way the computational heavy parts are done beforehand, and the renderer can be small and fast (it's just a single header library, with source of 32k).
https://gitlab.com/bztsrc/scalable-font2
Using GPU for rasterizing is a good idea, but my font renderer is extremely portable so it's deliberately dependency-free and uses CPU integer arithmetic only. So it had a different design goal than yours, but still, it might be useful to study and it might give you ideas on further optimizations.
Good point. I should clean up the references between splines and curves to be more explicit. However, I think perhaps the oft and ttf point isn't relevant since I specifically say they are almost the same, and the specific details are exactly relevant so I left them out to avoid confusion.
Cool library and CPU integer arithmetic only is interesting.
Cool library and CPU integer arithmetic only is interesting.