diewald_fluid gpu mode(use gl.graphic library render) compatible with processing 1.5.1.

How to use diewald_fluid example run in android with gpu mode I can run on android with cpu mode processing 3 but It's very slow without gpu mode

how to import gl.graphic in processing 3

btw, my processing 1.5.1 can't run in android i think because Android SDK is newer than processing 1.5.1 compatible.

here is my project

I was looking at POINT_SIZE in draw OpenGL but I'm now sure how to access the constants to get POINT_SIZE in Processing.

Any hints ?

Thank you, George

Hi, i try to port a processing 1.5.1 sketch

it used sampler3d with lowlevel gl

in processing 3 i can t figure how to do that:

i use this shader :

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

#define PROCESSING_TEXTURE_SHADER

uniform sampler2D lut;
uniform sampler3D volume;


uniform vec2 texOffset;
in vec4 vertColor;
in vec4 vertTexCoord;
uniform float z;
out vec4 lutColor;
void main() {

    float texColor = texture(volume, vec3(0.5,0.5,0.5)).r; // error here
 // float texColor = texture(lut, vec2(0.5,0.5)).r;
     lutColor = texture(lut, vec2(texColor,z)).rgba;

}

it works well until i use the sampler i got an enigmatic:' cannot validate shader program: unknow error'

2 questions: if someone have an idea why it fails (accept the syntax sampler3d but fail (validation) when sampler3d is used in main() at firt shader call )

and how to link this texture to the shader (it return -1 for shaderimgloc[0] = gl.glGetUniformLocation(myShader.glProgram, "volume");)

thanks a lot

So I am trying to get a simple particle system to work with shaders.

my processing code looks like this

PShader pointShader;
int COUNT = 300;

float[] sourceX = new float[COUNT];
float[] sourceY = new float[COUNT];

void setup()
{
  size(600, 600, P3D);
  background(255);


}

void draw() {
 // background(0);
    for (int i = 0; i < COUNT; i++) {
    sourceX[i] = random(0, width);
    sourceY[i] = random(0, height);
  }

  pointShader = loadShader("point.glsl");
  pointShader.set("sourceX", sourceX);
  pointShader.set("sourceY", sourceY);
  shader(pointShader);
  rect(0, 0, width, height);
  //noLoop();


}

my shader:

#define PROCESSING_COLOR_SHADER

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

uniform float[300] sourceX;
uniform float[300] sourceY;

void main() {
    float intensity = 0.0;

    // sum the distances from the points
    for(int i = 0; i < 300; i++) {
        float d = distance(gl_FragCoord.xy, vec2(sourceX[i], sourceY[i]));
        intensity += exp(-0.05 * d * d);
    }

    // map the colours

        gl_FragColor = vec4(0.0, intensity * 1, 1.0, 1.0);

}

this works without a problem but as soon as I up the particle count to 1000 I get the error:

Where am I going wrong here? Is this not the right way to do this?

Ultimately my intention is to send the point cloud data from a Kinect2 to the shader. I have a working sketch for that (without the shader) but instead of sending the Kinect points into a class I would like to send it to a shader. I'm hoping I can have a much higher particle count that way.

Thank you for your help!

I'm slowing learning how to use PShader and I'm trying to figure out all of the GLSL uniforms that are automatically set by Processing like modelview, lightPosition, normalMatrix, et cetera. Is this information listed somewhere, or do I need to dig through the source code? I've already looked at Andres Colubri's PShader tutorial and the Advanced OpenGL wiki page, and am relying heavily on the shader examples in Processing itself, but I haven't found a comprehensive list yet.

Hi all. Very new to shaders, but I've done a fair bit of research.

My sketch is trying to emulate an image "shatter" - a bunch of different PShapes fly around, all with static UV coordinates referencing the same image. Imagine a stained glass window smashing - little bits of image everywhere.

I have things working, albeit slowly, and have been told I can improve my performance with shaders.

I've tried to create a simple working version before implementing into the full sketch. Just trying to draw one PShape with a texture.

Sketch

PShader myShader;
PShape myShape;
PImage myImage;

void setup(){
    size(200, 200, P3D);

    myImage = loadImage("Grug.jpg");
    myShader = loadShader("frag.glsl", "vert.glsl");
    myShape = createShape();

    myShape.beginShape();
    myShape.noFill();
    myShape.noStroke();
    myShape.vertex(20, 20, 20, 20);
    myShape.vertex(80, 20, 80, 20);
    myShape.vertex(80, 80, 80, 80);
    myShape.vertex(20, 80, 20, 80);
    myShape.endShape();
}

void draw(){
    background(150);
    myShader.set("myImage", myImage);
    shader(myShader);
    shape(myShape);
}

Vert shader

#define PROCESSING_TEXTURE_SHADER

uniform mat4 transform;
uniform mat4 texMatrix;

attribute vec4 vertex;
attribute vec4 color;
attribute vec2 texCoord;

varying vec4 vertColor;
varying vec4 vertTexCoord;

void main() {
  gl_Position = transform * vertex;

  vertColor = color;
  vertTexCoord = texMatrix * vec4(texCoord, 1.0, 1.0);
}

Frag shader

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

uniform sampler2D texture;
uniform sampler2D myImage;

varying vec4 vertColor;
varying vec4 vertTexCoord;

void main() {
    gl_FragColor = texture2D(myImage, vertTexCoord.st);
}

However, nothing displays. Note that I want to avoid calling myShape.texture(myImage) when defining the shape. This call does make things work, but on a large scale the framerate dives.

I'm pretty sure it's possible to have a few thousand verts flying about referencing the same texture - please correct me if I'm mistaken. What am I missing? Or is my approach a bit wonky?! Shaders have been a bit to wrap my head around.

Thanks in advance! (Mac OSX 10.11.5, Processing 3.1.1.)

I've been using shaders for various things for a while, but I haven't really successfully started and finished an idea for a shader of my own. What I want to do is use a shader to take an image and spread out the pixels in a way that resembles ink spreading across paper.

What I am thinking initially is that I can begin by creating a matrix of random values for every pixel in the image, which would almost represent the "weight" of the ink, and with time, the image will scale outwards, with each individual color, depleting the random number it was initially associated with.

I still have huge gaps in my understanding of how I would do this, does anyone have any advice? Or know of a shader that is similar in concept that I could take a look at?

Hello, i wanna know if there a way to make this effect using a shader. https://media.giphy.com/media/hYHtWsC8Qipmo/giphy.gif

While trying to debug a frag shader that I'm working on, I wanted to just make sure that the gl_FragColor = vertColor; would at least work. It is only showing white. Does anyone have some advice or see what I might be doing wrong here?

PShader shader;
PImage photo;

void setup() {
  size(619,619,P2D);
  photo = loadImage("paintedsky.jpg");
  shader = loadShader("inkspread_frag.glsl");
}

void draw() {
  shader.set("T",(float) millis()/1000.0);
  filter(shader);
  image(photo,mouseX,mouseY);
}

-----------------------------------------

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

#define PROCESSING_TEXTURE_SHADER

uniform sampler2D source;
varying vec4 vertColor;
varying vec4 vertTexCoord;

uniform float T;
const float diag = 1.414213562373095;

//layout(location=0) out vec4 result;

vec4 F(vec4 x0,vec4 x1,float dist){
    return (x1 - x0)/(T * dist);
}

void main(void) {
    vec2 ix  = vec2(vertTexCoord.xy);

    vec2 c11 = vertTexCoord.st + vec2( 0.0, 0.0);
    vec2 c01 = vertTexCoord.st + vec2(-1.0, 0.0);
    vec2 c21 = vertTexCoord.st + vec2( 1.0, 0.0);
    vec2 c10 = vertTexCoord.st + vec2( 0.0,-1.0);
    vec2 c12 = vertTexCoord.st + vec2( 0.0, 1.0);
    vec2 c00 = vertTexCoord.st + vec2(-1.0,-1.0);
    vec2 c02 = vertTexCoord.st + vec2(-1.0, 1.0);
    vec2 c20 = vertTexCoord.st + vec2( 1.0,-1.0);
    vec2 c22 = vertTexCoord.st + vec2( 1.0, 1.0);

    vec4 x11 = texture2D(source, c11);
    vec4 x01 = texture2D(source, c01);
    vec4 x21 = texture2D(source, c21);
    vec4 x10 = texture2D(source, c10);
    vec4 x12 = texture2D(source, c12);
    vec4 x00 = texture2D(source, c00);
    vec4 x02 = texture2D(source, c02);
    vec4 x20 = texture2D(source, c20);
    vec4 x22 = texture2D(source, c22);

    vec4 d01 = F(x11,x01,1.0);
    vec4 d21 = F(x11,x21,1.0);
    vec4 d10 = F(x11,x10,1.0);
    vec4 d12 = F(x11,x12,1.0);
    vec4 d00 = F(x11,x00,diag);
    vec4 d02 = F(x11,x02,diag);
    vec4 d20 = F(x11,x20,diag);
    vec4 d22 = F(x11,x22,diag);

    vec4 result = (x11 + d01+d21+d10+d12 + d00+d02+d20+d22);
    //gl_FragColor = vec4(result.rgb,1.0) * vertColor;
    gl_FragColor = vertColor;
}

Hi Although I've had a lot of success porting shadertoy shaders into processing, I'm getting problems with the new multi pass shaders. I've worked out how to create multiple passes in Processing using PGraphics buffers. But the end results look wrong. Here's an example.. http://imgur.com/a/065EU

It looks like something to do with how the colours are being blended / calculated. Maybe it's a premultiplied alpha thing, I've no idea. Because I'm only having these problems with multi pass shaders - I'm thinking it might have something to do with how Processing is passing in / reading out data from buffers - which might be different from how shadertoy / WebGL does it.

Here's the 2 shaders in question..

https://www.shadertoy.com/view/MstSWX

https://www.shadertoy.com/view/MlcGWH

Many thanks for any clues as to what the problem could be, Glenn.

Hi.. In relationship to my recent post, https://forum.processing.org/two/discussion/17623/shadertoy-to-pshader-differences-bugs#latest

It seems I need to be using 16 bit render buffers - the way shadertoy apparently does. I use 8 bit PGraphics for the buffers.

So my question is - could someone tell me the code to use to pack / unpack 16 bit & 8 bit - and where to place this inside the glsl frag shader. Or maybe something could be done on the Processing side to convert?

Thanks, Glenn.

Hey Guys,

GLSL Noob here.

Working in Unity, when it compiles our shaders into GLSL we start to get shader which to me seem unoptimized.

In the following shader i am completely confused as to what the point is of declaring and assigning the variables tmpvar_33 or tmpvar_34 as we already have the value tmpvar_32 which these are just "subsets" of.

In some of our other shaders variables are declared and then only used once more when the value could have simply been used where you needed it.

Am I ignorant of something?

uniform vec4 _Color; uniform vec4 _LightColor0; uniform sampler2D _MainTex; uniform vec4 _WorldSpaceLightPos0; void main () { vec4 c; vec4 tmpvar_32; tmpvar_32 = texture2D (_MainTex, gl_TexCoord[0].xy) * _Color; vec3 tmpvar_33; tmpvar_33 = tmpvar_32.xyz; float tmpvar_34; tmpvar_34 = tmpvar_32.w; vec4 c_i0_i1; c_i0_i1.xyz = ((tmpvar_33 * _LightColor0.xyz) * (max (0.0, dot (gl_TexCoord[1].xyz, _WorldSpaceLightPos0.xyz)) * 2.0)).xyz; c_i0_i1.w = (vec4(tmpvar_34)).w; c = c_i0_i1; c.xyz = (c_i0_i1.xyz + (tmpvar_33 * gl_TexCoord[2].xyz)).xyz; c.w = (vec4(tmpvar_34)).w; gl_FragData[0] = c.xyzw; }

Thanks for your time.

I've been importing Shadertoy shaders into processing. But the one I'm working on uses a samplerCube texture. I have the 6 images as pngs for the cube map. How to I build this and pass it into the shader's cubemap uniform ?

I've tried hacking the DomeProjection example, but no joy.

Any help welcome!

Glenn.

I have a camera matrix extracted from another application. Currently, if I multiply a 3D point to this matrix, I get the 2D coords correspondent to where that point exists in camera projection plane.

I was trying to use "applyMatrix()" directly. BUT this is flattening everything, meaning object back faces and occluded faces becomes visible. Lights have no effect. stroke and fill get mixed.

PMatrix3D p;

void setup() {
  size(600, 400, P3D);
}

void draw() {

  float x = map(mouseX, 0, width, -10, 10);
  float z = map(mouseY, 0, height, -10, 10);

 p = new PMatrix3D(
 5.400566, 0.519709, -4.3888016, 193.58757,
 5.284709, -9.016302, 3.312224, 266.927,
 0.012042404, 7.253584E-5, 0.0084899925, 1.0,
 0, 0, 0, 1);

  applyMatrix(p);
  background(20);
  translate(x,0,z);
  fill(100);
  box(10);

}

second attempt was to apply transformation on PGraphicsOpenGL, but I still couldn't figure out how to do it properly.

PMatrix3D p;

void setup() {
  size(600, 400, P3D);
}

void draw() {

  float x = map(mouseX, 0, width,  -200, 200);
  float z = map(mouseY, 0, height, -150, 150);

 p = new PMatrix3D(
 5.400566, 0.519709, -4.3888016, 193.58757,
 5.284709, -9.016302, 3.312224, 266.927,
 0.012042404, 7.253584E-5, 0.0084899925, 1.0,
 0, 0, 0, 1);

  //p.invert();
  //((PGraphicsOpenGL) g).camera.set(p);
  //((PGraphicsOpenGL) g).modelview.set(p);
  //((PGraphicsOpenGL) g).projection.set(p);

  ((PGraphicsOpenGL) g).projmodelview.set(p);
  background(20);
  lights();
  translate(width/2,height/2);
  translate(x,0,z);
  box(10);
}

from here: //https://github.com/processing/processing/issues/2904 I got the idea of making a shader but I have never done this before, so I am clueless so far...

Hi guys, I love the shaders already excist but I want to learn it to. I already noticed GLSL is hard, but do you guys know a nice tutorial or something to get started? Lotte

Hi i'm trying to understand and use the shaders from processing's examples, I'd like to take the Nebula one and to put it into a program that I made. But when I copy/paste the whole code where it should be, and take the .glsl file, I have an error when I start the program : Your shader needs to be of TEXTURE type to render this geometry properly, using default shader instead.

Also I'd like to put it behind another image or text maybe, but it doesn't seem to work so far. Thanks :)

I recently started playing around with the "PixelFlow" library and the framerate is bad. The code is running on the iGPU : (console output)

PixelFlow v0.18  -  http://www.thomasdiewald.com
-------------------------------------------------------------------
    OPENGL_VENDOR:         Intel
    OPENGL_RENDERER:       Intel(R) HD Graphics 530
    OPENGL_VERSION:        4.4.0 - Build 20.19.15.4454
    GLSLVersionString:     #version 440 core
    GLSLVersionNumber:     4.40.0
    GLVersion:             4.4 (Core profile, arb, compat[ES2, ES3], FBO, hardware) - 4.4.0 - Build 20.19.15.4454
    GLVendorVersionNumber: 20.19.15 (- Build 20.19.15.4454)
-------------------------------------------------------------------

Is it possible to use my GTX 960M?

When I draw an image with transparent edges, the renderer (I am using P3D) is drawing a thin grey line around the border of the image, which is visible despite the fact that the edges of the image are transparent. There are also some other wierd grey lines around various images. Does anyone know how to fix this?

I have found other posts about this issue on the processing forum: https://forum.processing.org/one/topic/transparent-png-issue.html And of this and similar issues on openGl forums: https://opengl.org/discussion_boards/showthread.php/167808-2D-texture-problem-lines-between-textures https://opengl.org/discussion_boards/showthread.php/178038-Black-lines-at-edges-of-textures

The post on the processing forum does not have a solution (and isn't really the same problem). It seems there might be a way to fix this by adjusting OpenGL settings, but I don't know how to do that with processing. I am using OpenGL because I have to render a very large number of pixels in 3D space every frame, and I doubt other renderers will work as well. Here are some images (I scaled some of these up to show the problem, the lines are all exactly 1 pixel in the original (they seem to actual be one pixel on my retina display, not one processing pixel):

The lines in the middle of these images are added by the renderer, they are at the edge of a partially transparent image.

This is the border between two images (each drawn on a textured polygon, with uv mapping). The black line in the middle is not part of either image. That line is not on the edge of where the image is being drawn, but on the edge of the opaque part of an image. This image also has a line on the very edge.

The borders between some textures without any transparency still get weird lines.

Hi, is there a simple shader to morph to images?, thanks :)

Hello, I am running Processing release 3.2.1 on a fully updated MacBook Pro and I am having strange issues trying to get point shaders to work in a sketch. Below is a minimal piece of code to reproduce it.

First, this is in a file called pTest.glsl:

#version 410

out vec4 fragColor;

void main() {
  fragColor = vec4(1.0,0,0,1.0);
}

And then this in the sketch:

PShader pTest;

void setup() {
  size(512,512,P3D);
  pTest = loadShader("pTest.glsl");
}

void draw() {
  background(0);
  shader(pTest,POINTS);
  stroke(255);
  strokeWeight(10);
  point(256,256,0);
  //filter(pTest);
}

What I am expecting it to do is render a red point in the middle of the screen. If you comment out the shader line it renders the expected point. Also if you comment out the shader line, and uncomment the filter line it renders the entire screen in red, so I know that the shader itself is valid. But, if I try to run the code as written above, it gives me the error "OpenGL error 1282 at bot endDraw(): invalid operation". Googling this shows that a lot of people used to get this if they needed to update their graphics drivers, but that isn't the case for me. Anyone have any ideas?