WebRender Patrick Walton @pcwalton Lunch Talk @ Google

This presentation rendered with WebRender!

What is WebRender? A framework for rendering user interfaces on GPU.

GPU APIs 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 iframe s

Animation A flexible property binding system allows efficient handling of animations

Multiprocess 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

Multithreading 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



Debugging Scenes can be saved into YAML or binary formats Ctrl Shift 3 in Firefox

Can be replayed with wrench

Profiling

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: 2x Solid Color Text Solid Color Image Solid Color

Batch, Batch, Batch But with opaque reordering: 4x Solid Color Text 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

Pathfinder 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 Separate problem from font rendering

Needs some fundamental work, but promising so far

See SVG demo at http://github.com/pcwalton/pathfinder

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