How to use SkRuntimeEffect.makeShader() for offscreen rendering with named uniforms?

[Trevor16gordon]

Hello,

I have a custom shader created with Skia.RuntimeEffect.Make() that works correctly when used declaratively within a component. My goal is to render this shader offscreen to an SkImage so I can access its output data.

Based on the available examples for offscreen rendering, it seems I need to create an SkShader object (current examples only use factory methods here). I'm working from my current implementation where I create my shader using an SkRuntimeEffect. So, I'm struggling to find the correct way to convert my SkRuntimeEffect into an SkShader, specifically using the runtimeEffect.makeShader() method.

Current Working Implementation

const myEffect = useMemo(() => Skia.RuntimeEffect.Make(SHADER_SOURCE)!, []);
const uniforms = useMemo(
    () => ({
      u_sunDirection: sunVector,
      u_metersPerPixel: metersPerPixel,
    }),
    [sunVector, metersPerPixel]
  );

<Canvas>
  <Shader source={myEffect} uniforms={uniforms}>
    <ImageShader
      image={myImage}
      // ... other props
    />
  </Shader>
</Canvas>

The Problem

To render offscreen, I need to create an SkShader instance. My attempt looks like this:

// This is where I'm stuck
const shader = runtimeEffect.makeShader(uniforms, children, localMatrix);

Specific Questions

uniform shader u_dem;           // Child shader
uniform float u_metersPerPixel; // Float uniform
uniform vec3 u_sunDirection;    // Vector uniform

1. Mapping Named Uniforms: The makeShader method's first argument is uniforms: number[]. How do I correctly map my named uniforms (u_metersPerPixel, u_sunDirection) to this flat array of numbers? Is the order based on their declaration in the GLSL source?
2. Passing Child Shaders: How do I pass the child shader uniform (u_dem) which is my input image? Should it be included in the children?: SkShader[] array? If so, how does it map to the correct uniform shader variable in the GLSL code?
3. localMatrix Argument: What is the purpose of the localMatrix argument, and what is a sensible default value if I don't need a special transformation?

Is someone able to provide a brief example of using RuntimeEffect.makeShader() with a combination of float, vector, and child shader uniforms?

I appreciate any help!

[Trevor16gordon]

Hi @wcandillon I'm wondering if you might be able to help here? I see you're active on other issues in this repo. I'd really appreciate it 🙏🏼🙏🏼🙏🏼