When creating a specific scene in webgl, the usual process of transforming an object involves defining the initial vertex position data and sending it to the vertex shader. In the shader, the vertices are manipulated by various matrices that contain information about perspective, translations, rotations, and scales. An example of this in code would be:
gl_Position = projectionMatrix * modelviewMatrix * vec4(vertexPosition, 1.0);
The modelviewMatrix is obtained from multiplying the viewMatrix with the modelMatrix, which are results of different matrix operations like translation, rotation, and scaling.
Now, my question revolves around the final step in this chain of matrix multiplications - the multiplication of a mat4 with a vector array of any length.
someMatrix * vec4(vertexPosition, 1.0);
I am currently working on a webgl editor and I want to save the vertex position data of the created 3D objects after transformation without including matrix transformation details. I simply want to store the raw position data like {x, y, z, x, y, z, x, y, z, etc.}, similar to the original vertices array.
For instance, if we have these vertices for a triangle:
var vertices = [0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0];
Then I create a mat4 and perform a translation by [2, 0, 0].
The function I need should take this translated mat4 and the vertices array as inputs, multiply them together, and return a new array of translated vertices such as:
var translatedVertices = [2.0, 1.0, 0.0, 1.0, -1.0, 0.0, 3.0, -1.0, 0.0];
In order to multiply a 4x4 matrix with a vector array, I understand that a fourth value needs to be added. Initially, each triple of values in the original vec3 array must be split and an additional 1.0 inserted for every set to convert it into a vec4 array, [x, y, z] --> [x, y, z, 1]. However, beyond that modification, I lack the knowledge of how exactly this JavaScript function should be structured.