gre / gl-react

gl-react – React library to write and compose WebGL shaders
https://gl-react-cookbook.surge.sh
MIT License
2.95k stars 163 forks source link

Image from local storage are not reading , surface view coming black. #414

Open ajitdas123 opened 2 years ago

ajitdas123 commented 2 years ago

I am trying to load the image picked by the camera into Gl editor but its showing black. Here is example of my code

const t = {uri:"content://media/external/images/media/148757"}; // Local storage file path from the camera

  <Surface style={{width: 250, height: 250}}>
        <Node
             shader={shaders.sharpen}
             uniforms={{
              factor,
              resolution: [250, 250],
               t,
            }}
         />
  </Surface>

shaders Config:

const shaders = Shaders.create({
    sharpen: {
        frag: GLSL`
      precision highp float;
      varying vec2 uv;
      uniform sampler2D t;
      uniform float factor;
      uniform vec2 resolution; 

      void main() {
        float test = factor;
        vec2 step = 1.0 / resolution;

        vec3 texA = texture2D( t, uv + vec2(-step.x, -step.y) * 1.5 ).rgb;
        vec3 texB = texture2D( t, uv + vec2( step.x, -step.y) * 1.5 ).rgb;
        vec3 texC = texture2D( t, uv + vec2(-step.x,  step.y) * 1.5 ).rgb;
        vec3 texD = texture2D( t, uv + vec2( step.x,  step.y) * 1.5 ).rgb;

        vec3 around = 0.25 * (texA + texB + texC + texD);
        vec3 center = texture2D( t, uv ).rgb;
        vec3 col = center + (center - around) * factor;

        gl_FragColor = vec4(col, 1.0);
      }
    `
    }
});

This doesn't work, but if I change the URL to some website image URL for example

const t = {uri: "https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014__340.jpg"}

Expected behavior

It was expected to render the image as it renders for an external URL

Actual behavior

But it just shows a black screen

Environments

Screenshot

WhatsApp Image 2022-10-25 at 11 51 54 AM