Draw simple triangle for testing

src/main.ts

@@ -1,6 +1,12 @@
 import { showError } from "./debug";
 import "./style.css";
 
+import vsSource from "./shaders/basic.vert?raw";
+import fsSource from "./shaders/basic.frag?raw";
+import { drawVertex, loadBuffer, loadProgram, loadShader } from "./shaderUtils";
+
+import triangle from "./shapes/triangle.json";
+
 function render() {
   const canvas = document.querySelector<HTMLCanvasElement>("#canvas");
   if (!canvas) {
@@ -11,6 +17,20 @@ function render() {
   if (!gl) {
     throw new Error("This browser does not support WebGL");
   }
+
+  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
+  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
+  const program = loadProgram(gl, vertexShader, fragmentShader);
+
+  const vertexPositionAttribLocation = gl.getAttribLocation(program, "vertexPosition");
+  if (vertexPositionAttribLocation < 0) {
+    throw new Error("Failed to get attrib location for vertexPosition");
+  }
+
+  const verts = new Float32Array(triangle.vertices);
+  const buffer = loadBuffer(gl, verts);
+
+  drawVertex(gl, program, vertexPositionAttribLocation, buffer, gl.TRIANGLES, verts.length);  
 }
 
 try {

src/shaderUtils.ts

@@ -11,6 +11,8 @@ export function loadShader(gl: WebGLRenderingContext, type: GLenum, source: stri
     const compileError = gl.getShaderInfoLog(shader);
     throw new Error("Error when compiling shader: " + compileError);
   }
+
+  return shader;
 }
 
 
@@ -28,4 +30,40 @@ export function loadProgram(gl: WebGLRenderingContext, vertexShader: WebGLShader
     const linkError = gl.getProgramInfoLog(program);
     throw new Error("Error when linking program: " + linkError);
   }
+
+  return program;
+}
+
+
+export function drawVertex(gl: WebGLRenderingContext, program: WebGLProgram, vertexAttribArrayLocation: GLuint, buffer: WebGLBuffer, mode: GLenum, length: number) {
+  gl.clearColor(0.1, 0.1, 0.1, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  gl.useProgram(program);
+  gl.enableVertexAttribArray(vertexAttribArrayLocation);
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+
+  gl.vertexAttribPointer(
+    vertexAttribArrayLocation,
+    2,
+    gl.FLOAT,
+    false,
+    2 * Float32Array.BYTES_PER_ELEMENT,
+    0,
+  );
+
+  gl.drawArrays(mode, 0, length / 2);
+}
+
+
+export function loadBuffer(gl: WebGLRenderingContext, vertices: Float32Array) {
+  const buffer = gl.createBuffer();
+  if (!buffer) {
+    throw new Error("WebGL fails to create buffer");
+  }
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+
+  return buffer;
 }

src/shaders/basic.frag

@@ -0,0 +1,5 @@
+precision mediump float;
+
+void main() {
+    gl_FragColor = vec4(0.22745, 0.35294, 0.25098, 1.0);
+}

src/shaders/basic.vert

@@ -0,0 +1,6 @@
+precision mediump float;
+attribute vec2 vertexPosition;
+
+void main() {
+    gl_Position = vec4(vertexPosition, 0.0, 1.0);
+}

src/shapes/triangle.json

@@ -0,0 +1,8 @@
+{
+    "name": "triangle",
+    "vertices": [
+        0.0, -0.5,
+        0.3, 0.5,
+        -0.3, 0.5
+    ]
+}