Shader is all gray, help?

AceSlowman

While trying to debug a frag shader that I'm working on, I wanted to just make sure that the gl_FragColor = vertColor; would at least work. It is only showing white. Does anyone have some advice or see what I might be doing wrong here?

PShader shader;
PImage photo;

void setup() {
  size(619,619,P2D);
  photo = loadImage("paintedsky.jpg");
  shader = loadShader("inkspread_frag.glsl");
}

void draw() {
  shader.set("T",(float) millis()/1000.0);
  filter(shader);
  image(photo,mouseX,mouseY);
}

-----------------------------------------

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

#define PROCESSING_TEXTURE_SHADER

uniform sampler2D source;
varying vec4 vertColor;
varying vec4 vertTexCoord;

uniform float T;
const float diag = 1.414213562373095;

//layout(location=0) out vec4 result;

vec4 F(vec4 x0,vec4 x1,float dist){
    return (x1 - x0)/(T * dist);
}

void main(void) {
    vec2 ix  = vec2(vertTexCoord.xy);

    vec2 c11 = vertTexCoord.st + vec2( 0.0, 0.0);
    vec2 c01 = vertTexCoord.st + vec2(-1.0, 0.0);
    vec2 c21 = vertTexCoord.st + vec2( 1.0, 0.0);
    vec2 c10 = vertTexCoord.st + vec2( 0.0,-1.0);
    vec2 c12 = vertTexCoord.st + vec2( 0.0, 1.0);
    vec2 c00 = vertTexCoord.st + vec2(-1.0,-1.0);
    vec2 c02 = vertTexCoord.st + vec2(-1.0, 1.0);
    vec2 c20 = vertTexCoord.st + vec2( 1.0,-1.0);
    vec2 c22 = vertTexCoord.st + vec2( 1.0, 1.0);

    vec4 x11 = texture2D(source, c11);
    vec4 x01 = texture2D(source, c01);
    vec4 x21 = texture2D(source, c21);
    vec4 x10 = texture2D(source, c10);
    vec4 x12 = texture2D(source, c12);
    vec4 x00 = texture2D(source, c00);
    vec4 x02 = texture2D(source, c02);
    vec4 x20 = texture2D(source, c20);
    vec4 x22 = texture2D(source, c22);

    vec4 d01 = F(x11,x01,1.0);  
    vec4 d21 = F(x11,x21,1.0);  
    vec4 d10 = F(x11,x10,1.0);  
    vec4 d12 = F(x11,x12,1.0);  
    vec4 d00 = F(x11,x00,diag); 
    vec4 d02 = F(x11,x02,diag); 
    vec4 d20 = F(x11,x20,diag); 
    vec4 d22 = F(x11,x22,diag); 

    vec4 result = (x11 + d01+d21+d10+d12 + d00+d02+d20+d22);
    //gl_FragColor = vec4(result.rgb,1.0) * vertColor;
    gl_FragColor = vertColor;
}

AceSlowman

Here is an updated version of the shader. Still having problems, so I swapped out vertColor for sampler2D.

PShader shader;
PImage photo;

void setup() {
  size(619,619,P2D);
  photo = loadImage("paintedsky.jpg");
  shader = loadShader("inkspread_frag.glsl");
}

void draw() {
  shader.set("T",(float) millis()/1000.0);
  filter(shader);
  image(photo,619,619);
}

---

// This shader is using the surrounding pixels to emulate ink spreading across
// paper. As ink flows out of one pixel, it flows into another, dissipating over T 
// time. 

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

#define PROCESSING_TEXTURE_SHADER

uniform sampler2D source;
varying vec4 vertTexCoord;

uniform float T;
const float diag = 1.414213562373095;

vec3 F(vec3 x0,vec3 x1,float dist){
    return (x1 - x0)/(T * dist);
}

void main() {
    vec2 ix  = vertTexCoord.st;

    vec2 c11 = vertTexCoord.st + vec2( 0.0, 0.0);
    vec2 c01 = vertTexCoord.st + vec2(-1.0, 0.0);
    vec2 c21 = vertTexCoord.st + vec2( 1.0, 0.0);
    vec2 c10 = vertTexCoord.st + vec2( 0.0,-1.0);
    vec2 c12 = vertTexCoord.st + vec2( 0.0, 1.0);
    vec2 c00 = vertTexCoord.st + vec2(-1.0,-1.0);
    vec2 c02 = vertTexCoord.st + vec2(-1.0, 1.0);
    vec2 c20 = vertTexCoord.st + vec2( 1.0,-1.0);
    vec2 c22 = vertTexCoord.st + vec2( 1.0, 1.0);

    vec3 x11 = texture2D(source, c11).rgb;
    vec3 x01 = texture2D(source, c01).rgb;
    vec3 x21 = texture2D(source, c21).rgb;
    vec3 x10 = texture2D(source, c10).rgb;
    vec3 x12 = texture2D(source, c12).rgb;
    vec3 x00 = texture2D(source, c00).rgb;
    vec3 x02 = texture2D(source, c02).rgb;
    vec3 x20 = texture2D(source, c20).rgb;
    vec3 x22 = texture2D(source, c22).rgb;

    vec3 d01 = F(x11,x01,1.0);  
    vec3 d21 = F(x11,x21,1.0);  
    vec3 d10 = F(x11,x10,1.0);  
    vec3 d12 = F(x11,x12,1.0);  
    vec3 d00 = F(x11,x00,diag); 
    vec3 d02 = F(x11,x02,diag); 
    vec3 d20 = F(x11,x20,diag); 
    vec3 d22 = F(x11,x22,diag); 

    vec3 result = (x11 + d01+d21+d10+d12 + d00+d02+d20+d22);

    vec3 col = texture2D(source, ix).rgb;
    gl_FragColor = vec4(col*result,1.0);
}

koogs

Do you need to divide result by 9? You appear to be adding up 9 different values in the range 0 to 1(?) And then assigning them to a field also expecting to be 0 to 1.

One single comment about what you're trying to do would be useful. "This is a blur filter using a 3x3 convolution matrix" or something rather than just a file full of maths.

AceSlowman

That makes sense! Though with that added, it still has the same problems. When using shader(), I get gray, when using filter(), I get black.

The effect is a cellular automaton to emulate ink spreading, I'll add that above.

timm

You didn't set your texture2D uniform to anything!

Something like the following in your setup() will do: shader.set("source", photo);

A shader applied via filter() works directly on the framebuffer (your drawing canvas) and should be called at the end of draw() (except you are knowing what you do). The shader is working on an empty canvas, accessing a texture that is'nt defined.

Last, you draw the image outside of your canvas (remember: top left is 0,0 - bottom right is (here) 619,619), your image is drawn bottom left outside of your canvas.

koogs

processing TEXTURE shaders define a uniform called "texture", set to whatever texture() was called with, so you can use that rather than setting "source"