Hey! I'm experimenting with shaders and SKSL/AGSL in a Compose Multiplatform project and have encoun...

# compose-web

[Manel Martos]

Hey!
I'm experimenting with shaders and SKSL/AGSL in a Compose Multiplatform project and have encountered an issue with shaders and uniforms. I'm using a bitmap as a uniform in shader code to manipulate it, and while it works fine on all platforms, it doesn't behave as expected on Kotlin/Wasm. Is this a known issue, or is it not supported at the moment?

[Manel Martos]

This is a simplified version of the shader I'm using:

uniform float2 iResolution;
uniform shader iBitmap; 

half4 main(vec2 fragCoord) {
    half4 col = iBitmap.eval(fragCoord);
    return half4(col.rgb, 1.); 
}

[Manel Martos]

And I'm setting uniform by calling child function:

child("iBitmap", ImageShader(imageBitmap))

[Kirill Grouchnikov]

Maybe I missed something when I added those bindings. The JS pipeline has different bindings from everything else

[Kirill Grouchnikov]

In https://github.com/JetBrains/skiko/pull/526

[Manel Martos]

Not sure, but I've tried also Kotlin/JS and same issue happens there

[Manel Martos]

More finding: using color-based shader works fine:

child(it.name, Shader.Companion.makeColor(Color.RED))

[Manel Martos]

Could it be something related to colour space mapping?

[Kirill Grouchnikov]

I’d first check that your image shader is doing the right thing as a standalone shader - something along the lines of https://github.com/android/snippets/blob/07b51c299a4a7c443060fa924b284b31de48307a/[…]a/com/example/compose/snippets/graphics/BrushExampleSnippets.kt but with your source image. Then, after you verify that, file a bug with a fully reproducible code that can be copy-pasted without modifications.

[Manel Martos]

I found the issue: I was loading an image from composeResources using imageResource. After adding some logs around the returned bitmap, I realised that the image size was 1x1. Probably some asynchronous loading mechanism is in place for the web. I tried to load and decode the image explicitly, and the issue is now sorted out. This is the code I'm using for loading and decoding it:

var bitmap by remember { mutableStateOf<Image?>(null) }
LaunchedEffect(Unit) {
    val byteArray = getDrawableResourceBytes(
        getSystemResourceEnvironment(),
        Res.drawable.img_03
    )
    bitmap = makeFromEncoded(byteArray)
}

Not the best code but works fine on my use case.