function createVMatrix(qt) {
const cx = 1 * Number(Math.sin(0));
const cz = 1 * Number(Math.cos(0));
const eyePosition = quat.create();
eyePosition[0] = cx;
eyePosition[1] = 0;
eyePosition[2] = cz;
const centerPosition = [0.0, 0.0, 0.0];
const cameraUp = quat.create();
cameraUp[0] = 0;
cameraUp[1] = 1;
cameraUp[2] = 0;
const rotatedEyePosition = new Array(3);
convertToVec3(rotatedEyePosition, qt, eyePosition);
const rotatedCameraUp = new Array(3);
convertToVec3(rotatedCameraUp, qt, cameraUp);
const vMatrix = mat4.identity(mat4.create());
mat4.lookAt(vMatrix, rotatedEyePosition, centerPosition, rotatedCameraUp);
return vMatrix;
}
function convertToVec3(dst, q, p) {
const r = quat.create();
quat.invert(r, q);
const rp = quat.create();
quat.multiply(rp, r, p);
const rpq = quat.create();
quat.multiply(rpq, rp, q);
dst[0] = rpq[0];
dst[1] = rpq[1];
dst[2] = rpq[2];
}
const main = () => {
const ctx = new RenderingContext("canvas");
const canvas = document.getElementById("canvas");
ctx.toggleDepthFunc(true);
ctx.depthFunc();
const bufferSize = 512;
const frameBufferAttr = ctx.createFrameBuffer(bufferSize, bufferSize);
const qt = quat.identity(quat.create());
document.addEventListener("mousemove", e => calculateQuat(e, canvas, qt));
// kernel
const hWeight = [1.0, 0.0, -1.0, 2.0, 0.0, -2.0, 1.0, 0.0, -1.0];
const vWeight = [1.0, 2.0, 1.0, 0.0, 0.0, 0.0, -1.0, -2.0, -1.0];
render(canvas, ctx, hWeight, vWeight, frameBufferAttr, bufferSize, qt);
};