webgl/src/client/matrix.ts

82 lines
2.2 KiB
TypeScript

// @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();
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 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.circleSize * Math.cos(params.squareRotation) + addx,
params.circleSize * Math.sin(params.squareRotation) + addy,
0,
]);
normalModelMatrix.push(normalModelMatrixTemplate);
modelMatrix.push(modelMatrixTemplate);
}
return [projectionMatrix, viewMatrix, modelMatrix, normalModelMatrix];
}