Along the same vein of Android's shimmer ripple, here's a more realistic example of a "decorator" shader-based runtime effect applied on a button. The button on the left is a regular Aurora button, and the one on the right is configured with a render effect that uses a shader to draw an outside glow when the mouse moves over that button. No need to increase the layout bounds of the button. No need for the button composable itself to be "aware" of this glow drawn around it. The render effect layer handles all of that, and all you need to do is pass all the relevant info (in this case corner radius, glow amount, max glow distance and glow color) into the shader. And of course, write the shader itself 😅

A challenge for you, mimic the Windows mouse effect where the glow is based on the mouse position when it is over a clickable element 🙂

Or make every button look like the Eye of Sauron, borrowing some code from https://www.shadertoy.com/view/4dSfDK (press the mouse anywhere in the preview and slide it around)

love it

On a more serious note though, one should be careful about where the shader is applied. Depending on how strong the overall visual effect is, you might want to confine in only to outside the control (like the glow here), on top of the whole thing (like Android's ripple, which is rather subtle), or only on top of that control's background. In the later case - which is, I think, what you would want for that Windows 10 effect, so that it doesn't interfere with the foreground content like the icon and the text, the shader would need to be applied inside that composable (only on the background).

I miss Disco

The shader is not super-optimized. Or even optimized at all.

return vec4(glowRed * glowAmount, glowGreen * glowAmount, glowBlue * glowAmount, glowAmount)

you could pass a

vec3

glowColor

instead of 3 separate floats and write

return vec4(glowColor * glowAmount, glowAmount)

instead or

vec4(glowColor, 1.0) * glowAmount

Yes, this is something that I plan on wiring in Skiko once the currently pending PR goes in. Right now I've only added two

uniform

variants that accept one

float

and one

int

.

Ah right ok

how so

GPUs are designed to do floats

This is me in general trying to write any kind of shader

sounds about right 🙂

Shaders themselves, esp in the contex of AGSL, are not very complicated

Well yeah, I had that 8-part if-else-else block that got replaced by a one-liner

Yeah it’s a bit complex

👍

this is really cool, nice work Kirill!

Hi @Kirill Grouchnikov how can we achieve custom blur effect in android? https://www.pushing-pixels.org/2022/04/09/shader-based-render-effects-in-compose-desktop-with-skia.html In the sample code you shared you have passed a blur shader. But I can’t pass it as it is available only in desktop version. Is there a glsl method for blurring content pixels?

I’ve done it