translate tutorial.

vjjv

hey! does anybody help me to understand shaders better? Im reading all tutorials that i found, includes PShader reference processing page. For now, im trying to pass the data of vertex into a glsl vertex shader (im editing shaders in Atom) i found this max/msp tutorial and i cant figure it out how translate this to processing.

anybody helps me? thanks a lot. PD: if anybody knows any book o information about shaders an how implement in processing please share! thank

Chrisir

https://processing.org/tutorials/pshader/

nabr

Can you please post a MCVE that demonstrates your status of progress?

https://www.google.de/search?q=vertex+displacement

nabr

Happy new Year.

I did a little get started File - still a lot of work to do. Good luck.

---

optimized version

// ^;.;^

PImage pg;
PShader shdr;
void setup() {
  size(640, 360, P3D);
  hint(DISABLE_OPTIMIZED_STROKE);
  noStroke();
  noiseSeed(1237);
  pg= createImage(width, height,RGB);
  int x =pg.pixels.length;
  while (0<--x) pg.pixels[x]=(int)(noise((x%pg.width)*.05f, (x/pg.height)*.05f)* 255f)<<16;
  shdr=new PShader(this, new String[] {
    "#version 150"
    ,"in vec4 position;"
    +"in vec3 normal;"
    +"uniform mat4 transform;"
    +"uniform float time;"
    +"uniform sampler2D tex;"
    +"out vec2 vuv;"
    ,"#define PI acos(-1.)"
    ,"void main() {"
    +"vuv=position.xy;"
    +"float dv = texture(tex,vec2(.5+atan(normal.x,normal.z)/(2.0*PI),acos(normal.y/length(normal))/PI)).x*100.;"
    +"vec4 newVertexPos = vec4(normal*dv*sin(time),0.0) + position;"
    +"gl_Position = transform * newVertexPos;"
    +"}"
    }, new String[] {
      "#version 150"
      ,"in vec2 vuv;"
      +"out lowp vec4 fragColor;"
      +"void main() {"
      +"fragColor.rgb = vec3(0.20,0.20,0.8)+float(fract(vuv.x/16.)<.1||fract(vuv.y/16.)<.1);"
      +"fragColor.a=1.0;"
      +"}"
    });
    shdr.set("tex", pg);
    shader(shdr);
}
void draw() {
  background(pg);
  shdr.set("time", frameCount*.01f);
  translate(width*0.5f, height*0.5f, -100);
  rotateY(frameCount*.01f);
  sphere(150);
}

---

learning version

PGraphics pg;

// processing.org/tutorials/pshader/
PShader shdr;

void setup() {
  size(640, 360, P3D);

 // github.com/processing/processing/wiki/Advanced-OpenGL#vertex-coordinates-are-in-model-space
 hint(DISABLE_OPTIMIZED_STROKE);

  // noise func
  // noiseSeed(1237);
  pg = createGraphics(width, height);
  pg.beginDraw();
  pg.loadPixels(); 
  int x =pg.pixels.length;
  while (0<--x) {
    int n = (int)(noise(x%width*.05f, (x/height)*.05f)* 255f);
    pg.pixels[x]=0xff<<24|n<<16|n<<8|n;
  }
  pg.updatePixels();
  pg.endDraw();


   shdr=new PShader(this, new String[] {
    "#version 150\n"
      +"in vec4 position;"
      +"in vec3 normal;"
      +"uniform mat4 transform;"
      +"uniform float time;"
      +"uniform sampler2D tex;"
      //note small err. in Processing need for accuracy use Math.PI
      +"const float PI ="+(double)PI+";" 
      +"void main() {"
      // spherical mapping reindelsoftware.com/Documents/Mapping/Mapping.html
      +"vec3 dv = texture(tex,vec2(.5+atan(normal.x,normal.z)/(2.0*PI),acos(normal.y/length(normal))/PI)).xyz;"
      // ozone3d.net/tutorials/vertex_displacement_mapping.php
      +"vec4 newVertexPos = vec4(normal *dv*100.*sin(time) , 0.0) + position;"
      +"gl_Position = transform * newVertexPos;"
      +"}"
  },new String[] {
    "#version 150\n"
      +"out vec4 fragColor;"
      +"void main() {"
      +"fragColor.rgb =vec3(0.20,0.20,0.8)+sin(gl_FragCoord.z*10.);"
      +"fragColor.a=1.0;"
      +"}"
  });
  shdr.set("tex",pg);
}
void draw() {

  shdr.set("time",frameCount*.1f);

  background(0);

  // compile shader
  shader(shdr);

  pushMatrix();
  translate(width*0.5f, height*0.5f,-100);
  rotateY(frameCount*.01f);
  stroke(255);
  sphere(150);
  popMatrix();

  // reset to default in order to see the image 
  resetShader();

  // noise preview
  image(pg,5,260, width/4, height/4);
}

vjjv

Thanks @nabr. still working here. Ok, i see that PG graphics replace the jit. texture to pass as an uniform the noise! but why only the fill is displacement and not the geometry?

nabr

you mean the lines of the sphere in the gif ( learning version scetch ) i guess. i think, becourse the lines are drawn on a different shader in processing. (not completely sure) . so you are displacing the sphere vertex but to the processings line shader.

// simpel vertex disp 

PShader shdr;

void setup() {
  size(640, 360, P3D);

  // noStroke();

  shdr=new PShader(this, 
    new String[]{"#version 150 \n"
    + "in vec4 position;"
    + "uniform mat4 transform;"
    + "uniform float t;"
    + "void main() {"
    + "vec4 npos = vec4(position.x * (sin(t)*.5+.5), position.y , position.zw );"
    + "gl_Position= transform * npos ;"
    + "}"
    }, new String[]{"#version 150 \n"
      +"out vec4 fC;"
      +"void main() {"
      +"fC = vec4(1f,0f,0f,1f);"
      +"}"
    });
  shader(shdr);
}
void draw() {
  shdr.set("t", frameCount*.01f);
  background(127);

  translate(width*0.5f, height*0.5f);

  rect(0, 0, 200, 100);
}

vjjv

Ok. well, now im trying to translate the example to see also the geometry displacement. i`ll post the results. i have one silly question...How vertex shader know that "in vec4 position" is the positions of each vertex?. i mean, is not a build in variable. in others versions i see the gl_vertex, and gl_normal. How does it work? Also with the names of "uniform mat4 transform" is the same if i change the name? "uniform mat4 blahblah". how interpreted shader that is the product of the projection and the modelview matrices?

nabr

Hello
you have many good questions here. And im of time. @clankill3r

How vertex shader know that "in vec4 position" is the positions of each vertex?

You have different Buffers one of them is used to store Vertex Data so called Vertex Buffer Object or short VBO. After a Buffer is created you assign a variable to send the data to the vertex shader. Processing is using in vec4 position; as name for this variable

gl_vertex, and gl_normal. How does it work?

I think this is a good exampel
https://forum.processing.org/two/discussion/12775/simple-shadow-mapping
The post is from 2015 and the user refers to a much older tutorial 2012 (the site was updated since then)

OpenGL is a commutative driven project more or less ...
gl_vertex, and gl_normal is outdated.
deprecated.
Means is still work, but their is no community that maintain it.

Also with the names of "uniform mat4 transform" is the same if i change the name?

No you have to use the Processings names, otherwise you have to go Low Level and change "the interface." See:
https://github.com/processing/processing/wiki/Advanced-OpenGL

posLoc = gl.glGetAttribLocation(shader.glProgram, "position");

nabr

If you look at simple-shadow-mapping link i shared in this forum. It's exactly that someone implemented a "function" and is not reachable anymore, still users request his function to work, but the Developer don't feel responsible anymore. That is why you uses #version directive.

https://github.com/processing/processing/wiki/Advanced-OpenGL

You must include the #version preprocessor directive as the first line of your GLSL code, indicating what version of the GLSL language you are using. This version must match the OpenGL profile selected by Processing, which by default is GL2ES2 -essentially the intersection between the GL2 and GLES2 APIs.

But java is also very forgiving. Just try things out.

vjjv

Perfect! i`v understanding a little bit more. is there any place to find the names of the shaders input? (witch name is compute by processing?)

nabr

Hello

update:

but why only the fill is displacement and not the geometry?

Becourse it a bug. If you in the JOGL Mode you already a step away from implementing your own bug free Engine. So i m not using processing frequently egough. Maybe it will be fixed with the next version in processing.

All you are asking for is here, look at the source !
https://github.com/processing/processing

Also interesting https://github.com/codeanticode/pshader-experiments
(a little updated but still useful) https://codeanticode.wordpress.com/2014/05/08/shader_api_in_processing_2/

vjjv

i didnt found any kind of "list" of build in variables names like codeanticode post in processing github. maybe im looking with the wrong words. i will keep looking.
Becourse it a bug what is exactly the bug? the shader that you wrote should show the geometry displacement? thanks again nabr and answer only if you`ve time!

EDIT: i found it here: https://github.com/processing/processing/blob/master/core/src/processing/opengl/PShader.java

EDIT2: what about this? https://forum.processing.org/two/discussion/2839/wireframe-display-with-shaders#latest