Собственный движок WebGL. Статья №2. Матрица

В продолжении статьи

Матрица.

Когда только начал разрабатывать матрицу, даже не предполагал — на сколько она в дальнейшем нам упростит жизнь. У матрицы много свойств, но в нашей задаче я бы их все свел к одному — «отделение мух от котлет», то есть массива точек от общего массива координат. С точки зрения нашего кода — это будет выделение массива строк, каждая из которых является точкой и массива столбцов, массив одной из координат x,y,z или w. У меня упрощенная модель, поэтому «w» использовать не буду.

Описав наш объект через матрицу, можно с легкостью перемещать объект по любой из осей и поворачивать, а также можно сразу определить центр нашего объекта.

При описании класса матрицы, нам достаточно знать массив из которого мы получим матрицу и размерность точек. Я использую размерность равную трем — x,y,z.

Итак, сам код.

function botuMatrix (source,columns)
{
	this.source = source;
	this.columnNumbers = columns;
	this.rowNumbers = source.length / columns;
	this.rows = [];
	this.minval = [];
	this.maxval = [];
	this.radius = [];
	this.center = [];
	this.column = [];

		
	if (source.length > 0)
	{
		var count = 0;

		while(count < source.length)
		{
			var currentRow = this.source.slice(count,count + this.columnNumbers);		
		    this.rows.push(currentRow);
			
			var columnCount = 0;
			while(columnCount <= this.columnNumbers)
			{
				if (!this.column[columnCount]) 
				{
					this.column[columnCount] = [];
				}
				this.column[columnCount].push(currentRow[columnCount]);
				columnCount += 1;
			}
			
			count = count + this.columnNumbers; 
		}	
		this.rowNumbers = this.rows.length; 
		
		if (this.rows.length > 0)
		{
			count = 0;
			while(count < this.rows.length)
			{
				var tempRow = this.rows[count].slice(0);
				if (count == 0 )
				{
					this.minval = tempRow.slice(0);
					this.maxval = tempRow.slice(0);
					this.radius = tempRow.slice(0);
					this.center = tempRow.slice(0);
				}
			
				if (count > 0)
				{
					var rowcount = 0;
					while(rowcount < tempRow.length)
					{
						this.minval.splice(rowcount,1,Math.min(this.minval[rowcount],tempRow[rowcount]));
					
						this.maxval.splice(rowcount,1,Math.max(this.maxval[rowcount],tempRow[rowcount]));
						this.radius.splice(rowcount,1,(this.maxval[rowcount] - this.minval[rowcount]) / 2);
						this.center.splice(rowcount,1,this.maxval[rowcount] - this.radius[rowcount]);
						rowcount = rowcount + 1; 
					}
				}
				tempRow = null;
				count = count + 1;
			}
			tempRow = null;
		}
	
	}

}

Здесь я сначало определил массивы строк и колонок, это обязательная часть.
Потом некие характеристики матрицы — центр, радиус и максимальные(минимальные) значения всех координат, данный цикл возможно имеет смысл вынести в отдельный метод (функцию) или если они вам не нужны — убрать. «Центр» нам понадобится в дальнейшем при повороте матрицы.

Операции с матрицей.

Вот сейчас и проявляется вся прелесть матрицы.

Перемещение

move: function(value,xyzw){
	this.column[xyzw] = this.column[xyzw].map(function(i){return i+value;})	
	this.updateByColumn();
}

При перемении мы должны у каждой точки объекта изменить нужные координаты на необходимое значение. xyzw — индекс координаты, value — значение. То есть, если нам надо сместить объект вправо на 10 единиц, достаточно к матрице объекта применить следующий метод: move(10,0);
После преобразования мы обновляем всю матрицу — updateByColumn.

Перемещение к определенной точки.

toPoint:function(point){
    if (point)
    {
        if(point.length == this.columnNumbers)
	{
	    this.rows = this.rows.map(function(rowArray)
                                            {
				                return rowArray.map(function(rowElement,index)
			                             {
						         return rowElement + point[index];
					             })
		                            });
            this.updateByRow();
	}		
	}
}

Это перемещение сразу по всем координатам. Очень полезный метод, в этой статье мы его будем использовать для поворота вокруг определенной точки, в следующей статье он нам также пригодиться при построении сложных, «составных» примитивов.

Поворот матрицы.

	rotate:function(angle,point,xyzType){
		function multPointByValue(point,value){
			return point.map(function(val){return value * val});
		}
		this.toPoint(multPointByValue(point,-1));
		var rotateSource = [];
		var radians = angle * Math.PI / 180.0;

		
		switch(xyzType){
			case "byX":
				rotateSource = [1,0,0,
								0,Math.cos(radians),Math.sin(radians),
								0,-1 * Math.sin(radians),Math.cos(radians)
				];
				break;
			case "byY":
				rotateSource = [Math.cos(radians),0,-1 * Math.sin(radians),
								0,1,0,
								Math.sin(radians),0,Math.cos(radians)
								];
				break;
			case "byZ":
				rotateSource = [Math.cos(radians),Math.sin(radians),0,
								-1 * Math.sin(radians),Math.cos(radians),0,
								0,0,1];
				break;			

		}
		
		var rotateMatrix = new botuMatrix(rotateSource,3);
		this.rows = this.rows.map(function(irow){
			return vectorByMatrix(irow,rotateMatrix);
		});
		rotateMatrix = null;
		rotateSource = null;
		this.updateByRow();
		this.toPoint(point);
	}

Поворот вокруг определенной точки point на определенный угол angle, по определенной оси xyzType. Вначале перемещаю матрицу к той точки, вокруг которой будет вращение, потом формируем матрицу поворота в зависимости от оси xyzType, вокруг которой будет поворот. Разворачиваю каждую точку (строку) нашего объекта, после этого перемещаю развернутую матрицу в исходную точку.

Обновление матрицы

У нашей матрицы 3 основных переменных. Весь массив, массив точек-строк (rows), массив координат-колонок (columns). При изменении одного из этих массивов, другие массивы требуется обновить, для этого и используются 2 метода

updateByColumn:function(){
	var columnCount = 0;
	while(columnCount < this.columnNumbers)
	{
		var rowCount = 0;
		while(rowCount < this.rowNumbers)
		{
			this.rows[rowCount][columnCount] = this.column[columnCount][rowCount];
			this.source[columnCount + rowCount * this.columnNumbers] = this.column[columnCount][rowCount]; 
			rowCount++;
		}			
		columnCount++;
	}	
},

updateByRow:function(){
       var rowCount = 0;
	while(rowCount < this.rowNumbers)
	{
		var columnCount = 0;
		while(columnCount < this.columnNumbers)
		{
			this.column[columnCount][rowCount] = this.rows[rowCount][columnCount];
			this.source[columnCount + rowCount * this.columnNumbers] = this.column[columnCount][rowCount]; 
			columnCount++;
		}
		columnCount = null;	
		rowCount++;
	}	
	columnCount = null;
	rowCount = null;
},	

Функция vectorByMatrix — умножение вектора на матрицу, мы её использовали при повороте матрицы, вынесена за пределы класса матрицы, я данную функцию рассматривал как статическую. Если б мне пришлось отдельно делать класс для вектора, то данная функция была бы в прототипе вектора.

function vectorByMatrix(vector,matrix)
{
	//alert(vector);
	var resultVector = [];
	if (vector.length == matrix.rowNumbers)
	{
		var columnCount = 0;
		while(columnCount < matrix.columnNumbers){
			var rowCount = 0;
			var value = 0;
			while(rowCount < matrix.rowNumbers)
			{

				value += vector[rowCount] * matrix.column[columnCount][rowCount];	
				rowCount++;
			}
			//alert(value);
			resultVector.push(value);
			columnCount++;
		}
	}

	return resultVector;
}

Полный код:

function vectorByMatrix(vector,matrix)
{
	var resultVector = [];
	if (vector.length == matrix.rowNumbers)
	{
		var columnCount = 0;
		while(columnCount < matrix.columnNumbers){
			var rowCount = 0;
			var value = 0;
			while(rowCount < matrix.rowNumbers)
			{

				value += vector[rowCount] * matrix.column[columnCount][rowCount];	
				rowCount++;
			}
			resultVector.push(value);
			columnCount++;
		}
	}

	return resultVector;
}


function botuMatrix (source,columns)
{
	this.source = source;
	this.columnNumbers = columns;
	this.rowNumbers = source.length / columns;
	this.rows = [];
	this.minval = [];
	this.maxval = [];
	this.radius = [];
	this.center = [];
	this.column = [];

		
	if (source.length > 0)
	{
		var count = 0;

		while(count < source.length)
		{
			var currentRow = this.source.slice(count,count + this.columnNumbers);		
		    this.rows.push(currentRow);
			
			var columnCount = 0;
			while(columnCount <= this.columnNumbers)
			{
				if (!this.column[columnCount]) 
				{
					this.column[columnCount] = [];
				}
				this.column[columnCount].push(currentRow[columnCount]);
				columnCount += 1;
			}
			
			count = count + this.columnNumbers; 
		}	
		this.rowNumbers = this.rows.length; 
		
		if (this.rows.length > 0)
		{
			count = 0;
			while(count < this.rows.length)
			{
				var tempRow = this.rows[count].slice(0);
				if (count == 0 )
				{
					this.minval = tempRow.slice(0);
					this.maxval = tempRow.slice(0);
					this.radius = tempRow.slice(0);
					this.center = tempRow.slice(0);
				}
			
				if (count > 0)
				{
					var rowcount = 0;
					while(rowcount < tempRow.length)
					{
						this.minval.splice(rowcount,1,Math.min(this.minval[rowcount],tempRow[rowcount]));
					
						this.maxval.splice(rowcount,1,Math.max(this.maxval[rowcount],tempRow[rowcount]));
						this.radius.splice(rowcount,1,(this.maxval[rowcount] - this.minval[rowcount]) / 2);
						this.center.splice(rowcount,1,this.maxval[rowcount] - this.radius[rowcount]);
						rowcount = rowcount + 1; 
					}
				}
				tempRow = undefined;
				count = count + 1;
			}
			tempRow = undefined;
		}
	
	}

}

botuMatrix.prototype = {
	move: function(value,xyzw){
		this.column[xyzw] = this.column[xyzw].map(function(i){return i+value;})	
		this.updateByColumn();
	},
	updateByColumn:function(){
		var columnCount = 0;
		while(columnCount < this.columnNumbers)
		{
			var rowCount = 0;
			while(rowCount < this.rowNumbers)
			{
				this.rows[rowCount][columnCount] = this.column[columnCount][rowCount];
				this.source[columnCount + rowCount * this.columnNumbers] = this.column[columnCount][rowCount]; 
				rowCount++;
			}
			
			columnCount++;
		}	
	},
	updateByRow:function(){
		var rowCount = 0;
		while(rowCount < this.rowNumbers)
		{
			var columnCount = 0;
			while(columnCount < this.columnNumbers)
			{
				this.column[columnCount][rowCount] = this.rows[rowCount][columnCount];
				this.source[columnCount + rowCount * this.columnNumbers] = this.column[columnCount][rowCount]; 
				columnCount++;
			}
			columnCount = undefined;
			
			rowCount++;
		}	
		columnCount = undefined;
		rowCount = undefined;
},	
	toPoint:function(point){
		if (point)
		{
			if(point.length == this.columnNumbers)
			{
				this.rows = this.rows.map(function(rowArray){
					return rowArray.map(function(rowElement,index)
					{
						return rowElement + point[index];
					}
					)
				});
				this.updateByRow();
			}		
		}
	},
	
	byPoint:function(point){
		if (point)
		{
			if(point.length == this.columnNumbers)
			{
				this.rows = this.rows.map(function(rowArray){
					return rowArray.map(function(rowElement,index)
					{
						return rowElement * point[index];
					}
					)
				});
				this.updateByRow();
			}		
		}
	},	
	
	
	rotate:function(angle,point,xyzType){
		function multPointByValue(point,value){
			return point.map(function(val){return value * val});
		}
		this.toPoint(multPointByValue(point,-1));
		var rotateSource = [];
		var radians = angle * Math.PI / 180.0;

		
		switch(xyzType){
			case "byX":
				rotateSource = [1,0,0,
								0,Math.cos(radians),Math.sin(radians),
								0,-1 * Math.sin(radians),Math.cos(radians)
				];
				break;
			case "byY":
				rotateSource = [Math.cos(radians),0,-1 * Math.sin(radians),
								0,1,0,
								Math.sin(radians),0,Math.cos(radians)
								];
				break;
			case "byZ":
				rotateSource = [Math.cos(radians),Math.sin(radians),0,
								-1 * Math.sin(radians),Math.cos(radians),0,
								0,0,1];
				break;			

		}
		
		var rotateMatrix = new botuMatrix(rotateSource,3);
		this.rows = this.rows.map(function(irow){
			return vectorByMatrix(irow,rotateMatrix);
		});
		rotateMatrix = null;
		rotateSource = null;
		this.updateByRow();
		this.toPoint(point);
	}

	
}

Заключение

Класс botuMatrix является вспомогательным для наших примитивов. Все методы, которые были описаны в данной матрице будут использоваться внутри методов примитивов.

В следующей статье будут рассмотрены примитивы — куб, шар, плоская поверхность и так далее.

Автор: Botu

Источник