I can't make a single shader run in Processing

Someone please help me to get a single shader working in Processing. I am not totally new to Processing, and I have created many shaders in Shadertoy. Now I would like to use shaders to make my simulations in Processing run faster…
But all the basic examples, for example from the book of shaders, or from Andres Colubri’s tutorial (tutorial ) fail to run. Usually I get a message like

"The file "ToonFrag.glsl" is missing or inaccessible, make sure the URL is valid or that the file has been added to your sketch and is readable.
NullPointerException
NullPointerException

And I have created a data file where the GLSL codes are living. Here’s an example from Colubri’s tutorial which I fail to make work(and yes the glsl parts are in a separate “data” file):

Code listing 2.1: Sketch that uses a toon effect shader to render a sphere.

PShader toon;

void setup() {
  size(640, 360, P3D);
  noStroke();
  fill(204);
  toon = loadShader("ToonFrag.glsl", "ToonVert.glsl");
  toon.set("fraction", 1.0);
}

void draw() {
  shader(toon);
  background(0);
  float dirY = (mouseY / float(height) - 0.5) * 2;
  float dirX = (mouseX / float(width) - 0.5) * 2;
  directionalLight(204, 204, 204, -dirX, -dirY, -1);
  translate(width/2, height/2);
  sphere(120);
}

ToonVert.glsl: (this I have placed in the data folder)

uniform mat4 transform;
uniform mat3 normalMatrix;
uniform vec3 lightNormal;

attribute vec4 position;
attribute vec4 color;
attribute vec3 normal;

varying vec4 vertColor;
varying vec3 vertNormal;
varying vec3 vertLightDir;

void main() {
  gl_Position = transform * position;
  vertColor = color;
  vertNormal = normalize(normalMatrix * normal);
  vertLightDir = -lightNormal;
}

ToonFrag.glsl: (this I have placed in the data folder)

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

uniform float fraction;

varying vec4 vertColor;
varying vec3 vertNormal;
varying vec3 vertLightDir;

void main() {
  float intensity;
  vec4 color;
  intensity = max(0.0, dot(vertLightDir, vertNormal));

  if (intensity > pow(0.95, fraction)) {
    color = vec4(vec3(1.0), 1.0);
  } else if (intensity > pow(0.5, fraction)) {
    color = vec4(vec3(0.6), 1.0);
  } else if (intensity > pow(0.25, fraction)) {
    color = vec4(vec3(0.4), 1.0);
  } else {
    color = vec4(vec3(0.2), 1.0);
  }

  gl_FragColor = color * vertColor;
}

Any help? Or can someone suggest other simple codes for me to try?

In your sketch folder, create a subfolder called data/ and put your shaders there.

Alternatively, as of Processing 4b6, you can include your shaders in your Processing code as a multi-line string:

String[] vertSrc = { """
uniform mat4 transformMatrix;
attribute vec4 position;
void main() {
  gl_Position = transformMatrix * position;
}
""" };

String[] fragSrc = { """
uniform vec2 resolution;
uniform float time;
#define TAU 6.2831853
void main() {
  vec2 uv = (2.*gl_FragCoord.xy-resolution)/resolution.y;
  uv = vec2( time*0.5 - log(length(uv)), atan( uv.y, uv.x ) / TAU + .5 );
  uv = fract( vec2( 1.*uv.x+3.*uv.y, -1.*uv.x+6.*uv.y ) );
  gl_FragColor = vec4( step(0.8, uv), 0., 1. );
}
""" };

PShader shdr;

void setup() {
  size( 800, 800, P2D );
  shdr = new PShader( g.parent, vertSrc, fragSrc );
}

void draw() {
  shdr.set( "time", frameCount/60. );
  shader( shdr );
  rect( 0, 0, width, height );
}
1 Like

Thanks but I have have tried creating the subfolder data etc and it does not work.
I have version 4.0b7 and I run it on Mac with the M1 chip (if that is relevant?).
I tried including shaders as Strings as you suggested. Gave me this:

RuntimeException: Cannot compile vertex shader:
ERROR: 0:2: '' :  #version required and missing.
ERROR: 0:3: 'attribute' : syntax error: syntax error

RuntimeException: Cannot compile vertex shader:
ERROR: 0:2: '' :  #version required and missing.
ERROR: 0:3: 'attribute' : syntax error: syntax error

Could not run the sketch (Target VM failed to initialize).
For more information, read Help → Troubleshooting.

Try adding #version 130 or #version 330 as the first line of each shader and see if either of those works. Either of those works for me on linux with nVidia drivers. Prefer 330 if it works since that enables more shader features.

You might also want to add the line precision highp float; after the #version in your fragment shader to tell it to use 32-bit floats for more precision. I think high precision is already the default in the vertex shader.

Your suggestion about versions did not work unfortunately. This is so weir. What can I be missing…

Thanks for the try nevertheless.

Sounds like it might be related to being a Mac. I don’t know anything about that. Try re-posting your question mentioning Mac M1 in the title to get the attention of people who use that hardware.

Problem solved finally.

It seems the examples I used from online tutorials had some outdated syntax for the vertex shader.
If someone need the correct one, simply check the examples/topics/shaders in your version of Processing package. I didn’t realize they had shader examples there :wink:

1 Like