webgl-demo makes shader fill canvas

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.

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