a rotating cube (#3)

core/connection/mainThread.ts

@@ -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 };

core/connection/workerThread.ts

@@ -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 };