Can fragment shaders do this?

edited March 2017 in GLSL / Shaders

I have a question about something we're all familiar with, which is anti-aliasing.
That is post processing anti-aliasing , don't confuse it with no render-time MSAA kind of thing,
Just a flat picture of pixels(or texels), no vertices or anything is what I mean, and running the same function on every one of them.
The fragments has to know their positions on screen and from that information be able to map it to a color in some "shared storage" and also be able to lookup neighboring pixels colors from it.. And this is very important persistent storage, or at least some way to keep working where it left of next frame, maybe writing over the texture, array, buffer or whatever I'm very new to GLSL as you might understand...

So the output on screen gets blurrier and blurrier as time go by, rather than a static single-pass processed picture as if the shader was starting over from the same unprocessed input every frame.
And not because you doing incrementally more work/passes every frame, but because what the shader is working on is "persistent" even after it's shown on screen.
So why would I wan't to do this?
Well it's not the most exciting thing, but it's something I could learn something from and tweak to do exciting things if it works.
And if it's impossible to do this with GLSL then I can leave any thoughts about endevours in it aside.

Answers

  • edited March 2017

    I tried following a guide just doing the simplest thing but I don't get it to even do anything but a gradient.
    First it was complaining about u_time and u_mouse not being used so I tricked it into stop complaining about that as such.. + min(0.0, max(0.0, u_time + u_mouse.x));
    But then instead it complained about...

    OpenGL error 1282 at bot endDraw(): invalid operation

    Which looks very cryptic and when I googled it, I got answers saying it's old drivers.
    And I do have just inbuilt graphics on an old motherboard so that could be the issue, but it could also be me doing something wrong as I have no idea what I'm doing when it comes to shaders.

    Anyways it seems like it did some transformation of the screen in GPU.. As the Y-coordinate is reversed from the processing canvas, which it's supposed to be.

    That's a good sign, the upside down thing is no problem.

    The problem is if I move my mouse the picture doesn't move, so it seems like it stopped after the error.

    Can someone run the sketch and tell me if it works for you, or if not what error you got?

    PImage label;
    PShader shader;
    void setup() {
      size(256, 256, P2D);
      label = loadImage("logo.jpg");
      noStroke();
      shader = loadShader("shader.frag");
    }
    
    void draw() {
      shader.set("u_resolution", float(width), float(height));
      shader.set("u_mouse", float(mouseX), float(mouseY));
      shader.set("u_time", millis() / 1000.0);
      image(label,float(mouseX),0.0);
      shader(shader);
      rect(0,0,width,height);
    }
    

    In data folder...
    logo.jpg

    shader.frag

    #ifdef GL_ES
    precision mediump float;
    #endif
    uniform sampler2D texture;
    uniform vec2 u_resolution;
    uniform vec3 u_mouse;
    uniform float u_time;
    void main () {
        vec2 st = (gl_FragCoord.xy/u_resolution.xy) + min(0.0, max(0.0, u_time + u_mouse.x));
        gl_FragColor = texture2D(texture,st);
    }
    
  • edited March 2017

    I'm taking babystep and I made it do something aa-like

    The OpenGL error 1282 at bot endDraw(): invalid operation error still persists though..

    I changed shader.frag like so...

    #ifdef GL_ES
    precision mediump float;
    #endif
    
    uniform sampler2D texture;
    uniform vec2 u_resolution;
    uniform vec3 u_mouse;
    uniform float u_time;
    
    void main () {
    float p = 1.0/256.0;
    float x = gl_FragCoord.x/u_resolution.x;
    float y = 1.0 - gl_FragCoord.y/u_resolution.y + min(0.0, max(0.0, u_time + u_mouse.x)) ;
     vec4 me= texture2D( texture , vec2( x      , y   ) );
     vec4 n1 = texture2D( texture , vec2( x      , y+p ) );
     vec4 n2 = texture2D( texture , vec2( x+p , y     ) );
     vec4 n3 = texture2D( texture , vec2( x+p  , y+p  ) );
    vec4 merge = (me+n1+n2+n3)/4.0;
        gl_FragColor = merge;  
    
    }
    

    now how do I make it do multiple passes without loops?
    just keep the processed image in storage and do one pass per frame

Sign In or Register to comment.