Basic outline draw

package.json

@@ -11,5 +11,6 @@
   "devDependencies": {
     "typescript": "^5.5.3",
     "vite": "^5.4.1"
-  }
+  },
+  "packageManager": "pnpm@9.9.0+sha512.60c18acd138bff695d339be6ad13f7e936eea6745660d4cc4a776d5247c540d0edee1a563695c183a66eb917ef88f2b4feb1fc25f32a7adcadc7aaf3438e99c1"
 }

src/data/letter_outline.json

@@ -0,0 +1,11 @@
+{
+    "k": {
+        "vertices": [-1.0, -1.0, -1.0, 1.0, -1.0, 0.0, 0.05, 1.0, -1.0, 0.0, 0.05, -1.0]
+    },
+    "e": {
+        "vertices": [-1.0, -1.0, -1.0, 1.0, 0.0, -1.0, -1.0, -1.0, 0.0, 0.0, -1.0, 0.0, -1.0, 1.0, 0.0, 1.0]
+    },
+    "a": {
+        "vertices": [-0.8, -1.0, 0.0, 1.0, 0.0, 1.0, 0.8, -1.0, -0.4, 0.0, 0.4, 0.0]
+    }
+}

src/geometry/Shape2D.ts

@@ -7,5 +7,6 @@ export default class Shape2D {
     public color: [number, number, number],
     public verticesCount: number,
     public vao: WebGLVertexArrayObject,
+    public renderType: GLenum,
   ) {}
 }

src/main.ts

@@ -3,13 +3,13 @@ import "./style.css";
 
 import vsSource from "./shaders/basic.vert?raw";
 import fsSource from "./shaders/basic.frag?raw";
-import { loadBuffer, loadProgram, loadShader } from "./shaderUtils";
+import { loadBuffer, loadProgram, loadShader } from "./utils/shader";
 
 import Vector2D from "./geometry/Vector2D";
-import { createBasicVao } from "./vaoUtils";
+import { createBasicVao } from "./utils/vao";
 import Shape2D from "./geometry/Shape2D";
 
-import triangle from "./verts/triangle.json";
+import outline from "./data/letter_outline.json";
 
 function render() {
   const canvas = document.querySelector<HTMLCanvasElement>("#canvas");
@@ -32,13 +32,22 @@ function render() {
     throw new Error("Failed to get attrib location for vertexPosition");
   }
 
-  const triangleVerts = new Float32Array(triangle.vertices);
-  const triangleBuffer = loadBuffer(gl, triangleVerts);
-  const triangleVao = createBasicVao(gl, triangleBuffer, vertexPositionAttribLocation);
+  const kVerts = new Float32Array(outline.k.vertices);
+  const kBuffer = loadBuffer(gl, kVerts);
+  const kVao = createBasicVao(gl, kBuffer, vertexPositionAttribLocation);
+
+  const eVerts = new Float32Array(outline.e.vertices);
+  const eBuffer = loadBuffer(gl, eVerts);
+  const eVao = createBasicVao(gl, eBuffer, vertexPositionAttribLocation);
+
+  const aVerts = new Float32Array(outline.a.vertices);
+  const aBuffer = loadBuffer(gl, aVerts);
+  const aVao = createBasicVao(gl, aBuffer, vertexPositionAttribLocation);
 
   const shapes: Shape2D[] = [
-    new Shape2D(new Vector2D(300, 300), 200, [0.22745, 0.35294, 0.25098], 3, triangleVao),
-    new Shape2D(new Vector2D(800, 300), 100, [0.22745, 0.35294, 0.25098], 3, triangleVao),
+    new Shape2D(new Vector2D(300, canvas.height/2), 200, [0.22745, 0.35294, 0.25098], kVerts.length / 2, kVao, gl.LINES),
+    new Shape2D(new Vector2D(600, canvas.height/2), 200, [0.22745, 0.35294, 0.25098], eVerts.length / 2, eVao, gl.LINES),
+    new Shape2D(new Vector2D(900, canvas.height/2), 200, [0.22745, 0.35294, 0.25098], aVerts.length / 2, aVao, gl.LINES),
   ]
 
   const fragmentColorUniform = gl.getUniformLocation(program, "uColor");
@@ -54,24 +63,29 @@ function render() {
     `);
   }
 
-  canvas.width = canvas.clientWidth;
-  canvas.height = canvas.clientHeight;
-  gl.clearColor(0.1, 0.1, 0.1, 1.0);
-  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-  gl.viewport(0, 0, canvas.width, canvas.height);
-  gl.uniform2f(canvasSizeUniform, canvas.width, canvas.height);
 
-  shapes.forEach((shape) => {
-    gl.uniform3f(fragmentColorUniform, shape.color[0], shape.color[1], shape.color[2]);
-    gl.uniform2f(shapeLocationUniform, shape.position.x, shape.position.y);
-    gl.uniform1f(shapeScaleUniform, shape.scale);
+  const frame = () => {
+    canvas.width = canvas.clientWidth;
+    canvas.height = canvas.clientHeight;
+    gl.clearColor(0.1, 0.1, 0.1, 1.0);
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    gl.viewport(0, 0, canvas.width, canvas.height);
+    gl.uniform2f(canvasSizeUniform, canvas.width, canvas.height);
 
-    gl.bindVertexArray(shape.vao);
-    gl.drawArrays(gl.TRIANGLES, 0, shape.verticesCount);
-  })
+    shapes.forEach((shape) => {
+      gl.uniform3f(fragmentColorUniform, shape.color[0], shape.color[1], shape.color[2]);
+      gl.uniform2f(shapeLocationUniform, shape.position.x, shape.position.y);
+      gl.uniform1f(shapeScaleUniform, shape.scale);
       
+      gl.bindVertexArray(shape.vao);
+      gl.drawArrays(shape.renderType, 0, shape.verticesCount);
+    });
+  }
+
+  requestAnimationFrame(frame);
 }
 
+
 try {
   render();
 } catch (err) {

src/verts/triangle.json

@@ -1,3 +0,0 @@
-{
-    "vertices": [0.0, -1, 0.6, 1, -0.6, 1]
-}