i'm a newbie in 3d programming, and i approach for the first time this argument. I try to make some changes to an existing 3d object viewer, to better suite my needs. This object viewer is jsc3d.
I read many different articles about 3d matrices and programming, and my scholar math allows me to understand the matrix operations. What i'm missing now is how to apply all this theory to get the desired result. What is the relationship between matrix math and the resulting projected 3d rotations in 2d space, or: "When i apply some matrix operations, what shall be the expected "visual" result"?
This is the implementation of the matrices:
JSC3D.Matrix3x4.prototype.identity = function() {
this.m00 = 1; this.m01 = 0; this.m02 = 0; this.m03 = 0;
this.m10 = 0; this.m11 = 1; this.m12 = 0; this.m13 = 0;
this.m20 = 0; this.m21 = 0; this.m22 = 1; this.m23 = 0;
};
JSC3D.Matrix3x4.prototype.scale = function(sx, sy, sz) {
this.m00 *= sx; this.m01 *= sx; this.m02 *= sx; this.m03 *= sx;
this.m10 *= sy; this.m11 *= sy; this.m12 *= sy; this.m13 *= sy;
this.m20 *= sz; this.m21 *= sz; this.m22 *= sz; this.m23 *= sz;
};
JSC3D.Matrix3x4.prototype.translate = function(tx, ty, tz) {
this.m03 += tx;
this.m13 += ty;
this.m23 += tz;
};
For example: could please someone kindly explain me how to recognize what kind of rotation is generated from following matrix:
JSC3D.Matrix3x4.prototype.rotateAboutXAxis = function(angle) {
if(angle != 0) {
angle *= Math.PI / 180;
var c = Math.cos(angle);
var s = Math.sin(angle);
var m10 = c * this.m10 - s * this.m20;
var m11 = c * this.m11 - s * this.m21;
var m12 = c * this.m12 - s * this.m22;
var m13 = c * this.m13 - s * this.m23;
var m20 = c * this.m20 + s * this.m10;
var m21 = c * this.m21 + s * this.m11;
var m22 = c * this.m22 + s * this.m12;
var m23 = c * this.m23 + s * this.m13;
this.m10 = m10; this.m11 = m11; this.m12 = m12; this.m13 = m13;
this.m20 = m20; this.m21 = m21; this.m22 = m22; this.m23 = m23;
}
};
JSC3D.Matrix3x4.prototype.rotateAboutYAxis = function(angle) {
if(angle != 0) {
angle *= Math.PI / 180;
var c = Math.cos(angle);
var s = Math.sin(angle);
var m00 = c * this.m00 + s * this.m20;
var m01 = c * this.m01 + s * this.m21;
var m02 = c * this.m02 + s * this.m22;
var m03 = c * this.m03 + s * this.m23;
var m20 = c * this.m20 - s * this.m00;
var m21 = c * this.m21 - s * this.m01;
var m22 = c * this.m22 - s * this.m02;
var m23 = c * this.m23 - s * this.m03;
this.m00 = m00; this.m01 = m01; this.m02 = m02; this.m03 = m03;
this.m20 = m20; this.m21 = m21; this.m22 = m22; this.m23 = m23;
}
};
JSC3D.Matrix3x4.prototype.rotateAboutZAxis = function(angle) {
if(angle != 0) {
angle *= Math.PI / 180;
var c = Math.cos(angle);
var s = Math.sin(angle);
var m10 = c * this.m10 + s * this.m00;
var m11 = c * this.m11 + s * this.m01;
var m12 = c * this.m12 + s * this.m02;
var m13 = c * this.m13 + s * this.m03;
var m00 = c * this.m00 - s * this.m10;
var m01 = c * this.m01 - s * this.m11;
var m02 = c * this.m02 - s * this.m12;
var m03 = c * this.m03 - s * this.m13;
this.m00 = m00; this.m01 = m01; this.m02 = m02; this.m03 = m03;
this.m10 = m10; this.m11 = m11; this.m12 = m12; this.m13 = m13;
}
};
It seems to me that this matrices are rows based and follows the right-hand rule, but i'm not sure. Why is also the 4th column involved in rotation? I think i'm missing somewhat else here.
I made also a fiddle to test the results: https://jsfiddle.net/50dhpLq5/
The final transformation matrix is then translated to the origin, rotated, scaled, and finally translated as needed:
this.transformMatrix.identity();
this.transformMatrix.translate(...);
this.transformMatrix.multiply(this.rotMatrix);
this.transformMatrix.scale(...);
this.transformMatrix.translate(...);
It would be for me also a great step forward to learn how to recognize the kind of 3d space used. I'm right if i call this a "world rotation matrix"?