// Upload Projection, ModelView matrices
gl.uniformMatrix4fv(shaderProgram.uMVMatrix, false, pMVMatrix);
gl.uniformMatrix4fv(shaderProgram.uPMatrix, false, perspM);
In the above lines, I understand that the projection matrix and modelview matrix are being uploaded. I would like to know the math behind this.
I have some 3d vertices (overlayvertices) which are later passed in this manner:
// Upload overlay vertices
gl.bindBuffer(gl.ARRAY_BUFFER, overlayVertices[elementIndex]);
gl.vertexAttribPointer(shaderProgram.aVertexPosition, 3, gl.FLOAT,false, 0, 0);
where overlayvertices[i] is a 4*1 array with x,y,z,1
The final drawing happens on the frame of a particular camera based on which the modelview and projection matrix is determined. I would like to manually get the transformed vertices in the camera frame. i.e, (x,y,1). I later download the data within each frame and hence the x,y should be pixel coordinates. Since this happens internally in webgl, I am not able to retrieve this information.
The missing piece (in your question) is the vertex shader being used when drawing. This vertex shader will take the two matrices and use them to transform the vertex. How exactly depends on the shader, but in the majority of cases the expression is
gl_Position = P * MV * vertex_position
And that's exactly the calculation you want to reproduct that transformation outside of OpenGL, namely its vertex shader stage.