Debugging my simple shader test

Processing Coding Questions
1

I’m trying my hardest to understand shaders. I know how they work theoretically, the coding seems to be difficult.
While trying to write a shader I stumbled onto this problem…

Processing:

PImage img;
PShader shader;

void setup() {
  size(640, 480, P2D);
  img = loadImage(dataPath("image.jpg"));
  shader = new PShader(this, dataPath("vert.glsl"), dataPath("frag.glsl"));
}

void draw() {
  background(127); // set background color to white
  image(img, 0, 0, width, height);
  filter(shader);
  save(dataPath("output.png"));
}

Vertex shader ‘data\vertex.glsl’:

attribute vec4 position;
attribute vec2 texCoord;

out vec2 vTexCoord;

void main() {
  vTexCoord = texCoord;
  gl_Position = position;
}

Fragment shader ‘data\frag.glsl’:

#ifdef GL_ES
precision mediump float;
#endif

uniform sampler2D tex;
in vec2 vTexCoord;

void main() {
  vec4 col = texture2D(tex, vTexCoord);
  gl_FragColor = vec4(col.r, 0.0, 0.0, col.a); // keep only the red channel
}

Input image ‘data\image.jpg’:

image
image768×512 112 KB

Output image ‘data\output.png’:
output

Even removing everything related to the image gives me a black corner.
Processing:

PShader shader;

void setup() {
  size(640, 480, P2D);
  shader = new PShader(this, dataPath("vert.glsl"), dataPath("frag.glsl"));
}

void draw() {
  filter(shader);
  save(dataPath("output.png"));
}

Output image:
output

Using a default renderer gives me an error:

PShader shader;

void setup() {
  size(640, 480);
  shader = new PShader(this, dataPath("vert.glsl"), dataPath("frag.glsl"));
}

void draw() {
  filter(shader);
  save(dataPath("output.png"));
}

JustATest.pde:5:0:5:0: ClassCastException: class processing.awt.PGraphicsJava2D cannot be cast to class processing.opengl.PGraphicsOpenGL (processing.awt.PGraphicsJava2D and processing.opengl.PGraphicsOpenGL are in unnamed module of loader 'app')

What even is the problem and how do I fix it?

1 Like
2

Filters are shaders which only work with the OpenGL renderers P2D or P3D. So, the default renderer can’t use your PShader.

In the IDE, go to the File menu, Examples…
In the popup menu, go down to Topics, Shaders, BlurFilter and use it as an example. You’ll have to dig through your file system to figure out where the “blur.glsl” file is since the IDE doesn’t give us any easy way to edit shader files.

It’s better to use loadShader() to load your shaders from files. If you give it just a fragment shader, it will use a default vertex shader, so you only need to write one of them.

Here’s what the “blur.glsl” file looks like for Processing 4.2. You can strip it down to do what you were trying.

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

#define PROCESSING_TEXTURE_SHADER

uniform sampler2D texture;
uniform vec2 texOffset;

varying vec4 vertColor;
varying vec4 vertTexCoord;

void main(void) {
  // Grouping texcoord variables in order to make it work in the GMA 950. See post #13
  // in this thread:
  // http://www.idevgames.com/forums/thread-3467.html
  vec2 tc0 = vertTexCoord.st + vec2(-texOffset.s, -texOffset.t);
  vec2 tc1 = vertTexCoord.st + vec2(         0.0, -texOffset.t);
  vec2 tc2 = vertTexCoord.st + vec2(+texOffset.s, -texOffset.t);
  vec2 tc3 = vertTexCoord.st + vec2(-texOffset.s,          0.0);
  vec2 tc4 = vertTexCoord.st + vec2(         0.0,          0.0);
  vec2 tc5 = vertTexCoord.st + vec2(+texOffset.s,          0.0);
  vec2 tc6 = vertTexCoord.st + vec2(-texOffset.s, +texOffset.t);
  vec2 tc7 = vertTexCoord.st + vec2(         0.0, +texOffset.t);
  vec2 tc8 = vertTexCoord.st + vec2(+texOffset.s, +texOffset.t);

  vec4 col0 = texture2D(texture, tc0);
  vec4 col1 = texture2D(texture, tc1);
  vec4 col2 = texture2D(texture, tc2);
  vec4 col3 = texture2D(texture, tc3);
  vec4 col4 = texture2D(texture, tc4);
  vec4 col5 = texture2D(texture, tc5);
  vec4 col6 = texture2D(texture, tc6);
  vec4 col7 = texture2D(texture, tc7);
  vec4 col8 = texture2D(texture, tc8);

  vec4 sum = (1.0 * col0 + 2.0 * col1 + 1.0 * col2 +  
              2.0 * col3 + 4.0 * col4 + 2.0 * col5 +
              1.0 * col6 + 2.0 * col7 + 1.0 * col8) / 16.0;            
  gl_FragColor = vec4(sum.rgb, 1.0) * vertColor;  
}
3

Here’s the simpler version of your code working off of that blur example:

PImage img;
PShader shader;

void setup() {
  size(640, 480, P2D);
  img = loadImage(dataPath("image.jpg"));
  shader = loadShader("frag.glsl");
}

void draw() {
  background(127); // set background color to gray
  image(img, 0, 0, width, height);
  filter(shader);
}

with no vertex.glsl file. The frag.glsl file is:

#ifdef GL_ES
precision mediump float;
#endif

uniform sampler2D texture;

varying vec4 vertTexCoord;

void main() {
  vec4 col = texture2D(texture, vertTexCoord.st);
  gl_FragColor = vec4(col.r, 0.0, 0.0, col.a); // keep only the red channel
}