Using GLSL shaders

Core Library Questions

florentd

in Core Library Questions • 1 year ago

Hello,

I'm trying to use one of the shaders found on this great site (this one -> http://glsl.heroku.com/e#3265.2 ), with the last version of processing.

Here is my code:

PShader space;
boolean customShader;
public void setup() {
size(400, 400, P3D);
noStroke();
fill(204);
toon = loadShader(PShader.LIT, "SpaceFrag.glsl", "SpaceVert.glsl");
shader(space);
customShader = true;
}
public void draw() {
noStroke();
background(0);
float dirY = (mouseY / float(height) - 0.5) * 2;
float dirX = (mouseX / float(width) - 0.5) * 2;
directionalLight(204, 204, 204, -dirX, -dirY, -1);
translate(width/2, height/2);
box(80);
}
public void mousePressed() {
if (dist(mouseX, mouseY, width/2, height/2) < 80) {
if (customShader) {
resetShader(PShader.LIT);
customShader = false;
}
else {
shader(space);
customShader = true;
}
}
}

and here is the code of the shader:

#ifdef GL_ES
precision mediump float;
#endif
uniform float time;
uniform vec2 resolution;
// NEBULA - CoffeeBreakStudios.com (CBS)
// Work in progress...
//
// 3148.26: Switched from classic to simplex noise
// 3148.27: Reduced number of stars
// 3249.0: Switched to fast computed 3D noise. Less quality but ~ 2x faster
// 3249.5: Removed use of random number generator to gain performance
// 3265.0: Added rotation: glsl.heroku.com/e#3005.1
//Utility functions
vec3 fade(vec3 t) {
return vec3(1.0,1.0,1.0);//t*t*t*(t*(t*6.0-15.0)+10.0);
}
vec2 rotate(vec2 point, float rads) {
float cs = cos(rads);
float sn = sin(rads);
return point * mat2(cs, -sn, sn, cs);
}
vec4 randomizer4(const vec4 x)
{
vec4 z = mod(x, vec4(5612.0));
z = mod(z, vec4(3.1415927 * 2.0));
return(fract(cos(z) * vec4(56812.5453)));
}
// Fast computed noise
// http://www.gamedev.net/topic/502913-fast-computed-noise/
const float A = 1.0;
const float B = 57.0;
const float C = 113.0;
const vec3 ABC = vec3(A, B, C);
const vec4 A3 = vec4(0, B, C, C+B);
const vec4 A4 = vec4(A, A+B, C+A, C+A+B);
float cnoise4(const in vec3 xx)
{
vec3 x = mod(xx + 32768.0, 65536.0);
vec3 ix = floor(x);
vec3 fx = fract(x);
vec3 wx = fx*fx*(3.0-2.0*fx);
float nn = dot(ix, ABC);
vec4 N1 = nn + A3;
vec4 N2 = nn + A4;
vec4 R1 = randomizer4(N1);
vec4 R2 = randomizer4(N2);
vec4 R = mix(R1, R2, wx.x);
float re = mix(mix(R.x, R.y, wx.y), mix(R.z, R.w, wx.y), wx.z);
return 1.0 - 2.0 * re;
}
float surface3 ( vec3 coord, float frequency ) {
float n = 0.0;
n += 1.0 * abs( cnoise4( coord * frequency ) );
n += 0.5 * abs( cnoise4( coord * frequency * 2.0 ) );
n += 0.25 * abs( cnoise4( coord * frequency * 4.0 ) );
n += 0.125 * abs( cnoise4( coord * frequency * 8.0 ) );
n += 0.0625 * abs( cnoise4( coord * frequency * 16.0 ) );
return n;
}
void main( void ) {
float rads = radians(time*3.15);
vec2 position = gl_FragCoord.xy / resolution.xy;
position += rotate(position, rads);
float n = surface3(vec3(position*sin(time*0.1), time * 0.05)*mat3(1,0,0,0,.8,.6,0,-.6,.8),0.9);
float n2 = surface3(vec3(position*cos(time*0.1), time * 0.04)*mat3(1,0,0,0,.8,.6,0,-.6,.8),0.8);
float lum = length(n);
float lum2 = length(n2);
vec3 tc = pow(vec3(1.0-lum),vec3(sin(position.x)+cos(time)+4.0,8.0+sin(time)+4.0,8.0));
vec3 tc2 = pow(vec3(1.1-lum2),vec3(5.0,position.y+cos(time)+7.0,sin(position.x)+sin(time)+2.0));
vec3 curr_color = (tc*0.8) + (tc2*0.5);
//Let's draw some stars
float scale = sin(0.3 * time) + 5.0;
vec2 position2 = (((gl_FragCoord.xy / resolution) - 0.5) * scale);
float gradient = 0.0;
vec3 color = vec3(0.0);
float fade = 0.0;
float z = 0.0;
vec2 centered_coord = position2 - vec2(sin(time*0.1),sin(time*0.1));
centered_coord = rotate(centered_coord, rads);
for (float i=1.0; i<=60.0; i++)
{
vec2 star_pos = vec2(sin(i) * 250.0, sin(i*i*i) * 250.0);
float z = mod(i*i - 10.0*time, 256.0);
float fade = (256.0 - z) /256.0;
vec2 blob_coord = star_pos / z;
gradient += ((fade / 384.0) / pow(length(centered_coord - blob_coord), 1.5)) * ( fade);
}
curr_color += gradient;
gl_FragColor = vec4(curr_color, 1.0);
}

Currently, I just have a black screen. Does anyone has an idea ?

Replies(6)

andres

Hello, I think that many of the shaders posted in the GLSL sandbox, including this one in particular, implement the rendering using a technique called "ray marching" in which there is actually no vertex sent from the application, everything is generated by raytracing from each pixel position on the screen. All you need to trigger the rendering through all the pixels is to draw a simple rectangle covering the entire screen. The shader type would be FLAT, since there are no lights nor texturing involved (also note that you don't even need to use P3D, P2D will work as well):

PShader nebula;
void setup() {
size(512, 384, P2D);
nebula = loadShader(PShader.FLAT, "nebula.glsl");
nebula.set("resolution", float(width), float(height));
shader(nebula);
}
void draw() {
nebula.set("time", millis() / 1000.0);
// The rect is needed to make the fragment shader go through every pixel of
// the screen, but is not used for anything else since the rendering is entirely
// generated by the shader.
noStroke();
fill(0);
rect(0, 0, width, height);
}

The code for nebula.glsl is the same you posted above. Let me know if it works.

florentd

Re: Using GLSL shaders

1 year ago

Wow !

It work perfectly. (even if it's a bit slow, I think it need some optimization).

Thank you Andres for your quick response (and for your work !)

andres

Re: Using GLSL shaders

1 year ago

Hi, yes I also noticed this shader running slower than on the GLSL sandbox. I think there shouldn't be much difference in performance, since most of the computation takes place on the GPU... unless there is something else I'm overlooking in the the shader code in Processing.

Anyways, if you disable smoothing in your sketch, does it run faster?

andres

Re: Using GLSL shaders

1 year ago

Actually, I think that GLSL sandbox is not running these shaders at full screen resolution, but a lower resolution and then scaling the output up to cover the whole browser window. In fact, these ray marching algorithms are probably quite heavy on the GPU since they generate the entire scene on the fragment shader, with performance scaling quadratically on the resolution I believe.

You can also adopt a similar strategy by using an offscreen PGraphics object with a smaller size, and then drawing it with the image() function so it covers the entire Processing output.

florentd

Re: Using GLSL shaders

1 year ago

It seems than in recent versions of Processing, we can't disable Open GL smoothing, am I right ?

Anyway, I tried the downscale/ upscale trick, and it work nice. Here is the code if people are interested:

PShader nebula;
PGraphics pg;
void setup() {
size(1024, 768, P3D);
pg = createGraphics(256, 196, P3D);
nebula = loadShader(PShader.FLAT, "nebula.glsl");
nebula.set("resolution", float(256), float(196));
pg.shader(nebula);
}
void draw() {
nebula.set("time", millis() / 1000.0);
// The rect is needed to make the fragment shader go through every pixel of
// the screen, but is not used for anything else since the rendering is entirely
// generated by the shader.
pg.beginDraw();
pg.noStroke();
pg.fill(0);
pg.rect(0, 0, 256, 196);
pg.endDraw();
image(pg, 0, 0, 1024, 768);
println (frameRate);
}

Thanks again !

jordirosa

Re: Using GLSL shaders

4 months ago

Hi all!

thanks for your examples and explanations!

The source code above doesn't work anymore with Processing 2.0, as the PShader specifications have changed a bit (for instance, PShader.FLAT doesn't exist anymore).

I've corrected it in order to work in version 2.0, this should be the new code:

PShader nebula;
PGraphics pg;
void setup() {
size(1024, 768, P3D);
pg = createGraphics(256, 196, P3D);
nebula = loadShader("nebula.glsl");
nebula.set("resolution", float(256), float(196));
pg.shader(nebula);
}
void draw() {
nebula.set("time", millis() / 1000.0);
// The rect is needed to make the fragment shader go through every pixel of
// the screen, but is not used for anything else since the rendering is entirely
// generated by the shader.
pg.beginDraw();
pg.noStroke();
pg.fill(0);
pg.rect(0, 0, 256, 196);
pg.endDraw();
image(pg, 0, 0, 1024, 768);
println (frameRate);
}

and also the nebula.glsl file should be updated by adding the corresponding #define command:

#ifdef GL_ES
precision mediump float;
#endif
#define PROCESSING_COLOR_SHADER
uniform float time;
uniform vec2 resolution;
// NEBULA - CoffeeBreakStudios.com (CBS)
// Work in progress...
//
// 3148.26: Switched from classic to simplex noise
// 3148.27: Reduced number of stars
// 3249.0: Switched to fast computed 3D noise. Less quality but ~ 2x faster
// 3249.5: Removed use of random number generator to gain performance
// 3265.0: Added rotation: glsl.heroku.com/e#3005.1
//Utility functions
vec3 fade(vec3 t) {
return vec3(1.0,1.0,1.0);//t*t*t*(t*(t*6.0-15.0)+10.0);
}
vec2 rotate(vec2 point, float rads) {
float cs = cos(rads);
float sn = sin(rads);
return point * mat2(cs, -sn, sn, cs);
}
vec4 randomizer4(const vec4 x)
{
vec4 z = mod(x, vec4(5612.0));
z = mod(z, vec4(3.1415927 * 2.0));
return(fract(cos(z) * vec4(56812.5453)));
}
// Fast computed noise
// http://www.gamedev.net/topic/502913-fast-computed-noise/
const float A = 1.0;
const float B = 57.0;
const float C = 113.0;
const vec3 ABC = vec3(A, B, C);
const vec4 A3 = vec4(0, B, C, C+B);
const vec4 A4 = vec4(A, A+B, C+A, C+A+B);
float cnoise4(const in vec3 xx)
{
vec3 x = mod(xx + 32768.0, 65536.0);
vec3 ix = floor(x);
vec3 fx = fract(x);
vec3 wx = fx*fx*(3.0-2.0*fx);
float nn = dot(ix, ABC);
vec4 N1 = nn + A3;
vec4 N2 = nn + A4;
vec4 R1 = randomizer4(N1);
vec4 R2 = randomizer4(N2);
vec4 R = mix(R1, R2, wx.x);
float re = mix(mix(R.x, R.y, wx.y), mix(R.z, R.w, wx.y), wx.z);
return 1.0 - 2.0 * re;
}
float surface3 ( vec3 coord, float frequency ) {
float n = 0.0;
n += 1.0 * abs( cnoise4( coord * frequency ) );
n += 0.5 * abs( cnoise4( coord * frequency * 2.0 ) );
n += 0.25 * abs( cnoise4( coord * frequency * 4.0 ) );
n += 0.125 * abs( cnoise4( coord * frequency * 8.0 ) );
n += 0.0625 * abs( cnoise4( coord * frequency * 16.0 ) );
return n;
}
void main( void ) {
float rads = radians(time*3.15);
vec2 position = gl_FragCoord.xy / resolution.xy;
position += rotate(position, rads);
float n = surface3(vec3(position*sin(time*0.1), time * 0.05)*mat3(1,0,0,0,.8,.6,0,-.6,.8),0.9);
float n2 = surface3(vec3(position*cos(time*0.1), time * 0.04)*mat3(1,0,0,0,.8,.6,0,-.6,.8),0.8);
float lum = length(n);
float lum2 = length(n2);
vec3 tc = pow(vec3(1.0-lum),vec3(sin(position.x)+cos(time)+4.0,8.0+sin(time)+4.0,8.0));
vec3 tc2 = pow(vec3(1.1-lum2),vec3(5.0,position.y+cos(time)+7.0,sin(position.x)+sin(time)+2.0));
vec3 curr_color = (tc*0.8) + (tc2*0.5);
//Let's draw some stars
float scale = sin(0.3 * time) + 5.0;
vec2 position2 = (((gl_FragCoord.xy / resolution) - 0.5) * scale);
float gradient = 0.0;
vec3 color = vec3(0.0);
float fade = 0.0;
float z = 0.0;
vec2 centered_coord = position2 - vec2(sin(time*0.1),sin(time*0.1));
centered_coord = rotate(centered_coord, rads);
for (float i=1.0; i<=60.0; i++)
{
vec2 star_pos = vec2(sin(i) * 250.0, sin(i*i*i) * 250.0);
float z = mod(i*i - 10.0*time, 256.0);
float fade = (256.0 - z) /256.0;
vec2 blob_coord = star_pos / z;
gradient += ((fade / 384.0) / pow(length(centered_coord - blob_coord), 1.5)) * ( fade);
}
curr_color += gradient;
gl_FragColor = vec4(curr_color, 1.0);
}

Top Reply