Made new shaders post

_assets/javascript/shaderCanvas4.js

@@ -0,0 +1,183 @@
+var shader_time = 0.0;
+
+window.addEventListener("load", main);
+function main() {
+  const canvas = document.querySelector('#webgl-canvas');
+  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;
+  }
+
+  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
+  // for aVertexPosition, aVevrtexColor and also
+  // look up uniform locations.
+  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+    },
+    uniformLocations: {
+      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
+      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
+      uResolution: gl.getUniformLocation(shaderProgram, 'uResolution'),
+      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);
+  var then = 0;
+  // Draw the scene repeatedly
+  function render(now) {
+    now *= 0.001;  // convert to seconds
+    const deltaTime = now - then;
+    then = now;
+    drawScene(gl, programInfo, buffers, deltaTime);
+    requestAnimationFrame(render);
+  }
+  requestAnimationFrame(render);
+}
+
+//
+// initBuffers
+//
+// Initialize the buffers we'll need. For this demo, we just
+// have one object -- a simple two-dimensional square.
+//
+function initBuffers(gl) {
+  // 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.
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+  return {
+    position: positionBuffer,
+  };
+}
+
+//
+// Draw the scene.
+//
+function drawScene(gl, programInfo, buffers, deltaTime) {
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);  // Clear to black, fully opaque
+  gl.clearDepth(1.0);                 // Clear everything
+  gl.enable(gl.DEPTH_TEST);           // Enable depth testing
+  gl.depthFunc(gl.LEQUAL);            // Near things obscure far things
+
+  // Clear the canvas before we start drawing on it.
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  // Create a orthographic matrix
+  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
+  const zNear = 0.0;
+  const zFar = 100.0;
+  const projectionMatrix = mat4.create();
+
+  // note: glmatrix.js always has the first argument as the destination to receive the result.
+  mat4.ortho(projectionMatrix, -1.0, 1.0, -1.0, 1.0, zNear, zFar);
+  // 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
+  {
+    const numComponents = 2;
+    const type = gl.FLOAT;
+    const normalize = false;
+    const stride = 0;
+    const offset = 0;
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
+    gl.vertexAttribPointer(
+        programInfo.attribLocations.vertexPosition,
+        numComponents,
+        type,
+        normalize,
+        stride,
+        offset);
+    gl.enableVertexAttribArray(
+        programInfo.attribLocations.vertexPosition);
+  }
+
+  // Tell WebGL to use our program when drawing
+  gl.useProgram(programInfo.program);
+
+  // 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, size[0], size[1]);
+  gl.uniform1f(programInfo.uniformLocations.uTime, shader_time);
+  {
+    const offset = 0;
+    const vertexCount = 4;
+    gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
+  }
+  // Update time:
+  shader_time += deltaTime;
+}
+
+//
+// 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 shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+  // If creating the shader program failed, alert
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
+    return null;
+  }
+  return shaderProgram;
+}
+
+//
+// creates a shader of the given type, uploads the source and compiles it.
+//
+function loadShader(gl, type, source) {
+  const shader = gl.createShader(type);
+  gl.shaderSource(shader, source); // Send the source to the shader object
+  gl.compileShader(shader); // Compile the shader program
+  // 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;
+}
+

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

@@ -0,0 +1,32 @@
+---
+layout: post-plain
+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%;">
+  <script type="x-shader/x-vertex" id="vertex-shader">
+    #version 100
+    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 %}