Getting started with Shaders

Hi folks. I’ve enjoyed and recommend I find the subject fascinating and have successfully run a few other people’s shaders. However I have an embarrassingly basic question. When I try to run their (Book of Shaders) example code below I get the following error "Cannot compile fragment shader:ERROR:0:9’<'syntax error " I’ve noticed that all of the shader examples included with Processing use a file form marked .glsl instead of .fragment…is there something I am missing in terms of formatting? Thanks.

PShader shader;

void setup() {
  size(640, 360, P2D);

  // Load and compile shader
  shader = loadShader("shader.frag");

void draw() {
  // Set uniforms
  shader.set("u_resolution", float(width), float(height));
  shader.set("u_mouse", float(mouseX), float(mouseY));
  shader.set("u_time", millis() / 1000.0);

  // Replace the default pipeline programs with our shader

  // Draw a billboard

void keyPressed(){
  // Reload shader everytime a key is press
  shader = loadShader("shader.frag");
1 Like

What’s inside shader.frag? The file name should not matter but the error seems to indicate that the file has a syntax error…

Oh I just realized that when I tried to download the shader individually from Github I downloaded a link to the page. I just downloaded their whole gitHub master file it works.

However, I imagine that I will probably have other questions as I go. I wonder if we can keep this thread going for questions.

Eventually I want to write a shader that will basically act like a blend(MULTIPLY) filter on video. I’ve gotten that kind of code running without a shader but it really puts a strain on my computer. This may be some time later in the future. I’d like to get a firmer grasp on the basics.

Thanks for your help.

You know that OpenGL can support MULTIPLY with the built-in blend functions, so you could just use blendMode(MULTIPLY)? Note that due to Processing’s use of un-premultiplied alpha, multiply is a bit broken with translucent images, but if they’re opaque it’s fine.

Thanks for that tip on blendMode instead of blend. ( Even if this works I’m liable to continue digging into shaders though.) I forget, do I still need to specify OpenGL in the size for the latest version of Processing? And where should I put blendMode? This is what I’ve been using…which over time really gets my computer to heat up.


Movie m1;
Movie m2;

void setup(){
  m1 = new Movie(this, "");
 // m1.speed(.7);
   m2 = new Movie(this, "");
// m2.speed(.8);

void movieEvent(Movie m){
  if (m == m1){; }

void draw(){
  blend(m2,0,0,1280,800, 0,0,1280,800,MULTIPLY);


Remove the blend(...) line and add blendMode(...) before the call to image(...) should work IIRC.

Yes, shaders are fun to play with. I adapted a few from a while back.

Is blendMode() equally fast with fullScreen() and fullScreen(P2D)?

~That’s a funny question! :wink: blendMode() for those modes supported directly by OpenGL should be as fast in fullScreen(P2D) and fullScreen(P3D). They should be a lot faster than the default renderer.~

EDIT - yes, I’m an idiot who doesn’t always read properly! :cold_sweat:

I was asking because in @justin_lincoln’s code he used fullScreen(); and he asked about specifying OpenGL… I assumed with P2D / P3D is faster.

I put blendMode(MULTIPLY); into the setup and changed the blend line to a simple image call and it seems to work fine. Hope to test it over a longer period of time to see if I can find a difference in performance. Thanks, this is an interesting development.

@hamoid - true! I’d missed that in the second code example, sorry. Your question makes more sense now! :smile: Yes, fullScreen(P2D) is required there.

You can get an idea of exactly what blend modes are supported in the OpenGL renderers at

Oh, jeez…just put P2D in the FullScreen(); function and I see a huge speed difference. In my older versions frames seemed to drop left and right. This is blazing fast.


I find setting up shaders in Processing isn’t super intuitive, but once you get the boilerplate code figured out, it’s very reusable. Here’s an example:

1 Like