m-decoster/webgl.dart

## webgl.dart
library webglapp;

import 'dart:typed_data';
import 'dart:html';
import 'dart:web_gl';
import 'dart:async';

CanvasElement canvas = document.getElementById("gameCanvas");
RenderingContext gl;

String vertexShaderSrc = """
attribute vec2 position;

void main() {
  gl_Position = vec4(position, 0.0, 1.0);
}
""";

String fragmentShaderSrc = """
precision mediump float;

void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
""";

Float32List vertices = new Float32List.fromList([
  -0.5, 0.5,
  0.0, -0.5,
  0.5, 0.5
]);

void error(String errorStr)
{
  document.getElementById("errorDiv").appendHtml("<p>$errorStr</p>");
}

void initGL()
{
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.viewport(0, 0, canvas.width, canvas.height);

  // Compile shaders and link
  Shader vs = gl.createShader(RenderingContext.VERTEX_SHADER);
  gl.shaderSource(vs, vertexShaderSrc);
  gl.compileShader(vs);

  Shader fs = gl.createShader(RenderingContext.FRAGMENT_SHADER);
  gl.shaderSource(fs, fragmentShaderSrc);
  gl.compileShader(fs);

  Program program = gl.createProgram();
  gl.attachShader(program, vs);
  gl.attachShader(program, fs);
  gl.linkProgram(program);
  gl.useProgram(program);

  /**
   * Check if shaders were compiled properly
   */
  if (!gl.getShaderParameter(vs, RenderingContext.COMPILE_STATUS)) {
    error(gl.getShaderInfoLog(vs));
  }

  if (!gl.getShaderParameter(fs, RenderingContext.COMPILE_STATUS)) {
    error(gl.getShaderInfoLog(fs));
  }

  if (!gl.getProgramParameter(program, RenderingContext.LINK_STATUS)) {
    error(gl.getProgramInfoLog(program));
  }

  // Create vbo
  Buffer vbo = gl.createBuffer();
  gl.bindBuffer(RenderingContext.ARRAY_BUFFER, vbo);
  gl.bufferData(RenderingContext.ARRAY_BUFFER, vertices, RenderingContext.STATIC_DRAW);

  int posAttrib = gl.getAttribLocation(program, "position");
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(posAttrib, 2, RenderingContext.FLOAT, false, 0, 0);
}

render(num delta)
{
  gl.clear(RenderingContext.COLOR_BUFFER_BIT);

  // draw
  gl.drawArrays(RenderingContext.TRIANGLES, 0, 3);

  // redraw when ready
  window.animationFrame.then(render);
}

void main()
{
  gl = canvas.getContext3d();
  if(gl == null)
  {
    error("Your browser doesn't seem to support WebGL.");
    return;
  }

  initGL();

  window.animationFrame.then(render);
}

## webgl.html
<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>WebGL</title>
    <link rel="stylesheet" href="webgl.css">
  </head>
  <body>
    <h1>WebGL</h1>
    <div id="errorDiv">
    </div>
    <canvas id="gameCanvas" width="500" height="500"></canvas>
    <script type="application/dart" src="webgl.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>
	library webglapp;

	import 'dart:typed_data';
	import 'dart:html';
	import 'dart:web_gl';
	import 'dart:async';

	CanvasElement canvas = document.getElementById("gameCanvas");
	RenderingContext gl;

	String vertexShaderSrc = """
	attribute vec2 position;

	void main() {
	gl_Position = vec4(position, 0.0, 1.0);
	}
	""";

	String fragmentShaderSrc = """
	precision mediump float;

	void main() {
	gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
	}
	""";

	Float32List vertices = new Float32List.fromList([
	-0.5, 0.5,
	0.0, -0.5,
	0.5, 0.5
	]);

	void error(String errorStr)
	{
	document.getElementById("errorDiv").appendHtml("<p>$errorStr</p>");
	}

	void initGL()
	{
	gl.clearColor(0.0, 0.0, 0.0, 1.0);
	gl.viewport(0, 0, canvas.width, canvas.height);

	// Compile shaders and link
	Shader vs = gl.createShader(RenderingContext.VERTEX_SHADER);
	gl.shaderSource(vs, vertexShaderSrc);
	gl.compileShader(vs);

	Shader fs = gl.createShader(RenderingContext.FRAGMENT_SHADER);
	gl.shaderSource(fs, fragmentShaderSrc);
	gl.compileShader(fs);

	Program program = gl.createProgram();
	gl.attachShader(program, vs);
	gl.attachShader(program, fs);
	gl.linkProgram(program);
	gl.useProgram(program);

	/**
	* Check if shaders were compiled properly
	*/
	if (!gl.getShaderParameter(vs, RenderingContext.COMPILE_STATUS)) {
	error(gl.getShaderInfoLog(vs));
	}

	if (!gl.getShaderParameter(fs, RenderingContext.COMPILE_STATUS)) {
	error(gl.getShaderInfoLog(fs));
	}

	if (!gl.getProgramParameter(program, RenderingContext.LINK_STATUS)) {
	error(gl.getProgramInfoLog(program));
	}

	// Create vbo
	Buffer vbo = gl.createBuffer();
	gl.bindBuffer(RenderingContext.ARRAY_BUFFER, vbo);
	gl.bufferData(RenderingContext.ARRAY_BUFFER, vertices, RenderingContext.STATIC_DRAW);

	int posAttrib = gl.getAttribLocation(program, "position");
	gl.enableVertexAttribArray(0);
	gl.vertexAttribPointer(posAttrib, 2, RenderingContext.FLOAT, false, 0, 0);
	}

	render(num delta)
	{
	gl.clear(RenderingContext.COLOR_BUFFER_BIT);

	// draw
	gl.drawArrays(RenderingContext.TRIANGLES, 0, 3);

	// redraw when ready
	window.animationFrame.then(render);
	}

	void main()
	{
	gl = canvas.getContext3d();
	if(gl == null)
	{
	error("Your browser doesn't seem to support WebGL.");
	return;
	}

	initGL();

	window.animationFrame.then(render);
	}
	<!DOCTYPE html>

	<html>
	<head>
	<meta charset="utf-8">
	<title>WebGL</title>
	<link rel="stylesheet" href="webgl.css">
	</head>
	<body>
	<h1>WebGL</h1>
	<div id="errorDiv">
	</div>
	<canvas id="gameCanvas" width="500" height="500"></canvas>
	<script type="application/dart" src="webgl.dart"></script>
	<script src="packages/browser/dart.js"></script>
	</body>
	</html>