Flutter implementing Shadertoy example with negative UV

236 Views Asked by At

I'm new to GLSL. I've used this guide to manipulate my image via shaders.

The example in that page works fine for several ShaderToy examples but I've stumbled upon a simple one which I can't get it to work. This is the shadertoy:

This is my Flutter shader frag file equivalent of that shader:

shader.frag

#include <flutter/runtime_effect.glsl>

out vec4 fragColor;
uniform sampler2D iChannel0; // Main image
uniform sampler2D iChannel1; // This is the noise
uniform vec2 uSize;
uniform float iTime;

vec2 iResolution;

vec2 drop(vec2 uv, vec2 pos, float r)
{
    pos.y = fract(pos.y);
    return (uv - pos) * exp(-pow(20.0 * length(uv - pos), 2.0));
}

void main() {
    iResolution = uSize;
    vec2 fragCoord = FlutterFragCoord();

    vec2 uv = fragCoord.xy / iResolution.xy;
    vec2 uv2 = vec2(uv.x * iResolution.x / iResolution.y, uv.y);

    vec2 d = vec2(0.0, 0.0);
    const int n = 100;
    for(int i = 0; i < n; i++)
    {
        vec4 r = texture(iChannel1, vec2(float(i) / float(n), 0.5));
        vec2 pos = r.xy;
        pos.x *= 2.0; // iResolution.x / iResolution.y;
        pos.y += 10.0 * iTime * 0.02 * r.a;
        //pos.x += sin(t + r.z);
        d += 0.1 * drop(uv2.xy, pos, 0.03);
    }

    fragColor = texture(iChannel0, -uv.xy + d);
}

The output is no image. Just a plain single color. The last line of the shader -uv.xy is causing flutter to show a single color. I've tried doing uv = 2.0 * uv - 1.0; before the last line which makes the image appears 1/4 size and there are no animations. There's also an option in Shadertoy for texture channel images called vflip which is off for this shader but for some others that is on. Switching it off/on for this shader, doesn't simply flip the image but also changes the way the noise is rendered. I don't know who to implement that in Flutter.

I don't think my Flutter side is wrong since it is working for other shaders. It is almost a copy-paste of the tutorial linked above. Just added one more sampler2D for the noise image.

Any help is greatly appreciated!

0

There are 0 best solutions below