Improved shader scripts

_assets/javascript/shaderCanvas4.js

@@ -1,17 +1,52 @@
 var shader_time = 0.0;
+var canvas_size = new Array(2);
 
 window.addEventListener("load", main);
 function main() {
-  const canvas = document.querySelector('#webgl-canvas');
+  var canvas = document.querySelector('#webgl-canvas');
+  const canvasses = document.querySelectorAll('.webgl-shader-canvas');
+  if (canvasses.length == 0) {
+    console.log("WebGL script requires at least one canvas with class 'webgl-shader-canvas''");
+    return
+  }
+  canvasses.forEach(function(canvas){
+    if (!canvas.getAttributeNames().includes("data-fs-source") || !canvas.getAttributeNames().includes("data-fs-source")) {
+      console.log("WebGL script requires a canvas with data-fs-source and data-vs-source attributes.");
+      return
+    }
+  // load vertex shader
+  const vsxhttp = new XMLHttpRequest();
+  vsxhttp.onreadystatechange = function() {
+    if (this.readyState == 4 && this.status == 200) {
+      const vsSource = vsxhttp.responseText;
+      // load fragment shader
+      const fsxhttp = new XMLHttpRequest();
+      fsxhttp.onreadystatechange = function() {
+        if (this.readyState == 4 && this.status == 200) {
+          const fsSource = fsxhttp.responseText;
+          // console.log(fsSource);
+          // console.log(fsSource);
+          // Shaders loaded, begin the webgl render:
+          webglRender(canvas, vsSource, fsSource);
+        }
+      }
+      fsxhttp.open('GET',canvas.getAttribute('data-fs-source'));
+      fsxhttp.send();
+    }
+  }
+  vsxhttp.open('GET',canvas.getAttribute('data-vs-source'));
+  vsxhttp.send();
+  });
+}
+
+function webglRender(canvas, vsSource, fsSource) {
   const gl = canvas.getContext('webgl');
   // If we don't have a GL context, give up now
   if (!gl) {
     alert('Unable to initialize WebGL. Your browser or machine may not support it.');
     return;
   }
-
+  canvas_size[0] = canvas.width; canvas_size[1] = canvas.height;
-  const vsSource = document.querySelector("#webgl-canvas #vertex-shader").innerHTML; // Vertex shader program
-  const fsSource = document.querySelector("#webgl-canvas #fragment-shader").innerHTML; // fragment shader program
   const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
   // Collect all the info needed to use the shader program.
   // Look up which attributes our shader program is using
@@ -29,7 +64,6 @@ function main() {
       uTime: gl.getUniformLocation(shaderProgram, 'uTime'),
     },
   };
-
   // Here's where we call the routine that builds all the
   // objects we'll be drawing.
   const buffers = initBuffers(gl);
@@ -40,9 +74,9 @@ function main() {
     const deltaTime = now - then;
     then = now;
     drawScene(gl, programInfo, buffers, deltaTime);
-    requestAnimationFrame(render);
+    window.requestAnimationFrame(render);
   }
-  requestAnimationFrame(render);
+  window.requestAnimationFrame(render);
 }
 
 //
@@ -95,18 +129,6 @@ function drawScene(gl, programInfo, buffers, deltaTime) {
   // Set the drawing position to the "identity" point, which is
   // the center of the scene.
   const modelViewMatrix = mat4.create();
-
-  // Now move the drawing position a bit to where we want to
-  // start drawing the square.
-
-  // mat4.translate(modelViewMatrix,     // destination matrix
-  //                modelViewMatrix,     // matrix to translate
-  //                [-0.0, 0.0, -0.0]);  // amount to translate
-  // mat4.rotate(modelViewMatrix,  // destination matrix
-  //             modelViewMatrix,  // matrix to rotate
-  //             squareRotation,   // amount to rotate in radians
-  //             [0, 0, 1]);       // axis to rotate around
-
   // Tell WebGL how to pull out the positions from the position
   // buffer into the vertexPosition attribute
   {
@@ -116,15 +138,8 @@ function drawScene(gl, programInfo, buffers, deltaTime) {
     const stride = 0;
     const offset = 0;
     gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
-    gl.vertexAttribPointer(
+    gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, numComponents, type, normalize, stride, offset);
-        programInfo.attribLocations.vertexPosition,
+    gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
-        numComponents,
-        type,
-        normalize,
-        stride,
-        offset);
-    gl.enableVertexAttribArray(
-        programInfo.attribLocations.vertexPosition);
   }
 
   // Tell WebGL to use our program when drawing
@@ -133,8 +148,7 @@ function drawScene(gl, programInfo, buffers, deltaTime) {
   // Set the shader uniforms
   gl.uniformMatrix4fv(programInfo.uniformLocations.projectionMatrix, false, projectionMatrix);
   gl.uniformMatrix4fv(programInfo.uniformLocations.modelViewMatrix, false, modelViewMatrix);
-  var size = [1280.0, 720.0]    //TODO: make this size of canvas and change on window resize
+  gl.uniform2f(programInfo.uniformLocations.uResolution, canvas_size[0], canvas_size[1]);
-  gl.uniform2f(programInfo.uniformLocations.uResolution, size[0], size[1]);
   gl.uniform1f(programInfo.uniformLocations.uTime, shader_time);
   {
     const offset = 0;
@@ -180,4 +194,3 @@ function loadShader(gl, type, source) {
 
   return shader;
 }
-

_posts/2021-06-02-more-shaders.markdown

@@ -4,29 +4,9 @@ title: "More Shaders"
 date: 2021-06-02
 categories: design coding
 ---
-<canvas id="webgl-canvas" width="1280" height="1280" style="border:1px solid white; width:100%;">
+<canvas class="webgl-shader-canvas" width="720" height="720" style="border:1px solid white; width:100%;" data-fs-source="assets/circleShader.glsl" data-vs-source="assets/vertShader.glsl"></canvas>
-  <script type="x-shader/x-vertex" id="vertex-shader">
+
-    #version 100
+<canvas class="webgl-shader-canvas" width="720" height="720" style="border:1px solid white; width:100%;" data-fs-source="assets/testShader.glsl" data-vs-source="assets/vertShader.glsl"></canvas>
-    precision highp float;
-    attribute vec4 aVertexPosition;
-    uniform mat4 uModelViewMatrix;
-    uniform mat4 uProjectionMatrix;
-    void main(void) {
-      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
-    }
-  </script>
-  <script type="x-shader/x-fragment" id="fragment-shader">
-    #version 100
-    precision mediump float;
-    uniform float uTime;
-    uniform vec2 uResolution;
-    uniform vec4 uFragColor;
-    void main() {
-      vec2 uv = gl_FragCoord.xy / uResolution.xy;
-      gl_FragColor = vec4(uv.x, uv.y, uTime / 10.0, 0.0);
-    }
-  </script>
-</canvas>
 
 {% asset gl-matrix-min-2.8.1.js %}
 {% asset shaderCanvas4.js %}

assets/circleShader.glsl

@@ -0,0 +1,10 @@
+#version 100
+precision mediump float;
+uniform float uTime;
+uniform vec2 uResolution;
+uniform vec4 uFragColor;
+void main() {
+  vec2 uv = gl_FragCoord.xy / uResolution.xy;
+  // gl_FragColor = vec4(uv.x, uv.y, sin(uTime * 1.0), 1.0);
+  gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
+}

assets/testShader.glsl

@@ -0,0 +1,10 @@
+#version 100
+precision mediump float;
+uniform float uTime;
+uniform vec2 uResolution;
+uniform vec4 uFragColor;
+void main() {
+  vec2 uv = gl_FragCoord.xy / uResolution.xy;
+  gl_FragColor = vec4(uv.x, uv.y, sin(uTime * 1.0), 1.0);
+  //gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
+}

assets/vertShader.glsl

@@ -0,0 +1,8 @@
+#version 100
+precision highp float;
+attribute vec4 aVertexPosition;
+uniform mat4 uModelViewMatrix;
+uniform mat4 uProjectionMatrix;
+void main(void) {
+  gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+}