mathdoodle · August 29, 2015 14:22
diff --git a/doodle.json b/doodle.json
 {
  "uuid": "651071b0-f9fc-46e1-932f-d70ce56098e8",
  "description": "WebGL 000 Template",
  "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);
 }

 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": "651071b0-f9fc-46e1-932f-d70ce56098e8",
	"description": "WebGL 000 Template",
	"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);
	}

	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;
	}