If I want to change the size or position of an object in WebGL, I take the original vertex-data {x,y,z} of this object and pass it to the vertex-shader, where it's multiplied with a matrix, that holds the information about the transformations, resulting in a new set of coordinates, which is only known to my GPU, but invisible for me.
That works fine, as far as the only thing that counts, is the picture on the screen, but I want to be able to save the transformed vertices without additional information about matrix multiplications, simply as x,y,z-values, just like the original data.
The idea was, to take the final step of multiplying the transformation-matrix with the original vertex-data by my own in JavaScript, but I just don't get it working!
I wrote the following function to multiply a 4x4-matrix with an array of x,y,z-values, by adding a fourth value {1.0} to change the vec3-data into vec4-data...
function matrixVectorProduct (mat4, data) {
var result = new Array( );
for (var i = 0; i < data.length / 3; i++) {
var n = i * 3;
var vec4 = [data[n], data[n + 1], data[n + 2], 1.0];
var x = mat4[0] * vec4[0] + mat4[1] * vec4[1] +
mat4[2] * vec4[2] + mat4[3] * vec4[3];
var y = mat4[4] * vec4[0] + mat4[5] * vec4[1] +
mat4[6] * vec4[2] + mat4[7] * vec4[3];
var z = mat4[8] * vec4[0] + mat4[9] * vec4[1] +
mat4[10] * vec4[2] + mat4[11] * vec4[3];
var w = mat4[12] * vec4[0] + mat4[13] * vec4[1] +
mat4[14] * vec4[2] + mat4[15] * vec4[3];
result.push(x, y, z, w);
}
return result;
}
...but beside the fact that I have no idea of how to convert the vec4-values back to vec3-values, there must be something wrong with the concept as a whole:
Let's suppose we have the vertices for a simple triangle like
var vertices = [0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0];
and we create a 4x4-matrix with
function createMat4 ( ) {
var mat4 = new Float32Array(16);
mat4[0] = 1; mat4[1] = 0; mat4[2] = 0; mat4[3] = 0;
mat4[4] = 0; mat4[5] = 1; mat4[6] = 0; mat4[7] = 0;
mat4[8] = 0; mat4[9] = 0; mat4[10] = 1; mat4[11] = 0;
mat4[12] = 0; mat4[13] = 0; mat4[14] = 0; mat4[15] = 1;
return mat4;
}
translate it by - let's say [0, 0, -5] - using this function
function translateMat4 (mat4, vec3) {
var x = vec3[0],
y = vec3[1],
z = vec3[2];
var a = mat4;
mat4[12] = a[0] * x + a[4] * y + a[8] * z + a[12];
mat4[13] = a[1] * x + a[5] * y + a[9] * z + a[13];
mat4[14] = a[2] * x + a[6] * y + a[10] * z + a[14];
mat4[15] = a[3] * x + a[7] * y + a[11] * z + a[15];
return mat4;
}
and finally multiply the created and translated matrix with the vertex-data stored in vertices by using the matrixVectorProduct-function noted above, the result should be
translatedVertices = [0.0, 1.0, -5.0, -1.0, -1.0, -5.0, 1.0, -1.0, -5.0];
but it is just [x,y,z,1], because -5 x 0.0 (z-value) equals 0, so it cannot work this way.
What am I doing wrong?
gl_Position. – LJᛃ