How to make this GLSL shader adapt to the shader of skia

[tylerrrkd]

Hi friends, I am trying to make a black and white shader for Image, and the GLSL code is here.. But if I used it directly, an error will occur.

And I follow the skia's doc, there is only a playground website which does not provide any detail about syntax.

How to make this GLSL shader adapt to the shader of skia?

Thanks for you help.
Best Regards,

import { ColorMatrix, Image, RuntimeShader, Skia } from '@shopify/react-native-skia'
import type { ImageProps, SkiaProps, MatrixColorFilterProps } from '@shopify/react-native-skia'

export type ImageLayerProps = {
  colorMatrixProps?: MatrixColorFilterProps
} & SkiaProps<ImageProps>

/**
 * @see https://www.shadertoy.com/view/WdccDH
 */
const source = Skia.RuntimeEffect.Make(`
uniform vec3      iResolution;           // viewport resolution (in pixels)
uniform shader    iChannel0;             // input channel. XX = 2D/Cube

vec3 BlackAndWhiteThreshold(vec3 color, float threshold) {
    float bright = 0.333333 * (color.r + color.g + color.b);
    float b = mix(0.0, 1.0, step(threshold, bright));
    return vec3(b);
}

void main(vec2 fragCoord) {
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    vec4 texColor = texture(iChannel0, uv);
    
    // get gray scale or luminescence
    float gray = 0.33 * (texColor.r + texColor.g + texColor.b);
    
    // mix white and black by the value of step(threshold, gray)
    float threshold = 0.5;
    if(gray > threshold)
    {
      // white
      texColor.rgb = vec3(1.0);   
    }
    else
    {
      // black
      texColor.rgb = vec3(0.0);
    }
    
    // Another way
    texColor = texture(iChannel0, uv);
    texColor.rgb = BlackAndWhiteThreshold(texColor.rgb, 0.5);

    // Output to screen
    return texColor;
}
`)!

const ImageLayer: React.FC<ImageLayerProps> = ({ colorMatrixProps, ...props }) => {
  return (
    <Image x={0} y={0} {...props}>
      <RuntimeShader source={source} />
      {colorMatrixProps && <ColorMatrix {...colorMatrixProps} />}
    </Image>
  )
}

export default ImageLayer

[tylerrrkd]

@wcandillon Hi friend, is there any details about the syntax of GLSL for SKIA. It seems that GLSL's syntax is not completely adapted to skia. And I could only find some examples below. It helps a lot, but could not meet my requirement yet.

Thanks for your replying.

https://shopify.github.io/react-native-skia/docs/shaders/overview/
https://shaders.skia.org/
https://github.com/Shopify/react-native-skia/blob/main/example/src/Examples/Transitions/transitions/index.ts

[tylerrrkd]

Found a book named thebookofshaders and try with shaders's playground of skia. trying.

[tylerrrkd]

it seems that the function texture is not supported yet in skia right? #1498

[wcandillon]

that would be image.eval(): https://github.com/search?q=repo%3AShopify%2Freact-native-skia%20.eval&type=code

[tylerrrkd]

thanks for you reply, i tried for times, and i've found this secret.