Rewriting Chapter 11

A few months ago (actually, quite a few now) Chris and I rewrote Chapter 11 of Web Browser Engineering, on visual effects, quite significantly. The revised chapter focuses around a core theme: surfaces, and why the browser might want several of them. This (belated) changelog describes what we changed and why. The website shows the most recent version.

Merging in Pixel pseudo-code: blending modes are kind of complicated, and it’s helpful to see their mathematical definitions. But of course a web browser doesn’t actually have those formulas in its code base; they instead live inside whatever 2D graphics library the browser uses, in our case Skia. In earlier drafts there were some sections, then, that had pseudo-code for the blending operations, but these sections stood out from the rest of the chapter. We’ve now integrated them a bit better and introduce them earlier, where we talk about drawing / blitting, as a way to explain how a surface is represented internally.

Introducing scrolling earlier: a simple and compelling use case for compositing is scrolling: rasterizing the whole page to one surface, and then just offsetting that surface during drawing, makes scrolling much, much faster than re-rasterizing on every frame. Making this one of the first things in the chapter, instead of one of the last, justifies the up-front work to switch from Tk to Skia and, I hope, gets the reader asking “what else can surfaces do”.

De-emphasizing atomicity: applying effects like opacity atomically means correctly grouping effects and applying them in the right order. In a previous draft of this chapter, we first introduced non-atomic effects, and then had to have a bunch of text to convince the reader of the value of atomicity. In the new draft, we take a new approach: introduce RGBA colors (which don’t need atomicity because they only apply to one drawing command) and then introduce atomicity at the same time we introduce opacity. RGBA makes it easier to explain atomicity, and now we can focus only on the correct approach instead of first introducing an incorrect one.

As part of this, we also fixed the compositing algorithm in Chapter 13 to handle effects atomically. This is a little tricky, and Chris and I debated for a while whether the added complexity is worth it, but ultimately we decided that always handling atomicity correctly made the book simpler—we wouldn’t have to explain the effects of doing it wrong.

Renaming the effects: In a previous draft of the chapter, more or less all visual effects were applied via a single “Swiss army knife” drawing command called SaveLayer. That’s important for efficiency but the name was opaque and it made the chapter harder to read. We now introduce separate Blend and Opacity operations before merging them later in the chapter when we talk about optimization. I think this makes the chapter a bit easier to follow.

Removing ClipRR: In previous drafts, the chapter introduced destination-in blending for clips, but then switches to using Skia’s native ClipRR. The native operation is faster, but it’s a bit weird to introduce blending and then not use it for anything significant. So in the latest draft, we remove this optimization from the chapter text. As a result, the book browser now uses blend operations for clipping, which I think better justifies their importance. It also provides another opportunity to talk about blend order and atomicity.

Anyway, I think the new chapter draft is shorter and clearer. As mentioned, the changes are live on the site and should make it into the published book. Please do recommend the book to anyone you think might appreciate it, and if you’re interested in updates, follow this blog and Mastodon (or Twitter, whatever it might be called) to hear about future updates, and participate in the Github Discussions with questions and answers for the community. And as always, a huge thank you to our readers and our supporters on Patreon.