Beginner: how to run examples from 'The Book of Shaders'

Processing Coding Questions
1

Hello and thank you,

I am an absolute beginner with minimal knowledge of coding and I started working trough the examples of ‘The Book of Shaders’ ( https://thebookofshaders.com)
I am trying to get the example code to work in Processing, for example:

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main() {
	vec2 st = gl_FragCoord.xy/u_resolution;
	gl_FragColor = vec4(st.x,0.0,0.0,1.0);
}

I placed a file named shader.frag in the ‘data’ folder of the sketch (but I don’t understand what purpose it’s used for):

PShader shader;

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

  shader = loadShader("shader.frag");
}

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

When running the first mentioned piece of code, there are a bunch of warnings obviously.
I have tried different setups, for example placing the ‘void main()’ method after the ‘void draw()’ method but anyhow, commands like vec2, fragcoord etc are not recognized.

I’m stuck and I would really appreciate some pointers in the right direction. How can I run the example shaders from ‘The Book of Shaders’ in Processing?

Thank you!

1 Like
2

Hello and welcome @Hieronymus!
The issue is that you’re combining GLSL code with Processing code. The following is GLSL code:

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main() {
	vec2 st = gl_FragCoord.xy/u_resolution;
	gl_FragColor = vec4(st.x,0.0,0.0,1.0);
}

This code is stored in a file called shader.frag You can simply open a notepad file, paste in the code there and save it as shader.frag

This is processing code that will use the shader written previously and then run it in processing:

PShader shader;

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

  shader = loadShader("shader.frag");
}

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

When you save this code in processing, say you name it ProcessingCode, you will have a ProcessingCode folder that contains your sketch as ProcessingCode.pde. Normally in that folder, you have a data folder where you store things that you will load later into processing. Notice the statement in void setup() block that says shader = loadShader("shader.frag"); You are essentially loading the shader stored in the data folder into processing that way.

It’s great that you’re excited to get started with shaders, but I would recommend spending some time playing with Processing a little bit more before delving into GLSL. If you’re aiming to learn GLSL only, it might get a bit frustrating to debug in processing, so I would recommend you play with it more in the code editor that comes with thebookofshaders first.

3 Likes
3

@WakeMeAtThree , thanks a million!

It’s a bit clearer now, so I’m going to take some time to work with more examples. Yes, I am very excited about this subject and I will definitely spend more time with Processing too!

cheers

4

i understand that you do all that already, the processing code and the
/data/shader.frag file.

and when i try that i get following error ( info):
The shader doesn't have a uniform called "u_mouse" OR the uniform was removed during compilation because it was unused. The shader doesn't have a uniform called "u_time" OR the uniform was removed during compilation because it was unused.
//______________________________________________________
also i try
https://processing.org/tutorials/pshader/
and load all the files:


as zip
and try
Ex_09_1_allshaders
so it can be also a great resource for you, even is is also older it runs at v3.4

2 Likes
5

Very cool, thank you for the resource.More examples to play with :relaxed:

6

A little late, but if you would like to use the more current versions of openGL use https://processing.org/reference/settings_.html in your sketch. Then you can specify which version of openGL to use:

void settings(){
    size(1280, 720, P3D);
    PGOGL.profile = 4;// 450 is the version I can use on my laptop
}
//then in glsl files declare a version
#version 450 // or whatever version is compatible with your system

if you run shaders in processing without a version I think it defaults to 1.2 which may not be what you want if you have looked at any current openGL docs.
Also Visual Studio Community 2017 has a glsl extension that is really good for code completion and error detection.

4 Likes
7

Thank you @PHuzzeyMusic
My laptop has Version 4.0 The examples seem to work except for a few commands, which is ok for now. I have decided to spend more time on the basics before continuing with shaders.

8

Hey, I’m only posting this because when I googled the error this was one of a few results which poked up.

I had the error message

The shader doesn't have a uniform called "u_mouse" OR the uniform was removed during compilation because it was unused. The shader doesn't have a uniform called "u_time" OR the uniform was removed during compilation because it was unused.

And I struggled for ages.

And it was a simple fix. I had defined these variables but not called them.

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main() {
//u_resolution, u_mouse, u_time are defined above and need to be 
//called here. At the moment only u_resolution (st.x) is being called.
//It is the first argument for vec4.
//The processing sketch will throw the error that u_mouse and u_time are not being used.
//The sketch will still run - so if you don't need to use them it's fine.
//To get ride of the "u_mouse" error in Processing I would have to use the variable.
//Simple but it took me a whole day to wrap my head around it and if anyone else ends up here.
//I hope it helps.

	vec2 st = gl_FragCoord.xy/u_resolution;
    vec2 ms = gl_FragCoord.xy/u_mouse;
// if i use ms.x or ms.y in vec4 e.g. vec4(ms.x,ms.y,0.0,1.0) then the mouse
// will be called and the error will resolve. But u_resolution will throw an error.
	gl_FragColor = vec4(st.x,0.0,0.0,1.0);
}
3 Likes
9

Very cool of you to post your solution here even though the thread is a couple of years old. Thanks!

1 Like
10

haha just doing my netizen duty of care for old forum topics :stuck_out_tongue: Hope you had luck with the shaders after this! I’m just getting into them.

1 Like
11

Ha, I didn’t further dive into the realm of shaders yet but I do continue to use Processing though!