webgl/src/client/matrix.ts

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

/**
 * 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();
	mat4.rotateY(viewMatrix, viewMatrix, params.camRot.y);
	mat4.rotateX(viewMatrix, viewMatrix, params.camRot.x);
	mat4.translate(
		viewMatrix,
		viewMatrix,
		[params.camPos.x, params.camPos.y, params.camPos.z]);
	mat4.translate(
		viewMatrix,
		viewMatrix,
		[0.0, 0.0, -params.distance]);

	const normalModelMatrix = [];
	const modelMatrix = [];
	for (let i = 0; i < params.instanceNumber; i++) {
		const normalModelMatrixTemplate = mat4.create();
		const modelMatrixTemplate = mat4.create();
		let addx = 0;
		let addy = 0;
		mat4.rotateY(normalModelMatrixTemplate,
			normalModelMatrixTemplate,
			params.rot.y);
		mat4.rotateZ(normalModelMatrixTemplate,
			normalModelMatrixTemplate,
			params.rot.z);
		mat4.rotateX(normalModelMatrixTemplate,
			normalModelMatrixTemplate,
			params.rot.x);
		mat4.rotateY(normalModelMatrixTemplate,
			normalModelMatrixTemplate,
			params.squareRotation);
		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.avg.x + addx,
				-params.avg.y + addy,
				-params.avg.z,
			]);
		normalModelMatrix.push(normalModelMatrixTemplate);
		modelMatrix.push(modelMatrixTemplate);
	}
	return [projectionMatrix, viewMatrix, modelMatrix, normalModelMatrix];
}