Patrick Walton
Lunch Talk @ Google

This presentation rendered with WebRender!

What is WebRender?

A framework for rendering user interfaces on GPU.


  • OpenGL 3.0 and OpenGL ES 3.0 backends
    • On Windows, optionally uses ANGLE
  • GPU code is factored out into a separate "driver" that can be swapped out for other APIs
  • Long-term, want to experiment with gfx-rs
    • Would give us native Vulkan & Metal support

Imaging model

CSS-like, not PostScript-like
  • Borders, box shadows, text shadows
  • 3D transforms
  • Scroll frames, position: sticky
  • Out-of-process iframes


A flexible property binding system allows efficient handling of animations


  • Display lists can be generated in an untrusted process and delivered via IPC to a trusted process for rendering
    • Serialization code is memory-safe and autogenerated via serde
  • Content from multiple processes can be composited into a single scene


  • Renderer: issues GPU commands
    • The only thread that interacts with the GPU
  • Backend: builds GPU batches/command buffers
  • Worker: performs CPU-intensive tasks like glyph rasterization
    • A thread pool managed by rayon


  • Scenes can be saved into YAML or binary formats
    • Ctrl Shift 3 in Firefox
  • Can be replayed with wrench


How is WebRender different?

Traditional 2D pipeline

Traditional advantages

  • Compositing is cheap
  • Translations are fast (touch scrolling)
  • Can leverage hardware layers (sometimes)
  • Encounters fewer GPU driver bugs 😉

Traditional disadvantages

  • High memory usage
  • High overdraw
  • Layerization heuristics are complicated for developers

WebRender pipeline

Brushes and pictures

Instead of layers, WebRender uses:
  • Brushes: typically-small images cached on GPU and reused from frame to frame
    • e.g. glyphs, images, border pieces
  • Pictures: temporary render targets, discarded after each frame
    • (Though this might change)

Traditional painting

Traditional painting

Traditional painting

Traditional painting

Can we do better?

WebRender painting

WebRender painting

WebRender painting

Batch, Batch, Batch

Consider a typical series of draw commands:
  • Solid Color
  • Solid Color
  • Text
  • Solid Color
  • Image
  • Solid Color

Batch, Batch, Batch

Without opaque reordering, the batches are:
  1. 2x Solid Color
  2. Text
  3. Solid Color
  4. Image
  5. Solid Color

Batch, Batch, Batch

But with opaque reordering:
  1. 4x Solid Color
  2. Text
  3. Image

But does it matter?

Aren't GPUs really fast?

2017 MacBook Pro, Intel HD 630

WebRender disadvantages

  • Rendering translations can be more costly
    • Though not by much, in most cases
  • Leans on the GPU more

WebRender advantages

  • Eliminates memory/performance tradeoffs
  • Reduces overdraw
  • Simpler for app developers to understand
  • Works more like a game engine.
“When path rendering is fully GPU-accelerated, a retained model of rendering is more appropriate and efficient. We believe web browsers should behave more like video games in this respect to exploit the GPU.”
—Kilgard & Bolz, NVIDIA, "GPU-Accelerated Path Rendering", SIGGRAPH Asia 2012


Coming soon…

GPU font rendering

  • Experimental! :
    • --features=pathfinder
  • Strives to match the native system rendering
  • Uses OS libraries for font loading, hinting, etc.

GPU path rendering

Pathfinder long-term

  • Delightfully crisp pinch zooming and transformation of text
  • Make WebRender able to render SVG

Pathfinder non-goal

  • Make Pathfinder easy to use independent of WebRender
    • Too low-level to be realistically appropriate for apps
  • WebRender is the one-stop shop for 2D rendering

WebRender status

  • Shipping in Firefox Nightly behind a preference
  • On by default for a small percentage of Nightly users
    • Currently gathering Telemetry data for studies
  • Burning down remaining bugs


  • WebRender isn't just a Firefox component
  • Some experimental UI toolkits in the community are using it

Thank you!