shader-web-test/shader.mjs

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 ** //

async function initShader() {
  // Get GL contexts and stuffs
  const canvas = document.getElementById("shader");
  const gl = canvas.getContext("webgl2");

  canvas.width = CANVAS_WIDTH;
  canvas.height = CANVAS_HEIGHT;

  gl.viewport(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

  // Create Vertex Array
  const vao = gl.createVertexArray();
  gl.bindVertexArray(vao);

  // manipulating bitfield for canvas
  gl.clearColor(1, 1, 0, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);

  // Array of verticies for gpu to render
  const verticies = new Float32Array([
    -1, -1, -1, 1, 1, 1, -1, -1, 1, -1, 1, 1,
  ]);

  // Managing the pixel buffer
  const buf = gl.createBuffer();

  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, verticies, gl.STATIC_DRAW);

  // fetch shaders
  const vert_shader = await fetch_local("./vert.glsl");
  const frag_shader = await fetch_local("./raymarcher.glsl");

  // Compile Shaders
  const vert = compileShader(vert_shader, gl.VERTEX_SHADER, gl);
  const frag = compileShader(frag_shader, gl.FRAGMENT_SHADER, gl);

  // Link shaders into program
  const program = gl.createProgram();

  gl.attachShader(program, vert);
  gl.attachShader(program, frag);

  gl.linkProgram(program);

  // Check errors
  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    const info = gl.getProgramInfoLog(program);
    throw `bitch you messed up\n\n${info}`;
  }

  // Set this as the program that is used to render
  gl.useProgram(program);

  // assign shader variables
  const vert_pos_loc = gl.getAttribLocation(program, "vertex_position");
  gl.enableVertexAttribArray(vert_pos_loc);

  gl.vertexAttribPointer(vert_pos_loc, 2, gl.FLOAT, true, 0, 0);

  // Load Textures
  loadTexture(gl, "./favicon.ico", gl.TEXTURE0);
  const tex1_attr = gl.getUniformLocation(program, "uSampler1");
  gl.uniform1i(tex1_attr, 0);
  loadTexture(gl, "./brain.webp", gl.TEXTURE1);
  const tex2_attr = gl.getUniformLocation(program, "uSampler2");
  gl.uniform1i(tex2_attr, 1);

  return [gl, program, canvas];
}

// Compile Shader Function
function compileShader(source, type, gl) {
  // Set up shader
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);

  // compile the shaders
  gl.compileShader(shader);

  return shader;
}

// fetch local source as a text string
async function fetch_local(src) {
  const res = await fetch(src);
  return await res.text();
}

// 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));
}

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) {
  // Create texture
  const texture = gl.createTexture();
  gl.activeTexture(gl_tex);
  gl.bindTexture(gl.TEXTURE_2D, texture);

  // Create the javascript image
  const image = new Image();
  image.onload = () => {
    // Create GL Texture Buffer
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
  };

  image.src = url;

  // gl.NEAREST is also allowed, instead of gl.LINEAR, as neither mipmap.
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  // Prevents s-coordinate wrapping (repeating).
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  // Prevents t-coordinate wrapping (repeating).
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

  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);