Just published a <https www pushing pixels org 2022 04 09 shader based render effects in compose desktop with skia html|deeper dive> into the shader based render effects in Compose Desktop Skiko looking at each step one at a time and detailing all the moving parts

Just published a deeper dive into the shader-based render effects in Compose Desktop / Skiko, looking at each step one at a time and detailing all the moving parts.

🙌🏻 1

💙 3

🙌 8

:jetpack-compose: 4

😮 3

🙌🏼 1

romainguy

04/10/2022, 5:46 AM

You can try to get syntax highlighting by installing the GLSL plugin and using the @Language annotation

Other note: Skia shaders work in linear space, you should take the luminance of the noise instead of the luma (just different coefficients)

Also if you wanted to just kill banding without adding a strong visible noise you can dither the content by adding +/-1/255 using a procedural noise pattern. For instance: https://github.com/google/filament/blob/main/shaders/src/dithering.fs

For desktop the RGB triangle noise would work great

In your case you wouldn't use the temporal component though

Kirill Grouchnikov

04/11/2022, 1:43 PM

Thanks. Updated to use luminance. Also installed https://plugins.jetbrains.com/plugin/6993-glsl-support and added

@Language("GLSL")

to the snippets. Looks pretty decent.

romainguy

04/12/2022, 6:21 PM

I just realized something else. I should write a blog post on shader tips and tricks because SkSL/AGSL makes it too easy to mix type precisions if you are not aware, which is not ideal.

Kirill Grouchnikov

04/12/2022, 6:38 PM

It's a bit confusing since it allows you to mix

half4

and

vec4

with no warnings

romainguy

04/12/2022, 7:39 PM

vec4 will be like half4, at least on Android

but float won’t be, so you should use half

#compose-desktop Join Slack