I would like to display thousands of points on a 3D canvas with a Depth of Field effect. More specifically, I would like to use a z-buffer (depth buffering) to adjust the level of blur of a point based on its distance from the camera.

So far, I could come up with the following point shader:

pointfrag.glsl

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

varying vec4 vertColor;
uniform float maxDepth;

void main() {

  float depth = gl_FragCoord.z / gl_FragCoord.w;
  gl_FragColor = vec4(vec3(vertColor - depth/maxDepth), 1) ;

}

pointvert.glsl

uniform mat4 projection;
uniform mat4 modelview;

attribute vec4 position;
attribute vec4 color;
attribute vec2 offset;


varying vec4 vertColor;
varying vec4 vertTexCoord;

void main() {
  vec4 pos = modelview * position;
  vec4 clip = projection * pos;

  gl_Position = clip + projection * vec4(offset, 0, 0);

  vertColor = color;
}

I also have a blur shader (originally from the PostFX library):

blurfrag.glsl

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif


#define PROCESSING_TEXTURE_SHADER

uniform sampler2D texture;

// The inverse of the texture dimensions along X and Y
uniform vec2 texOffset;

varying vec4 vertColor;
varying vec4 vertTexCoord;

uniform int blurSize;       
uniform int horizontalPass; // 0 or 1 to indicate vertical or horizontal pass
uniform float sigma;        // The sigma value for the gaussian function: higher value means more blur
                            // A good value for 9x9 is around 3 to 5
                            // A good value for 7x7 is around 2.5 to 4
                            // A good value for 5x5 is around 2 to 3.5
                            // ... play around with this based on what you need <span class="Emoticon Emoticon1"><span>:)</span></span>

const float pi = 3.14159265;

void main() {  
  float numBlurPixelsPerSide = float(blurSize / 2); 

  vec2 blurMultiplyVec = 0 < horizontalPass ? vec2(1.0, 0.0) : vec2(0.0, 1.0);

  // Incremental Gaussian Coefficent Calculation (See GPU Gems 3 pp. 877 - 889)
  vec3 incrementalGaussian;
  incrementalGaussian.x = 1.0 / (sqrt(2.0 * pi) * sigma);
  incrementalGaussian.y = exp(-0.5 / (sigma * sigma));
  incrementalGaussian.z = incrementalGaussian.y * incrementalGaussian.y;

  vec4 avgValue = vec4(0.0, 0.0, 0.0, 0.0);
  float coefficientSum = 0.0;

  // Take the central sample first...
  avgValue += texture2D(texture, vertTexCoord.st) * incrementalGaussian.x;
  coefficientSum += incrementalGaussian.x;
  incrementalGaussian.xy *= incrementalGaussian.yz;

  // Go through the remaining 8 vertical samples (4 on each side of the center)
  for (float i = 1.0; i <= numBlurPixelsPerSide; i++) { 
    avgValue += texture2D(texture, vertTexCoord.st - i * texOffset * 
                          blurMultiplyVec) * incrementalGaussian.x;         
    avgValue += texture2D(texture, vertTexCoord.st + i * texOffset * 
                          blurMultiplyVec) * incrementalGaussian.x;         
    coefficientSum += 2.0 * incrementalGaussian.x;
    incrementalGaussian.xy *= incrementalGaussian.yz;
  }

  gl_FragColor = (avgValue / coefficientSum);
}

Question:

• How can I combine the blur fragment shader with the point fragment shader ?

Ideally I'd like to have one single fragment shader that computes the level of blur based on the z-coordinate of a point. Is that even possible ?

@noahbuddy @kosowski I would be really grateful if you could help me.

An example sketch displaying points using the pointfrag.glsl and pointvert.glsl shaders above:

sketch.pde

import peasy.*;
import peasy.org.apache.commons.math.*;
import peasy.org.apache.commons.math.geometry.*;

PeasyCam cam;
PShader pointShader;
PShape shp;
ArrayList<PVector> vectors = new ArrayList<PVector>();

void setup() {
  size(900, 900, P3D);
  frameRate(1000);
  smooth(8);

  cam = new PeasyCam(this, 500);
  cam.setMaximumDistance(width);
  perspective(60 * DEG_TO_RAD, width/float(height), 2, 6000);

  double d = cam.getDistance()*3;

  pointShader = loadShader("pointfrag.glsl", "pointvert.glsl");
  pointShader.set("maxDepth", (float) d);


  for (int i = 0; i < 5000; i++) {
    vectors.add(new PVector(random(width), random(width), random(width)));
  }

  shader(pointShader, POINTS);
  strokeWeight(2);
  stroke(255);

  shp = createShape();
  shp.beginShape(POINTS);
  shp.translate(-width/2, -width/2, -width/2);  
  for (PVector v: vectors) {
    shp.vertex(v.x, v.y, v.z);
  }
  shp.endShape();

}

void draw(){
  background(0);
  shape(shp, 0, 0);

  cam.rotateY(.0001);
  cam.rotateX(.00005);

  println(frameRate);
}

https://i.imgur.com/mf5dVRn.mp4

Please show me the code, where you applied the bloom effect, with push and pop of the matrix stack.

I'm not sure to understand, the code is right above your comment. Maybe you're refering to the first script (which is basically the same but without an off-screen graphics buffer)

And by the way, if you are using peasycam, you have to do the post processing in the HUD state (beginHUD, endHUD).

It did solve the problem, thank you very much cansik. Also let me thank you once again for all the work you've put in the PostFX library.

@solub Please show me the code, where you applied the bloom effect, with push and pop of the matrix stack.

And by the way, if you are using peasycam, you have to do the post processing in the HUD state (beginHUD, endHUD).

It maybe makes sense to look at the examples of the libraries first. There is an example with the peasycam in the postfx library, and there is an offscreen rendering example in the peasycam library.

Looking at them should solve all your problems.

Hi @cansik, thank you for your answer.

I first though it was because of the missing pushMatrix/popMatrix as well but pushing the transformation matrix doesn't solve the problem.

When drawing on a canvas:

• I get 2 pictures at 2 different locations
• One with the bloom effect (left), the other (right) without it
• The first one doesn't rotate when moving the camera, the second do
• The 3D disappears on both pictures (flattened 3D delaunay)

sketch.pyde

add_library('peasycam')
add_library('triangulate')
add_library('PostFX')
from java.util import ArrayList

step, threshold = 5, 100
liste = ArrayList()

def setup():
    global img, triangles, fx, canvas
    size(1800, 1000, P3D)
    smooth(8)

    fx = PostFX(this)
    cam = PeasyCam(this, 1600)
    sobel = loadShader('sobelFrag.glsl')
    img = loadImage("test75.jpg")

    canvas = createGraphics(width, height, P3D)

    pg = createGraphics(img.width, img.height, P2D)
    pg.beginDraw()
    pg.image(img, 0, 0)
    pg.filter(GRAY)
    pg.filter(sobel)
    pg.loadPixels()
    for x in range(0, pg.width, step):
        for y in range(0, pg.height, step):
            i = x + y * pg.width
            col = img.pixels[i]
            b = pg.pixels[i] & 0xFF
            if b > threshold:
                liste.add(PVector(x, y , brightness(col) * .5))

    for e in range(0, pg.width, int(pg.width/20)):
        liste.add(PVector(e, 0, 0))
        liste.add(PVector(e, pg.height, 0))
    for e in range(0, pg.height, int(pg.height/20)):
        liste.add(PVector(0, e, 0))
        liste.add(PVector(pg.width, e, 0))

    pg.endDraw()
    triangles = Triangulate.triangulate(liste)


def draw():
    background(0)

    canvas.pushMatrix()
    canvas.translate(-img.width/2, -img.height/2)
    canvas.beginDraw()
    canvas.beginShape(TRIANGLES)
    canvas.noStroke()
    for t in triangles:
        x = int((t.p1.x + t.p2.x + t.p3.x) / 3)
        y = int((t.p1.y + t.p2.y + t.p3.y) / 3)
        i = x + y * img.width
        col = img.pixels[i]
        canvas.fill(col)
        canvas.vertex(t.p1.x, t.p1.y, t.p1.z)
        canvas.vertex(t.p2.x, t.p2.y, t.p2.z)
        canvas.vertex(t.p3.x, t.p3.y, t.p3.z)
    canvas.endShape() 
    canvas.endDraw()
    canvas.popMatrix()

    blendMode(BLEND)
    image(canvas,0,0)

    blendMode(SCREEN)

    fx.render(canvas).bloom(0.5, 20, 40).compose()

So, I tried to draw the vertices on a canvas and then applying a bloom effect on this canvas but i still get strange artifacts.

in setup

PostFX fx;
PGraphics canvas;

void setup()
{
  size(500, 500, P2D);

  fx = new PostFX(this);  
  canvas = createGraphics(width, height, P3D);
}

in draw

void draw()
{
  canvas.beginDraw();
  // draw something onto the canvas
  canvas.endDraw();

  blendMode(BLEND);
  image(canvas, 0, 0);

  // add bloom filter
  blendMode(SCREEN);
  fx.render(canvas)
    .brightPass(0.5)
    .blur(20, 50)
    .compose();
}

Maybe @cansik have an idea what could possibly be wrong ?

I have an issue involving the script above so I hope you won't mind me asking a question on this thread again.

I'm trying to add a bloom effect (from the PostFX library...again) to the sketch but for some reason I have 2 canvas being displayed on the screen:

• one at the right location (center) but without the bloom effect

• the other one, smaller, at the bottom right corner with the bloom effect

Do you guys have an idea what I'm doing wrong here ?

add_library('peasycam')
add_library('triangulate')
from java.util import ArrayList

step, threshold = 5, 100
liste = ArrayList()

def setup():
    global img, triangles, fx
    size(1800, 1000, P3D)
    smooth(8)

    cam = PeasyCam(this, 1600)
    sobel = loadShader('sobelFrag.glsl')
    img = loadImage("image_file_name.jpg")
    fx = PostFX(this)

    pg = createGraphics(img.width, img.height, P2D)
    pg.beginDraw()
    pg.image(img, 0, 0)
    pg.filter(GRAY)
    pg.filter(sobel)
    pg.loadPixels()
    for x in range(0, pg.width, step):
        for y in range(0, pg.height, step):
            i = x + y * pg.width
            col = img.pixels[i]
            b = pg.pixels[i] & 0xFF
            if b > threshold:
                liste.add(PVector(x, y , brightness(col) * .5))

    for e in range(0, pg.width, int(pg.width/20)):
        liste.add(PVector(e, 0, 0))
        liste.add(PVector(e, pg.height, 0))
    for e in range(0, pg.height, int(pg.height/20)):
        liste.add(PVector(0, e, 0))
        liste.add(PVector(pg.width, e, 0))

    pg.endDraw()
    triangles = Triangulate.triangulate(liste)

    beginShape(TRIANGLES)
    noStroke()

def draw():
    background(0)

    translate(-img.width/2, -img.height/2)
    for t in triangles:
        x = int((t.p1.x + t.p2.x + t.p3.x) / 3)
        y = int((t.p1.y + t.p2.y + t.p3.y) / 3)
        i = x + y * img.width
        col = img.pixels[i]
        fill(col)
        vertex(t.p1.x, t.p1.y, t.p1.z)
        vertex(t.p2.x, t.p2.y, t.p2.z)
        vertex(t.p3.x, t.p3.y, t.p3.z)
    endShape() 

    fx.render().bloom(0.5, 20, 40).compose()

To run the script you'll need Peasycam and Triangulate libraries (download) + the sobel fragment shader below from the PostFx library (only needed for edge detection). I first had my own sobel operator to detect the edges but found that @cansik's shader implementation was much more accurate and efficient.

Also please note that this sketch is in Python.

sobelFrag.glsl

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

#define PROCESSING_TEXTURE_SHADER

uniform sampler2D texture;

varying vec4 vertColor;
varying vec4 vertTexCoord;

uniform vec2 resolution;

void main(void) {
  float x = 1.0 / resolution.x;
  float y = 1.0 / resolution.y;
  vec4 horizEdge = vec4( 0.0 );
  horizEdge -= texture2D( texture, vec2( vertTexCoord.x - x, vertTexCoord.y - y ) ) * 1.0;
  horizEdge -= texture2D( texture, vec2( vertTexCoord.x - x, vertTexCoord.y     ) ) * 2.0;
  horizEdge -= texture2D( texture, vec2( vertTexCoord.x - x, vertTexCoord.y + y ) ) * 1.0;
  horizEdge += texture2D( texture, vec2( vertTexCoord.x + x, vertTexCoord.y - y ) ) * 1.0;
  horizEdge += texture2D( texture, vec2( vertTexCoord.x + x, vertTexCoord.y     ) ) * 2.0;
  horizEdge += texture2D( texture, vec2( vertTexCoord.x + x, vertTexCoord.y + y ) ) * 1.0;
  vec4 vertEdge = vec4( 0.0 );
  vertEdge -= texture2D( texture, vec2( vertTexCoord.x - x, vertTexCoord.y - y ) ) * 1.0;
  vertEdge -= texture2D( texture, vec2( vertTexCoord.x    , vertTexCoord.y - y ) ) * 2.0;
  vertEdge -= texture2D( texture, vec2( vertTexCoord.x + x, vertTexCoord.y - y ) ) * 1.0;
  vertEdge += texture2D( texture, vec2( vertTexCoord.x - x, vertTexCoord.y + y ) ) * 1.0;
  vertEdge += texture2D( texture, vec2( vertTexCoord.x    , vertTexCoord.y + y ) ) * 2.0;
  vertEdge += texture2D( texture, vec2( vertTexCoord.x + x, vertTexCoord.y + y ) ) * 1.0;
  vec3 edge = sqrt((horizEdge.rgb * horizEdge.rgb) + (vertEdge.rgb * vertEdge.rgb));

  gl_FragColor = vec4(edge, texture2D(texture, vertTexCoord.xy).a);
}

sketch.pyde

add_library('peasycam')
add_library('triangulate')
from java.util import ArrayList

step, threshold = 5, 100
liste = ArrayList()

def setup():
    global img, triangles
    size(1800, 1000, P3D)
    smooth(8)

    cam = PeasyCam(this, 1600)
    sobel = loadShader('sobelFrag.glsl')
    img = loadImage("image_file_name.jpg")

    pg = createGraphics(img.width, img.height, P2D)
    pg.beginDraw()
    pg.image(img, 0, 0)
    pg.filter(GRAY)
    pg.filter(sobel)
    pg.loadPixels()
    for x in range(0, pg.width, step):
        for y in range(0, pg.height, step):
            i = x + y * pg.width
            col = img.pixels[i]
            b = pg.pixels[i] & 0xFF
            if b > threshold:
                liste.add(PVector(x, y , brightness(col) * .5))

    for e in range(0, pg.width, int(pg.width/20)):
        liste.add(PVector(e, 0, 0))
        liste.add(PVector(e, pg.height, 0))
    for e in range(0, pg.height, int(pg.height/20)):
        liste.add(PVector(0, e, 0))
        liste.add(PVector(pg.width, e, 0))

    pg.endDraw()
    triangles = Triangulate.triangulate(liste)

    beginShape(TRIANGLES)
    noStroke()

def draw():
    background(0)

    translate(-img.width/2, -img.height/2)
    for t in triangles:
        x = int((t.p1.x + t.p2.x + t.p3.x) / 3)
        y = int((t.p1.y + t.p2.y + t.p3.y) / 3)
        i = x + y * img.width
        col = img.pixels[i]
        fill(col)
        vertex(t.p1.x, t.p1.y, t.p1.z)
        vertex(t.p2.x, t.p2.y, t.p2.z)
        vertex(t.p3.x, t.p3.y, t.p3.z)
    endShape() 

Cheers !

Hi all,

I'm trying to fake a Depth of Field effect in a 3D scene. More specifically, I would like to use a z-buffer (depth buffering) to adjust the level of blur of a an object based on its distance from the camera. While searching the forum I found the following vertex and fragment shaders provided by @Poersch (from this topic ).

vert.glsl

uniform mat4 transform;

attribute vec4 vertex;
attribute vec4 color;

varying vec4 vertColor;

void main() {
    gl_Position = transform * vertex;
    vertColor = color;
}

frag.glsl

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

uniform vec4 nearColor = vec4(1.0, 1.0, 1.0, 1.0);
uniform vec4 farColor = vec4(0.0, 0.0, 0.0, 1.0);
uniform float near = 0.0;
uniform float far = 100.0;

varying vec4 vertColor;

void main() {
    gl_FragColor = mix(nearColor, farColor, smoothstep(near, far, gl_FragCoord.z / gl_FragCoord.w));
}

You can see the shaders in action with this sketch example:

sketch.pde

PShader depthShader;
float angle = 0.0;


void setup(){

    // Set screen size and renderer
    size(600, 480, P3D);
    noStroke();

    // Load shader
    depthShader = loadShader("frag.glsl", "vert.glsl");
    //depthShader.set("near", 40.0); // Standard: 0.0
    //depthShader.set("far", 60.0); // Standard: 100.0
    //depthShader.set("nearColor", 1.0, 0.0, 0.0, 1.0); // Standard: white
    //depthShader.set("farColor", 0.0, 0.0, 1.0, 1.0); // Standard: black

}


void draw(){

    // Fill background and set camera
    background(#000000);
    camera(0.0, 0.0, 50.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);

    // Bind shader
    shader(depthShader);

    // Calculate angle
    angle += 0.01;

    // Render "sky"-cube
    pushMatrix();
    rotate(angle, 0.0, 1.0, 0.0);
    box(100.0);
    popMatrix();

    // Render cubes
    pushMatrix();
    translate(-30.0, 20.0, -50.0);
    rotate(angle, 1.0, 1.0, 1.0);
    box(25.0);
    popMatrix();
    pushMatrix();
    translate(30.0, -20.0, -50.0);
    rotate(angle, 1.0, 1.0, 1.0);
    box(25.0);
    popMatrix();

    // Render spheres
    pushMatrix();
    translate(-30.0, -20.0, -50.0);
    rotate(angle, 1.0, 1.0, 1.0);
    sphere(20.0);
    popMatrix();
    pushMatrix();
    translate(30.0, 20.0, -50.0);
    rotate(angle, 1.0, 1.0, 1.0);
    sphere(20.0);
    popMatrix();

}

Here, the z-buffer is used to change the color of an object: the closer the lighter, the farther, the darker.

QUESTION

• How can I use the same z-buffer to change the blur level of an object ?

Ideally I would like to use the Gaussian blur shader from the PostFX library:

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif


#define PROCESSING_TEXTURE_SHADER

uniform sampler2D texture;

// The inverse of the texture dimensions along X and Y
uniform vec2 texOffset;

varying vec4 vertColor;
varying vec4 vertTexCoord;


uniform int blurSize;       
uniform int horizontalPass; // 0 or 1 to indicate vertical or horizontal pass
uniform float sigma;        // The sigma value for the gaussian function: higher value means more blur
                            // A good value for 9x9 is around 3 to 5
                            // A good value for 7x7 is around 2.5 to 4
                            // A good value for 5x5 is around 2 to 3.5
                            // ... play around with this based on what you need <span class="Emoticon Emoticon1"><span>:)</span></span>

const float pi = 3.14159265;

void main() {  
  float numBlurPixelsPerSide = float(blurSize / 2); 

  vec2 blurMultiplyVec = 0 < horizontalPass ? vec2(1.0, 0.0) : vec2(0.0, 1.0);

  // Incremental Gaussian Coefficent Calculation (See GPU Gems 3 pp. 877 - 889)
  vec3 incrementalGaussian;
  incrementalGaussian.x = 1.0 / (sqrt(2.0 * pi) * sigma);
  incrementalGaussian.y = exp(-0.5 / (sigma * sigma));
  incrementalGaussian.z = incrementalGaussian.y * incrementalGaussian.y;

  vec4 avgValue = vec4(0.0, 0.0, 0.0, 0.0);
  float coefficientSum = 0.0;

  // Take the central sample first...
  avgValue += texture2D(texture, vertTexCoord.st) * incrementalGaussian.x;
  coefficientSum += incrementalGaussian.x;
  incrementalGaussian.xy *= incrementalGaussian.yz;

  // Go through the remaining 8 vertical samples (4 on each side of the center)
  for (float i = 1.0; i <= numBlurPixelsPerSide; i++) { 
    avgValue += texture2D(texture, vertTexCoord.st - i * texOffset * 
                          blurMultiplyVec) * incrementalGaussian.x;         
    avgValue += texture2D(texture, vertTexCoord.st + i * texOffset * 
                          blurMultiplyVec) * incrementalGaussian.x;         
    coefficientSum += 2.0 * incrementalGaussian.x;
    incrementalGaussian.xy *= incrementalGaussian.yz;
  }

  gl_FragColor = (avgValue / coefficientSum);
}

Unfortunately I can't figure out how to make the two (z-buffer and blur fragment shader) work together. Any hint would be greatly appreciated !

I'm trying to replicate a web design trick known as "gooey effect" (see it live here). It's a technique applying SVG filters on moving ellipses in order to get a blob-like motion. The process is rather simple:

• apply a gaussian blur
• increase the contrast of the alpha channel only

The combination of the two creates a blob effect

The last step (increasing the alpha channel contrast) is usually done through a "color matrix filter".

A color matrix is composed of 5 columns (RGBA + offset) and 4 rows.

The values in the first four columns are multiplied with the source red, green, blue, and alpha values respectively. The fifth column value is added (offset).

In CSS, increasing the alpha channel contrast is as simple as calling a SVG filter and specifying the contrast value (here 18):

<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />

In Processing though, it seems to be a bit more complicated. I believe (I may be wrong) the only way to apply a color matrix filter is to create one in a shader. After a few tries I came up with these (very basic) vertex and fragment shaders for color rendering:

colorvert.glsl

uniform mat4 transform;
attribute vec4 position;
attribute vec4 color;
varying vec4 vertColor;

uniform vec4 o=vec4(0, 0, 0, -9); 
uniform lowp mat4 colorMatrix = mat4(1.0, 0.0, 0.0, 0.0, 
                                     0.0, 1.0, 0.0, 0.0, 
                                     0.0, 0.0, 1.0, 0.0, 
                                     0.0, 0.0, 0.0, 60.0);


void main() {
  gl_Position = transform * position; 
  vertColor = (color * colorMatrix) + o  ;
}

colorfrag.glsl

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

varying vec4 vertColor;

void main() {
  gl_FragColor = vertColor;
}

PROBLEM:

The color matrix is partially working: changing the RGB values do affect the colors but changing the alpha values don't !

When trying to combine the shader with a Gaussian filter, the drawn ellipse stays blurry even after I set the alpha channel contrast to 60 (like in the codepen example):

PShader colmat;

void setup() {
  size(200, 200, P2D);
  colmat = loadShader("colorfrag.glsl", "colorvert.glsl");
}

void draw() {
  background(100);
  shader(colmat);

  noStroke();
  fill(255, 30, 30);
  ellipse(width/2, height/2, 40, 40);
  filter(BLUR,6);
}

The same thing happens when I implement the color matrix within @cansik 's Gaussian blur shader (from the PostFX library). I can see the colors changing but not the alpha contrast:

blurFrag.glsl

/ Adapted from:
// <a href="http://callumhay.blogspot.com/2010/09/gaussian-blur-shader-glsl.html" target="_blank" rel="nofollow">http://callumhay.blogspot.com/2010/09/gaussian-blur-shader-glsl.html</a>;

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

#define PROCESSING_TEXTURE_SHADER


uniform sampler2D texture;

uniform vec4 o=vec4(0, 0, 0, 0); 
uniform lowp mat4 colorMatrix = mat4(1, 0.0, 0.0, 0.0, 
                                     0.0, 1, 0.0, 0.0, 
                                     0.0, 0.0, 1, 0.0, 
                                     0, 0.0, 0.0, 60.0); //Alpha contrast set to 60


varying vec2 center;

// The inverse of the texture dimensions along X and Y
uniform vec2 texOffset;

varying vec4 vertColor;
varying vec4 vertTexCoord;

uniform int blurSize;       
uniform int horizontalPass; // 0 or 1 to indicate vertical or horizontal pass
uniform float sigma;        // The sigma value for the gaussian function: higher value means more blur
                            // A good value for 9x9 is around 3 to 5
                            // A good value for 7x7 is around 2.5 to 4
                            // A good value for 5x5 is around 2 to 3.5
                            // ... play around with this based on what you need <span class="Emoticon Emoticon1"><span>:)</span></span>

const float pi = 3.14159265;

void main() {  
  float numBlurPixelsPerSide = float(blurSize / 2); 

  vec2 blurMultiplyVec = 0 < horizontalPass ? vec2(1.0, 0.0) : vec2(0.0, 1.0);

  // Incremental Gaussian Coefficent Calculation (See GPU Gems 3 pp. 877 - 889)
  vec3 incrementalGaussian;
  incrementalGaussian.x = 1.0 / (sqrt(2.0 * pi) * sigma);
  incrementalGaussian.y = exp(-0.5 / (sigma * sigma));
  incrementalGaussian.z = incrementalGaussian.y * incrementalGaussian.y;

  vec4 avgValue = vec4(0.0, 0.0, 0.0, 0.0);
  float coefficientSum = 0.0;

  // Take the central sample first...
  avgValue += texture2D(texture, vertTexCoord.st) * incrementalGaussian.x;
  coefficientSum += incrementalGaussian.x;
  incrementalGaussian.xy *= incrementalGaussian.yz;

  // Go through the remaining 8 vertical samples (4 on each side of the center)
  for (float i = 1.0; i <= numBlurPixelsPerSide; i++) { 
    avgValue += texture2D(texture, vertTexCoord.st - i * texOffset * 
                          blurMultiplyVec) * incrementalGaussian.x;         
    avgValue += texture2D(texture, vertTexCoord.st + i * texOffset * 
                          blurMultiplyVec) * incrementalGaussian.x;         
    coefficientSum += 2.0 * incrementalGaussian.x;
    incrementalGaussian.xy *= incrementalGaussian.yz;
  }
  gl_FragColor = (avgValue / coefficientSum )  * colorMatrix;
}

Questions:

• Why does the alpha channel contrast not work ? How can I "enable" it ?
• Is it possible to enable it in the blurFrag shader posted above ?
• Do you know a better way to implement that gooey effect ?

Any help would be much appreciated !

Thank you

@nabr Great idea to PL these shaders into the library. I've added the binary glitch as example:

BinaryGlitchPass

binaryGlitchFrag.glsl

I've taken a look over the shaders you converted and it seems that you have a lot of unused variables declared. And as @nabr already mentioned, it is necessary to run the shaders with GLSL v120, because of compatibility.

Yeah, nice!

You could teak it a bit, if you like to.
Shadertoy using WebGL 2.0 means #version 300 es.
Default in processing OpenGL version 120 or #version 100 es.

Means gl_Fragcolor is deprecated. It works in Java, and this is great. I don't think this is a performance lost. But you know, just to be nice to the compiler ... So the best way would be if you copy +paste a String befor every shader, like shadertoy. with the version and the main function.

Second if you not going to use a 3D Shape like a cube, sphere -
you don't really need to do a Post Processing step like processing's filter() method. This will read all pixels form the Framebuffer -->make a rect -->send it to the shaders -->Colorbuffer, calling shader() and rect() directly will be a performance boost.

@cansik have a nice lib for this kind of stuff, make a pull
https://github.com/cansik/processing-postfx

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

So i running into strange bugs, means : - time to stop here.

I was only a sketchy idea, that needs some time and knowledge to develop it's potential. : )

Nevermind

Their is also an lib for filters, found it again, searching trough this forum.

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

and as i said the current solution, seems to work.

i was only flyby this forum ....

postfx has a pixelate shader

Have you checked out PostFX -- the shader based post processing library by @cansik?

https://forum.processing.org/two/discussion/22582/postfx-shader-based-post-processing-library

These might be relevant:

https://forum.processing.org/two/discussion/21746/multipass-shader-example#latest
https://forum.processing.org/two/discussion/18781/multipass-shader-example#latest
https://forum.processing.org/two/discussion/22582/postfx-shader-based-post-processing-library#latest

Kf

@first I've added a fix for the path, but can not test it. Would be nice if somebody could test it on a windows machine:

PostFX_windowsfix.zip

Just copy the files into the existing library folder:

/sketchbook/libraries/PostFX/

@first I could try it out today on a windows, and you are right. There is a problem with the path. I will check it asap :) I opened an issue for it here:

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

There's a thread here:

https://forum.processing.org/two/discussion/23002/postfx-library-not-working-error-invalidpathexception-illegal-char

There is an error in running the example codes of PostFX library, the error is: InvalidPathException: Illegal char <:> Please help me how to resolve this???????! processing1 AdvancedEffect, CustomShaderEffect, OffScreenEffect, ReadMeRendering, and SimpleEffect are not running.