Web Browser Engineering Blog

Share this post

Chapter 11

browserbook.substack.com

Chapter 11

Chris Harrelson
Dec 17, 2021
Share this post

Chapter 11

browserbook.substack.com

Chapter 11, Adding Visual Effects, is now out! This is the first chapter in Part 4, on Modern Browsers. In keeping with that, this chapter says goodbye to Tkinter and hello to Skia and SDL, two high-performance libraries used in real browsers and games. Once they have been integrated, I show how to use Skia to implement transparency, blend modes, rounded corners, and clipping. Even more importantly, the chapter explains how this actually works under the covers, giving you a deeper insight into how libraries like Skia do their work. Thanks to Brian Salomon and Ben Wagner from the Skia team for providing feedback that improved this chapter, and to the Skia and SDL authors for making the open source libraries that made this chapter possible.

In addition, this chapter introduces an important new concept, the raster surface, and its connection to stacking contexts, blending, and browser compositing. Modern browsers exploit this concept to implement hardware-accelerated animations and scrolling. This chapter gives just a taste of what can be done with them, and I’ll continue on with even more in Chapter 12.

This is the first chapter I’ve been the primary author of since the Introduction section of the book (for the other chapters, I provided lots of editorial feedback, and wrote the testing framework & some widgets for the code), and it took a while to find the way to describe things (writing is hard!). This is also the part of the browser I know the most about, and I had to leave out many fascinating details.

I wrote a first draft a year ago that had the sections on pixels and blending, but otherwise was more of a survey article than a book chapter. Now the chapter does a pretty good job describing some of the underlying concepts, and also how to add these features to a browser. I also pared down the features added—an earlier iteration had transforms, top/left positioning, and clip paths—but those ended up not being core to the purpose of the chapter. Perhaps those features will resurface (no pun intended!) in a future chapter.

Please spread the word if you like what you’re reading, and follow our blog and Twitter. We’re especially grateful for our supporters on Patreon. You can ask questions and discuss the book on Github Discussions.

Share this post

Chapter 11

browserbook.substack.com
Comments
TopNewCommunity

No posts

Ready for more?

© 2023 Pavel Panchekha and Chris Harrelson
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing