reorganised file structure

www/js/draw-scene.js

@@ -0,0 +1,51 @@
+function drawScene(gl, programInfo, buffers, time) {
+  gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
+  gl.clearDepth(1.0);                // Clear everything
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  // NOTE: this is how width/height is taken
+  // const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
+  
+  // Tell WebGL how to pull out the positions from the position
+  // buffer into the vertexPosition attribute.
+  setPositionAttribute(gl, buffers, programInfo);
+
+  gl.useProgram(programInfo.program);
+
+  /* --- Set Uniform Variables --- */
+  // Time since page loaded in seconds
+  gl.uniform1f(
+    programInfo.uniformLocations.time,
+    time,
+  );  
+
+  {
+    const offset = 0;
+    const vertexCount = 4;
+    gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
+  }
+}
+
+// Tell WebGL how to pull out the positions from the position
+// buffer into the vertexPosition attribute.
+function setPositionAttribute(gl, buffers, programInfo) {
+  const numComponents = 2; // pull out 2 values per iteration
+  const type = gl.FLOAT; // the data in the buffer is 32bit floats
+  const normalize = false; // don't normalize
+  const stride = 0; // how many bytes to get from one set of values to the next
+  // 0 = use type and numComponents above
+  const offset = 0; // how many bytes inside the buffer to start from
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
+  gl.vertexAttribPointer(
+    programInfo.attribLocations.vertexPosition,
+    numComponents,
+    type,
+    normalize,
+    stride,
+    offset,
+  );
+  gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
+}
+
+export { drawScene };
+

www/js/init-buffers.js

@@ -0,0 +1,34 @@
+function initBuffers(gl) {
+  const positionBuffer = initPositionBuffer(gl);
+
+  return {
+    position: positionBuffer,
+  };
+}
+
+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 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.
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+
+  return positionBuffer;
+}
+
+export { initBuffers };
+

www/js/webgl-demo.js

@@ -0,0 +1,140 @@
+import { initBuffers } from "./init-buffers.js";
+import { drawScene } from "./draw-scene.js";
+
+main();
+
+/* TODO: Avoid using alerts! Check return values instead,
+ * TODO: or create/use a Result like object.
+ */
+
+// Initialize a shader program, so WebGL knows how to draw our data
+function initShaderProgram(gl, vsSource, fsSource) {
+  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
+  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
+
+  // Create the shader program
+  const program = gl.createProgram();
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+
+  // If creating the shader program failed, alert
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    alert(
+      `Unable to initialize the shader program: ${gl.getProgramInfoLog(
+        program,
+      )}`,
+    );
+    return null;
+  }
+
+  return program;
+}
+
+// Creates a shader of the given type, uploads the source and compiles
+function loadShader(gl, type, source) {
+  const shader = gl.createShader(type);
+
+  // Send the source to the shader object
+  gl.shaderSource(shader, source);
+  
+  // Compile the shader program
+  gl.compileShader(shader);
+
+  // 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;
+  }
+
+  return shader;
+}
+
+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) {
+    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 shaderProgram = initShaderProgram(gl, vsSource, fsSource);
+
+  // Collect all the info needed to use the shader program.
+  // Look up which attribute our shader program is using
+  // for aVertexPosition and look up uniform locations.
+  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"),
+    },
+    uniformLocations: {
+      // resolution: context.getUniformLocation(program, "uResolution"),
+      time: gl.getUniformLocation(shaderProgram, "uTime"),
+    },
+  };
+
+  // Here's where we call the routine that builds all the
+  // objects we'll be drawing.
+  const buffers = initBuffers(gl);
+
+  // Draw the scene
+  // drawScene(gl, programInfo, buffers, 0);
+
+  // let timePrev = 0;
+  // requestAnimationFrame asks the browser to call render,
+  // providing the time in milliseconds since the page loaded
+  function render(time) {
+    time *= 0.001; // convert to seconds
+    // deltaTime = time - prevTime;
+    // prevTime = time;
+
+    console.log(time)
+    drawScene(gl, programInfo, buffers, time);
+    requestAnimationFrame(render);
+  }
+  requestAnimationFrame(render);
+}
+