a rotating cube (#3)

2024-12-22 20:01:51 +05:30
parent 41196e4840
commit 5ecaf14b3d
10 changed files with 312 additions and 43 deletions
@@ -12,7 +12,7 @@ const EventTypes = {
  keydown: 3,
  keyup: 4,
  onWheel: 5,
-} as const
+} as const;
 type EventTypesI = typeof EventTypes;

 /**
@@ -22,13 +22,28 @@ type EventTypesI = typeof EventTypes;
 const connectWorker = (worker: Worker) => {
  const eventPassers = {
    [EventTypes.pointermove]: (e: PointerEvent) => {
-      worker.postMessage([MessageType.domEvent, EventTypes.pointermove, e.clientX, e.clientY]);
+      worker.postMessage([
+        MessageType.domEvent,
+        EventTypes.pointermove,
+        e.clientX,
+        e.clientY,
+      ]);
    },
    [EventTypes.pointerup]: (e: PointerEvent) => {
-      worker.postMessage([MessageType.domEvent, EventTypes.pointerup, e.clientX, e.clientY]);
+      worker.postMessage([
+        MessageType.domEvent,
+        EventTypes.pointerup,
+        e.clientX,
+        e.clientY,
+      ]);
    },
    [EventTypes.pointerdown]: (e: PointerEvent) => {
-      worker.postMessage([MessageType.domEvent, EventTypes.pointerdown, e.clientX, e.clientY]);
+      worker.postMessage([
+        MessageType.domEvent,
+        EventTypes.pointerdown,
+        e.clientX,
+        e.clientY,
+      ]);
    },
    [EventTypes.keydown]: (e: KeyboardEvent) => {
      worker.postMessage([MessageType.domEvent, EventTypes.keydown, e.key]);
@@ -41,33 +56,58 @@ const connectWorker = (worker: Worker) => {
    },
  } as const;

-  document.addEventListener("pointermove", eventPassers[EventTypes.pointermove]);
-  document.addEventListener("pointerdown", eventPassers[EventTypes.pointerdown]);
+  document.addEventListener(
+    "pointermove",
+    eventPassers[EventTypes.pointermove]
+  );
+  document.addEventListener(
+    "pointerdown",
+    eventPassers[EventTypes.pointerdown]
+  );
  document.addEventListener("pointerup", eventPassers[EventTypes.pointerup]);
-  // 
+  //
  document.addEventListener("keydown", eventPassers[EventTypes.keydown]);
  document.addEventListener("keyup", eventPassers[EventTypes.keyup]);

  const disconnectWorker = () => {
-    document.removeEventListener("pointermove", eventPassers[EventTypes.pointermove]);
-    document.removeEventListener("pointerdown", eventPassers[EventTypes.pointerdown]);
-    document.removeEventListener("pointerup", eventPassers[EventTypes.pointerup]);
-    // 
+    document.removeEventListener(
+      "pointermove",
+      eventPassers[EventTypes.pointermove]
+    );
+    document.removeEventListener(
+      "pointerdown",
+      eventPassers[EventTypes.pointerdown]
+    );
+    document.removeEventListener(
+      "pointerup",
+      eventPassers[EventTypes.pointerup]
+    );
+    //
    document.removeEventListener("keydown", eventPassers[EventTypes.keydown]);
    document.removeEventListener("keyup", eventPassers[EventTypes.keyup]);
-  }
+  };

  return disconnectWorker;
-}
+};

 const attachCanvas = (worker: Worker, canvas: HTMLCanvasElement | string) => {
-  if (typeof canvas === "string") canvas = document.getElementById("rendering-canvas") as HTMLCanvasElement;
+  if (typeof canvas === "string")
+    canvas = document.getElementById("rendering-canvas") as HTMLCanvasElement;
  if (!canvas) {
    throw new Error("Fatal: Canvas Not Found!");
  }
+
+  // set canvas dimensions
+  // if this is not done, the canvas passed to the web worker
+  // will have the default size of 300x150
+  // this will cause the viewport to be set to the default size
+  // and eveything will be messed up
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+
  const canvasWorker = canvas.transferControlToOffscreen();
  worker.postMessage([MessageType.attachCanvas, canvasWorker], [canvasWorker]);
-}
+};

 export type { EventTypesI, MessageTypeI };
-export { EventTypes, connectWorker, attachCanvas, MessageType }
+export { EventTypes, connectWorker, attachCanvas, MessageType };
@@ -1,3 +1,5 @@
+import { Attribute, draw, ProgramData } from "../gl";
+import { cubeVertices } from "../gl/vertices";
 import { MessageType } from "./mainThread";

 const handleConnection = (msg: MessageEvent<any>) => {
@@ -9,17 +11,25 @@ const handleConnection = (msg: MessageEvent<any>) => {
  switch (data[0]) {
    case MessageType.attachCanvas:
      const canvas = data[1];
-      const ctxWorker = canvas.getContext("2d");

-      ctxWorker.clearRect(0, 0, canvas.width, canvas.height);
-      ctxWorker.font = "24px Verdana";
-      ctxWorker.textAlign = "center";
-      ctxWorker.fillText("Hello World", canvas.width / 2, canvas.height / 2);
+      const ctxWorker = canvas.getContext("webgl2");
+      var p: ProgramData<Attribute<Float32Array>> = {
+        vertexShaderSource: "/shaders/triangle/vertex.glsl",
+        fragmentShaderSource: "/shaders/triangle/frag.glsl",
+        attributes: [
+          {
+            name: "position",
+            data: new Float32Array(cubeVertices),
+          },
+        ],
+      };
+
+      requestAnimationFrame(() => draw(ctxWorker, p));

      break;
  }

  console.log(...data);
-}
+};

-export { handleConnection }; 
+export { handleConnection };
@@ -0,0 +1,156 @@
+import { mat4 } from "gl-matrix";
+import { cubeVertices } from "./vertices";
+
+type AttributeDataTypes = Float32Array | Int32Array;
+
+export interface Attribute<T> {
+  name: string;
+  data: T;
+}
+
+export interface Dimensions {
+  width: number;
+  height: number;
+}
+
+export interface ProgramData<T extends Attribute<AttributeDataTypes>> {
+  vertexShaderSource: string;
+  fragmentShaderSource: string;
+  attributes: T[];
+}
+
+async function fetchShader(path: string) {
+  const response = await fetch(path);
+  return response.text();
+}
+
+async function createShader(
+  gl: WebGL2RenderingContext,
+  type: number,
+  sourceFile: string
+) {
+  const source = await fetchShader(sourceFile);
+
+  var shader = gl.createShader(type);
+  if (!shader) return;
+
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+  if (!success) {
+    console.error(gl.getShaderInfoLog(shader)); // eslint-disable-line
+    gl.deleteShader(shader);
+  }
+
+  return shader;
+}
+
+async function setupProgram<T extends Attribute<AttributeDataTypes>>(
+  gl: WebGL2RenderingContext,
+  programData: ProgramData<T>
+) {
+  var program = gl.createProgram();
+  if (!program) return;
+
+  var vertexShader = await createShader(
+    gl,
+    gl.VERTEX_SHADER,
+    programData.vertexShaderSource
+  );
+  if (!vertexShader) return;
+
+  var fragmentShader = await createShader(
+    gl,
+    gl.FRAGMENT_SHADER,
+    programData.fragmentShaderSource
+  );
+  if (!fragmentShader) return;
+
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+
+  var success = gl.getProgramParameter(program, gl.LINK_STATUS);
+  if (!success) {
+    console.error(gl.getProgramInfoLog(program));
+    gl.deleteProgram(program);
+  }
+
+  return program;
+}
+
+function setupAttribute<T extends Attribute<AttributeDataTypes>>(
+  gl: WebGL2RenderingContext,
+  program: WebGLProgram,
+  attribute: T
+) {
+  const location = gl.getAttribLocation(program, attribute.name);
+  if (location === -1) return;
+
+  // setup a buffer for the attribute data
+  const buffer = gl.createBuffer();
+  if (!buffer) return;
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, attribute.data, gl.STATIC_DRAW);
+
+  const vao = gl.createVertexArray();
+  if (!vao) return;
+
+  gl.bindVertexArray(vao);
+
+  gl.enableVertexAttribArray(location);
+  gl.vertexAttribPointer(location, 3, gl.FLOAT, false, 5 * 4, 0);
+}
+
+export async function draw<T extends Attribute<AttributeDataTypes>>(
+  gl: WebGL2RenderingContext,
+  programData: ProgramData<T>
+) {
+  gl.enable(gl.DEPTH_TEST);
+
+  const program = await setupProgram(gl, programData);
+  if (!program) {
+    console.error("failed to setup program");
+    return;
+  }
+
+  gl.useProgram(program);
+
+  for (const attribute of programData.attributes) {
+    setupAttribute(gl, program, attribute);
+  }
+
+  let view = mat4.create();
+  view = mat4.translate(view, view, [0, 0, -5]);
+
+  let model = mat4.create();
+  const angle = Date.now() * 0.001;
+  model = mat4.rotate(model, model, angle, [0.5, 1, 0]);
+
+  const projection = mat4.create();
+  mat4.perspective(
+    projection,
+    45,
+    gl.canvas.width / gl.canvas.height,
+    0.1,
+    100.0
+  );
+
+  const viewLoc = gl.getUniformLocation(program, "view");
+  const modelLoc = gl.getUniformLocation(program, "model");
+  const projectionLoc = gl.getUniformLocation(program, "projection");
+
+  gl.uniformMatrix4fv(viewLoc, false, view);
+  gl.uniformMatrix4fv(modelLoc, false, model);
+  gl.uniformMatrix4fv(projectionLoc, false, projection);
+
+  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  gl.drawArrays(gl.TRIANGLES, 0, 36);
+
+  requestAnimationFrame(() => draw(gl, programData));
+}
@@ -0,0 +1,22 @@
+export const cubeVertices = [
+  -0.5, -0.5, -0.5, 0.0, 0.0, 0.5, -0.5, -0.5, 1.0, 0.0, 0.5, 0.5, -0.5, 1.0,
+  1.0, 0.5, 0.5, -0.5, 1.0, 1.0, -0.5, 0.5, -0.5, 0.0, 1.0, -0.5, -0.5, -0.5,
+  0.0, 0.0,
+
+  -0.5, -0.5, 0.5, 0.0, 0.0, 0.5, -0.5, 0.5, 1.0, 0.0, 0.5, 0.5, 0.5, 1.0, 1.0,
+  0.5, 0.5, 0.5, 1.0, 1.0, -0.5, 0.5, 0.5, 0.0, 1.0, -0.5, -0.5, 0.5, 0.0, 0.0,
+
+  -0.5, 0.5, 0.5, 1.0, 0.0, -0.5, 0.5, -0.5, 1.0, 1.0, -0.5, -0.5, -0.5, 0.0,
+  1.0, -0.5, -0.5, -0.5, 0.0, 1.0, -0.5, -0.5, 0.5, 0.0, 0.0, -0.5, 0.5, 0.5,
+  1.0, 0.0,
+
+  0.5, 0.5, 0.5, 1.0, 0.0, 0.5, 0.5, -0.5, 1.0, 1.0, 0.5, -0.5, -0.5, 0.0, 1.0,
+  0.5, -0.5, -0.5, 0.0, 1.0, 0.5, -0.5, 0.5, 0.0, 0.0, 0.5, 0.5, 0.5, 1.0, 0.0,
+
+  -0.5, -0.5, -0.5, 0.0, 1.0, 0.5, -0.5, -0.5, 1.0, 1.0, 0.5, -0.5, 0.5, 1.0,
+  0.0, 0.5, -0.5, 0.5, 1.0, 0.0, -0.5, -0.5, 0.5, 0.0, 0.0, -0.5, -0.5, -0.5,
+  0.0, 1.0,
+
+  -0.5, 0.5, -0.5, 0.0, 1.0, 0.5, 0.5, -0.5, 1.0, 1.0, 0.5, 0.5, 0.5, 1.0, 0.0,
+  0.5, 0.5, 0.5, 1.0, 0.0, -0.5, 0.5, 0.5, 0.0, 0.0, -0.5, 0.5, -0.5, 0.0, 1.0,
+];