PShader Library Example, Processing 3, "Cannot compile fragment shader..."

mnoble

Hello Team,

I feel foolish that I can't figure this out. I am literally copying the code example from the processing reference for blur.

https://processing.org/reference/PShader.html

And, I get this error in Processing 3 and 2).

"Cannot compile fragment shader: ERROR 0:9 '<' : syntax error"

I must be missing something simple yes? :)

PShader blur;

void setup() {
  size(640, 360, P2D);
  // Shaders files must be in the "data" folder to load correctly
  blur = loadShader("blur.glsl"); 
  stroke(0, 102, 153);
  rectMode(CENTER);
}

void draw() {
  filter(blur);  
  rect(mouseX-75, mouseY, 150, 150); 
  ellipse(mouseX+75, mouseY, 150, 150);
}

kfrajer

Some examples in https://processing.org/tutorials/pshader/

or

https://forum.processing.org/two/search?Search=loadshader

I dunno much about this example or about shaders. If you decide to try any of those in the above links, make sure you have the fragment (and vertex if any) shader in the sketch directory level (which is accessed via ctrl+k in your sketch).

Kf

nabr

Hm. I can not reproduce it.

• Processing 3.x
  Exampels --> Shaders --> BlurFilter
  shadersource: https://pastebin.com/raw/ny5JNCJH
  //

PShader blur;  

void setup() {  
  size(640, 360, P2D);  
  // note i have to separe the url "http"+string only in this forum   
  blur = loadShader("https://"+"pastebin.com/raw/ny5JNCJH");   
  stroke(255, 0, 0);  
  rectMode(CENTER);
}  

void draw() {  
  filter(blur);    
  rect(mouseX, mouseY, 150, 150);   
  ellipse(mouseX, mouseY, 100, 100);
}  

mnoble

Hello @kfrajer and @nabr,

Okay, I found the example and looked through the resources you sent - solved it with your help. Thank you!!!!

Sincerely,

Margaret

kfrajer

@nabr That example in the Processign website... ehhh I don't think it is the best. Calling the filter(blur) suppose to be a demo of shaders? I was puzzled first about where to get the glsl files from. Are you familiar with how filter relates to shaders by any chance?

@mnoble From the following link: https://processing.org/tutorials/pshader/

A PShader object is created with the loadShader() function which takes the filenames of the vertex and fragment files as the arguments. If only one filename is specified, then Processing will assume that the filename corresponds to the fragment shader, and will use a default vertex shader.

Later in the same document, it says:

You will notice that this time the loadShader() function only receives the filename of the fragment shader. How does Processing complete the entire shader program? The answer is that it uses the default vertex stage for texture shaders. As a consequence of this, and since the varying variables are first declared in the vertex stage, the fragment shader has to follow the varying names adopted in the default shader. In this case, the varying variables for the fragment color and texture coordinate must be named vertColor and vertTexCoord, respectively.

This last is important. If you get a shader from another source, you need to adapt it to Processing guidelines. Processing allows to manipulate and run shaders without going through all the exercise of setting up all the bits and pieces to do so. More info next:

If we work with a low-level toolkit in C or C++ with direct access to the OpenGL API, we are free to name the uniforms and attributes of a shader in any way we like, since we have absolute control on the way the geometry is stored in our application, and how and when it is passed over to the GPU pipeline using the OpenGL functions. This is different when working in Processing, since the shaders are handled automatically by the renderers and should be able to handle the geometry that is described with the drawing API of Processing. This doesn't imply that custom shaders must render things in the same way as Processing does by default, quite in the contrary, the use of custom shaders opens up the possibility of greatly altering the rendering pipeline in Processing. However, custom shaders meant to be used in conjunction with the standard drawing API have to follow certain naming conventions, and are bound by some limitations.

I suggest you have a look at the 6.1 and 6.2 examples presented in the link above. I am not familiar with shaders, I can only help whenever I can (and I know)...

Kf

mnoble

Hi @kfrajer -

Thanks for taking some time here and making recommendations!!!

As I work through this problem and am pleased to be with getting somewhere with the blur, I just sadly realized that I am on the wrong path (I think). I want to blur moving images and I it looks like that is a whole another beast from the tutorial:

https://processing.org/tutorials/pixels/

Please correct me if I am wrong! Anyhow, now I have a new host of new problems for my project! I suppose I should post in a new thread :)

kfrajer

Check related post: https://forum.processing.org/two/search?Search=postfx

For instance:

https://forum.processing.org/two/discussion/comment/110331/#Comment_110331

https://forum.processing.org/two/discussion/comment/100296/#Comment_100296

https://github.com/cansik/processing-postfx

You could get more feedback (most of the time) if you provide an MCVE supporting your questions.

Kf

mnoble

@kfrajer I had to look up "MCVE" - glad I know now! Thanks for everything, will do!

nabr

@kfrajer
https://processing.org/reference/PShader.html
is related to the Processing Exampels, if you are unhappy make a pull on github :)

Processing filter() is a Shader. You render your scene (from so called framebuffer) to a texture, then you map this texture to your window as (fullwindow) quad, and with this texture you do your image processing steps.

In case of a blur filter, (their are many solutions but the most common is) you create a convolution matrix and shift the x,y positions of pixels according to it's neighbours.

• https://en.wikipedia.org/wiki/Kernel_(image_processing)
• https://docs.gimp.org/en/plug-in-convmatrix.html

     
     
@mnoble
Yes a shader is a hole new world, when you came from Java CPU background, but only at first sight, it's an other programing language, underneath you have to do the same math.

CPU

• https://github.com/processing/processing-android/blob/master/examples/Topics/Image Processing/Blur/Blur.pde
• https://processing.org/tutorials/pixels/
• http://www.jhlabs.com/ip/blurring.html      

GPU

• https://www.shadertoy.com/results?query=blur
• https://www.google.de/images?q=blur+opengl
       

JOGL is the language that send data from CPU to GPU.
And GLSL (OpenGL Shading Language ) is the language that takes the data and instruct the GPU to perform specific tasks.

https://en.wikipedia.org/wiki/Graphics_pipeline#Shader
     

" I want to blur moving images "

sounds like you are searching for
https://www.google.de/search?q=Motion+Blur
     
     

mnoble

@nabr thanks for the tip and all the details! So much to learn, much appreciated!!! :)