mathdoodle · August 29, 2015 14:22
diff --git a/doodle.json b/doodle.json
 {
  "uuid": "7b7d04ea-50af-4a72-ab67-37d7dc79f969",
  "description": "WebGL 006 matrix",
  "dependencies": {
    "DomReady": "latest",
    "gl-matrix": "2.2.1"
  }
 }
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <style>
    /* STYLE-MARKER */
    </style>

    <script id='shader-vs' type='x-shader/x-vertex'>
      attribute vec3 aVertexPosition;
      attribute vec3 aVertexColor;
      uniform mat4 uMVMatrix;
      uniform mat4 uPMatrix;

      varying highp vec4 vColor;
      void main(void) {
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
        vColor = vec4(aVertexColor, 1.0);
        gl_PointSize = 10.0;
      }
    </script>

    <script id='shader-fs' type='x-shader/x-fragment'>
      varying highp vec4 vColor;
      void main(void) {
        gl_FragColor = vColor;
      }
    </script>

    <!-- SCRIPTS-MARKER -->
    <script>
    // CODE-MARKER
    </script>
  </head>
  <body>
    <canvas id='my-canvas' width='400' height='300'>
      Your browser does not support the HTML5 canvas element.
    </canvas>
  </body>
 </html>
diff --git a/script.ts b/script.ts
 DomReady.ready(main);

 function main() {
  
  var canvas = <HTMLCanvasElement>document.getElementById('my-canvas');
  
  var gl: WebGLRenderingContext = initWebGL(canvas);

  // Compile and link the shaders into a program.
  var vs_source = document.getElementById('shader-vs').innerText;
  var fs_source = document.getElementById('shader-fs').innerText;
  var program = makeProgram(gl, vs_source, fs_source);
  gl.useProgram(program);

  var colors: number[] = [
     1.0, 0.0, 0.0,
     1.0, 0.0, 0.0,
     1.0, 0.0, 0.0,
     0.0, 0.0, 1.0,
     0.0, 0.0, 1.0,
     0.0, 0.0, 1.0];
  var cbo = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, cbo);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

  var theta: number = 0;
  var mvMatrix = <Float32Array>mat4.create();
  var pMatrix = <Float32Array>mat4.create();
  var uMVMatrix = gl.getUniformLocation(program, 'uMVMatrix');
  var uPMatrix  = gl.getUniformLocation(program, 'uPMatrix');
  
  function animLoop() {

    // Clear the viewport.
    gl.clearColor(0.5, 0.5, 0.6, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.viewport(0, 0, canvas.width, canvas.height);
    mat4.perspective(pMatrix, 45, canvas.width/canvas.height,0.1,100.0);
    mat4.identity(mvMatrix);
    mat4.translate(mvMatrix, mvMatrix, [0,0,-2.0]);
    
    var x = Math.sin(theta)/4;
    theta += 0.05;

    var vertices: number[] = [
      -0.5+x,  0.5, -0.5,
       0.0,    0.0, -0.5,
      -0.5+x, -0.5, -0.,
       0.5-x,  0.5, 0.5,
       0.0,    0.0, 0.5,
       0.5-x, -0.5, 0.5
    ];
    var vbo = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.DYNAMIC_DRAW);

    var aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition');
    gl.enableVertexAttribArray(aVertexPosition);
    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
    gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0);
  
    var aVertexColor = gl.getAttribLocation(program, 'aVertexColor');
    gl.enableVertexAttribArray(aVertexColor);
    gl.bindBuffer(gl.ARRAY_BUFFER, cbo);
    gl.vertexAttribPointer(aVertexColor, 3, gl.FLOAT, false, 0, 0);
    
    gl.uniformMatrix4fv(uMVMatrix, false, mvMatrix);
    gl.uniformMatrix4fv(uPMatrix, false, pMatrix);
  
    gl.drawArrays(gl.TRIANGLES, 0, 6);
    // gl.drawArrays(gl.LINES, 0, 2);
    // gl.drawArrays(gl.LINES, 1, 2);
    // gl.drawArrays(gl.LINES, 2, 2);
    // gl.drawArrays(gl.POINTS, 0, 6);

    requestAnimationFrame(animLoop);
  }
  
  animLoop();
 }

 function initWebGL(canvas: HTMLCanvasElement): WebGLRenderingContext {
  var context: WebGLRenderingContext = null;
  
  try {
    // Try to grab the standard context. If it fails, fallback to experimental.
    context = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
  }
  catch(e) {
  }
  
  if (context) {
    return context;
  }
  else {
    throw new Error("Unable to initialize WebGL. Your browser may not support it.");
  }
 }

 /**
 * Creates a WebGLProgram with compiled and linked shaders.
 */
 function makeProgram(gl: WebGLRenderingContext, vertexShader: string, fragmentShader: string): WebGLProgram {
  // TODO: Proper cleanup if we throw an error at any point.
  var vs = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vs, vertexShader);
  gl.compileShader(vs);
  if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) {
    throw new Error(gl.getShaderInfoLog(vs));
  }
  var fs = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fs, fragmentShader);
  gl.compileShader(fs);
  if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) {
    throw new Error(gl.getShaderInfoLog(fs));
  }
  var program = gl.createProgram();
  gl.attachShader(program, vs);
  gl.attachShader(program, fs);
  gl.linkProgram(program);
  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    throw new Error(gl.getProgramInfoLog(program));
  }
  return program;
 }
diff --git a/style.less b/style.less
 body { background-color: white; }
 canvas { 
  background-color: black;
  position: absolute;
  left: 200px;
  top: 100px;
 }
	{
	"uuid": "7b7d04ea-50af-4a72-ab67-37d7dc79f969",
	"description": "WebGL 006 matrix",
	"dependencies": {
	"DomReady": "latest",
	"gl-matrix": "2.2.1"
	}
	}
	<!doctype html>
	<html>
	<head>
	<style>
	/* STYLE-MARKER */
	</style>

	<script id='shader-vs' type='x-shader/x-vertex'>
	attribute vec3 aVertexPosition;
	attribute vec3 aVertexColor;
	uniform mat4 uMVMatrix;
	uniform mat4 uPMatrix;

	varying highp vec4 vColor;
	void main(void) {
	gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
	vColor = vec4(aVertexColor, 1.0);
	gl_PointSize = 10.0;
	}
	</script>

	<script id='shader-fs' type='x-shader/x-fragment'>
	varying highp vec4 vColor;
	void main(void) {
	gl_FragColor = vColor;
	}
	</script>

	<!-- SCRIPTS-MARKER -->
	<script>
	// CODE-MARKER
	</script>
	</head>
	<body>
	<canvas id='my-canvas' width='400' height='300'>
	Your browser does not support the HTML5 canvas element.
	</canvas>
	</body>
	</html>
	DomReady.ready(main);

	function main() {

	var canvas = <HTMLCanvasElement>document.getElementById('my-canvas');

	var gl: WebGLRenderingContext = initWebGL(canvas);

	// Compile and link the shaders into a program.
	var vs_source = document.getElementById('shader-vs').innerText;
	var fs_source = document.getElementById('shader-fs').innerText;
	var program = makeProgram(gl, vs_source, fs_source);
	gl.useProgram(program);

	var colors: number[] = [
	1.0, 0.0, 0.0,
	1.0, 0.0, 0.0,
	1.0, 0.0, 0.0,
	0.0, 0.0, 1.0,
	0.0, 0.0, 1.0,
	0.0, 0.0, 1.0];
	var cbo = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, cbo);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

	var theta: number = 0;
	var mvMatrix = <Float32Array>mat4.create();
	var pMatrix = <Float32Array>mat4.create();
	var uMVMatrix = gl.getUniformLocation(program, 'uMVMatrix');
	var uPMatrix = gl.getUniformLocation(program, 'uPMatrix');

	function animLoop() {

	// Clear the viewport.
	gl.clearColor(0.5, 0.5, 0.6, 1.0);
	gl.clear(gl.COLOR_BUFFER_BIT);
	gl.viewport(0, 0, canvas.width, canvas.height);
	mat4.perspective(pMatrix, 45, canvas.width/canvas.height,0.1,100.0);
	mat4.identity(mvMatrix);
	mat4.translate(mvMatrix, mvMatrix, [0,0,-2.0]);

	var x = Math.sin(theta)/4;
	theta += 0.05;

	var vertices: number[] = [
	-0.5+x, 0.5, -0.5,
	0.0, 0.0, -0.5,
	-0.5+x, -0.5, -0.,
	0.5-x, 0.5, 0.5,
	0.0, 0.0, 0.5,
	0.5-x, -0.5, 0.5
	];
	var vbo = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.DYNAMIC_DRAW);

	var aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition');
	gl.enableVertexAttribArray(aVertexPosition);
	gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
	gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0);

	var aVertexColor = gl.getAttribLocation(program, 'aVertexColor');
	gl.enableVertexAttribArray(aVertexColor);
	gl.bindBuffer(gl.ARRAY_BUFFER, cbo);
	gl.vertexAttribPointer(aVertexColor, 3, gl.FLOAT, false, 0, 0);

	gl.uniformMatrix4fv(uMVMatrix, false, mvMatrix);
	gl.uniformMatrix4fv(uPMatrix, false, pMatrix);

	gl.drawArrays(gl.TRIANGLES, 0, 6);
	// gl.drawArrays(gl.LINES, 0, 2);
	// gl.drawArrays(gl.LINES, 1, 2);
	// gl.drawArrays(gl.LINES, 2, 2);
	// gl.drawArrays(gl.POINTS, 0, 6);

	requestAnimationFrame(animLoop);
	}

	animLoop();
	}

	function initWebGL(canvas: HTMLCanvasElement): WebGLRenderingContext {
	var context: WebGLRenderingContext = null;

	try {
	// Try to grab the standard context. If it fails, fallback to experimental.
	context = canvas.getContext('webgl') \|\| canvas.getContext('experimental-webgl');
	}
	catch(e) {
	}

	if (context) {
	return context;
	}
	else {
	throw new Error("Unable to initialize WebGL. Your browser may not support it.");
	}
	}

	/**
	* Creates a WebGLProgram with compiled and linked shaders.
	*/
	function makeProgram(gl: WebGLRenderingContext, vertexShader: string, fragmentShader: string): WebGLProgram {
	// TODO: Proper cleanup if we throw an error at any point.
	var vs = gl.createShader(gl.VERTEX_SHADER);
	gl.shaderSource(vs, vertexShader);
	gl.compileShader(vs);
	if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) {
	throw new Error(gl.getShaderInfoLog(vs));
	}
	var fs = gl.createShader(gl.FRAGMENT_SHADER);
	gl.shaderSource(fs, fragmentShader);
	gl.compileShader(fs);
	if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) {
	throw new Error(gl.getShaderInfoLog(fs));
	}
	var program = gl.createProgram();
	gl.attachShader(program, vs);
	gl.attachShader(program, fs);
	gl.linkProgram(program);
	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
	throw new Error(gl.getProgramInfoLog(program));
	}
	return program;
	}
	body { background-color: white; }
	canvas {
	background-color: black;
	position: absolute;
	left: 200px;
	top: 100px;
	}