Skia shaders in Compose Desktop · Pushing Pixels
5 min read
fairly difficult
Article URL: Comments URL: Points: 2 # Comments: 0
Skia shaders in Compose Desktop September 22nd, 2021

In the past year or so I've been working on a new project. Aurora is a set of libraries for building Compose Desktop apps, taking most of the building blocks from Radiance. I don't have a firm date yet for when the first release of Aurora will be available, but in the meanwhile I want to talk about something I've been playing with over the last few weeks.

Skia is a library that serves as the graphics engine for Chrome, Android, Flutter, Firefox and many other popular platforms. It has also been chosen by Jetbrains as the graphics engine for Compose Desktop. One of the more interesting parts of Skia is SkSL – Skia's shading language – that allows writing fast and powerful fragment shaders. While shaders are usually associated with rendering complex scenes in video games and CGI effects, in this post I'm going to show how I'm using Skia shaders to render textured backgrounds for desktop apps.

First, let's start with a few screenshots:

Here we see the top part of a sample demo frame under five different Aurora skins (from top to bottom, Autumn, Business, Business Blue Steel, Nebula, Nebula Amethyst). Autumn features a flat color fill, while other four have a horizontal gradient (darker at the edges, lighter in the middle) overlaid with an curved arc along the top edge. If you look closer, all five also feature something else – a muted texture that spans the whole colored area.

Let's take a look at another screenshot:

Top row shows a Perlin noise texture, one in greyscale and one in orange. Bottom row shows a brushed metal texture, one in greyscale and one in orange.

Let's take a look at how to create these textures with Skia shaders in Compose Desktop.

First, we start with Shader.makeFractalNoise that wraps SkPerlinNoiseShader::MakeFractalNoise :

// Fractal noise shader val noiseShader = Shader.makeFractalNoise( baseFrequencyX = baseFrequency, baseFrequencyY = baseFrequency, numOctaves = 1, seed = 0.0f,…
Read full article