glcanvas/js/main.js

/* Canvas set-up */
const canvas = document.getElementsByTagName("canvas")[0];
const gl = canvas.getContext("webgl", { antialias: false, preserveDrawingBuffer: false });

var projectionMatrix = mat4.create();
const resizeCanvas = () => {
  var width = gl.canvas.clientWidth;
  var height = gl.canvas.clientHeight;

  if (gl.canvas.width != width || gl.canvas.height != height) {
    gl.canvas.width = width;
    gl.canvas.height = height;

    gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

    mat4.perspective(
      projectionMatrix,
      (45 * Math.PI) / 180,
      gl.canvas.clientWidth / gl.canvas.clientHeight,
      0.1, 100.0
    );
  }
}

resizeCanvas();

/* Load shaders */
const fetchText = async url => (await fetch(url)).text();
const vsSrc = await fetchText("/shader/my.vert");
const fsSrc = await fetchText("/shader/my.frag");

const program = compile(gl, vsSrc, fsSrc);
gl.useProgram(program);

/* WebGL set-up */
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);

/* Geometry */
var verts = new Float32Array([
  1.0,  1.0,  1.0,
 -1.0,  1.0,  1.0,
 -1.0, -1.0,  1.0,
  1.0, -1.0,  1.0,
  1.0, -1.0, -1.0,
  1.0,  1.0, -1.0,
 -1.0,  1.0, -1.0,
 -1.0, -1.0, -1.0,
]);

// var makeVerts = (szX, szZ) => {
//   var fverts = new Float32Array([]);
//   var findices = new Uint16Array([]);
//   for (var x = 0; x <= szX; x += 1) {
//     for (var z = 0; z <= szZ; z += 1) {
//       var cverts = new Float32Array([
//         1.0,  1.0,  1.0,
//        -1.0,  1.0,  1.0,
//        -1.0,  0.0,  1.0,
//         1.0,  0.0,  1.0,
//         1.0,  0.0, -1.0,
//         1.0,  1.0, -1.0,
//        -1.0,  1.0, -1.0,
//        -1.0,  0.0, -1.0,
//       ]);

//       var cindices = new Uint8Array([
//         0, 1, 2,   0, 2, 3,  // front
//         0, 3, 4,   0, 4, 5,  // right
//         0, 5, 6,   0, 6, 1,  // up
//         1, 6, 7,   1, 7, 2,  // left
//         7, 4, 3,   7, 3, 2,  // down
//         4, 7, 6,   4, 6, 5   // back
//       ]).map;
//     }
//   }
// };

// var myVerts = makeVerts(5, 5);

// Indices of the vertices for each triangle
var indices = new Uint8Array([
 0, 1, 2,   0, 2, 3,  // front
 0, 3, 4,   0, 4, 5,  // right
 0, 5, 6,   0, 6, 1,  // up
 1, 6, 7,   1, 7, 2,  // left
 7, 4, 3,   7, 3, 2,  // down
 4, 7, 6,   4, 6, 5   // back
]);

const modelViewMatrix = mat4.create();
mat4.translate(
  modelViewMatrix,
  modelViewMatrix,
  [0.0, 0.0, -5.0]
);

/* Get attribs/uniforms */
var a_position = gl.getAttribLocation(program, 'a_position');
var u_projectionMtx = gl.getUniformLocation(program, 'u_projectionMtx');
var u_modelViewMtx = gl.getUniformLocation(program, 'u_modelViewMtx');
var u_clock = gl.getUniformLocation(program, 'u_clock');

/* Create buffers */
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, verts, gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

gl.vertexAttribPointer(a_position, 3, gl.FLOAT, false, verts.BYTES_PER_ELEMENT * 3, 0);
gl.enableVertexAttribArray(a_position);

/* Utility function */
const rotate3D = (mtx, x, y, z) => {
  mat4.rotate(
    mtx, mtx,
    x,
    [1, 0, 0]
  );
  mat4.rotate(
    mtx, mtx,
    y,
    [0, 1, 0]
  );
  mat4.rotate(
    mtx, mtx,
    z,
    [0, 0, 1]
  );
};

/* Render */
var lastDraw = performance.now();
const draw = () => {
  requestAnimationFrame(draw);

  // Resize if needed
  resizeCanvas(gl);

  // Rotate camera
  var delta = performance.now() - lastDraw + 0.001;
  lastDraw = performance.now();

  var r1 = 1 / delta;
  var r2 = r1 * 2;
  r1 = (r1 * Math.PI) / 180;
  r2 = (r1 * Math.PI) / 180;
  // rotate3D(modelViewMatrix, r1, r2, r1);

  // Set uniforms
  gl.uniformMatrix4fv(u_projectionMtx, false, projectionMatrix);
  gl.uniformMatrix4fv(u_modelViewMtx, false, modelViewMatrix);
  gl.uniform1f(u_clock, performance.now() % 16384);

  // Draw triangles
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  gl.drawElements(gl.LINE_LOOP, indices.length, gl.UNSIGNED_BYTE, 0);
}

/* Start */
requestAnimationFrame(draw);