From f00d7c60d3679461063d58bc3edee2d76c9d456c Mon Sep 17 00:00:00 2001
From: Emile Clark-Boman <eclarkboman@gmail.com>
Date: Mon, 28 Jul 2025 13:07:30 +1000
Subject: [PATCH] webgl-demo makes shader fill canvas

---
 www/init-buffers.js | 15 ++++++++++-----
 www/webgl-demo.js   |  2 +-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/www/init-buffers.js b/www/init-buffers.js
index cb9db0c..bf12c1a 100644
--- a/www/init-buffers.js
+++ b/www/init-buffers.js
@@ -7,16 +7,21 @@ function initBuffers(gl) {
 }
 
 function initPositionBuffer(gl) {
+  // Position array of a "full-screen" quad (encoded as TRIANGLE_STRIP)
+  // Ref: https://en.wikipedia.org/wiki/Triangle_strip
+  // NOTE: +x,+y is top-right & -x,-y is bottom-left
+  const positions = [
+    -1.0,  1.0,
+    -1.0, -1.0,
+     1.0,  1.0,
+     1.0, -1.0,
+  ];
+
   // Create a buffer for the square's positions.
   const positionBuffer = gl.createBuffer();
-
   // Select the positionBuffer as the one to apply buffer
   // operations to from here out.
   gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-
-  // Now create an array of positions for the square.
-  const positions = [1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0];
-
   // Now pass the list of positions into WebGL to build the
   // shape. We do this by creating a Float32Array from the
   // JavaScript array, then use it to fill the current buffer.
diff --git a/www/webgl-demo.js b/www/webgl-demo.js
index 5ebbe68..1b3fe83 100644
--- a/www/webgl-demo.js
+++ b/www/webgl-demo.js
@@ -72,7 +72,7 @@ function main() {
       uniform mat4 uModelViewMatrix;
       uniform mat4 uProjectionMatrix;
       void main() {
-        gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+        gl_Position = aVertexPosition;
       }
     `;