How to rotate and scale 2d objects in WebGL? I think we will make changes in the "vPostion" part, but I could not set it fully. javascript:
function render() {
tMatrix = mat4();
tMatrix = translate(0,0,1);
}
You already have a transformationMatrix, so just rotate this matrix.
First write a function to rotate a matrix, m, such as follows:
function rotateX(m, angle) {
var c = Math.cos(angle);
var s = Math.sin(angle);
var mv1 = m[1], mv5 = m[5], mv9 = m[9];
m[1] = m[1]*c-m[2]*s;
m[5] = m[5]*c-m[6]*s;
m[9] = m[9]*c-m[10]*s;
m[2] = m[2]*c+mv1*s;
m[6] = m[6]*c+mv5*s;
m[10] = m[10]*c+mv9*s;
}
Scale first (you aren't doing any scaling currently), Translate second, Rotate third.
So your code should look like this:
transformationMatrix = mat4();
scale(transformationMatrix, 1, 1, 1);
rotateX(transformationMatrix, Math.PI/4);
translate(transformationMatrix, xPos, yPos, zPos);
You may also see other coders write (depending on their setup):
modelMatrix.scale(1,1,1).rotateX(Math.PI/4).translate(xPos,yPos,zPos);
Sources: https://www.tutorialspoint.com/webgl/webgl_cube_rotation.htm https://gamedev.stackexchange.com/questions/16719/what-is-the-correct-order-to-multiply-scale-rotation-and-translation-matrices-f