Shopify / react-native-skia

High-performance React Native Graphics using Skia
https://shopify.github.io/react-native-skia
MIT License
6.99k stars 454 forks source link

ImageFilter.MakeRuntimeShader with array of children #2601

Open eyu0415 opened 3 months ago

eyu0415 commented 3 months ago

Description

const shader = Skia.RuntimeEffect.Make(`
  uniform shader image;
  uniform shader input;

  half4 main(float2 xy) {
    vec4 color = image.eval(xy);
    // use image & input
    return color;
  }
`);

There is no way to set array of children in Skia.ImageFilter.MakeRuntimeShader

In JSX possible like follows

    <Shader source={shader}>
      {children}
      <ImageShader fit="none" image={image} width={512} height={512} />
    </Shader>

and using shader also possible

shader.makeShaderWithChildren(uniforms, [image, input])

But if I want to using ImageFilter.MakeRuntimeShader with set childShader and input then dynamic source is gone

  const srcBuilder = Skia.RuntimeShaderBuilder(shader);
  const srcFilter = Skia.ImageFilter.MakeRuntimeShader(srcBuilder, null, null); // 'image' uniform will be received
  const srcFilter = Skia.ImageFilter.MakeRuntimeShader(srcBuilder, 'input', input); // 'input' is set but 'image' is gone

So, There is no way to set array of childShader like follow

Skia.ImageFilter.MakeRuntimeShader(srcBuilder, ['image', 'input'], [null, input])

Please help