mathdoodle · August 29, 2015 14:25
diff --git a/doodle.json b/doodle.json
 {
  "uuid": "ebaeb7f8-11ba-4bac-a56c-3732a3924a0a",
  "description": "WebGL Fundamentals",
  "dependencies": {
    "DomReady": "latest",
    "davinci-eight": "latest",
    "davinci-threejs": "0.71.4"
  },
  "operatorOverloading": true
 }
diff --git a/extras.ts b/extras.ts
 //
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <style>
    /* STYLE-MARKER */
    </style>
    <!-- SCRIPTS-MARKER -->
    <script>
    // CODE-MARKER
    </script>
    <script id="2d-vertex-shader" type="x-shader/x-vertex">
      attribute vec2 a_position;
      uniform vec2 u_resolution;

      void main() {
        // convert the rectangle from pixels to 0.0 to 1.0
        vec2 zeroToOne = a_position / u_resolution;
        // convert from 0->1 to 0->2
        vec2 zeroToTwo = zeroToOne * 2.0;
        // convert from 0->2 to -1->+1 (clipspace)
        vec2 clipSpace = zeroToTwo - 1.0;

        gl_Position = vec4(clipSpace, 0, 1);
      }
    </script>
    <script id="2d-fragment-shader" type="x-shader/x-fragment">
      void main() {
        gl_FragColor = vec4(0, 1, 0, 1);  // green
      }
    </script>
  </head>
  <body>
    <canvas id='canvas'>
      Your browser does not support the HTML5 canvas element.
    </canvas>
  </body>
 </html>
diff --git a/script.ts b/script.ts
 DomReady.ready(function() {
  try {
    main();
  }
  catch(e) {
    console.error(e);
  }
 });

 function $(id: string) {
  return document.getElementById(id);
 }

 // A default might provide no elements, be static, and no meta info.
 class MyMesh implements EIGHT.AttribProvider {
  public drawMode: number; // TODO
  constructor() {
    
  }
  draw(gl: WebGLRenderingContext) {
    gl.drawArrays(gl.TRIANGLES, 0, 6);
  }
  update() {
    
  }
  get dynamic(): boolean {
    return false;
  }
  getAttribMeta() {
    var attributes: EIGHT.AttribMetaInfos = {};
    // TODO: defaults for normalized, stride, offset?
    attributes['position'] = {name: 'a_position', glslType: 'vec2', size: 2, normalized: false, stride: 0, offset: 0};
    return attributes;
  }
  hasElementArray() {
    return false;
  }
  getElementArray() {
    return null;
  }
  getAttribArray(name: string) {
    return {usage: EIGHT.DataUsage.STATIC_DRAW, data: new Float32Array([
      10, 20,
      80, 20,
      10, 30,
      10, 30,
      80, 20,
      80, 30])};
  }
 }

 function main() {

  var canvas = <HTMLCanvasElement>$('canvas');
  var monitor = EIGHT.contextMonitor(canvas);
  
  var mesh = new MyMesh();
  var shaders = EIGHT.shaderProgram($('2d-vertex-shader').textContent, $('2d-fragment-shader').textContent);
  var resolution = new EIGHT.UniformVec2('u_resolution');
  resolution.callback = function() {return [canvas.width, canvas.height];};
  var thing = EIGHT.primitive(mesh, shaders, EIGHT.uniforms([]));
  
  monitor.addContextUser(thing);

  monitor.start();

  shaders.use();
  var x: EIGHT.UniformProvider = resolution;
  thing.draw(EIGHT.uniforms([x]));

  monitor.stop();
 }
diff --git a/style.less b/style.less
 body {
  background-color: white;
  margin: 0;
 }
 canvas { 
  background-color: black;
  position: absolute;
  width: 100%;
  height: 100%;
 }
	{
	"uuid": "ebaeb7f8-11ba-4bac-a56c-3732a3924a0a",
	"description": "WebGL Fundamentals",
	"dependencies": {
	"DomReady": "latest",
	"davinci-eight": "latest",
	"davinci-threejs": "0.71.4"
	},
	"operatorOverloading": true
	}
	<!doctype html>
	<html>
	<head>
	<style>
	/* STYLE-MARKER */
	</style>
	<!-- SCRIPTS-MARKER -->
	<script>
	// CODE-MARKER
	</script>
	<script id="2d-vertex-shader" type="x-shader/x-vertex">
	attribute vec2 a_position;
	uniform vec2 u_resolution;

	void main() {
	// convert the rectangle from pixels to 0.0 to 1.0
	vec2 zeroToOne = a_position / u_resolution;
	// convert from 0->1 to 0->2
	vec2 zeroToTwo = zeroToOne * 2.0;
	// convert from 0->2 to -1->+1 (clipspace)
	vec2 clipSpace = zeroToTwo - 1.0;

	gl_Position = vec4(clipSpace, 0, 1);
	}
	</script>
	<script id="2d-fragment-shader" type="x-shader/x-fragment">
	void main() {
	gl_FragColor = vec4(0, 1, 0, 1); // green
	}
	</script>
	</head>
	<body>
	<canvas id='canvas'>
	Your browser does not support the HTML5 canvas element.
	</canvas>
	</body>
	</html>
	DomReady.ready(function() {
	try {
	main();
	}
	catch(e) {
	console.error(e);
	}
	});

	function $(id: string) {
	return document.getElementById(id);
	}

	// A default might provide no elements, be static, and no meta info.
	class MyMesh implements EIGHT.AttribProvider {
	public drawMode: number; // TODO
	constructor() {

	}
	draw(gl: WebGLRenderingContext) {
	gl.drawArrays(gl.TRIANGLES, 0, 6);
	}
	update() {

	}
	get dynamic(): boolean {
	return false;
	}
	getAttribMeta() {
	var attributes: EIGHT.AttribMetaInfos = {};
	// TODO: defaults for normalized, stride, offset?
	attributes['position'] = {name: 'a_position', glslType: 'vec2', size: 2, normalized: false, stride: 0, offset: 0};
	return attributes;
	}
	hasElementArray() {
	return false;
	}
	getElementArray() {
	return null;
	}
	getAttribArray(name: string) {
	return {usage: EIGHT.DataUsage.STATIC_DRAW, data: new Float32Array([
	10, 20,
	80, 20,
	10, 30,
	10, 30,
	80, 20,
	80, 30])};
	}
	}

	function main() {

	var canvas = <HTMLCanvasElement>$('canvas');
	var monitor = EIGHT.contextMonitor(canvas);

	var mesh = new MyMesh();
	var shaders = EIGHT.shaderProgram($('2d-vertex-shader').textContent, $('2d-fragment-shader').textContent);
	var resolution = new EIGHT.UniformVec2('u_resolution');
	resolution.callback = function() {return [canvas.width, canvas.height];};
	var thing = EIGHT.primitive(mesh, shaders, EIGHT.uniforms([]));

	monitor.addContextUser(thing);

	monitor.start();

	shaders.use();
	var x: EIGHT.UniformProvider = resolution;
	thing.draw(EIGHT.uniforms([x]));

	monitor.stop();
	}
	body {
	background-color: white;
	margin: 0;
	}
	canvas {
	background-color: black;
	position: absolute;
	width: 100%;
	height: 100%;
	}