webgl/src/client/matrix.ts

// @ts-ignore
import mat4 from 'gl-mat4';

/**
 * Initializes matrices for the scene
 * @param {any} params various parameters
 * @return {Array<mat4>} the matrices
 */
export function initModelAndNormalMatrices(params: any) {
	const normalMatrix = [];
	const modelMatrix = [];
	for (let i = 0; i < params.instanceNumber; i++) {
		const normalMatrixTemplate = mat4.create();
		const modelMatrixTemplate = mat4.create();
		let addx = 0;
		let addy = 0;
		if (i % 3 == 1) {
			addx = Math.floor(i / 9 + 1) * params.range * 1.5;
		} else if (i % 3 == 2) {
			addx = -Math.floor(i / 9 + 1) * params.range * 1.5;
		}
		if (i % 9 > 5) {
			addy = Math.floor(i / 9 + 1) * params.range * 1.5;
		} else if (i % 9 > 2 && i % 9 < 6) {
			addy = -Math.floor(i / 9 + 1) * params.range * 1.5;
		}
		mat4.translate(modelMatrixTemplate,
			modelMatrixTemplate,
			[
				params.circleSize * Math.cos(params.squareRotation) + addx +
					params.pos.x,
				params.circleSize * Math.sin(params.squareRotation) + addy +
					params.pos.y,
				params.pos.z,
			]);
		mat4.rotateY(modelMatrixTemplate,
			modelMatrixTemplate,
			params.rot.y);
		mat4.rotateZ(modelMatrixTemplate,
			modelMatrixTemplate,
			params.rot.z);
		mat4.rotateX(modelMatrixTemplate,
			modelMatrixTemplate,
			params.rot.x);
		mat4.rotateY(modelMatrixTemplate,
			modelMatrixTemplate,
			params.squareRotation);
		mat4.scale(modelMatrixTemplate,
			modelMatrixTemplate,
			[
				params.scale.x,
				params.scale.y,
				params.scale.z,
			]);
		mat4.invert(normalMatrixTemplate, modelMatrixTemplate);
		mat4.transpose(normalMatrixTemplate, normalMatrixTemplate);
		normalMatrix.push(normalMatrixTemplate);
		modelMatrix.push(modelMatrixTemplate);
	}
	return [modelMatrix, normalMatrix];
}


/**
 * Initializes matrices for the scene
 * @param {any} gl the WebGL context
 * @param {any} params various parameters
 * @return {Array<mat4>} the matrices
 */
export function initMatrices(gl: any, params: any) {
	const fieldOfView = params.fov * Math.PI / 180;
	const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
	const zNear = 0.1;
	const zFar = 1000.0;
	const projectionMatrix = mat4.create();

	mat4.perspective(
		projectionMatrix,
		fieldOfView,
		aspect,
		zNear,
		zFar);

	const viewMatrix = mat4.create();
	const xAxis = mat4.create();
	mat4.rotateY(viewMatrix, viewMatrix, params.camRot.y);
	mat4.rotateY(xAxis, xAxis, params.camRot.y);
	mat4.rotate(viewMatrix, viewMatrix, params.camRot.x, [
		xAxis[0],
		xAxis[4],
		xAxis[8],
	]);
	mat4.translate(
		viewMatrix,
		viewMatrix,
		[params.camPos.x, params.camPos.y, params.camPos.z]);
	mat4.translate(
		viewMatrix,
		viewMatrix,
		[0.0, 0.0, -params.distance]);
	const normalMatrix = [];
	const modelMatrix = [];
	for (let i = 0; i < params.instanceNumber; i++) {
		const normalMatrixTemplate = mat4.create();
		const modelMatrixTemplate = mat4.create();
		let addx = 0;
		let addy = 0;
		if (i % 3 == 1) {
			addx = Math.floor(i / 9 + 1) * params.range * 1.5;
		} else if (i % 3 == 2) {
			addx = -Math.floor(i / 9 + 1) * params.range * 1.5;
		}
		if (i % 9 > 5) {
			addy = Math.floor(i / 9 + 1) * params.range * 1.5;
		} else if (i % 9 > 2 && i % 9 < 6) {
			addy = -Math.floor(i / 9 + 1) * params.range * 1.5;
		}
		mat4.translate(modelMatrixTemplate,
			modelMatrixTemplate,
			[
				params.circleSize * Math.cos(params.squareRotation) + addx +
					params.pos.x,
				params.circleSize * Math.sin(params.squareRotation) + addy +
					params.pos.y,
				params.pos.z,
			]);
		mat4.rotateY(modelMatrixTemplate,
			modelMatrixTemplate,
			params.rot.y);
		mat4.rotateZ(modelMatrixTemplate,
			modelMatrixTemplate,
			params.rot.z);
		mat4.rotateX(modelMatrixTemplate,
			modelMatrixTemplate,
			params.rot.x);
		mat4.rotateY(modelMatrixTemplate,
			modelMatrixTemplate,
			params.squareRotation);
		mat4.scale(modelMatrixTemplate,
			modelMatrixTemplate,
			[
				params.scale.x,
				params.scale.y,
				params.scale.z,
			]);
		mat4.invert(normalMatrixTemplate, modelMatrixTemplate);
		mat4.transpose(normalMatrixTemplate, normalMatrixTemplate);
		normalMatrix.push(normalMatrixTemplate);
		modelMatrix.push(modelMatrixTemplate);
	}
	return [projectionMatrix, viewMatrix, modelMatrix, normalMatrix];
}