clean webgl-demo.js

www/js/webgl-demo.js

@@ -43,73 +43,14 @@ function loadShader(gl, type, source) {
 
   // See if it compiled successfully
   if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    alert(
-      `An error occurred compiling the shaders: ${gl.getShaderInfoLog(shader)}`,
-    );
     gl.deleteShader(shader);
-    return null;
+    throw new Error(`An error occurred compiling the shaders: ${gl.getShaderInfoLog(shader)}`);
   }
 
   return shader;
 }
 
-function main() {
+function renderShader(gl, vsSource, fsSource) {
-  const canvas = document.querySelector("#gl-canvas");
-  // Initialize the GL context
-  const gl = canvas.getContext("webgl");
-
-  // Only continue if WebGL is available and working
-  if (gl === null) {
-    alert(
-      "Unable to initialize WebGL. Your browser or machine may not support it.",
-    );
-    return;
-  }
-
-  // Vertex shader program
-  const vsSource = `
-      attribute vec4 aVertexPosition;
-
-      void main() {
-        gl_Position = aVertexPosition;
-      }
-    `;
-
-  // const fsSource = `
-  //     // is highp wasteful for this shader?
-  //     #ifdef GL_FRAGMENT_PRECISION_HIGH
-  //       precision highp float;
-  //     #else
-  //       precision mediump float;
-  //     #endif
-
-  //     // shadertoy-like parameters
-  //     // uniform vec2 uResolution; 
-  //     uniform float uTime;
-
-  //     void main() {
-  //       vec2 uv = gl_FragCoord.xy/vec2(300, 300).xy;
-
-  //       // Time varying pixel color
-  //       vec3 col = 0.5 + 0.5*cos(uTime+uv.xyx+vec3(0,2,4));
-
-  //       // Output to screen
-  //       gl_FragColor = vec4(col,1.0);
-
-  //       // gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
-  //     }
-  //   `;
-  const fsSource = (async () => {
-    const res = await fetch("../shaders/segfault.glsl");
-    if (!res.ok) {
-      const error = `Failed to load fragment shader source ${url}: ${res.status}`;
-      alert(error);
-      throw new Error(error);
-    }
-
-    return await res.text()
-  })();
-
   const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
 
   // Collect all the info needed to use the shader program.
@@ -121,8 +62,8 @@ function main() {
       vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"),
     },
     uniformLocations: {
-      resolution: context.getUniformLocation(program, "uResolution"),
+      resolution: gl.getUniformLocation(shaderProgram, "u_resolution"),
-      time: gl.getUniformLocation(shaderProgram, "uTime"),
+      time: gl.getUniformLocation(shaderProgram, "u_time"),
     },
   };
 
@@ -147,3 +88,38 @@ function main() {
   requestAnimationFrame(render);
 }
 
+function fetchShader(name) {
+  return fetch(`../shaders/${name}`)
+    .then(res => {
+      if (!res.ok) throw new Error(`Failed to load fragment shader source ${url}: ${res.status}`);
+      return res.text();
+    });
+
+}
+
+function main() {
+  const canvas = document.querySelector("#gl-canvas");
+  // Initialize the GL context
+  const gl = canvas.getContext("webgl");
+
+  // Only continue if WebGL is available and working
+  if (gl === null) {
+    throw new Error("Unable to initialize WebGL. Your browser or machine may not support it.");
+  }
+
+  // Vertex shader program
+  const vsSource = `
+      attribute vec4 aVertexPosition;
+
+      void main() {
+        gl_Position = aVertexPosition;
+      }
+    `;
+
+  // Fetch fragment shader program
+  fetchShader("segfault.glsl")
+    .then(fsSource => {
+      renderShader(gl, vsSource, fsSource);
+    });
+}
+