5 ms·

Good stuff. Speaking of rendering text glyphs on the GPU, there's a really clever trick(commonly called loop-blinn, from the two authors): https://developer.nv

Good stuff. Speaking of rendering text glyphs on the GPU, there's a really clever trick(commonly called loop-blinn, from the two authors): https://developer.nvidia.com/gpugems/GPUGems3/gpugems3_ch25.html https://developer.nvidia.com/gpugems/GPUGems3/gpugems3_ch25.... You can pretty much just use the existing bezier control points from TTF as-is which is really nice.

pcwalton 9y ago
If only it were as simple as just using Loop-Blinn. :) The technique described there will produce unacceptably bad antialiasing for body text. Loop-Blinn is fine if you want fast rendering with medium quality antialiasing, though. (Incidentally, it's better to just use supersampling or MLAA-style antialiasing with Loop-Blinn and not try to do the fancy shader-based AA described in that article.) Additionally, the original Loop-Blinn technique uses a constrained Delaunay triangulation to produce the mesh, which is too expensive (O(n^3) IIRC) to compute in real time. You need a faster technique, which is really tricky because it has to preserve curves (splitting when convex hulls intersect) and deal with self-intersection. Most of the work in Pathfinder 2 has gone into optimizing this step. In practice people usually use the stencil buffer to compute the fill rule, which hurts performance as it effectively computes the winding number from scratch for each pixel. The good news is that it's quite possible to render glyphs quickly and with excellent antialiasing on the GPU using other techniques. There's lots of miscellaneous engineering work to do, but I'm pretty confident in Pathfinder's approach these days.
- AriaMinaei 9y ago
  I'm very excited about your work on Pathfinder! I think great possibilities will open up once there is a way to efficiently rasterize vectors on the GPU. Do you think, once the implementation is more complete, that it would make it possible to render fullscreen scenes of vector graphics (say in SVG) with hundreds of moving and morphing shapes on a mid-range phone/tablet/pc? I know it's very difficult to predict these things, but I thought you may have already seen enough performance characteristics to make an educated guess :)
  - pcwalton 9y ago
    One of the goals of Pathfinder 2 is to support SVG well. Initial results are promising, but it's too early for me to want to speculate.
- mrec 9y ago
  I hadn't seen Pathfinder before; very cool! Especially if it's easily transferable to gpuweb, if and when that ships. Reminds me of Mark Kilgard's old NV_path_rendering extension, which (as so often happened for interesting NV stuff) never made the jump to portability. One of its touted benefits as an in-driver implementation was the ability to share things like glyph caches between multiple apps with separate GL contexts, but with "apps" increasingly becoming "browser tabs", maybe a browser-managed cross-tab cache is almost as good. BTW, is the WebGL demo available online anywhere, for people who don't want to install npm?
  - pcwalton 9y ago
    > BTW, is the WebGL demo available online anywhere, for people who don't want to install npm? Not yet. There are enough known issues that I'd like to fix first.
- sjshdjddkg 9y ago
  How portable is pathfinder? Are there plans for metal and/or vulkan support? Is it extensible to general purpose path-and-clip rendering?
  - pcwalton 9y ago
    See the README: https://github.com/pcwalton/pathfinder https://github.com/pcwalton/pathfinder
- vvanders 9y ago
  Well there's also the problem that it's heavily patented :). Just throwing it out there as a neat thing, the GPU space has all sorts of fun stuff like that. I'll have to take a look at Pathfinder, have any links handy that I can dig into?
  - markdog12 9y ago
    FTA: https://github.com/pcwalton/pathfinder https://github.com/pcwalton/pathfinder
- Jasper_ 9y ago
  I noticed that Pathfinder went from calculating the intersection of beziers on the GPU with compute back to doing triangulation on the CPU. Any reason for this major switch in approach? I assume you've seen other things like Slug, glyphy, etc., which use a combination of CPU pre-processing and GPU processing to make the bezier intersection as efficient as possible...
  - pcwalton 9y ago
    Because (1) compute requires newer hardware than what would be ideal; (2) compute cannot take advantage of early Z, which is critical for SVG (neither can Slug or GLyphy, by the way); (3) the two step process is hostile to batching. Slug is asymptotically slower than Pathfinder at fragment shading; every new path on a scanline increases the work that has to be done for every pixel. (Of course, that's not to say Slug is always slower in practice; constant factors matter a lot!) GLyphy is an SDF approach based on arc segment approximation that does not do Bézier intersection at all.
- markdog12 9y ago
  Really cool work. Can't wait until we can give PathFinder a go in FF for text, and hopefully even SVG, :) BTW, I see you implemented PathFinder in TypeScript as well. What do you think of it, especially since I assume a lot of your recent programming has been in Rust?
  - pcwalton 9y ago
    Well, it's only the demo that's in TypeScript. The demo is just a fancy UI that takes the Rust-produced vertex and index buffers and uploads them to the GPU for rendering. Ideally, I don't want to have to any code duplication between the Rust WebRender and Pathfinder demo code. That said, Rust on the server and TypeScript on the client go really well together. Strong typing everywhere!
    - markdog12 9y ago
      How does this work exactly with the rocket back end? Are you saying PathFinder sends back vertex and index buffers on each frame?
      - pcwalton 9y ago
        The meshes are all resolution independent, so they are only sent once.
- monfera 9y ago
  > Loop-Blinn is fine if you want fast rendering with medium quality antialiasing For example, when using SVG shape-rendering: optimizeSpeed ? I truly hope that SVG is going to be part of this new magic, and that the shape-rendering presentation attribute is utilized. I don't think current SVG implementations get much of a speed boost by optimizeSpeed. Speaking of which, to what extent will SVG benefit from this massive rewrite?
Animats 9y ago
Do they generate those triangles for each instance of each glyph, or only once for each character in the font?
- vvanders 9y ago
  Just once per character in the font.
- pcwalton 9y ago
  I'm not sure what you mean by "they" and "character" here. In general, the tessellation, whether it's constrained Delaunay triangulation or a Lorenzetto style trapezoidation as Pathfinder uses, needs only be done once per glyph and then can be reused for any size. However, note that both hinting and stem darkening for gamma correction distort the glyph outlines in a way that depends on the pixel size, so it's not quite that simple.

pcwalton 9y ago

If only it were as simple as just using Loop-Blinn. :) The technique described there will produce unacceptably bad antialiasing for body text. Loop-Blinn is fine if you want fast rendering with medium quality antialiasing, though. (Incidentally, it's better to just use supersampling or MLAA-style antialiasing with Loop-Blinn and not try to do the fancy shader-based AA described in that article.) Additionally, the original Loop-Blinn technique uses a constrained Delaunay triangulation to produce the mesh, which is too expensive (O(n^3) IIRC) to compute in real time. You need a faster technique, which is really tricky because it has to preserve curves (splitting when convex hulls intersect) and deal with self-intersection. Most of the work in Pathfinder 2 has gone into optimizing this step. In practice people usually use the stencil buffer to compute the fill rule, which hurts performance as it effectively computes the winding number from scratch for each pixel. The good news is that it's quite possible to render glyphs quickly and with excellent antialiasing on the GPU using other techniques. There's lots of miscellaneous engineering work to do, but I'm pretty confident in Pathfinder's approach these days.

AriaMinaei 9y ago
I'm very excited about your work on Pathfinder! I think great possibilities will open up once there is a way to efficiently rasterize vectors on the GPU. Do you think, once the implementation is more complete, that it would make it possible to render fullscreen scenes of vector graphics (say in SVG) with hundreds of moving and morphing shapes on a mid-range phone/tablet/pc? I know it's very difficult to predict these things, but I thought you may have already seen enough performance characteristics to make an educated guess :)
- pcwalton 9y ago
  One of the goals of Pathfinder 2 is to support SVG well. Initial results are promising, but it's too early for me to want to speculate.
mrec 9y ago
I hadn't seen Pathfinder before; very cool! Especially if it's easily transferable to gpuweb, if and when that ships. Reminds me of Mark Kilgard's old NV_path_rendering extension, which (as so often happened for interesting NV stuff) never made the jump to portability. One of its touted benefits as an in-driver implementation was the ability to share things like glyph caches between multiple apps with separate GL contexts, but with "apps" increasingly becoming "browser tabs", maybe a browser-managed cross-tab cache is almost as good. BTW, is the WebGL demo available online anywhere, for people who don't want to install npm?
- pcwalton 9y ago
  > BTW, is the WebGL demo available online anywhere, for people who don't want to install npm? Not yet. There are enough known issues that I'd like to fix first.
sjshdjddkg 9y ago
How portable is pathfinder? Are there plans for metal and/or vulkan support? Is it extensible to general purpose path-and-clip rendering?
- pcwalton 9y ago
  See the README: https://github.com/pcwalton/pathfinder https://github.com/pcwalton/pathfinder
vvanders 9y ago
Well there's also the problem that it's heavily patented :). Just throwing it out there as a neat thing, the GPU space has all sorts of fun stuff like that. I'll have to take a look at Pathfinder, have any links handy that I can dig into?
- markdog12 9y ago
  FTA: https://github.com/pcwalton/pathfinder https://github.com/pcwalton/pathfinder
Jasper_ 9y ago
I noticed that Pathfinder went from calculating the intersection of beziers on the GPU with compute back to doing triangulation on the CPU. Any reason for this major switch in approach? I assume you've seen other things like Slug, glyphy, etc., which use a combination of CPU pre-processing and GPU processing to make the bezier intersection as efficient as possible...
- pcwalton 9y ago
  Because (1) compute requires newer hardware than what would be ideal; (2) compute cannot take advantage of early Z, which is critical for SVG (neither can Slug or GLyphy, by the way); (3) the two step process is hostile to batching. Slug is asymptotically slower than Pathfinder at fragment shading; every new path on a scanline increases the work that has to be done for every pixel. (Of course, that's not to say Slug is always slower in practice; constant factors matter a lot!) GLyphy is an SDF approach based on arc segment approximation that does not do Bézier intersection at all.
markdog12 9y ago
Really cool work. Can't wait until we can give PathFinder a go in FF for text, and hopefully even SVG, :) BTW, I see you implemented PathFinder in TypeScript as well. What do you think of it, especially since I assume a lot of your recent programming has been in Rust?
- pcwalton 9y ago
  Well, it's only the demo that's in TypeScript. The demo is just a fancy UI that takes the Rust-produced vertex and index buffers and uploads them to the GPU for rendering. Ideally, I don't want to have to any code duplication between the Rust WebRender and Pathfinder demo code. That said, Rust on the server and TypeScript on the client go really well together. Strong typing everywhere!
  - markdog12 9y ago
    How does this work exactly with the rocket back end? Are you saying PathFinder sends back vertex and index buffers on each frame?
    - pcwalton 9y ago
      The meshes are all resolution independent, so they are only sent once.
monfera 9y ago
> Loop-Blinn is fine if you want fast rendering with medium quality antialiasing For example, when using SVG shape-rendering: optimizeSpeed ? I truly hope that SVG is going to be part of this new magic, and that the shape-rendering presentation attribute is utilized. I don't think current SVG implementations get much of a speed boost by optimizeSpeed. Speaking of which, to what extent will SVG benefit from this massive rewrite?

Animats 9y ago

Do they generate those triangles for each instance of each glyph, or only once for each character in the font?

vvanders 9y ago
Just once per character in the font.
pcwalton 9y ago
I'm not sure what you mean by "they" and "character" here. In general, the tessellation, whether it's constrained Delaunay triangulation or a Lorenzetto style trapezoidation as Pathfinder uses, needs only be done once per glyph and then can be reused for any size. However, note that both hinting and stem darkening for gamma correction distort the glyph outlines in a way that depends on the pixel size, so it's not quite that simple.