Exploring Skia


Someone recently asked me about the state of shadow support in the Windows Cairo ports of WebKit. As it turns out, the answer is a firm 'it doesn't work.' The reason for this lies in the underlying Cairo graphics library. It doesn't support shadow effects as part of the path rendering. Consequently, programs like Firefox have to generate shadow effects in a separate drawing pass, rather than specifying the 'form' of the shadow and allowing it to be drawn with the main drawing element.

Unfortunately, WebKit's drawing model assumes an underlying graphing system that supports toggling shadows on and off during the rendering of a page. Attempting to shoehorn shadow effects into WebKit (using Cairo) would involve adding extra logic into the drawing system to perform shadow strokes, manually tracking the shadow state somehow and making sure to only perform the extra shadow drawing when needed.

However, another option is to look at using Skia, Google's custom drawing library used on their Chrome browser's port of WebKit. In case you are unfamiliar with the project, Skia is a 2D graphic library for drawing Text, Geometries, and Images. It has built in support for some 3D perspective effects, antialiasing, transparency, and various effects. It has good support for hardware acceleration, and runs on a wide range of hardware platforms.

The bad news is that information about building and running Skia under Windows is pretty non-existant. Clearly it is possible, since all ports of Chrome (including Windows) use Skia, but they project provides no project files (or scons or gyp files), and the gyp files used in the Chromium project don't work outside of the Chromium source tree.

Happily, it's not too hard to figure out which files need to be included in the build, and I found a post by a guy who had gotten things building back in May. Consequently, after a couple of hours of work I was able to get a test application up and running to play with the core library and confirm that it functions properly. I was then able to explore the API a little bit, and confirm that shadows work as expected.

My initial impressions of Skia are very positive. It's nice working with a C++ framework, rather than Cairo's very strict C interface. One puzzling thing about Skia is that the Chromium project has built an extremely useful set of abstractions on top of Skia that seem like they would be well-suited for inclusion. For example, constructing a context for a typical Windows device involves a few steps. But the skia::PlatformCanvasPaint template class takes care of many of these details (as well as cleaning up after itself). Equivalent templates are provided for GTK+ and Mac use. Why leave this in Chromium's private repository? This is useful for everyone!

Over the next week or so I intend to revise the Windows Cairo port to use Skia for its graphical back-end. As a first step, I have updated my requirements.zip file with Skia and it's include files. I have also posted my source tree for Skia, including the Visual Studio solution and my test application (based on WinLauncher).

Comments

Anonymous said…
Re: abstractions atop Skia:

Skia is also used by other platforms (e.g. Android) that don't necessarily need all these things; the separation may be purposeful (to keep the library small).

That said, you should definitely contact Brett Wilson (Chromium-side Skia guy) or Mike Reed (Skia dev) with any suggestions you have as to how things should be refactored. Skia is very much in active development, and the Chromium tree has historically been constructed with Chromium as the only consumer of any of its pieces, so it's quite possible that some changes in abstractions would be widely useful.
Unknown said…
I spend some time on getting SVG's GaussianBlur to work for Shadows. I upload a first patch to bug 26102. It is just for testing and needs more improvements. But you can see shadows on filled path's in Canvas right now. It is neccessary to activate filters-support. After rebuilding WebKit fisit sites like: http://philip.html5.org/demos/canvas/shadows/various.html

This should also work in WinCairo/WinWebKit
Unknown said…
I spend some time this weekend to get support for SVG's GaussianBlur on Shadows. I upload a first patch to bug 26102. This patch is only for testing and needs some more improvement. But you can allready see shadows on filled paths in Canvas. http://philip.html5.org/demos/canvas/shadows/various.html

This should also work in WebKit/WinCairo
Marshall said…
Really awesome stuff Brent, I'll be attempting to build this :)
Jeff Haynie said…
this is timely. we've been trying to figure out this same direction and now you've gone and done it.. maybe we should join in helping. :)
Moss said…
Awesome! I can do it on Windows. Can it port to linux?

Popular Posts