A bare-bones WebGL starter template, that renders vertices with shaders. Also shows an example uniform usage. Auto-injects on the page if possible.

webgl.js

(function() {
  // Get a context
  var canvas = document.createElement('canvas');
  var gl = null;
  try {
    gl = canvas.getContext('webgl');
    if(!gl) throw new Error('');
  } catch(e) {
    return false;
  }

  canvas.width = 400;
  canvas.height = 300;
  document.body.appendChild(canvas);

  var createShader = function(gl, type, source) {
    var shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
    if(success) {
      return shader;
    }

    console.error(gl.getShaderInfoLog(shader));
    throw new Error('Shader failed to compile');
  };

  var createShaderProgram = function(gl, vertexSource, fragmentSource) {
    var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource);
    var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource);

    var program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);

    var success = gl.getProgramParameter(program, gl.LINK_STATUS);
    if(success) {
      return program;
    }

    console.error(gl.getProgramInfoLog(program));
    throw new Error('Shader program failed to link');
  };

  // load our shaders
  var vertexSource =
    "uniform float theta;" +
    "attribute vec4 a_position;" +
    "void main() {" +
      "float c = cos(theta);" +
      "float s = sin(theta);" +
      "mat4 rotate = mat4(vec4(c, s, 0., 0.), vec4(-s, c, 0., 0.), vec4(0., 0., 1., 0.), vec4(0., 0., 0., 1.));" +
      "gl_Position = rotate * a_position;" +
    "}";
  var fragmentSource =
    "precision mediump float;" +
    "void main() { " +
      "gl_FragColor = vec4(1, 0, 0.5, 1);" +
    "}";
  var program = createShaderProgram(gl, vertexSource, fragmentSource);

  // load data into a buffer
  var positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
  var positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  var positions = [
    0, 0, 0,
    0, 0.5, 0,
    0.7, 0, 0
  ];
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

  // tell the shader to load our data from the buffer we just made
  gl.enableVertexAttribArray(positionAttributeLocation);
  gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0); // 3-dim floats, don't normalize, stride between points, initial offset

  // load our uniform for rotation
  var thetaUniformLocation = gl.getUniformLocation(program, 'theta');

  var theta = 0;
  function draw() {
    // set the view port size
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    // use our program
    gl.useProgram(program);

    // set our theta
    theta += 0.01;
    gl.uniform1f(thetaUniformLocation, theta);

    // now render 3 triangles, starting at offset 0
    gl.drawArrays(gl.TRIANGLES, 0, 3);

    requestAnimationFrame(draw);
  }

  requestAnimationFrame(draw);
})();