Triangles in WebGL - v1

by Captain Harlock

HTML

<canvas id="glCanvas" width="500px" height="500px">
</canvas>
FPS:<span id="fps"></span>
<br> Number of triangles
<input type="text" id="numTriangles" value="1000">
<button onclick="onNumTriangles()">Go!</button>

JavaScript

function onNumTriangles() {
     glRenderer.setNumTriangles(
       document.getElementById("numTriangles").value);
   }
   
   var fpsMeter = document.getElementById('fps');

   window.countFPS = (function() {
     var lastLoop = (new Date()).getMilliseconds();
     var count = 1;
     var fps = 0;

     return function() {
       var currentLoop = (new Date()).getMilliseconds();
       if (lastLoop > currentLoop) {
         fps = count;
         count = 1;
       } else {
         count += 1;
       }
       lastLoop = currentLoop;
       return fps;
     };
   }());

   (function loop() {
     requestAnimationFrame(function() {
       fpsMeter.innerText = countFPS();
       loop();
     });
   }());

   class GlRenderer {

     /**
      * @param {!Element} canvas The canvas on which to draw.
      * @constructor
      */
     constructor(canvas) {

       /**
        * @private {!Element} The canvas on which to draw.
        */
       this.canvas_ = canvas;

       /**
        * WebGL context
        * @private {!WebGLRenderingContext}
        */
       this.gl_ = canvas.getContext('webgl');
       if (!this.gl_) {
         console.log('ERROR: Unable to initialize WbGL.');
         console.log(' Your browser may not support it.');
       }

       this.inc_ = 0.01;
       this.worldToClipSpace_ = new Float32Array(16);

       this.numTriangles_ = 1000;

       this.vertices_ = [];
       this.colors_ = [];
       this.matrixUniform_ = null;

       this.shaderProgram_ = null;

       this.animRequest_ = null;

       this.initShaders_();
       this.initBuffers_();
       this.initUniforms_();
     }

     setNumTriangles(numTriangles) {
       this.numTriangles_ = numTriangles;
       this.initBuffers_();
     }

     addVertices_(verticesCoords, red, green, blue) {
       for (var i = 0; i < verticesCoords.length / 2; i++) {
         this.vertices_.push(verticesCoords[2 * i]); // x
         this.vertices_.push(verticesCoords[2 * i + 1]); // y
        ...