Skip to content

Prior Art

Doug Moen edited this page Aug 29, 2020 · 50 revisions

2D Vector Graphics on a GPU

  • Piet : A fast, simple, general architecture for path rendering on modern GPUs.

    • Fast 2D rendering on GPU (2020 June 13). "This is the architecture to beat."
      • The architecture is derived from principles and is founded on a general pipeline. As much work as possible is offloaded to the GPU, which minimizes the risk of jank in UI rendering.
      • The performance is understandable. Every cost in the pipeline has a reason. It has “performance smoothness;” there aren’t workloads where the performance degrades.
      • "I am unaware of any published renderer with comparable performance"
    • A sort-middle architecture for 2D graphics (2020 June 12). Additional notes.
      • "We’ve taken a pipeline originally designed for 3D rendering, and adapted it to 2D. The pipeline itself is quite general."
    • Piet-GPU progress report (2020 June 1). New design using Vulkan.
    • A Taste of GPU Compute (2020 Feb 26). 2D Rendering at 22:10.
    • 2D Graphics on Modern GPU (2019 May 8). Additional notes.
      • "The prototype mostly does just does fills and strokes of vector paths, but the architecture of the renderer is designed to accommodate a full 2D graphics imaging model...including distance-field rendering techniques."
      • "By [ignoring the fixed-function pipeline and] treating “modern compute” as a big SIMD computer, I actually can write a competitive path renderer in a week."
  • Pathfinder 3 : A Look at Pathfinder (May 2019). Related approaches.

    • Paths are split into tiles on the CPU.
    • Mask tiles are rendered in a float texture on the GPU. No compute shaders.
    • Solid tiles, which were detected during the tiling phase, are rendered into the destination color target.
    • Mask tiles are composited into the color target, reading from the mask tiles that were rendered in the float texture.

    Mask tiles may be rendered in any order. Constructing the float textures is a separate phase from compositing, and the float textures could be generated in other ways, such as using 2D distance fields.

  • Skia : Backends for CPU, OpenGL, Metal. WASM. Used by Chrome and Android.

    • Immediate mode API that renders back to front. Overdraw makes it slower than newer designs (Pathfinder and Piet).
    • Closed figures bounded by line segments, quadratics, cubics, conic sections. All the boolean operations (which operate on the boundary representation: very complex).
  • GPU Text Rendering with Vector Textures. 2016, WebGL.

  • Massively-Parallel Vector Graphics 2014. Open source. CUDA.

    1. Preprocessing on the GPU creates a "shortcut tree" (quadtree), fast enough for dynamic graphics. This structure allows random access to sample* colours, supporting non-affine transformations. (*)Multiple samples per pixel.
    2. Rendering phase.
  • Random Access Vector Graphics 2008.

    1. Preprocessing on the CPU creates a "vector texture" (a 2D grid, each cell contains the primitives that affect the pixels in that cell). This is costly, prevents animation.
    2. A fragment shader maps [x,y] coords to pixel colours (random access). Which supports non-affine transformations.
  • Efficient GPU Path Rendering Using Scanline Rasterization 2016. Almost as fast as Piet. "Even if the precomputation cost of vector textures is disregarded, supporting random sample access necessitates a data structure querying cost at each sample, whereas our method does not have such a cost for span-covered samples. In addition, the underlying data structure can have significant variation in the query cost among different texture locations, which leads to poor load-balancing on the wide SIMD threads of modern GPUs."

  • Spinel. Vulkan 1.1; each GPU vendor/architecture has a parameter set. Data structures:

    • Paths: first-class standalone objects
    • Rasters: transformed-to-screen-space rasterized Paths
    • Compositions: an arrangement of Rasters on Layers
    • Stylings: rendering instructions for each Layer in a Composition

    Extensible rendering model. The pipeline rasterizes paths, builds a scene graph of where paths appear on layers, and encodes how each layer is rendered. These inputs are passed to a fast tile-based renderer that is a “virtual machine” for rendering vector graphics, blending layers, applying masks, etc.

  • Slug (proprietary & patented) uses GPU-Centered Font Rendering Directly from Glyph Outlines 2017. OpenGL 3.x and DX10. Renders fonts directly from path data. Fonts are precompiled into a special format, which is then loaded from a file.

GPU Text Rendering using Signed Distance Fields

Given an SDF representation of a font, you can use SDF operations to dynamically add special effects, like outlining, varying the font weight, glows and drop shadows. [Emboldening requires a mitred SDF, glows require an exact SDF.]

  • The most well known technique is to sample the SDF as a texture. Original paper. Rendering is very fast.
  • Vector Textures: An OpenType font glyph is an outline made of line segments and Bezier splines. A vector texture is a map from pixel coordinates to the outline segments closest to the pixel, and can reconstruct an SDF on the fly.
    • Real-time texture-mapped vector glyphs [Qin 2006]. Supports mitering and embossing by providing an accurate distance field in a relatively wide region around the contour. Supports exact and mitred distance fields, and gradients. Constructing a vector texture is expensive, but unlike an SDF texture it isn't resolution dependent.
    • Precise vector textures for real-time 3D rendering [Qin 2008]. How to quickly compute the signed distance to a bezier curve segment on a GPU (for implementing vector textures).
    • GLyphy 2010. Video. OpenGL ES2. Glyph boundaries approximated by arc segments.
  • Adaptively Sampled Distance Fields [Frisken 2000] (proprietary and patented)

3D Graphics Engines using Signed Distance Fields

Open Source:

  • Curv
  • Matt Keeter
  • mTec

Proprietary: