tejainece/index.html

## index.html
<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="scaffolded-by" content="https://github.com/dart-lang/stagehand">
    <title>Dart WebGL triangle</title>
    <style>
        @import url(https://fonts.googleapis.com/css?family=Roboto);

        html, body {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          font-family: 'Roboto', sans-serif;
        }

        canvas {
          width: 200px;
          height: 200px;
        }
    </style>
    <link rel="icon" href="favicon.ico">
    <script defer src="main.dart.js"></script>
</head>

<body>

<canvas></canvas>

</body>
</html>

## main.dart
import 'dart:html';
import 'dart:typed_data';

import 'dart:web_gl';

void main() {
  final CanvasElement canvas = querySelector('canvas');
  final RenderingContext2 ctx = canvas.getContext('webgl2');

  ctx.viewport(0, 0, 200, 200);
  canvas.width = 200;
  canvas.height = 200;

  final vertexShader = ctx.createShader(WebGL.VERTEX_SHADER);
  ctx.shaderSource(vertexShader, '''
attribute vec2 position;

void main() {
  gl_Position = vec4(position, 0, 1);
}
  ''');
  ctx.compileShader(vertexShader);

  final fragmentShader = ctx.createShader(WebGL.FRAGMENT_SHADER);
  ctx.shaderSource(fragmentShader, '''
void main() {
  gl_FragColor = vec4(1.0, 0, 0, 1.0);
}
  ''');
  ctx.compileShader(fragmentShader);

  final program = ctx.createProgram();
  ctx.attachShader(program, vertexShader);
  ctx.attachShader(program, fragmentShader);
  ctx.linkProgram(program);

  if (!ctx.getShaderParameter(vertexShader, WebGL.COMPILE_STATUS)) {
    final msg = ctx.getShaderInfoLog(vertexShader);
    if (msg != null) {
      throw Exception('Compiling vertex shader failed: ' + msg);
    }
  }

  if (!ctx.getShaderParameter(fragmentShader, WebGL.COMPILE_STATUS)) {
    final msg = ctx.getShaderInfoLog(fragmentShader);
    if (msg != null) {
      throw Exception('Compiling fragment shader failed: ' + msg);
    }
  }

  if (!ctx.getProgramParameter(program, WebGL.LINK_STATUS)) {
    final msg = ctx.getProgramInfoLog(program);
    if (msg != null) {
      throw Exception('Linking program failed: ' + msg);
    }
  }

  ctx.useProgram(program);

  final positionBuffer = ctx.createBuffer();
  ctx.bindBuffer(WebGL.ARRAY_BUFFER, positionBuffer);
  final positionLocation = ctx.getAttribLocation(program, 'position');
  ctx.vertexAttribPointer(positionLocation, 2, WebGL.FLOAT, false, 0, 0);
  ctx.enableVertexAttribArray(positionLocation);

  void render() {
    ctx.clearColor(0.5, 0.5, 0.5, 1.0);
    ctx.clear(WebGL.COLOR_BUFFER_BIT);

    ctx.bufferData(WebGL.ARRAY_BUFFER,
        Float32List.fromList([1 , 0, -1, -1, -1, 0]), WebGL.STATIC_DRAW);

    ctx.drawArrays(WebGL.TRIANGLES, 0, 3);
  }

  void repeatRender() {
    render();
    window.requestAnimationFrame((highResTime) {
      repeatRender();
    });
  }

  repeatRender();
}
	<!DOCTYPE html>

	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="scaffolded-by" content="https://github.com/dart-lang/stagehand">
	<title>Dart WebGL triangle</title>
	<style>
	@import url(https://fonts.googleapis.com/css?family=Roboto);

	html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	}

	canvas {
	width: 200px;
	height: 200px;
	}
	</style>
	<link rel="icon" href="favicon.ico">
	<script defer src="main.dart.js"></script>
	</head>

	<body>

	<canvas></canvas>

	</body>
	</html>
	import 'dart:html';
	import 'dart:typed_data';

	import 'dart:web_gl';

	void main() {
	final CanvasElement canvas = querySelector('canvas');
	final RenderingContext2 ctx = canvas.getContext('webgl2');

	ctx.viewport(0, 0, 200, 200);
	canvas.width = 200;
	canvas.height = 200;

	final vertexShader = ctx.createShader(WebGL.VERTEX_SHADER);
	ctx.shaderSource(vertexShader, '''
	attribute vec2 position;

	void main() {
	gl_Position = vec4(position, 0, 1);
	}
	''');
	ctx.compileShader(vertexShader);

	final fragmentShader = ctx.createShader(WebGL.FRAGMENT_SHADER);
	ctx.shaderSource(fragmentShader, '''
	void main() {
	gl_FragColor = vec4(1.0, 0, 0, 1.0);
	}
	''');
	ctx.compileShader(fragmentShader);

	final program = ctx.createProgram();
	ctx.attachShader(program, vertexShader);
	ctx.attachShader(program, fragmentShader);
	ctx.linkProgram(program);

	if (!ctx.getShaderParameter(vertexShader, WebGL.COMPILE_STATUS)) {
	final msg = ctx.getShaderInfoLog(vertexShader);
	if (msg != null) {
	throw Exception('Compiling vertex shader failed: ' + msg);
	}
	}

	if (!ctx.getShaderParameter(fragmentShader, WebGL.COMPILE_STATUS)) {
	final msg = ctx.getShaderInfoLog(fragmentShader);
	if (msg != null) {
	throw Exception('Compiling fragment shader failed: ' + msg);
	}
	}

	if (!ctx.getProgramParameter(program, WebGL.LINK_STATUS)) {
	final msg = ctx.getProgramInfoLog(program);
	if (msg != null) {
	throw Exception('Linking program failed: ' + msg);
	}
	}

	ctx.useProgram(program);

	final positionBuffer = ctx.createBuffer();
	ctx.bindBuffer(WebGL.ARRAY_BUFFER, positionBuffer);
	final positionLocation = ctx.getAttribLocation(program, 'position');
	ctx.vertexAttribPointer(positionLocation, 2, WebGL.FLOAT, false, 0, 0);
	ctx.enableVertexAttribArray(positionLocation);

	void render() {
	ctx.clearColor(0.5, 0.5, 0.5, 1.0);
	ctx.clear(WebGL.COLOR_BUFFER_BIT);

	ctx.bufferData(WebGL.ARRAY_BUFFER,
	Float32List.fromList([1 , 0, -1, -1, -1, 0]), WebGL.STATIC_DRAW);

	ctx.drawArrays(WebGL.TRIANGLES, 0, 3);
	}

	void repeatRender() {
	render();
	window.requestAnimationFrame((highResTime) {
	repeatRender();
	});
	}

	repeatRender();
	}