JSFiddle - React, Tailwind, and code Playground

by yuqingzhijie

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Change a point color</title>
  </head>

  <body onload="main()">
    <canvas id="webgl" width="400" height="400"></canvas>
    <div>
     please go to line 517, and notice line 549
    </div>

  </body>
</html>

JavaScript

function initProgram(gl, vshader, fshader, useProgram = true) {
  var program = createProgram(gl, vshader, fshader);

  if (useProgram) {
    gl.program = program;
    gl.useProgram(program);
  }

  return program;
}

function createProgram(gl, vshader, fshader) {
  var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader);
  var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader);

  var program = gl.createProgram();

  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);

  gl.linkProgram(program);

  var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
  if (!linked) {
    var error = gl.getProgramInfoLog(program);
    console.log('Failed to link program: ' + error);
    gl.deleteProgram(program);
    gl.deleteShader(fragmentShader);
    gl.deleteShader(vertexShader);
    return null;
  }
  return program;
}

const defaultShaderType = {
  'VERTEX_SHADER': 'VERTEX_SHADER',
  'FRAGMENT_SHADER': 'FRAGMENT_SHADER'
}

function loadShader(gl, type, source) {
  var shader = gl.createShader(type);

  gl.shaderSource(shader, source);

  gl.compileShader(shader);

  var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
  if (!compiled) {
    var error = gl.getShaderInfoLog(shader);
    console.log('Failed to compile shader: ' + error);
    gl.deleteShader(shader);
    return null;
  }

  return shader;
}

function Matrix4 (opt_src) {
  this.elements = new Float32Array([1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1]);
};

 Matrix4.prototype.set = function(src) {
  var i, s, d;

  s = src.elements;
  d = this.elements;

  if (s === d) {
    return;
  }
    
  for (i = 0; i < 16; ++i) {
    d[i] = s[i];
  }

  return this;
};

 Matrix4.prototype.concat = function(b) {
  b = b.elements;
  let a = this.elements;
  let e = new Float32Array(16);

  if (a === b) {
    b = new Float32Array(16);
    for (i = 0; i < 16; ++i) {
      b[i] = a[i];
    }
  }
  
  for (i = 0; i < 4; i++) {
    let bi0=b[i],  bi1=b[i+4],  bi2=b[i+8], ...