ThNdl shader tutorial in Processing / Get started with GLSL

Share your Work

sableRaph

ThNdl shader tutorial in Processing / Get started with GLSL

in Share your Work • 10 months ago

Hello everyone,

Two months ago, Andrew Baldwing started publishing a series on articles on his blog ( http://thndl.com) about GLSL (OpenGL Shading Language). If you don't know the power of shaders yet, I recommend having a look at the GLSL sandbox: http://glsl.heroku.com/

In Andrew's own words: “When I first heard about shaders, I have to admit they sounded like scary arcane magic that I would never be able get to grips with. But it turned out that the magic was mostly just boilerplate setup code you needed to get started, and once you got past that they were actually quite simple.”

His blog includes a GLSL interpreter that gets the “boilerplate” code out of the way and lets you experiment with the core instructions of the shader. I thought it would be interesting though to see if these examples could be ported to Processing so here they are:

https://github.com/SableRaf/glsltutoP5

The sketch folder, includes a glsl file (with explanatory comments) that regroups all the shaders from the ThNdl articles published so far.

The sketch and shader file are intended to accompany the reading of the tutorials at http://thndl.com. You will need Processing 2.0b6 or superior.

Note for mac users: Xcode does syntax coloring for GLSL.

Many thanks to Adrew Baldwing and to Andres Colubri for his work on shaders in Processing 2.0 and his articles that were a lot of help ( http://codeanticode.wordpress.com/).

Happy shading!

Raphaël

Replies(42)

sableRaph

Re: ThNdl shader tutorial in Processing / Get started with GLSL

10 months ago

Here is a stripped down version of the code. You can start there in case you want to implement the examples yourself.

Edit: If you do, copy the code from the GLSL interpreter and not directly from the articles as the latter includes some invisible html characters that will crash the shaders compilation (at least in Xcode 4.5). Also, note that the interpreters text field leaves out the last semicolon of the code block and you have to add it before you copy and paste.

PShader myShader;
void setup() {
size(250, 250, P2D);
noSmooth();
}
void draw() {
// We reload the shader every frame so
// you can see the changes applied in realtime
myShader = loadShader("shader.frag");
myShader.set("resolution", float(width), float(height));
shader(myShader);
myShader.set("time", (float)(millis() / 1000.0));
myShader.set("mouse", float(mouseX), float(mouseY));
noStroke();
fill(0);
rect(0, 0, width, height);
resetShader();
}

And here is the minimal shader.frag:

#ifdef GL_ES

precision highp float;

#endif

uniform float time;

uniform vec2 resolution;

uniform vec2 mouse;

vec4 f = vec4(1.,1.,1.,1.); // f will be used to store the color of the current fragment

void main(void)

{

vec2 c = vec2 (-1.0 + 2.0 * gl_FragCoord.x / resolution.x, 1.0 - 2.0 * gl_FragCoord.y / resolution.y) ;

vec2 mousepos = -1.0 + 2.0 * mouse.xy / resolution.xy;

float t = time;

f = vec4(c.x, c.y, 0.0, 1.0); // This is the code you see in the tutorial
gl_FragColor = f;
}

andres

Re: ThNdl shader tutorial in Processing / Get started with GLSL

10 months ago

Hello, this is great, thanks a lot for porting thndl's tutorials! There will be some changes in the shader API for b7, mostly in the names of the default uniforms and attributes that Processing uses to send data to GLSL. This will be documented shortly afterwards.

sableRaph

Re: Re: ThNdl shader tutorial in Processing / Get started with GLSL

10 months ago

Thanks for the heads up Andres. I'll update the code when 2.0b7 comes out.

nardove

Re: ThNdl shader tutorial in Processing / Get started with GLSL

10 months ago

I get the following error messages in the console:

The shader doesn't have a uniform called "resolution"

The shader doesn't have a uniform called "time"

The shader doesn't have a uniform called "mouse"

This is my configuration

IDE: P5 2.0b6 32bits for Windows

OS: Windows 7 Pro

sableRaph

Re: ThNdl shader tutorial in Processing / Get started with GLSL

10 months ago

I have the The shader doesn't have a uniform called "time" error too but the sketch runs all the same. Does it crash for you?

Andres will be more competent than me to answer that though.

nardove

Re: ThNdl shader tutorial in Processing / Get started with GLSL

10 months ago

No crash, but all I get is a white window

sableRaph

Re: ThNdl shader tutorial in Processing / Get started with GLSL

10 months ago

This is normal. You have to uncomment an example of your choice in the shader file.

Also: I forgot to put the size() back to default 250*250 in the sketch for the first examples so you might want to do that in order to get the same aspect as the tutorials.

nardove

Re: ThNdl shader tutorial in Processing / Get started with GLSL

10 months ago

HAAAA I see everything works now, many thanks

David Wil..

Re: ThNdl shader tutorial in Processing / Get started with GLSL

10 months ago

This is great news. Shaders within Processing is really exciting. Thanks.

D.

Calx | http://calx.co.uk

sableRaph

Re: ThNdl shader tutorial in Processing / Get started with GLSL

10 months ago

Problems with the "More Noise" chapter, solved! It turns out you should not copy the code directly from the articles into Xcode as some invisible markup characters are copied along and mess up with the shader compilation. Some function names are also not accurate on the blog so I think it's better to consider that this code is for illustration purposes and only trust the one from the interpreter (the one you get when you click on the images in the articles).

You can now find the latest revision on Github: https://github.com/SableRaf/glsltutoP5

The previous posts were edited to reflect the changes.

baldand

Re: ThNdl shader tutorial in Processing / Get started with GLSL

10 months ago

(Hi, I'm Andrew Baldwin - ThNdl is my blog)

Good find on the wrong function name - sorry about that. It should be fixed now. The invisible characters are a bit trickier, but I'll see if i can find a way in future to make it easier to copy the shaders out.

By the way, if anyone has any questions about any of the shaders or the original articles at http://thndl.com then fire away.

edit: Also, ThNdl has a full content RSS feed in case would like to follow new articles that way http://thndl.com/rss.p

sableRaph

Re: ThNdl shader tutorial in Processing / Get started with GLSL

10 months ago

Hi Andrew,

I'll definitely have some questions about your code once I get deeper into the shader mechanics.

Is there anything you can do about the missing last semicolon in the interpreter?

Thanks for dropping by.

baldand

Re: ThNdl shader tutorial in Processing / Get started with GLSL

10 months ago

The final semi-colon is optional. The interpreter appends this to each program:

;

gl_FragColor=f;

}

Is that causing a problem when you try to reuse the shaders?

By the way, you may be interested to know that all the shaders from the gallery (currently about 99) are returned with URI encoding in a single JSON array by one HTTP GET to http://thndl.com/gl/g.p

Perhaps you could find a way to read them that directly into a Processing program?

sableRaph

Re: Re: ThNdl shader tutorial in Processing / Get started with GLSL

10 months ago

Is that causing a problem when you try to reuse the shaders?

It could be confusing for some beginners but it's not a major problem. I just had to remember to add the semicolon each time. I put all the examples in a single shader file (uncommenting one at a time) so doing it the way you did with the interpreter would have been rather counter-intuitive.

By the way, you may be interested to know that all the shaders from the gallery (currently about 99) are returned with URI encoding in a single JSON array by one HTTP GET to http://thndl.com/gl/g.p

Perhaps you could find a way to read them that directly into a Processing program?

Definitely interesting though it would require more parsing than I'm comfortable doing right now. Maybe someone from the forum will want to give it a go.

Thanks for the recap article by the way. It's a nice way to review what we've learned :)

sableRaph

More shading!

10 months ago

I finally found some more time to experiment with shaders. Here is a simple sketch with a variation on the pseudo-random function, repetitive pattern and custom uniforms.

Github repo: http://goo.gl/oSv3o

Feel free to comment/improve on it.

Inspired by this glitch experiment by Alessandro Contini: http://www.cntlsn.com/dev/pixpat/

sableRaph

Re: More shading!

10 months ago

This is how it looks. The resolution of the grid can be modified live. It also runs fullscreen at maximum fps (though I'd hardly recommend it

)

aLinG

Re: ThNdl shader tutorial in Processing / Get started with GLSL

9 months ago

Sharing mu experience. Yesterday I begin learning GLSL. I read carefully before the tutorial about shaders in ( http://codeanticode.wordpress.com), then I went to GLSL sandbox page and play a little bit with shaders, modifying parameters and trying to achieve controlled results.

Then I set up an environment in windows to develop GLSL and Processing. I code using Sublime Text and, lucky us, it supports (using an extension) GLSL highlight syntax :) Indeed, you can edit the processing files at the same time you edit the shader code. It's very straight forward and comfortable. ST shows you a very detailed error window when something is wrong in your code.

This is my first sketch:

It needs tons of optimization to work better but I'm proud of the result.

Some people has talked about some errors that the have:

The shader doesn't have a uniform called "resolution"

The shader doesn't have a uniform called "time"

The shader doesn't have a uniform called "mouse"

In the last betas, Processing send resolution, time and mouse automatically to the shader, you don't need to pass them, only the custom uniforms you create. In my case I've substituted mouse with a:

uniform vec2 loc;

...for every particle.

Best Regards.

sableRaph

Re: Re: ThNdl shader tutorial in Processing / Get started with GLSL

9 months ago

Hi aLinG,

Good find about Sublime Text and thank you for the explanation about the warnings. I'll try it and update the repo.

About particles on the GPU, you should check this out:

https://forum.libcinder.org/topic/on-my-way-towards-the-million

On a related note, this tutorial about FBO ping-ponging is pretty interesting:

http://bantherewind.com/wrap-your-mind-around-your-gpu

Would you mind sharing your code?

Cheers.

aLinG

Re: ThNdl shader tutorial in Processing / Get started with GLSL

9 months ago

Of course :) The shader code is pretty simple. I've only modify a normal radial bloom using exponential functions (pow) and two embedded trigonometric functions to make the variable/rythmic bloom effect (I want to test other stuff like distance between particles changes frequency, etc). Other change I want to make is rotate the bloom using x coordinate of the particles to achieve a more realistic effect. The problem is that I don't know how to pass a value to set array size inside GLSL because it needs a constant value...

I made the first test here, at Shader Sandbox.

//by Ángel Linares García. www.blurrypaths.com
Creative Commons Attribution-NonComercial-ShareAlike3.0 Unported License.
#ifdef GL_ES
precision mediump float;
precision mediump int; //This is not necessary.
#endif
uniform float time;
uniform vec2 pos[125]; // Array to pass position of particles.
uniform vec2 resolution;
uniform vec3 rgb[125]; // Array to pass colors (this could be rounded)
void main( void ) {
vec2 position = gl_FragCoord.xy;
float color;
vec4 resColor;
for (int i=0; i<130; i++)
{
vec2 lightpos = pos[i];
vec2 norm = lightpos - position;
float sdist = pow((norm.x * norm.x),1.0/3.0) + pow((norm.y * norm.y),1.0/3.0);
// float sdist = (norm.x * norm.x) + (norm.y * norm.y);
vec3 light_color = rgb[i] * vec3(0.4,0.4,0.4);
color = (1 / (sdist * 1)*cos(0.7*(sin(time*0.25))));
resColor = vec4(color,color,color,1)*vec4(light_color,1);
gl_FragColor += resColor;
}

joseph

Re: ThNdl shader tutorial in Processing / Get started with GLSL

9 months ago

Hi aLinG,

Can you share to us the method you use in attaching your custom GLSL shader to your particles in Processing?

Thanks,
Seph

daviidv

Re: ThNdl shader tutorial in Processing / Get started with GLSL

9 months ago

Also started learning shaders few days ago. Here is my first creation with randomly generated geometry and few simple shaders (dof, color distortion, gradient generation) .

Its really great to have such an easy way to use shaders in Processing.

sableRaph

Re: Re: ThNdl shader tutorial in Processing / Get started with GLSL

9 months ago

That's great!

Can we see your code? Every example is helpful at this stage. It doesn't matter if it's just a simple sketch or if you wrote your grocery shopping list in the comments ;)

daviidv

Re: ThNdl shader tutorial in Processing / Get started with GLSL

9 months ago

Here is the sketch code without geometry generation and other unrelated things. I am sure I did some things harder than necessary but I am happy with the output. I hope it helps someone :)

PGraphics ping, pong;
PImage geomTex, blurTex, depthTex, sceneTex, background, noise;
PShader[] blurShader;
PShader dofShader, gradientShader, distShader;
void setup() {
size(1920, 1080, P3D);
ping = createGraphics(width, height, P3D);
pong = createGraphics(width, height, P3D);
geomTex = new PImage(width, height);
blurTex = new PImage(width, height);
depthTex = new PImage(width, height);
background = new PImage(width, height);
noise = new PImage(width, height);
blurShader = new PShader[2];
blurShader[0] = loadShader("blur_horizontal.glsl");
blurShader[1] = loadShader("blur_vertical.glsl");
dofShader = loadShader("dof.glsl");
gradientShader = loadShader("gradient.glsl");
distShader = loadShader("distortion.glsl");
//create random noise texture
noise.loadPixels();
for(int x = 0; x < width; x++) {
for(int y = 0; y < height; y++) {
noise.pixels[x + y * width] = color(random(8));
}
}
noise.updatePixels();
noStroke();
}
void draw() {
background(0, 0);
//draw gradient for background
ping.beginDraw();
ping.background(0);
shader(gradientShader);
gradientShader.set("beginColor", 1.0f, 1.0f, 1.0f);
gradientShader.set("endColor", 0.0f, 0.15f, 0.35f);
image(new PImage(width, height), 0, 0);
resetShader();
ping.endDraw();
//copy to background texture
background.copy(ping, 0, 0, width, height, 0, 0, width, height);
//draw geometry
ping.beginDraw();
ping.hint(DISABLE_DEPTH_TEST);
ping.image(background, 0, 0);
ping.hint(ENABLE_DEPTH_TEST);
//draw all your geometry here
ping.endDraw();
//copy to geometry texture
geomTex.copy(ping, 0, 0, width, height, 0, 0, width, height);
//blur
pong.beginDraw();
shader(blurShader[0]);
blurShader[0].set("sceneTexture", ping);
image(new PImage(width, height), 0, 0);
resetShader();
pong.endDraw();
ping.beginDraw();
shader(blurShader[1]);
blurShader[1].set("sceneTexture", pong);
image(new PImage(width, height), 0, 0);
resetShader();
ping.endDraw();
//copy to blur texture
blurTex.copy(ping, 0, 0, width, height, 0, 0, width, height);
//draw depth
ping.beginDraw();
ping.noStroke();
ping.background(254); //don't know why but when i write here 255 i get transparent background and not white :(
//draw all the geometry again, but use fill it with the color corresponding with depth of it
//like this for example
//ping.fill(255 * abs(VERTEX_Z / MAX_DEPTH));
ping.endDraw();
//copy to depth texture
depthTex.copy(ping, 0, 0, width, height, 0, 0, width, height);
//apply dof
ping.beginDraw();
shader(dofShader);
dofShader.set("sceneTexture", geomTex);
dofShader.set("blurTexture", blurTex);
dofShader.set("depthTexture", depthTex);
image(new PImage(width, height), 0, 0);
resetShader();
ping.endDraw();
//copy to geometry texture
geomTex.copy(ping, 0, 0, width, height, 0, 0, width, height);
//draw final scene with color distortion
shader(distShader);
image(geomTex, 0, 0);
resetShader();
//blend scene with noise
blend(noise, 0, 0, width, height, 0, 0, width, height, ADD);
}

And here are my shaders:

http://pastebin.com/pQAsGYW7

http://pastebin.com/vSir7WRk

http://pastebin.com/tFWiLZKy

http://pastebin.com/bQkL0nPr

http://pastebin.com/2qyxKeKm

sableRaph

Re: Re: ThNdl shader tutorial in Processing / Get started with GLSL

9 months ago

The simplest: https://www.dropbox.com/home

If it's just text and you don't need version tracking: http://pastebin.com/

If you have a little time to learn (you'll have to at some point anyway): https://github.com/

sableRaph

Re: Re: ThNdl shader tutorial in Processing / Get started with GLSL

9 months ago

I tried to compile your code but I get the following error:

This is the sketch: https://www.dropbox.com/s/w2lobpc7epwnkpp/daviidv_triangles.zip

I assume you are using 2.0b7.

Edit: Maybe it comes from the OpenGL support on my MBP. What is your configuration?

daviidv

Re: ThNdl shader tutorial in Processing / Get started with GLSL

9 months ago

Yes I use 2.0b7 and my notebook config is gtx660m and core i5.

I also guess it's something with your drivers or so, but i think this could solve it:

open the gradient shader and edit the line with clamp() function, so that all the values are floats (so 1 -> 1.0f and so on). I am not on my pc at the moment so i will answer slower.

sableRaph

Re: Re: ThNdl shader tutorial in Processing / Get started with GLSL

9 months ago

Thank you for your answer. It did the trick. However, I'm now faced with another error:

My configuration: Early 2011 MacBook Pro with AMD Radeon HD 6750M
It should support OpenGL up to 3.2 and a subset of 3.3...

daviidv

Re: ThNdl shader tutorial in Processing / Get started with GLSL

9 months ago

I did a few quick edits to the shaders, so download them again and I hope they'll work now. It has something to do with the GPU definitely, maybe because you have AMD.

EDIT:

I tested the sketch you posted and it works on my pc.

sableRaph

Re: Re: ThNdl shader tutorial in Processing / Get started with GLSL

9 months ago

Still no go here:

I have to change my laptop soon. I hope the NVIDIA GeForce GT 650M in the latest MBP are more up do date.

Open question: is it a hardware or an OS limitation? What if I installed a Linux double boot on a MBP? Would I be able to unlock OpenGL4 functionality?

joseph

Re: Re: ThNdl shader tutorial in Processing / Get started with GLSL

8 months ago

Hi guys! Any updates on daviidv's triangles? Were you guys able to fix the error? If yes, can you guys share your code? :)

Thanks,
Seph

billhsu

Re: ThNdl shader tutorial in Processing / Get started with GLSL

9 months ago

First, thanks for all the great examples and notes!

I started playing with some of the examples from thndl, using Raphael's Processing port from https://github.com/SableRaf/glsltutoP5 . I understand that for convenience, the PShader object is reloaded, initialized and set in draw().

As per the comments in the sketch, I tried having the loadShader(), set() and shader() calls in setup(), and removing them from draw(). I start all the drawing code in draw() with a shader(myShader) call, and end with a resetShader() call. The examples still run ok, but I keep getting the error message

Your shader cannot be used to render textured geometry, using default shader instead.

Should I be worried? Will this be a problem later?

I'm running Processing 2.0b7 on Mac 10.6.8, in case it matters.

Thanks,

Bill

sableRaph

Re: Re: ThNdl shader tutorial in Processing / Get started with GLSL

9 months ago

If Andres still reads this thread, he will probably be able to answer. Sorry I can't be more helpful.

andres

Re: Re: ThNdl shader tutorial in Processing / Get started with GLSL

8 months ago

" Your shader cannot be used to render textured geometry, using default shader instead" is warning you that you called shader() with a shader that is not capable of handling textured geometry, but you are now trying to render some kind of textured mapped shapes (note that text is drawn by P2D/P3D as textured quads, so writing some text after applying a shader effect that doesn't deal with textures could trigger this message).

sableRaph

Re: ThNdl shader tutorial in Processing / Get started with GLSL

8 months ago

@ smayol: I just changed my MacBook Pro and went from AMD to Nvidia (and from Lion to Mountain Lion) but the shaders still won't run. I suspect this is linked to Mac OS X's lack of proper OpenGL 4 (and to, some extent, 3) support. You might try to run it on Linux from a thumb drive and see what happens. I'll probably get to that when I find the time. Keep us posted if you find a way to make it work.

joseph

Re: Re: ThNdl shader tutorial in Processing / Get started with GLSL

8 months ago

@sableRaph aLing's post and video really got me interested. Do you happen to know how he attached the shader to his Processing particles? Or was that all in shader?

sableRaph

Re: ThNdl shader tutorial in Processing / Get started with GLSL

7 months ago

@smayol: The answer is in this line from the shader file:

uniform vec2 pos[125]; // Array to pass position of particles.

Then you just need to pass the array of vec2 to the uniform using shaderName.set("pos", particlePositionsArray);

I'm not exactly sure how you create an array of vec2 in a Processing sketch though.

sableRaph

Re: ThNdl shader tutorial in Processing / Get started with GLSL

7 months ago

Note : With the release of 2.0b8, the shader API in Processing is now finalized.
A detailled list of the changes can be found here : https://github.com/processing/processing/issues/13

sableRaph

Re: ThNdl shader tutorial in Processing / Get started with GLSL

7 months ago

The future PShader tutorial is available for review:

https://raw.github.com/processing/processing-web/master/content/static/tutorials/pshader/index.html

Just download the html file and open in your browser again. It will miss the images but you'll already have a good idea of the thing.

khanasahib

Re: ThNdl shader tutorial in Processing / Get started with GLSL

7 months ago

sorry i m not interested...

potter3366

Re: ThNdl shader tutorial in Processing / Get started with GLSL

7 months ago

Another GLSL water shader example from http://www.iquilezles.org/apps/shadertoy/ :

processing-2.0b8

PImage tex, frame;
PShader water;
void setup() {
size(1280, 720, P2D);
textureWrap(REPEAT);
tex = loadImage("tex2.jpg");
frame = loadImage("frame.png");
water = loadShader("water.glsl");
water.set("resolution", float(width), float(height));
}
void draw() {
water.set("time", millis() / 3500.0);
shader(water);
image(tex, 0, 0, width, height);
resetShader();
image(frame, 0, 0, width, height);
}

#ifdef GL_ES
precision highp float;
#endif
#define PROCESSING_TEXTURE_SHADER
uniform sampler2D tex0;
uniform float time;
uniform vec2 resolution;
const float PI = 3.1415926535897932;
//speed
const float speed = 0.2;
const float speed_x = 0.3;
const float speed_y = 0.3;
// geometry
const float intensity = 3.;
const int steps = 8;
const float frequency = 4.0;
const int angle = 7; // better when a prime
// reflection and emboss
const float delta = 20.;
const float intence = 400.;
const float emboss = 0.3;
//---------- crystals effect
float col(vec2 coord)
{
float delta_theta = 2.0 * PI / float(angle);
float col = 0.0;
float theta = 0.0;
for (int i = 0; i < steps; i++)
{
vec2 adjc = coord;
theta = delta_theta*float(i);
adjc.x += cos(theta)*time*speed + time * speed_x;
adjc.y -= sin(theta)*time*speed - time * speed_y;
col = col + cos( (adjc.x*cos(theta) - adjc.y*sin(theta))*frequency)*intensity;
}
return cos(col);
}
//---------- main
void main(void)
{
vec2 p = (gl_FragCoord.xy) / resolution.xy, c1 = p, c2 = p;
float cc1 = col(c1);
c2.x += resolution.x/delta;
float dx = emboss*(cc1-col(c2))/delta;
c2.x = p.x;
c2.y += resolution.y/delta;
float dy = emboss*(cc1-col(c2))/delta;
c1.x += dx;
c1.y = -(c1.y+dy);
float alpha = 1.+dot(dx,dy)*intence;
gl_FragColor = texture2D(tex0,c1)*(alpha);
}

tex2.jpg

frame.png

There is also Water ripples algorithm (GLSL shader implementation by Patricio Gonzalez Vivo):

http://www.patriciogonzalezvivo.com/blog/?p=657

sableRaph

Re: ThNdl shader tutorial in Processing / Get started with GLSL

7 months ago

Thanks Potter,
Examples like this one are really helpful!

Best,

Raphaël

sableRaph

Re: ThNdl shader tutorial in Processing / Get started with GLSL

6 months ago

Hello everyone,

Andrew mentioned the new version of Shadertoy in his latest blog post. You should really check it out.

I tried porting some of these shaders and it turns out it's actually pretty easy. The sketches are available on Github.

This is the code you have to add to the Shadertoy shaders to make them Processing compatible (it probably won't work out of the box with all of them though).

#ifdef GL_ES
precision highp float;
#endif
// Type of shader expected by Processing
#define PROCESSING_COLOR_SHADER
// Processing specific input
uniform float time;
uniform vec2 resolution;
uniform vec2 mouse;
// Layer between Processing and Shadertoy uniforms
vec3 iResolution = vec3(resolution,0.0);
float iGlobalTime = time;
vec4 iMouse = vec4(mouse,0.0,0.0); // zw would normally be the click status

A trouble I have is that some of the shaders seam to run much smoother in WebGL than they do in Processing. For example, this cloud shader. Did I miss something?

Edit: answered by Andres here.

Top Reply

Replies(42)

Statistics

Tags

Actions

Related Posts