refactor: multiple javascript files
This commit is contained in:
parent
367153bbf6
commit
46fbf1e289
4 changed files with 127 additions and 125 deletions
36
algebra.mjs
Normal file
36
algebra.mjs
Normal file
|
@ -0,0 +1,36 @@
|
||||||
|
export function calcRotationMatrix(vec, rad) {
|
||||||
|
// Equation used from:
|
||||||
|
// https://people.eecs.berkeley.edu/~ug/slide/pipeline/assignments/as5/rotation.html
|
||||||
|
let A = glMatrix.mat3.fromValues(
|
||||||
|
0,
|
||||||
|
-vec[2],
|
||||||
|
vec[1],
|
||||||
|
vec[2],
|
||||||
|
0,
|
||||||
|
-vec[0],
|
||||||
|
-vec[1],
|
||||||
|
vec[0],
|
||||||
|
0,
|
||||||
|
);
|
||||||
|
|
||||||
|
let I = glMatrix.mat3.create();
|
||||||
|
|
||||||
|
// Matrix Exponential
|
||||||
|
let Mpow = glMatrix.mat3.create();
|
||||||
|
glMatrix.mat3.mul(Mpow, A, A);
|
||||||
|
|
||||||
|
let M1 = glMatrix.mat3.create();
|
||||||
|
let M2 = glMatrix.mat3.create();
|
||||||
|
|
||||||
|
// Scalar Multiplications
|
||||||
|
glMatrix.mat3.multiplyScalar(M1, A, Math.sin(rad));
|
||||||
|
glMatrix.mat3.multiplyScalar(M2, Mpow, 1 - Math.cos(rad));
|
||||||
|
|
||||||
|
// Matrix Addition
|
||||||
|
let M3 = glMatrix.mat3.create();
|
||||||
|
let Q = glMatrix.mat3.create();
|
||||||
|
glMatrix.mat3.add(M3, I, M1);
|
||||||
|
glMatrix.mat3.add(Q, M3, M2);
|
||||||
|
|
||||||
|
return Q;
|
||||||
|
}
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>Shaders are Fun</title>
|
<title>Shaders are Fun</title>
|
||||||
<link rel="icon" href="https://fav.farm/🐴" />
|
<link rel="icon" href="https://fav.farm/🐴" />
|
||||||
<script defer src="shader.mjs" type="module"></script>
|
<script defer src="main.mjs" type="module"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<canvas id="shader"> </canvas>
|
<canvas id="shader"> </canvas>
|
||||||
|
|
85
main.mjs
Normal file
85
main.mjs
Normal file
|
@ -0,0 +1,85 @@
|
||||||
|
import "https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/3.4.2/gl-matrix-min.js";
|
||||||
|
import { initShader } from "./shader.mjs";
|
||||||
|
import { calcRotationMatrix } from "./algebra.mjs";
|
||||||
|
|
||||||
|
const CANVAS_WIDTH = 700;
|
||||||
|
const CANVAS_HEIGHT = 700;
|
||||||
|
let TIME = 0;
|
||||||
|
let camera_pos = [0, 0, 0];
|
||||||
|
let mouse_pos = [0, 0];
|
||||||
|
|
||||||
|
// Update the Camera position
|
||||||
|
function updateCamera(gl, program) {
|
||||||
|
if (keymap.get("w")) {
|
||||||
|
camera_pos[2] += 0.1;
|
||||||
|
}
|
||||||
|
if (keymap.get("a")) {
|
||||||
|
camera_pos[0] += -0.1;
|
||||||
|
}
|
||||||
|
if (keymap.get("s")) {
|
||||||
|
camera_pos[2] += -0.1;
|
||||||
|
}
|
||||||
|
if (keymap.get("d")) {
|
||||||
|
camera_pos[0] += 0.1;
|
||||||
|
}
|
||||||
|
if (keymap.get("e")) {
|
||||||
|
camera_pos[1] += 0.1;
|
||||||
|
}
|
||||||
|
if (keymap.get("q")) {
|
||||||
|
camera_pos[1] += -0.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Position
|
||||||
|
const pos = gl.getUniformLocation(program, "camera_pos");
|
||||||
|
gl.uniform3fv(pos, camera_pos);
|
||||||
|
|
||||||
|
// Rotation
|
||||||
|
const rot = gl.getUniformLocation(program, "camera_rot");
|
||||||
|
|
||||||
|
let M1 = calcRotationMatrix([0, -1, 0], mouse_pos[0]);
|
||||||
|
let M2 = calcRotationMatrix([-1, 0, 0], mouse_pos[1]);
|
||||||
|
let rot_mat = glMatrix.mat3.create();
|
||||||
|
|
||||||
|
glMatrix.mat3.mul(rot_mat, M1, M2);
|
||||||
|
gl.uniform3fv(rot, rot_mat);
|
||||||
|
}
|
||||||
|
|
||||||
|
// update the canvas
|
||||||
|
function draw(gl, program) {
|
||||||
|
// Create uniform
|
||||||
|
const loc = gl.getUniformLocation(program, "time");
|
||||||
|
TIME += 1 / 60;
|
||||||
|
gl.uniform1f(loc, TIME);
|
||||||
|
|
||||||
|
updateCamera(gl, program);
|
||||||
|
|
||||||
|
// Draw the frame recursively on next frame
|
||||||
|
gl.drawArrays(gl.TRIANGLES, 0, 6);
|
||||||
|
requestAnimationFrame(() => draw(gl, program));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize the shader
|
||||||
|
const [gl, program, canvas] = await initShader(CANVAS_WIDTH, CANVAS_HEIGHT);
|
||||||
|
|
||||||
|
// Key Presses
|
||||||
|
let keymap = new Map();
|
||||||
|
document.addEventListener("keydown", function (event) {
|
||||||
|
keymap.set(event.key, true);
|
||||||
|
});
|
||||||
|
document.addEventListener("keyup", function (event) {
|
||||||
|
keymap.set(event.key, false);
|
||||||
|
});
|
||||||
|
// Mouse movement
|
||||||
|
document.addEventListener("mousemove", function (event) {
|
||||||
|
mouse_pos[0] += event.movementX / 800;
|
||||||
|
mouse_pos[1] += event.movementY / 800;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Request pointer Lock
|
||||||
|
canvas.addEventListener("click", async () => {
|
||||||
|
await canvas.requestPointerLock();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update loop
|
||||||
|
updateCamera(gl, program);
|
||||||
|
draw(gl, program);
|
129
shader.mjs
129
shader.mjs
|
@ -1,22 +1,14 @@
|
||||||
import "https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/3.4.2/gl-matrix-min.js";
|
|
||||||
|
|
||||||
const CANVAS_WIDTH = 700;
|
|
||||||
const CANVAS_HEIGHT = 700;
|
|
||||||
let TIME = 0;
|
|
||||||
let camera_pos = [0, 0, 0];
|
|
||||||
let mouse_pos = [0, 0];
|
|
||||||
|
|
||||||
// ** Initialization stuffs ** //
|
// ** Initialization stuffs ** //
|
||||||
|
|
||||||
async function initShader() {
|
export async function initShader(c_width, c_height) {
|
||||||
// Get GL contexts and stuffs
|
// Get GL contexts and stuffs
|
||||||
const canvas = document.getElementById("shader");
|
const canvas = document.getElementById("shader");
|
||||||
const gl = canvas.getContext("webgl2");
|
const gl = canvas.getContext("webgl2");
|
||||||
|
|
||||||
canvas.width = CANVAS_WIDTH;
|
canvas.width = c_width;
|
||||||
canvas.height = CANVAS_HEIGHT;
|
canvas.height = c_height;
|
||||||
|
|
||||||
gl.viewport(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
|
gl.viewport(0, 0, c_width, c_height);
|
||||||
|
|
||||||
// Create Vertex Array
|
// Create Vertex Array
|
||||||
const vao = gl.createVertexArray();
|
const vao = gl.createVertexArray();
|
||||||
|
@ -97,93 +89,7 @@ async function fetch_local(src) {
|
||||||
return await res.text();
|
return await res.text();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update the Camera position
|
// Loads a single Texture to the Shader
|
||||||
function updateCamera(gl, program) {
|
|
||||||
if (keymap.get("w")) {
|
|
||||||
camera_pos[2] += 0.1;
|
|
||||||
}
|
|
||||||
if (keymap.get("a")) {
|
|
||||||
camera_pos[0] += -0.1;
|
|
||||||
}
|
|
||||||
if (keymap.get("s")) {
|
|
||||||
camera_pos[2] += -0.1;
|
|
||||||
}
|
|
||||||
if (keymap.get("d")) {
|
|
||||||
camera_pos[0] += 0.1;
|
|
||||||
}
|
|
||||||
if (keymap.get("e")) {
|
|
||||||
camera_pos[1] += 0.1;
|
|
||||||
}
|
|
||||||
if (keymap.get("q")) {
|
|
||||||
camera_pos[1] += -0.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Position
|
|
||||||
const pos = gl.getUniformLocation(program, "camera_pos");
|
|
||||||
gl.uniform3fv(pos, camera_pos);
|
|
||||||
|
|
||||||
// Rotation
|
|
||||||
const rot = gl.getUniformLocation(program, "camera_rot");
|
|
||||||
|
|
||||||
let M1 = calcRotationMatrix([0, -1, 0], mouse_pos[0]);
|
|
||||||
let M2 = calcRotationMatrix([-1, 0, 0], mouse_pos[1]);
|
|
||||||
let rot_mat = glMatrix.mat3.create();
|
|
||||||
|
|
||||||
glMatrix.mat3.mul(rot_mat, M1, M2);
|
|
||||||
gl.uniform3fv(rot, rot_mat);
|
|
||||||
}
|
|
||||||
|
|
||||||
// update the canvas
|
|
||||||
function draw(gl, program) {
|
|
||||||
// Create uniform
|
|
||||||
const loc = gl.getUniformLocation(program, "time");
|
|
||||||
TIME += 1 / 60;
|
|
||||||
gl.uniform1f(loc, TIME);
|
|
||||||
|
|
||||||
updateCamera(gl, program);
|
|
||||||
|
|
||||||
// Draw the frame recursively on next frame
|
|
||||||
gl.drawArrays(gl.TRIANGLES, 0, 6);
|
|
||||||
requestAnimationFrame(() => draw(gl, program));
|
|
||||||
}
|
|
||||||
|
|
||||||
function calcRotationMatrix(vec, rad) {
|
|
||||||
// Equation used from:
|
|
||||||
// https://people.eecs.berkeley.edu/~ug/slide/pipeline/assignments/as5/rotation.html
|
|
||||||
let A = glMatrix.mat3.fromValues(
|
|
||||||
0,
|
|
||||||
-vec[2],
|
|
||||||
vec[1],
|
|
||||||
vec[2],
|
|
||||||
0,
|
|
||||||
-vec[0],
|
|
||||||
-vec[1],
|
|
||||||
vec[0],
|
|
||||||
0,
|
|
||||||
);
|
|
||||||
|
|
||||||
let I = glMatrix.mat3.create();
|
|
||||||
|
|
||||||
// Matrix Exponential
|
|
||||||
let Mpow = glMatrix.mat3.create();
|
|
||||||
glMatrix.mat3.mul(Mpow, A, A);
|
|
||||||
|
|
||||||
let M1 = glMatrix.mat3.create();
|
|
||||||
let M2 = glMatrix.mat3.create();
|
|
||||||
|
|
||||||
// Scalar Multiplications
|
|
||||||
glMatrix.mat3.multiplyScalar(M1, A, Math.sin(rad));
|
|
||||||
glMatrix.mat3.multiplyScalar(M2, Mpow, 1 - Math.cos(rad));
|
|
||||||
|
|
||||||
// Matrix Addition
|
|
||||||
let M3 = glMatrix.mat3.create();
|
|
||||||
let Q = glMatrix.mat3.create();
|
|
||||||
glMatrix.mat3.add(M3, I, M1);
|
|
||||||
glMatrix.mat3.add(Q, M3, M2);
|
|
||||||
|
|
||||||
return Q;
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadTexture(gl, url, gl_tex) {
|
function loadTexture(gl, url, gl_tex) {
|
||||||
// Create texture
|
// Create texture
|
||||||
const texture = gl.createTexture();
|
const texture = gl.createTexture();
|
||||||
|
@ -211,28 +117,3 @@ function loadTexture(gl, url, gl_tex) {
|
||||||
|
|
||||||
return texture;
|
return texture;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Initialize the shader
|
|
||||||
const [gl, program, canvas] = await initShader();
|
|
||||||
|
|
||||||
// Key Presses
|
|
||||||
let keymap = new Map();
|
|
||||||
document.addEventListener("keydown", function (event) {
|
|
||||||
keymap.set(event.key, true);
|
|
||||||
});
|
|
||||||
document.addEventListener("keyup", function (event) {
|
|
||||||
keymap.set(event.key, false);
|
|
||||||
});
|
|
||||||
// Mouse movement
|
|
||||||
document.addEventListener("mousemove", function (event) {
|
|
||||||
mouse_pos[0] += event.movementX / 800;
|
|
||||||
mouse_pos[1] += event.movementY / 800;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Request pointer Lock
|
|
||||||
canvas.addEventListener("click", async () => {
|
|
||||||
await canvas.requestPointerLock();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Update loop
|
|
||||||
draw(gl, program);
|
|
||||||
|
|
Loading…
Reference in a new issue