Getting started with Shaders

Processing Coding Questions
1

Hi folks. I’ve enjoyed and recommend https://thebookofshaders.com/. 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);
  noStroke();

  // 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
  shader(shader);

  // Draw a billboard
  rect(0,0,width,height);
}

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

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

3

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.

4

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.

5

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.

import processing.video.*;

Movie m1;
Movie m2;

void setup(){
  //size(800,800);
  fullScreen();
  m1 = new Movie(this, "zz.mov");
  m1.loop();
 // m1.speed(.7);
  
   m2 = new Movie(this, "aaa.mov");
  m2.loop();
// m2.speed(.8);
}

void movieEvent(Movie m){
  if (m == m1){
    m1.read(); }
    else{
      m2.read();
    }
}

void draw(){
  background(255);
  image(m1,0,0,width,height);
  blend(m2,0,0,1280,800, 0,0,1280,800,MULTIPLY);

}
6

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 https://gl-transitions.com/ a while back.

7

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

8

~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:

9

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.

10

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.

11

@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 https://github.com/processing/processing/blob/master/core/src/processing/opengl/PGraphicsOpenGL.java#L6221

12

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.

2 Likes
13

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