webgl2d.js

function initGL() {
  var canvas = document.getElementById("canvas");
  canvas.width = 320;
  canvas.height = 480;
  gl = canvas.getContext('experimental-webgl');
  gl.disable(gl.DEPTH_TEST);
  gl.clearColor(0.5, 0.5, 0.5, 1.0);

  var vs = "attribute vec2 a_position;";
  vs += "uniform vec2 u_resolution;";
  vs += "void main() { gl_Position = vec4(a_position * 2.0 / u_resolution - 1.0, 0, 1); }";

  var fs = "precision mediump float;";
  fs += "void main() { gl_FragColor = vec4(0.5, 0.6, 1.0, 1.0); }";

  var vertShader = makeShader(gl.VERTEX_SHADER, "vertex", vs);
  var fragShader = makeShader(gl.FRAGMENT_SHADER, "fragment", fs);
  var shaderProg = gl.createProgram();
  gl.attachShader(shaderProg, vertShader);
  gl.attachShader(shaderProg, fragShader);
  gl.linkProgram(shaderProg); 
  if (!gl.getProgramParameter(shaderProg, gl.LINK_STATUS)) {
    console.log("Unable to initialize the shader program.");
  }
  gl.useProgram(shaderProg);
  aPosition = gl.getAttribLocation(shaderProg, "a_position");
  var uResolution = gl.getUniformLocation(shaderProg, "u_resolution");
  //var aColor = gl.getAttribLocation(shaderProgram, "a_color");
  gl.uniform2f(uResolution, canvas.width, canvas.height);
  gl.enableVertexAttribArray(aPosition);
  //gl.enableVertexAttribArray(aColor);
  
  vertBuffer = gl.createBuffer();
  verts = new Float32Array(6);
}

function makeShader(shaderType, name, source) {
  var shader = gl.createShader(shaderType);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    console.log('error compiling shader ' + name);
    return null;
  }
  return shader;
}

function loop(_) {
  t += 30;
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  var y = 100 * t/1000.0;

  verts[0] = 50; verts[1] = y;
  verts[2] = 100; verts[3] = y;
  verts[4] = 100; verts[5] = y + 50;

  gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, verts, gl.STREAM_DRAW);
  gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
  gl.drawArrays(gl.TRIANGLES, 0, 3);
}

window.onload = function(e) {
  initGL();
  t = 0;
  setInterval(loop, 30);
}