WebGL自学课程(4):WebGL矩阵、Camera基础操作

直接使用WebGL进行开发比较困难，所以用WebGL进行三维开发一般都要使用框架，本人也在学习WebGL，所以想构建一个自己习惯的框架，正好加深自己对WebGL技术的理解。WebGL框架中最重要的部分应该是矩阵变换以及Camera操作，所以本人首先构建矩阵和摄像机方面的基础代码。本人的代码还比较基础，谈不上框架，只是为了是自己加深理解而已。代码如下：

isZero = function(value){
	if(Math.abs(value) < 0.000001){
		return true;
	}
	else{
		return false;
	}
};
//
Vertice = function(x,y,z){
	this.x = x||0;
	this.y = y||0;
	this.z = z||0;
};

//
Vector = function(x,y,z){
	this.x = x||0;
	this.y = y||0;
	this.z = z||0;
};

Vector.prototype = {
	constructor:Vector,
	
	getLength:function(){
		return Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z);
	},
	
	normalize:function(){
		var length = this.getLength();
		if(!isZero(length)){
			this.x /= length;
			this.y /= length;
			this.z /= length;
		}
		else{
			this.x = 0;
			this.y = 0;
			this.z = 0;
		}
		
		return this;
	},
	
	cross:function(other){
		var x = this.y * other.z - this.z * other.y;
		var y = this.z * other.x - this.x * other.z;
		var z = this.x * other.y - this.y * other.x;
		
		return new Vector(x,y,z);
	}
};
//
Matrix = function(m11,m12,m13,m14,m21,m22,m23,m24,m31,m32,m33,m34,m41,m42,m43,m44){
	this.elements = new Float32Array(16);
	
	this.setElements(
		m11||1, m12||0, m13||0, m14||0,
		m21||0, m22||1, m23||0, m24||0,
		m31||0, m32||0, m33||1, m34||0,
		m41||0, m42||0, m43||0, m44||1
	);
};

Matrix.prototype = {
	constructor:Matrix,
	
	setElements:function(m11,m12,m13,m14,m21,m22,m23,m24,m31,m32,m33,m34,m41,m42,m43,m44){
		var values = this.elements;
		values[0]=m11;values[4]=m12;values[8]=m13;values[12]=m14;
		values[1]=m21;values[5]=m22;values[9]=m23;values[13]=m24;
		values[2]=m31;values[6]=m32;values[10]=m33;values[14]=m34;
		values[3]=m41;values[7]=m42;values[11]=m43;values[15]=m44;
	},
	
	setColumnX:function(x,y,z){
		this.elements[0] = x;
		this.elements[1] = y;
		this.elements[2] = z;
	},
	
	getColumnX:function(){
		return new Vertice(this.elements[0],this.elements[1],this.elements[2]);
	},
	
	setColumnY:function(x,y,z){
		this.elements[4] = x;
		this.elements[5] = y;
		this.elements[6] = z;
	},
	
	getColumnY:function(){
		return new Vertice(this.elements[4],this.elements[5],this.elements[6]);
	},
	
	setColumnZ:function(x,y,z){
		this.elements[8] = x;
		this.elements[9] = y;
		this.elements[10] = z;
	},
	
	getColumnZ:function(){
		return new Vertice(this.elements[8],this.elements[9],this.elements[10]);
	},
	
	setColumnTrans:function(x,y,z){
		this.elements[12] = x;
		this.elements[13] = y;
		this.elements[14] = z;
	},
	
	getColumnTrans:function(){
		return new Vertice(this.elements[12],this.elements[13],this.elements[14]);
	},
	
	setLastRowDefault:function(){
		this.elements[3]=0;
		this.elements[7]=0;
		this.elements[11]=0;
		this.elements[15]=1;
	},
	
	transpose:function(){
		var result = new Matrix();
		result.elements[0]=this.elements[0];
		result.elements[4]=this.elements[1];
		result.elements[8]=this.elements[2];
		result.elements[12]=this.elements[3];
		
		result.elements[1]=this.elements[4];
		result.elements[5]=this.elements[5];
		result.elements[9]=this.elements[6];
		result.elements[13]=this.elements[7];
		
		result.elements[2]=this.elements[8];
		result.elements[6]=this.elements[9];
		result.elements[10]=this.elements[10];
		result.elements[14]=this.elements[11];
		
		result.elements[3]=this.elements[12];
		result.elements[7]=this.elements[13];
		result.elements[11]=this.elements[14];
		result.elements[15]=this.elements[15];
		
		this.setMatrixByOther(result);
	},
	
	setMatrixByOther:function(otherMatrix){
		for(var i=0;i<otherMatrix.elements.length;i++){
			this.elements[i]=otherMatrix.elements[i];
		}
	},
	
	setSquareMatrix:function(){
		this.setElements(1,0,0,0,
						 0,1,0,0,
						 0,0,1,0,
						 0,0,0,1);
	},
	
	copy:function(){
		var clone = new Matrix(this.elements[0],this.elements[4],this.elements[8],this.elements[12],
							   this.elements[1],this.elements[5],this.elements[9],this.elements[13],
							   this.elements[2],this.elements[6],this.elements[10],this.elements[14],
							   this.elements[3],this.elements[7],this.elements[11],this.elements[15]);
		return clone;
	},
	
	multiply:function(otherMatrix){
		var values1 = this.elements;
		var values2 = otherMatrix.elements;
		var m11 = values1[0]*values2[0]+values1[4]*values2[1]+values1[8]*values2[2]+values1[12]*values2[3];
		var m12 = values1[0]*values2[4]+values1[4]*values2[5]+values1[8]*values2[6]+values1[12]*values2[7];
		var m13 = values1[0]*values2[8]+values1[4]*values2[9]+values1[8]*values2[10]+values1[12]*values2[11];
		var m14 = values1[0]*values2[12]+values1[4]*values2[13]+values1[8]*values2[14]+values1[12]*values2[15];
		var m21 = values1[1]*values2[0]+values1[5]*values2[1]+values1[9]*values2[2]+values1[13]*values2[3];
		var m22 = values1[1]*values2[4]+values1[5]*values2[5]+values1[9]*values2[6]+values1[13]*values2[7];
		var m23 = values1[1]*values2[8]+values1[5]*values2[9]+values1[9]*values2[10]+values1[13]*values2[11];
		var m24 = values1[1]*values2[12]+values1[5]*values2[13]+values1[9]*values2[14]+values1[13]*values2[15];
		var m31 = values1[2]*values2[0]+values1[6]*values2[1]+values1[10]*values2[2]+values1[14]*values2[3];
		var m32 = values1[2]*values2[4]+values1[6]*values2[5]+values1[10]*values2[6]+values1[14]*values2[7];
		var m33 = values1[2]*values2[8]+values1[6]*values2[9]+values1[10]*values2[10]+values1[14]*values2[11];
		var m34 = values1[2]*values2[12]+values1[6]*values2[13]+values1[10]*values2[14]+values1[14]*values2[15];
		var m41 = values1[3]*values2[0]+values1[7]*values2[1]+values1[11]*values2[2]+values1[15]*values2[3];
		var m42 = values1[3]*values2[4]+values1[7]*values2[5]+values1[11]*values2[6]+values1[15]*values2[7];
		var m43 = values1[3]*values2[8]+values1[7]*values2[9]+values1[11]*values2[10]+values1[15]*values2[11];
		var m44 = values1[3]*values2[12]+values1[7]*values2[13]+values1[11]*values2[14]+values1[15]*values2[15];
		
		return new Matrix(m11,m12,m13,m14,m21,m22,m23,m24,m31,m32,m33,m34,m41,m42,m43,m44);
	},
	
	checkZero:function(){
		for(var i = 0;i < this.elements.length;i++){
			if(isZero(this.elements[i])){
				this.elements[i] = 0;
			}
		}
	},
	
	worldTranslate:function(x,y,z){
		this.elements[12] += x;
		this.elements[13] += y;
		this.elements[14] += z;
	},
	
	worldRotateX:function(radian){
		var c = Math.cos(radian);
		var s = Math.sin(radian);
		var m = new Matrix(1,0,0,0,
						   0,c,-s,0,
						   0,s,c,0,
						   0,0,0,1);
		var result = m.multiply(this);
		result.checkZero();
		this.setMatrixByOther(result);		
	},
	
	worldRotateY:function(radian){
		var c = Math.cos(radian);
		var s = Math.sin(radian);
		var m = new Matrix(c,0,s,0,
						   0,1,0,0,
						   -s,0,c,0,
						   0,0,0,1);
	    var result = m.multiply(this);
		result.checkZero();
		this.setMatrixByOther(result);
	},
	
	worldRotateZ:function(radian){
		var c = Math.cos(radian);
		var s = Math.sin(radian);
		var m = new Matrix(c,-s,0,0,
						   s,c,0,0,
						   0,0,1,0,
						   0,0,0,1);
	    var result = m.multiply(this);
		result.checkZero();
		this.setMatrixByOther(result);
	},
	
	worldRotateByVector:function(radian,vector){
		var x = vector.x;
		var y = vector.y;
		var z = vector.z;
		
		var length, s, c;
		var xx, yy, zz, xy, yz, zx, xs, ys, zs, one_c;

		s = Math.sin(radian);
		c = Math.cos(radian);

		length = Math.sqrt( x*x + y*y + z*z );

		// Rotation matrix is normalized
		x /= length;
		y /= length;
		z /= length;

		xx = x * x;
		yy = y * y;
		zz = z * z;
		xy = x * y;
		yz = y * z;
		zx = z * x;
		xs = x * s;
		ys = y * s;
		zs = z * s;
		one_c = 1.0 - c;

		var m11 = (one_c * xx) + c;//M(0,0)
		var m12 = (one_c * xy) - zs;//M(0,1)
		var m13 = (one_c * zx) + ys;//M(0,2)
		var m14 = 0.0;//M(0,3) 表示平移X

		var m21 = (one_c * xy) + zs;//M(1,0)
		var m22 = (one_c * yy) + c;//M(1,1)
		var m23 = (one_c * yz) - xs;//M(1,2)
		var m24 = 0.0;//M(1,3)  表示平移Y

		var m31 = (one_c * zx) - ys;//M(2,0)
		var m32 = (one_c * yz) + xs;//M(2,1)
		var m33 = (one_c * zz) + c;//M(2,2)
		var m34 = 0.0;//M(2,3)  表示平移Z

		var m41 = 0.0;//M(3,0)
		var m42 = 0.0;//M(3,1)
		var m43 = 0.0;//M(3,2)
		var m44 = 1.0;//M(3,3)
		
		var mat = new Matrix(m11,m12,m13,m14,
								m21,m22,m23,m24,
								m31,m32,m33,m34,
								m41,m42,m43,m44);
		
		var result = mat.multiply(this);
		result.checkZero();
		this.setMatrixByOther(result);
	},
	
	localRotateX:function(radian){
		var transX = this.elements[12];
		var transY = this.elements[13];
		var transZ = this.elements[14];
		
		this.worldTranslate(-transX,-transY,-transZ);
		var columnX = this.getColumnX();
		this.worldRotateByVector(radian,columnX);
		this.worldTranslate(transX,transY,transZ);
	},
	
	localRotateY:function(radian){
		var transX = this.elements[12];
		var transY = this.elements[13];
		var transZ = this.elements[14];
		
		this.worldTranslate(-transX,-transY,-transZ);
		var columnY = this.getColumnY();
		this.worldRotateByVector(radian,columnY);
		this.worldTranslate(transX,transY,transZ);
	},
	
	localRotateZ:function(radian){
		var transX = this.elements[12];
		var transY = this.elements[13];
		var transZ = this.elements[14];
		
		this.worldTranslate(-transX,-transY,-transZ);
		var columnZ = this.getColumnZ();
		this.worldRotateByVector(radian,columnZ);
		this.worldTranslate(transX,transY,transZ);
	}
};


Object3D = function(){
	this.matrix = new Matrix();
}
Object3D.prototype = {
	constructor:Object3D,
	
	worldTranslate:function(x,y,z){
		this.matrix.worldTranslate(x,y,z);
	},
	
	worldRotateX:function(radian){
		this.matrix.worldRotateX(radian);
	},
	
	worldRotateY:function(radian){
		this.matrix.worldRotateY(radian);
	},
	
	worldRotateZ:function(radian){
		this.matrix.worldRotateZ(radian);
	},
	
	worldRotateByVector:function(radian,vector){
		this.matrix.worldRotateByVector(radian,vector);
	},
	
	localRotateX:function(radian){
		this.matrix.localRotateX(radian);
	},
	
	localRotateY:function(radian){
		this.matrix.localRotateY(radian);
	},
	
	localRotateZ:function(radian){
		this.matrix.localRotateZ(radian);
	}
};


PerspectiveCamera = function(fov,aspect,near,far){
	this.fov = fov;
	this.aspect = aspect;
	this.near = near;
	this.far = far;
	this.matrix = new Matrix();//相当于Camera的一般的模型矩阵
	this.projMatrix = new Matrix();
	this.getPerspectiveMatrix(fov||90,aspect||1,near||0.1,far||100);
}
PerspectiveCamera.prototype = new Object3D();
PerspectiveCamera.prototype.constructor = PerspectiveCamera;

PerspectiveCamera.prototype.getPerspectiveMatrix = function(fov,aspect,near,far){
	this.fov = fov||this.fov;
	this.aspect = aspect||this.aspect;
	this.near = near||this.near;
	this.far = far||this.far;
		
	var a = 1.0/Math.tan(this.fov / 2 * Math.PI / 180);
	var b = this.far/(this.far-this.near);
	var c = -this.near*this.far/(this.far-this.near);
		
	this.projMatrix.setElements(a/aspect, 0, 0, 0,
								0, a, 0, 0,
								0, 0, b, 1,
								0, 0, c, 0);
};

PerspectiveCamera.prototype.getViewMatrix = function(){	
	var columnTrans = this.matrix.getColumnTrans();
	var transX = columnTrans.x;
	var transY = columnTrans.y;
	var transZ = columnTrans.z;
	
    var mat1 = new Matrix();
	mat1.setMatrixByOther(this.matrix);
	
	mat1.transpose();//因为视点矩阵与模型矩阵相反，所以要对各个方向进行转置操作，从而实现设置模型矩阵的XYZ方向。通过Camera的一般的模型矩阵对XYZ方向进行转置，得到视点矩阵的XYZ方向
	mat1.setColumnTrans(0,0,0);
	mat1.setLastRowDefault();
	
	var mat2 = new Matrix();
	mat2.setColumnTrans(-transX,-transY,-transZ);
	
	var viewMatrix = mat1.multiply(mat2);
	viewMatrix.checkZero();
	return viewMatrix;
};

PerspectiveCamera.prototype.look = function(/*vertice*/ cameraPnt,/*vertice*/ targetPnt,/*vector*/ upDirection){
	var transX = cameraPnt.x;
	var transY = cameraPnt.y;
	var transZ = cameraPnt.z;
	var up = upDirection||new Vector(0,1,0);
	var zAxis = new Vector(cameraPnt.x-targetPnt.x,cameraPnt.y-targetPnt.y,cameraPnt.z-targetPnt.z).normalize();
	var xAxis = up.cross(zAxis).normalize();
	var yAxis = zAxis.cross(xAxis).normalize();
		
	this.matrix.setColumnX(xAxis.x,xAxis.y,xAxis.z);//此处相当于对Camera的模型矩阵(还不是视点矩阵)设置X轴方向
	this.matrix.setColumnY(yAxis.x,yAxis.y,yAxis.z);//此处相当于对Camera的模型矩阵(还不是视点矩阵)设置Y轴方向
	this.matrix.setColumnZ(zAxis.x,zAxis.y,zAxis.z);//此处相当于对Camera的模型矩阵(还不是视点矩阵)设置Z轴方向
	this.matrix.setColumnTrans(transX,transY,transZ);//此处相当于对Camera的模型矩阵(还不是视点矩阵)设置偏移量
	this.matrix.setLastRowDefault();	
};