Animating Point Colors Without Buffers

This JavaScript program demonstrates how to animate the colors of points without buffers in a WebGL program.

AnimatePointColorsWithoutBuffers.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's WebGL</title>

    <script  id="idVertexShader" type="c">
      attribute vec4 av4Vertex;
      void main() {
        gl_Position = av4Vertex;
        gl_PointSize = 20.0;
      }
    </script>

    <script  id="idFragmantShader" type="c">
      precision mediump float;
      uniform vec4 uv4Color;
      void main() {
        gl_FragColor = uv4Color;
      }
    </script>

    <script type="text/javascript">
    var gqWebGL = null;
    function CreateProgramAndContext(qInstanceWebGL) {
      // Get the WebGL Context
      var qCanvas = document.querySelector("#"+qInstanceWebGL.msCanvasID);
      qInstanceWebGL.mqGL = qCanvas.getContext("webgl");
      var qGL = qInstanceWebGL.mqGL;

      // Compile the vertex shader
      var sVertexShaderCode = document.querySelector("#"+qInstanceWebGL.msVertexShaderID).text;
      var qVertexShader = qGL.createShader(qGL.VERTEX_SHADER);
      qGL.shaderSource(qVertexShader, sVertexShaderCode);
      qGL.compileShader(qVertexShader);

      // Compile the fragment shader
      var sFragmentShaderCode = document.querySelector("#"+qInstanceWebGL.msFragmentShaderID).text;
      var qFragmentShader = qGL.createShader(qGL.FRAGMENT_SHADER);
      qGL.shaderSource(qFragmentShader, sFragmentShaderCode);
      qGL.compileShader(qFragmentShader);

      // Compile and link the program
      qInstanceWebGL.mqProgram = qGL.createProgram();
      qGL.attachShader(qInstanceWebGL.mqProgram, qVertexShader);
      qGL.attachShader(qInstanceWebGL.mqProgram, qFragmentShader);
      qGL.linkProgram(qInstanceWebGL.mqProgram);
      qGL.useProgram(qInstanceWebGL.mqProgram);
    }

    function Initialization() {
      gqWebGL = new CInstanceWebGL("idCanvas", "idVertexShader", "idFragmantShader", 18);
      CreateProgramAndContext(gqWebGL);
      // Begin the animation loop.
      const kiIntervalId = setInterval(Render, 20);
    }

    var gfT = 0.0;
    function Render() {
      var dR = .01
      gfT = ((gfT + dR < 1.0) ? (gfT + dR) : (gfT + dR - 1));
      var dSinT = (Math.sin(2.0*Math.PI*gfT) + 1.0)/2.0;
      var qGL = gqWebGL.mqGL;
      qGL.clearColor(0.85, 0.95, 0.85, 1.0);
      qGL.clear(qGL.COLOR_BUFFER_BIT);
      const kiPos = qGL.getAttribLocation(gqWebGL.mqProgram, 'av4Vertex');
      const kiColor = qGL.getUniformLocation(gqWebGL.mqProgram, 'uv4Color');
      const kiPoints = 12;
      for (let i = 0; i < kiPoints; ++i) {
        const kdU = i / (kiPoints);    // 0 to 1
        const dSinU = Math.sin(2.0*Math.PI*kdU);
        const dCosU = Math.cos(2.0*Math.PI*kdU);
        qGL.vertexAttrib2f(kiPos, dCosU/1.2, dSinU/1.2);
        qGL.uniform4f(kiColor, (dSinU + 1)/2, dSinT, (dCosU + 1)/2, 1);
        const kiOffset = 0;
        const kiCount = 1;
        qGL.drawArrays(qGL.POINTS, kiOffset, kiCount);
      }
    }
    function CInstanceWebGL(sCanvasID, sVertexShaderID, sFragmentShaderID, iVertices) {
	  this.mqGL = null;
	  this.mqProgram = null;
	  this.msCanvasID = sCanvasID;
	  this.msVertexShaderID = sVertexShaderID;
	  this.msFragmentShaderID = sFragmentShaderID;
	}
    </script>
  </head>
  <body onload="Initialization();">
    <canvas id="idCanvas" width="400", height="400" style="border:1px solid lightgray"></canvas>
  </body>
</html>

WebGL JavaScript

Animating Point Colors Without Buffers

AnimatePointColorsWithoutBuffers.html

Output