mathdoodle · August 29, 2015 14:22
diff --git a/doodle.json b/doodle.json
 {
  "uuid": "909874fb-b256-44cb-9278-69e3b73bed9d",
  "description": "WebGL 004 color",
  "dependencies": {
    "DomReady": "latest"
  }
 }
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <style>
    /* STYLE-MARKER */
    </style>
    <!-- The vertex shader will set the position of a vertex. -->
    <script id='shader-vs' type='x-shader/x-vertex'>
      attribute vec3 aVertexPosition;
      attribute vec3 aVertexColor;

      varying highp vec4 vColor;
      void main(void) {
        gl_Position = vec4(aVertexPosition, 1.0);
        vColor = vec4(aVertexColor, 1.0);
        gl_PointSize = 10.0;
      }
    </script>
    <!-- The fragment shader will set the color of each pixel. -->
    <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);
  
  gl.clearColor(0.5, 0.5, 0.6, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.viewport(0, 0, canvas.width, canvas.height);

  // 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 vertices: number[] = [
    -0.5, 0.5, 0.0,
     0.0, 0.0, 0.0,
    -0.5,-0.5, 0.0,
     0.5, 0.5, 0.0,
     0.0, 0.0, 0.0,
     0.5, -0.5, 0.0];
  var vbo = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

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

 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": "909874fb-b256-44cb-9278-69e3b73bed9d",
	"description": "WebGL 004 color",
	"dependencies": {
	"DomReady": "latest"
	}
	}
	<!doctype html>
	<html>
	<head>
	<style>
	/* STYLE-MARKER */
	</style>
	<!-- The vertex shader will set the position of a vertex. -->
	<script id='shader-vs' type='x-shader/x-vertex'>
	attribute vec3 aVertexPosition;
	attribute vec3 aVertexColor;

	varying highp vec4 vColor;
	void main(void) {
	gl_Position = vec4(aVertexPosition, 1.0);
	vColor = vec4(aVertexColor, 1.0);
	gl_PointSize = 10.0;
	}
	</script>
	<!-- The fragment shader will set the color of each pixel. -->
	<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);

	gl.clearColor(0.5, 0.5, 0.6, 1.0);
	gl.clear(gl.COLOR_BUFFER_BIT);
	gl.viewport(0, 0, canvas.width, canvas.height);

	// 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 vertices: number[] = [
	-0.5, 0.5, 0.0,
	0.0, 0.0, 0.0,
	-0.5,-0.5, 0.0,
	0.5, 0.5, 0.0,
	0.0, 0.0, 0.0,
	0.5, -0.5, 0.0];
	var vbo = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

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

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