Copy data to OpenGL buffer

Alex_Pr · February 11, 2020, 12:51am

I’m trying to implement a parallax mapping shader following this post.
In the (C++) code, at the end of the renderQuad function, the the array quadVertices is copied into the GL Buffer. How can I do the same in Processing?

Links to the glsl files:
Vertex Shader
Fragment Shader

monkstone · February 11, 2020, 6:47am

Tutorial on shaders for processing example of filters using shaders, other types of shaders.

Alex_Pr · February 11, 2020, 11:27am

Thank you for the links! However, in these examples the arguments are uniform, while the shader I’m trying to implement requires vertex specific information. Any idea how I can pass that for each vertex?

I tried the following but it did not work. (The glsl files are the ones from the links in the 1st post)

void setup(){
  size(1000, 800, P3D);

  PImage bricks_dif = loadImage("bricks_diffuse.jpg");
  PImage bricks_normal = loadImage("bricks_normal.jpg");
  PImage bricks_disp = loadImage("bricks_disp.jpg");
  
  parallax = loadShader("fragmentShader2.glsl", "vertexShader2.glsl");
  parallax.set("diffuseMap", bricks_dif);
  parallax.set("normalMap", bricks_normal);
  parallax.set("depthMap", bricks_disp);
  parallax.set("heightScale", 0.2);
}

void draw(){
  background(140, 80, 80);
  
  shader(parallax);
  
  translate(width/2, height/2, 0);

  normal(0, 0, 1);
  rotateY(-PI/4);
  rotateX(PI/4);
  renderQuad();
}

void renderQuad(){
  PVector pos1 = new PVector(-1.0f,  1.0f, 0.0f);
  PVector pos2 = new PVector(-1.0f, -1.0f, 0.0f);
  PVector pos3 = new PVector( 1.0f, -1.0f, 0.0f);
  PVector pos4 = new PVector( 1.0f,  1.0f, 0.0f);
  // texture coordinates
  PVector uv1 = new PVector(0.0f, 1.0f);
  PVector uv2 = new PVector(0.0f, 0.0f);
  PVector uv3 = new PVector(1.0f, 0.0f);
  PVector uv4 = new PVector(1.0f, 1.0f);
  // normal vector
  PVector nm = new PVector(0.0f, 0.0f, 1.0f);
  
  // calculate tangent/bitangent vectors of both triangles
  PVector tangent1 = new PVector(0, 0, 0), bitangent1 = new PVector(0, 0, 0);
  PVector tangent2 = new PVector(0, 0, 0), bitangent2 = new PVector(0, 0, 0);
  // triangle 1
  // ----------
  PVector edge1 = PVector.sub(pos2, pos1);
  PVector edge2 = PVector.sub(pos3, pos1);
  PVector deltaUV1 = PVector.sub(uv2, uv1);
  PVector deltaUV2 = PVector.sub(uv3, uv1);
  
  float f = 1.0f / (deltaUV1.x * deltaUV2.y - deltaUV2.x * deltaUV1.y);
  
  tangent1.x = f * (deltaUV2.y * edge1.x - deltaUV1.y * edge2.x);
  tangent1.y = f * (deltaUV2.y * edge1.y - deltaUV1.y * edge2.y);
  tangent1.z = f * (deltaUV2.y * edge1.z - deltaUV1.y * edge2.z);
  tangent1.normalize();
  
  bitangent1.x = f * (-deltaUV2.x * edge1.x + deltaUV1.x * edge2.x);
  bitangent1.y = f * (-deltaUV2.x * edge1.y + deltaUV1.x * edge2.y);
  bitangent1.z = f * (-deltaUV2.x * edge1.z + deltaUV1.x * edge2.z);
  bitangent1.normalize();
  
  // triangle 2
  // ----------
  edge1 = PVector.sub(pos3, pos1);
  edge2 = PVector.sub(pos4, pos1);
  deltaUV1 = PVector.sub(uv3, uv1);
  deltaUV2 = PVector.sub(uv4, uv1);
  
  f = 1.0f / (deltaUV1.x * deltaUV2.y - deltaUV2.x * deltaUV1.y);
  
  tangent2.x = f * (deltaUV2.y * edge1.x - deltaUV1.y * edge2.x);
  tangent2.y = f * (deltaUV2.y * edge1.y - deltaUV1.y * edge2.y);
  tangent2.z = f * (deltaUV2.y * edge1.z - deltaUV1.y * edge2.z);
  tangent2.normalize();
  
  
  bitangent2.x = f * (-deltaUV2.x * edge1.x + deltaUV1.x * edge2.x);
  bitangent2.y = f * (-deltaUV2.x * edge1.y + deltaUV1.x * edge2.y);
  bitangent2.z = f * (-deltaUV2.x * edge1.z + deltaUV1.x * edge2.z);
  bitangent2.normalize();
  
  
  float quadVertices[] = {
      // positions            // normal         // texcoords  // tangent                          // bitangent
      pos1.x, pos1.y, pos1.z, nm.x, nm.y, nm.z, uv1.x, uv1.y, tangent1.x, tangent1.y, tangent1.z, bitangent1.x, bitangent1.y, bitangent1.z,
      pos2.x, pos2.y, pos2.z, nm.x, nm.y, nm.z, uv2.x, uv2.y, tangent1.x, tangent1.y, tangent1.z, bitangent1.x, bitangent1.y, bitangent1.z,
      pos3.x, pos3.y, pos3.z, nm.x, nm.y, nm.z, uv3.x, uv3.y, tangent1.x, tangent1.y, tangent1.z, bitangent1.x, bitangent1.y, bitangent1.z,
  
      pos1.x, pos1.y, pos1.z, nm.x, nm.y, nm.z, uv1.x, uv1.y, tangent2.x, tangent2.y, tangent2.z, bitangent2.x, bitangent2.y, bitangent2.z,
      pos3.x, pos3.y, pos3.z, nm.x, nm.y, nm.z, uv3.x, uv3.y, tangent2.x, tangent2.y, tangent2.z, bitangent2.x, bitangent2.y, bitangent2.z,
      pos4.x, pos4.y, pos4.z, nm.x, nm.y, nm.z, uv4.x, uv4.y, tangent2.x, tangent2.y, tangent2.z, bitangent2.x, bitangent2.y, bitangent2.z
  };
  
  int w = 300;
  
  beginShape();
  parallax.set("aPos", pos1);
  parallax.set("aNormal", nm);
  parallax.set("aTexCoords", uv1);
  parallax.set("aTangent", tangent1);
  parallax.set("aBitangent", bitangent1);
  vertex(-w, -w, 0, w, w);
  
  parallax.set("aPos", pos2);
  parallax.set("aNormal", nm);
  parallax.set("aTexCoords", uv2);
  parallax.set("aTangent", tangent1);
  parallax.set("aBitangent", bitangent1);
  vertex( w, -w, 0, 2*w, w);
  
  parallax.set("aPos", pos3);
  parallax.set("aNormal", nm);
  parallax.set("aTexCoords", uv3);
  parallax.set("aTangent", tangent1);
  parallax.set("aBitangent", bitangent1);
  vertex( w,  w, 0, 2*w, 2*w);
  
  endShape(CLOSE);
  
  beginShape();
  parallax.set("aPos", pos1);
  parallax.set("aNormal", nm);
  parallax.set("aTexCoords", uv1);
  parallax.set("aTangent", tangent2);
  parallax.set("aBitangent", bitangent2);
  vertex(-w, -w, 0, w, w);
  
  parallax.set("aPos", pos3);
  parallax.set("aNormal", nm);
  parallax.set("aTexCoords", uv3);
  parallax.set("aTangent", tangent2);
  parallax.set("aBitangent", bitangent2);
  vertex( w,  w, 0, 2*w, 2*w);
  
  parallax.set("aPos", pos4);
  parallax.set("aNormal", nm);
  parallax.set("aTexCoords", uv4);
  parallax.set("aTangent", tangent2);
  parallax.set("aBitangent", bitangent2);
  vertex(-w,  w, 0, w, 2*w);
  
  endShape(CLOSE);
}

hamoid · February 11, 2020, 11:39am

Maybe this gives you ideas: https://github.com/processing/processing/wiki/Advanced-OpenGL

A uniform set from Processing can not be read as an attribute in the shader. You can set pos and tex coords using vertex(), normals using normal(), but the tangents I don’t know. I haven’t set custom attributes in Processing. You can search for “attribute” in the files in https://github.com/processing/processing/tree/master/core/src/processing/opengl

neilcsmith · February 11, 2020, 2:41pm

PShape has a whole load of methods for attaching custom vertex attributes that are exceedingly under documented! See from eg. https://github.com/processing/processing/blob/master/core/src/processing/opengl/PShapeOpenGL.java#L1115 That might be the better way to do what you’re doing.

PGraphics also has similar attrib methods.

Alex_Pr · February 12, 2020, 12:27am

@neilcsmith Thank you for that, I think it is a great step in the right direction! This is what I’ve done so far, but it throws an error (multiple times)

PGraphicsOpenGL g_og;
PShader parallax;
PImage bricks_dif, bricks_normal, bricks_disp;

void settings(){
  size(1000, 800, P3D);
}

void setup(){
  g_og = (PGraphicsOpenGL)g;
  
  bricks_dif = loadImage("bricks_diffuse.jpg");
  bricks_normal = loadImage("bricks_normal.jpg");
  bricks_disp = loadImage("bricks_disp.jpg");
  
  parallax = loadShader("fragmentShader2.glsl", "vertexShader2.glsl");
  parallax.set("diffuseMap", bricks_dif);
  parallax.set("normalMap", bricks_normal);
  parallax.set("depthMap", bricks_disp);
  parallax.set("heightScale", 0.2);
  
  rectMode(CORNERS);
}

void draw(){
  background(140, 80, 80);
  
  shader(parallax);

  translate(width/2, height/2, 0);
 
  lights();
  spotLight(50, 50, 50, 800, 200, 800, -1, -0.25, -1, PI/3, 1);
  
  normal(0, 0, 1);
  rotateY(-PI/4);
  rotateX(PI/4);
  
  renderQuad();
}

void attrib(String name, PVector v, int n){
  if (n == 3){
    g_og.attrib(name, v.x, v.y, v.z);
  }
  if (n == 2){
    g_og.attrib(name, v.x, v.y);
  }
}

void renderQuad(){
  PVector pos1 = new PVector(-1.0f,  1.0f, 0.0f);
  PVector pos2 = new PVector(-1.0f, -1.0f, 0.0f);
  PVector pos3 = new PVector( 1.0f, -1.0f, 0.0f);
  PVector pos4 = new PVector( 1.0f,  1.0f, 0.0f);
  // texture coordinates
  PVector uv1 = new PVector(0.0f, 1.0f);
  PVector uv2 = new PVector(0.0f, 0.0f);
  PVector uv3 = new PVector(1.0f, 0.0f);
  PVector uv4 = new PVector(1.0f, 1.0f);
  // normal vector
  PVector nm = new PVector(0.0f, 0.0f, 1.0f);
  
  // calculate tangent/bitangent vectors of both triangles
  PVector tangent1 = new PVector(0, 0, 0), bitangent1 = new PVector(0, 0, 0);
  PVector tangent2 = new PVector(0, 0, 0), bitangent2 = new PVector(0, 0, 0);
  // triangle 1
  // ----------
  PVector edge1 = PVector.sub(pos2, pos1);
  PVector edge2 = PVector.sub(pos3, pos1);
  PVector deltaUV1 = PVector.sub(uv2, uv1);
  PVector deltaUV2 = PVector.sub(uv3, uv1);
  
  float f = 1.0f / (deltaUV1.x * deltaUV2.y - deltaUV2.x * deltaUV1.y);
  
  tangent1.x = f * (deltaUV2.y * edge1.x - deltaUV1.y * edge2.x);
  tangent1.y = f * (deltaUV2.y * edge1.y - deltaUV1.y * edge2.y);
  tangent1.z = f * (deltaUV2.y * edge1.z - deltaUV1.y * edge2.z);
  tangent1.normalize();
  
  bitangent1.x = f * (-deltaUV2.x * edge1.x + deltaUV1.x * edge2.x);
  bitangent1.y = f * (-deltaUV2.x * edge1.y + deltaUV1.x * edge2.y);
  bitangent1.z = f * (-deltaUV2.x * edge1.z + deltaUV1.x * edge2.z);
  bitangent1.normalize();
  
  // triangle 2
  // ----------
  edge1 = PVector.sub(pos3, pos1);
  edge2 = PVector.sub(pos4, pos1);
  deltaUV1 = PVector.sub(uv3, uv1);
  deltaUV2 = PVector.sub(uv4, uv1);
  
  f = 1.0f / (deltaUV1.x * deltaUV2.y - deltaUV2.x * deltaUV1.y);
  
  tangent2.x = f * (deltaUV2.y * edge1.x - deltaUV1.y * edge2.x);
  tangent2.y = f * (deltaUV2.y * edge1.y - deltaUV1.y * edge2.y);
  tangent2.z = f * (deltaUV2.y * edge1.z - deltaUV1.y * edge2.z);
  tangent2.normalize();
  
  
  bitangent2.x = f * (-deltaUV2.x * edge1.x + deltaUV1.x * edge2.x);
  bitangent2.y = f * (-deltaUV2.x * edge1.y + deltaUV1.x * edge2.y);
  bitangent2.z = f * (-deltaUV2.x * edge1.z + deltaUV1.x * edge2.z);
  bitangent2.normalize();
  
  
  float quadVertices[] = {
      // positions            // normal         // texcoords  // tangent                          // bitangent
      pos1.x, pos1.y, pos1.z, nm.x, nm.y, nm.z, uv1.x, uv1.y, tangent1.x, tangent1.y, tangent1.z, bitangent1.x, bitangent1.y, bitangent1.z,
      pos2.x, pos2.y, pos2.z, nm.x, nm.y, nm.z, uv2.x, uv2.y, tangent1.x, tangent1.y, tangent1.z, bitangent1.x, bitangent1.y, bitangent1.z,
      pos3.x, pos3.y, pos3.z, nm.x, nm.y, nm.z, uv3.x, uv3.y, tangent1.x, tangent1.y, tangent1.z, bitangent1.x, bitangent1.y, bitangent1.z,
  
      pos1.x, pos1.y, pos1.z, nm.x, nm.y, nm.z, uv1.x, uv1.y, tangent2.x, tangent2.y, tangent2.z, bitangent2.x, bitangent2.y, bitangent2.z,
      pos3.x, pos3.y, pos3.z, nm.x, nm.y, nm.z, uv3.x, uv3.y, tangent2.x, tangent2.y, tangent2.z, bitangent2.x, bitangent2.y, bitangent2.z,
      pos4.x, pos4.y, pos4.z, nm.x, nm.y, nm.z, uv4.x, uv4.y, tangent2.x, tangent2.y, tangent2.z, bitangent2.x, bitangent2.y, bitangent2.z
  };
  
  int w = 150;
  
  beginShape();
  texture(bricks_dif);
  
  attrib("aPos", pos1, 3);
  attrib("aNormal", nm, 3);
  attrib("aTexCoords", uv1, 2);
  attrib("aTangent", tangent1, 3);
  attrib("aBitangent", bitangent1, 3);
  vertex(-w, -w, 0, w, w);
  
  attrib("aPos", pos2, 3);
  attrib("aNormal", nm, 3);
  attrib("aTexCoords", uv2, 2);
  attrib("aTangent", tangent1, 3);
  attrib("aBitangent", bitangent1, 3);
  vertex( w, -w, 0, 2*w, w);
  
  attrib("aPos", pos3, 3);
  attrib("aNormal", nm, 3);
  attrib("aTexCoords", uv3, 2);
  attrib("aTangent", tangent1, 3);
  attrib("aBitangent", bitangent1, 3);
  vertex( w,  w, 0, 2*w, 2*w);
  
  attrib("aPos", pos1, 3);
  attrib("aNormal", nm, 3);
  attrib("aTexCoords", uv1, 2);
  attrib("aTangent", tangent2, 3);
  attrib("aBitangent", bitangent2, 3);
  vertex(-w, -w, 0, w, w);
  
  attrib("aPos", pos3, 3);
  attrib("aNormal", nm, 3);
  attrib("aTexCoords", uv3, 2);
  attrib("aTangent", tangent2, 3);
  attrib("aBitangent", bitangent2, 3);
  vertex( w,  w, 0, 2*w, 2*w);
  
  attrib("aPos", pos4, 3);
  attrib("aNormal", nm, 3);
  attrib("aTexCoords", uv4, 2);
  attrib("aTangent", tangent2, 3);
  attrib("aBitangent", bitangent2, 3);
  vertex(-w,  w, 0, w, 2*w);
  
  endShape(CLOSE);
}

And the error:

java.lang.ArrayIndexOutOfBoundsException: 41
	at processing.opengl.PGraphicsOpenGL$TessGeometry.addPolyVertex(PGraphicsOpenGL.java:10301)
	at processing.opengl.PGraphicsOpenGL$Tessellator$TessellatorCallback.vertex(PGraphicsOpenGL.java:13189)
	at processing.opengl.PJOGL$Tessellator$GLUCallback.vertex(PJOGL.java:646)
	at jogamp.opengl.glu.tessellator.GLUtessellatorImpl.callVertexOrVertexData(GLUtessellatorImpl.java:616)
	at jogamp.opengl.glu.tessellator.Render$RenderFan.render(Render.java:334)
	at jogamp.opengl.glu.tessellator.Render.RenderMaximumFaceGroup(Render.java:170)
	at jogamp.opengl.glu.tessellator.Render.__gl_renderMesh(Render.java:116)
	at jogamp.opengl.glu.tessellator.GLUtessellatorImpl.gluTessEndPolygon(GLUtessellatorImpl.java:556)
	at com.jogamp.opengl.glu.GLU.gluTessEndPolygon(GLU.java:896)
	at processing.opengl.PJOGL$Tessellator.endPolygon(PJOGL.java:610)
	at processing.opengl.PGraphicsOpenGL$Tessellator.tessellatePolygon(PGraphicsOpenGL.java:12612)
	at processing.opengl.PGraphicsOpenGL.tessellate(PGraphicsOpenGL.java:2288)
	at processing.opengl.PGraphicsOpenGL.endShape(PGraphicsOpenGL.java:2001)
	at processing.core.PApplet.endShape(PApplet.java:11080)
	at parallax_mapping_2.renderQuad(parallax_mapping_2.java:201)
	at parallax_mapping_2.draw(parallax_mapping_2.java:72)
	at processing.core.PApplet.handleDraw(PApplet.java:2412)
	at processing.opengl.PSurfaceJOGL$DrawListener.display(PSurfaceJOGL.java:871)
	at jogamp.opengl.GLDrawableHelper.displayImpl(GLDrawableHelper.java:692)
	at jogamp.opengl.GLDrawableHelper.display(GLDrawableHelper.java:674)
	at jogamp.opengl.GLAutoDrawableBase$2.run(GLAutoDrawableBase.java:443)
	at jogamp.opengl.GLDrawableHelper.invokeGLImpl(GLDrawableHelper.java:1293)
	at jogamp.opengl.GLDrawableHelper.invokeGL(GLDrawableHelper.java:1147)
	at com.jogamp.newt.opengl.GLWindow.display(GLWindow.java:759)
	at com.jogamp.opengl.util.AWTAnimatorImpl.display(AWTAnimatorImpl.java:81)
	at com.jogamp.opengl.util.AnimatorBase.display(AnimatorBase.java:452)
	at com.jogamp.opengl.util.FPSAnimator$MainTask.run(FPSAnimator.java:178)
	at java.util.TimerThread.mainLoop(Timer.java:555)
	at java.util.TimerThread.run(Timer.java:505)

I looked into the PGraphicsOpenGL implementation to try to determine what is causing this but it didn’t work Any ideas on that?

Behzod27 · June 28, 2022, 6:32am

// Exemplifies the use of the ppixels uniform in the shader, that gives
// access to the pixels of the previous frame.

See also processing-3.5.4\modes\java\examples\Topics\Shaders\Conway.pde

i think it is useful for you

Topic		Replies	Views
Can't pass a 3D integer array into a GLSL shader Coding Questions	9	282	October 26, 2022
Basic shader help Coding Questions	7	871	August 29, 2018
Need some help with glsl shaders Coding Questions	17	294	January 26, 2023
Learning GLSL - Example Coding Questions	0	656	November 10, 2018
Translate glsl to Processing glsl Code Coding Questions	2	132	January 16, 2024

Copy data to OpenGL buffer

Related Topics