Quantcast
Channel: Processing Forum
Viewing all articles
Browse latest Browse all 1768

Problem with VertexShader operation

$
0
0
Hello !

I'm trying to apply a custom shader on a textured plane. 
I want to add custom attributes that represent the position (XYZ) , the rotation (XYZ) and the scale (XYZ) and apply the transformation inside the vertexShader. 

I maybe wrong but I suppose that pushMatrix method create a new Matrix3D instance , so it means one Matrix by DisplayObject and a very complex calcul for each (easy to use but deeply complex inside). It's actually possible to do not use matrix operation at all, and replace it by a few simple operations , and that's exactly what I want to do , but it doesn't work in my processing code (it works well in other languages)

My code is strongly inspired from this very old Flash-5 code that you can find here

The interesting function is here 

  1. var sx = Math.sin(axisRotations.x);
  2. var cx = Math.cos(axisRotations.x);
  3. var sy = Math.sin(axisRotations.y);
  4. var cy = Math.cos(axisRotations.y);
  5. var sz = Math.sin(axisRotations.z);
  6. var cz = Math.cos(axisRotations.z);
  7.         
  8. // rotation around x
  9. xy = cx*y - sx*z;
  10. xz = sx*y + cx*z;
  11. // rotation around y
  12. yz = cy*xz - sy*x;
  13. yx = sy*xz + cy*x;
  14. // rotation around z
  15. zx = cz*yx - sz*xy;
  16. zy = sz*yx + cz*xy;
  17. scaleFactor = focalLength/(focalLength + yz);
  18. x = zx*scaleFactor;
  19. y = zy*scaleFactor;
  20. z = yz;

This code apply a rotationX,rotationY,rotationZ on a point. 
Scale operation are only multiplications, translation are additions ; so it's all we need to create the transformation without a matrix object.

Scale and translation can be applyed after this calculation 
  1. projmodelviewMatrix * inVertex

and it works without problem.


But the rotations must be applyed on the vertex before using the projection, and the results are very weird.
If all rotations are set to zero, there is no problem ; if not, it work a little bit but it's like other calculations were applyed before and the transformations are wrong.


Here is the whole code (sorry for the very long post, I know it's not a pleasure to read it...)

  1. import java.nio.*;

  2. PImage img;
  3. PShader testShader;
  4. PGL pgl;

  5. float[] scaleXYZ;
  6. float[] positionXYZ;
  7. float[] rotationXYZ;
  8. float[] colors;

  9. FloatBuffer scaleData;
  10. FloatBuffer positionData;
  11. FloatBuffer rotationData;
  12. FloatBuffer colorData;

  13. int scaleLoc;
  14. int positionLoc;
  15. int rotationLoc;
  16. int colorLoc;

  17. void setup() {
  18.   size(640, 640, P3D);
  19.   img = loadImage("Desert.jpg");
  20.   testShader = loadShader("fragment.glsl","vertex.glsl");
  21.   
  22.   int i;
  23.   scaleXYZ = new float[12];
  24.   scaleXYZ[0] = scaleXYZ[3] = scaleXYZ[6] = scaleXYZ[9] = 200;
  25.   scaleXYZ[1] = scaleXYZ[4] = scaleXYZ[7] = scaleXYZ[10] = 200;
  26.   scaleXYZ[2] = scaleXYZ[5] = scaleXYZ[8] = scaleXYZ[11] = 1;

  27.   positionXYZ = new float[12];
  28.   positionXYZ[0] = positionXYZ[3] = positionXYZ[6] = positionXYZ[9] = 0;
  29.   positionXYZ[1] = positionXYZ[4] = positionXYZ[7] = positionXYZ[10] = 0;
  30.   positionXYZ[2] = positionXYZ[5] = positionXYZ[8] = positionXYZ[11] = 0;
  31.   
  32.   rotationXYZ = new float[12];
  33.   rotationXYZ[0] = rotationXYZ[3] = rotationXYZ[6] = rotationXYZ[9] = 0;
  34.   rotationXYZ[1] = rotationXYZ[4] = rotationXYZ[7] = rotationXYZ[10] = 0;
  35.   rotationXYZ[2] = rotationXYZ[5] = rotationXYZ[8] = rotationXYZ[11] = 0;

  36.   colors = new float[16];
  37.   colors[0] = colors[4] = colors[8] = colors[12] = 1;
  38.   colors[1] = colors[5] = colors[9] = colors[13] = 0;
  39.   colors[2] = colors[6] = colors[10] = colors[14] = 0;
  40.   colors[3] = colors[7] = colors[11] = colors[15] = 1;
  41.   
  42.   
  43.   scaleData = allocateDirectFloatBuffer(12);
  44.   scaleData.put(scaleXYZ);
  45.   scaleData.position(0);  
  46.   
  47.   positionData = allocateDirectFloatBuffer(12);
  48.   positionData.put(positionXYZ);
  49.   positionData.position(0);  
  50.   
  51.   rotationData = allocateDirectFloatBuffer(12);
  52.   rotationData.put(rotationXYZ);
  53.   rotationData.position(0); 
  54.   
  55.   colorData = allocateDirectFloatBuffer(16);
  56.   colorData.put(colors);
  57.   colorData.position(0);  
  58.   
  59.   noStroke();
  60.  
  61. }

  62. void draw() {
  63.   background(0);
  64.   translate(width / 2, height / 2);
  65.   rotateY(map(mouseX, 0, width, -PI, PI));
  66.   //rotateZ(PI/6);
  67.   
  68.   pgl = beginPGL();
  69.   
  70.   scaleLoc = pgl.getAttribLocation(testShader.glProgram, "inScale");
  71.   pgl.enableVertexAttribArray(scaleLoc);
  72.   pgl.vertexAttribPointer(scaleLoc, 3, PGL.FLOAT, false, 0, scaleData);
  73.   
  74.   positionLoc = pgl.getAttribLocation(testShader.glProgram, "inPosition");
  75.   pgl.enableVertexAttribArray(positionLoc);
  76.   pgl.vertexAttribPointer(positionLoc, 3, PGL.FLOAT, false, 0, positionData);
  77.   
  78.   rotationLoc = pgl.getAttribLocation(testShader.glProgram, "inRotation");
  79.   pgl.enableVertexAttribArray(rotationLoc);
  80.   pgl.vertexAttribPointer(rotationLoc, 3, PGL.FLOAT, false, 0, rotationData);
  81.   
  82.   colorLoc = pgl.getAttribLocation(testShader.glProgram, "inColour");
  83.   pgl.enableVertexAttribArray(colorLoc);
  84.   pgl.vertexAttribPointer(colorLoc, 4, PGL.FLOAT, false, 0, colorData);
  85.   
  86.   endPGL();
  87.   
  88.   shader(testShader);
  89.   
  90.   beginShape();
  91.   texture(img);
  92.   vertex(-0.5, -0.5, 0, 0, 0);
  93.   vertex(0.5, -0.5, 0, img.width, 0);
  94.   vertex(0.5, 0.5, 0, img.width, img.height);
  95.   vertex(-0.5, 0.5, 0, 0, img.height);
  96.   endShape();
  97.   
  98.   resetShader();
  99. }

  100. FloatBuffer allocateDirectFloatBuffer(int n) {
  101.   return ByteBuffer.allocateDirect(n * Float.SIZE/8).order(ByteOrder.nativeOrder()).asFloatBuffer();
  102. }

Here is the VertexShader

  1. uniform mat4 projmodelviewMatrix;

  2. //custom attributes
  3. attribute vec3 inScale;
  4. attribute vec3 inPosition;
  5. attribute vec3 inRotation;
  6. attribute vec4 inColour; //inColor cannot be overrided (it always a white color)
  7.                          //so I renamed it 'colour' for the test.                         
  8. attribute vec4 inVertex;
  9. attribute vec2 inTexcoord;

  10. varying vec2 vertTexcoord;
  11. varying vec4 vertColor;


  12. void main() {
  13.  
  14.   vec4 pos = projmodelviewMatrix * inVertex;
  15.   float cx = cos(inRotation.x);
  16.   float cy = cos(inRotation.y);
  17.   float cz = cos(inRotation.z);
  18.   float sx = sin(inRotation.x);
  19.   float sy = sin(inRotation.y);
  20.   float sz = sin(inRotation.z);
  21.   pos = inVertex;
  22.  
  23.   float xy = cx*pos.y - sx*pos.z;
  24.   float xz = sx*pos.y + cx*pos.z;
  25.  
  26.   float yz = cy*xz - sy*pos.x;
  27.   float yx = sy*xz + cy*pos.x;
  28.   
  29.   float zx = cz*yx - sz*xy;
  30.   float zy = sz*yx + cz*xy;
  31.   
  32.   vec4 position = vec4(zx,zy,yz,1);
  33.   
  34.   // Vertex in clip coordinates
  35.   pos = projmodelviewMatrix * position;
  36.   
  37.   
  38.   pos.xyz *= inScale.xyz;
  39.   pos.xyz += inPosition.xyz;
  40.   
  41.   gl_Position = pos;
  42.   
  43.   vertTexcoord = inTexcoord;
  44.   vertColor = inColour;
  45. }

And the FragmentShader

  1. #ifdef GL_ES
  2. precision mediump float;
  3. precision mediump int;
  4. #endif

  5. uniform sampler2D textureSampler;
  6. varying vec2 vertTexcoord;
  7. varying vec4 vertColor;

  8. void main() {
  9.   vec4 texture = texture2D(textureSampler, vertTexcoord);
  10.   texture.xyz *= vertColor.xyz;
  11.   gl_FragColor = texture;
  12. }

Thanks you for your help !


Viewing all articles
Browse latest Browse all 1768

Trending Articles