From ecfe53f705b525f8c9ecbfefb6cf4b0c961b8c6f Mon Sep 17 00:00:00 2001
From: keanutaufan <keanu.taufan21@gmail.com>
Date: Wed, 18 Sep 2024 22:16:18 +0700
Subject: [PATCH] Migrate to WebGL2 to use VAOs (might be fun)

---
 src/main.ts            | 15 ++++++++++++---
 src/shaderUtils.ts     |  9 ++++-----
 src/shaders/basic.frag |  6 +++++-
 src/shaders/basic.vert |  4 +++-
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index 14bf698..6388add 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -16,14 +16,16 @@ function render() {
     throw new Error("Canvas does not exist");
   }
 
-  const gl = canvas.getContext("webgl");
+  const gl = canvas.getContext("webgl2");
   if (!gl) {
-    throw new Error("This browser does not support WebGL");
+    throw new Error("This browser does not support WebGL 2");
   }
 
   const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
   const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
+
   const program = loadProgram(gl, vertexShader, fragmentShader);
+  gl.useProgram(program);
 
   const vertexPositionAttribLocation = gl.getAttribLocation(program, "vertexPosition");
   if (vertexPositionAttribLocation < 0) {
@@ -33,7 +35,14 @@ function render() {
   const verts = new Float32Array(triangle.vertices);
   const buffer = loadBuffer(gl, verts);
 
-  drawVertex(gl, program, vertexPositionAttribLocation, buffer, gl.TRIANGLES, verts.length);  
+  const fragmentColor = gl.getUniformLocation(program, "uColor");
+  if (!fragmentColor) {
+    throw new Error("Uniform uColor not found");
+  }
+
+  gl.uniform4f(fragmentColor, 0.22745, 0.35294, 0.25098, 1.0);
+
+  drawVertex(gl, vertexPositionAttribLocation, buffer, gl.TRIANGLES, verts.length);  
 }
 
 try {
diff --git a/src/shaderUtils.ts b/src/shaderUtils.ts
index c073ea0..6e18d8c 100644
--- a/src/shaderUtils.ts
+++ b/src/shaderUtils.ts
@@ -1,4 +1,4 @@
-export function loadShader(gl: WebGLRenderingContext, type: GLenum, source: string) {
+export function loadShader(gl: WebGL2RenderingContext, type: GLenum, source: string) {
   const shader = gl.createShader(type);
   if (!shader) {
     throw new Error("WebGL fails to create shader for given type");
@@ -16,7 +16,7 @@ export function loadShader(gl: WebGLRenderingContext, type: GLenum, source: stri
 }
 
 
-export function loadProgram(gl: WebGLRenderingContext, vertexShader: WebGLShader, fragmentShader: WebGLShader) {
+export function loadProgram(gl: WebGL2RenderingContext, vertexShader: WebGLShader, fragmentShader: WebGLShader) {
   const program = gl.createProgram();
   if (!program) {
     throw new Error("WebGL fails to create program");
@@ -35,11 +35,10 @@ export function loadProgram(gl: WebGLRenderingContext, vertexShader: WebGLShader
 }
 
 
-export function drawVertex(gl: WebGLRenderingContext, program: WebGLProgram, vertexAttribArrayLocation: GLuint, buffer: WebGLBuffer, mode: GLenum, length: number) {
+export function drawVertex(gl: WebGL2RenderingContext, 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);
 
@@ -56,7 +55,7 @@ export function drawVertex(gl: WebGLRenderingContext, program: WebGLProgram, ver
 }
 
 
-export function loadBuffer(gl: WebGLRenderingContext, vertices: Float32Array) {
+export function loadBuffer(gl: WebGL2RenderingContext, vertices: Float32Array) {
   const buffer = gl.createBuffer();
   if (!buffer) {
     throw new Error("WebGL fails to create buffer");
diff --git a/src/shaders/basic.frag b/src/shaders/basic.frag
index 73f137d..d21c455 100644
--- a/src/shaders/basic.frag
+++ b/src/shaders/basic.frag
@@ -1,5 +1,9 @@
+#version 300 es
 precision mediump float;
 
+uniform vec4 uColor;
+out vec4 fragColor;
+
 void main() {
-    gl_FragColor = vec4(0.22745, 0.35294, 0.25098, 1.0);
+    fragColor = uColor;
 }
\ No newline at end of file
diff --git a/src/shaders/basic.vert b/src/shaders/basic.vert
index 695fa40..f34c338 100644
--- a/src/shaders/basic.vert
+++ b/src/shaders/basic.vert
@@ -1,5 +1,7 @@
+#version 300 es
 precision mediump float;
-attribute vec2 vertexPosition;
+
+in vec2 vertexPosition;
 
 void main() {
     gl_Position = vec4(vertexPosition, 0.0, 1.0);