WebRender

Patrick Walton

@pcwalton

Lunch Talk @ Google

What is WebRender?

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

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

Animation

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

• 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

Batch, Batch, Batch

Batch, Batch, Batch

But does it matter?

Aren't GPUs really fast?

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.”

Pathfinder

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

Embeddability

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

Thank you!

Questions?

http://github.com/servo/webrender