DanTup/WebGL2DSprite.html

## WebGL2DSprite.html
<!DOCTYPE html>
<html>
  <head>
    <title>MySecondGame</title>
  </head>
  <body>
    <canvas width="1024" height="768"></canvas>

    <div style="display: none;">
      <img id="img-player" src="assets/player.png" />
    </div>

    <script id="vertex" type="x-shader">
      attribute vec2 aVertexPosition;

      void main() {
        gl_Position = vec4(aVertexPosition, 0.0, 1.0);
      }
    </script>
    <script id="fragment" type="x-shader">
      #ifdef GL_ES
      precision highp float;
      #endif

      uniform vec4 uColor;

      void main() {
        gl_FragColor = uColor;
      }
    </script>

    <script type="application/dart">
      import 'dart:async';
      import 'dart:html';
      import 'dart:math';
      import 'dart:typed_data';
      import 'dart:web_gl';

      Game game;

      main() {
        game = new Game(document.querySelector('canvas'));
      }

      class Game {
        RenderingContext _gl;
        Buffer vbuffer, tbuffer;
        int numItems;
        Texture playerTexture;
        double elapsedTime;
        double fadeAmount;

        Float32List vertices, textureCoords;
        int aVertexPosition, aTextureCoord;
        UniformLocation uSampler;

        Game(CanvasElement canvas) {
          _gl = canvas.getContext3d();
          playerTexture = _gl.createTexture();
          _gl.bindTexture(TEXTURE_2D, playerTexture);
          _gl.texImage2DUntyped(TEXTURE_2D, 0, RGBA, RGBA, UNSIGNED_BYTE, document.querySelector('#img-player'));
          _gl.texParameteri(TEXTURE_2D, TEXTURE_MAG_FILTER, NEAREST);
          _gl.texParameteri(TEXTURE_2D, TEXTURE_MIN_FILTER, LINEAR_MIPMAP_NEAREST);
          _gl.generateMipmap(TEXTURE_2D);
          _gl.bindTexture(TEXTURE_2D, null);

          var vsScript = document.querySelector('#vertex');
          var vs = _gl.createShader(VERTEX_SHADER);
          _gl.shaderSource(vs, vsScript.text);
          _gl.compileShader(vs);

          var fsScript = document.querySelector('#fragment');
          var fs = _gl.createShader(FRAGMENT_SHADER);
          _gl.shaderSource(fs, fsScript.text);
          _gl.compileShader(fs);

          var program = _gl.createProgram();
          _gl.attachShader(program, vs);
          _gl.attachShader(program, fs);
          _gl.linkProgram(program);

          if (!_gl.getShaderParameter(vs, COMPILE_STATUS))
            print(_gl.getShaderInfoLog(vs));

          if (!_gl.getShaderParameter(fs, COMPILE_STATUS))
            print(_gl.getShaderInfoLog(fs));

          if (!_gl.getProgramParameter(program, LINK_STATUS))
            print(_gl.getProgramInfoLog(program));

          _gl.useProgram(program);

          var aspect = canvas.width / canvas.height;
          vertices = new Float32List.fromList([
            -0.5, 0.5 * aspect, 0.5, 0.5 * aspect,  0.5, -0.5 * aspect,  // Triangle 1
            -0.5, 0.5 * aspect, 0.5,-0.5 * aspect, -0.5, -0.5 * aspect   // Triangle 2
          ]);

          textureCoords = new Float32List.fromList([
            0.0, 0.0,
            1.0, 0.0,
            1.0, 1.0,
            0.0, 0.0,
            1.0, 1.0,
            0.0, 1.0,
          ]);

          vbuffer = _gl.createBuffer();
          _gl.bindBuffer(ARRAY_BUFFER, vbuffer);
          _gl.bufferData(ARRAY_BUFFER, vertices, STATIC_DRAW);
          numItems = vertices.length ~/ 2;

          tbuffer = _gl.createBuffer();
          _gl.bindBuffer(ARRAY_BUFFER, tbuffer);
          _gl.bufferData(ARRAY_BUFFER, textureCoords, STATIC_DRAW);

          aVertexPosition = _gl.getAttribLocation(program, "aVertexPosition");
          _gl.enableVertexAttribArray(aVertexPosition);

          aTextureCoord = _gl.getAttribLocation(program, "aTextureCoord");
          _gl.enableVertexAttribArray(aTextureCoord);

          uSampler = _gl.getUniformLocation(program, "uSampler");

          window.animationFrame.then(_gameLoop);
        }

        _gameLoop(num time) {
          elapsedTime = time;
          _update();
          _render();
          window.animationFrame.then(_gameLoop);
        }

        _update() {
          // Use sine curve for fading. Sine is -1-1, so tweak to be 0 - 1.
          fadeAmount = (sin(elapsedTime/1000) / 2) + 0.5;
        }

        _render() {
          // Set colour for clearing to.
          _gl.clearColor(fadeAmount, 1 - fadeAmount, 0.0, 1.0);
          // Clear.
          _gl.clear(RenderingContext.COLOR_BUFFER_BIT);

          _gl.bindBuffer(ARRAY_BUFFER, vbuffer);
          _gl.vertexAttribPointer(aVertexPosition, 2, FLOAT, false, 0, 0);

          _gl.bindBuffer(ARRAY_BUFFER, tbuffer);
          _gl.vertexAttribPointer(aTextureCoord, 2, FLOAT, false, 0, 0);

          _gl.bindTexture(TEXTURE_2D, playerTexture);
          _gl.uniform1i(uSampler, 0);

          _gl.drawArrays(TRIANGLES, 0, numItems);
        }
      }
    </script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>MySecondGame</title>
	</head>
	<body>
	<canvas width="1024" height="768"></canvas>

	<div style="display: none;">
	<img id="img-player" src="assets/player.png" />
	</div>

	<script id="vertex" type="x-shader">
	attribute vec2 aVertexPosition;

	void main() {
	gl_Position = vec4(aVertexPosition, 0.0, 1.0);
	}
	</script>
	<script id="fragment" type="x-shader">
	#ifdef GL_ES
	precision highp float;
	#endif

	uniform vec4 uColor;

	void main() {
	gl_FragColor = uColor;
	}
	</script>

	<script type="application/dart">
	import 'dart:async';
	import 'dart:html';
	import 'dart:math';
	import 'dart:typed_data';
	import 'dart:web_gl';

	Game game;

	main() {
	game = new Game(document.querySelector('canvas'));
	}

	class Game {
	RenderingContext _gl;
	Buffer vbuffer, tbuffer;
	int numItems;
	Texture playerTexture;
	double elapsedTime;
	double fadeAmount;

	Float32List vertices, textureCoords;
	int aVertexPosition, aTextureCoord;
	UniformLocation uSampler;

	Game(CanvasElement canvas) {
	_gl = canvas.getContext3d();
	playerTexture = _gl.createTexture();
	_gl.bindTexture(TEXTURE_2D, playerTexture);
	_gl.texImage2DUntyped(TEXTURE_2D, 0, RGBA, RGBA, UNSIGNED_BYTE, document.querySelector('#img-player'));
	_gl.texParameteri(TEXTURE_2D, TEXTURE_MAG_FILTER, NEAREST);
	_gl.texParameteri(TEXTURE_2D, TEXTURE_MIN_FILTER, LINEAR_MIPMAP_NEAREST);
	_gl.generateMipmap(TEXTURE_2D);
	_gl.bindTexture(TEXTURE_2D, null);

	var vsScript = document.querySelector('#vertex');
	var vs = _gl.createShader(VERTEX_SHADER);
	_gl.shaderSource(vs, vsScript.text);
	_gl.compileShader(vs);

	var fsScript = document.querySelector('#fragment');
	var fs = _gl.createShader(FRAGMENT_SHADER);
	_gl.shaderSource(fs, fsScript.text);
	_gl.compileShader(fs);

	var program = _gl.createProgram();
	_gl.attachShader(program, vs);
	_gl.attachShader(program, fs);
	_gl.linkProgram(program);

	if (!_gl.getShaderParameter(vs, COMPILE_STATUS))
	print(_gl.getShaderInfoLog(vs));

	if (!_gl.getShaderParameter(fs, COMPILE_STATUS))
	print(_gl.getShaderInfoLog(fs));

	if (!_gl.getProgramParameter(program, LINK_STATUS))
	print(_gl.getProgramInfoLog(program));

	_gl.useProgram(program);

	var aspect = canvas.width / canvas.height;
	vertices = new Float32List.fromList([
	-0.5, 0.5 * aspect, 0.5, 0.5 * aspect, 0.5, -0.5 * aspect, // Triangle 1
	-0.5, 0.5 * aspect, 0.5,-0.5 * aspect, -0.5, -0.5 * aspect // Triangle 2
	]);

	textureCoords = new Float32List.fromList([
	0.0, 0.0,
	1.0, 0.0,
	1.0, 1.0,
	0.0, 0.0,
	1.0, 1.0,
	0.0, 1.0,
	]);

	vbuffer = _gl.createBuffer();
	_gl.bindBuffer(ARRAY_BUFFER, vbuffer);
	_gl.bufferData(ARRAY_BUFFER, vertices, STATIC_DRAW);
	numItems = vertices.length ~/ 2;

	tbuffer = _gl.createBuffer();
	_gl.bindBuffer(ARRAY_BUFFER, tbuffer);
	_gl.bufferData(ARRAY_BUFFER, textureCoords, STATIC_DRAW);

	aVertexPosition = _gl.getAttribLocation(program, "aVertexPosition");
	_gl.enableVertexAttribArray(aVertexPosition);

	aTextureCoord = _gl.getAttribLocation(program, "aTextureCoord");
	_gl.enableVertexAttribArray(aTextureCoord);

	uSampler = _gl.getUniformLocation(program, "uSampler");

	window.animationFrame.then(_gameLoop);
	}

	_gameLoop(num time) {
	elapsedTime = time;
	_update();
	_render();
	window.animationFrame.then(_gameLoop);
	}

	_update() {
	// Use sine curve for fading. Sine is -1-1, so tweak to be 0 - 1.
	fadeAmount = (sin(elapsedTime/1000) / 2) + 0.5;
	}

	_render() {
	// Set colour for clearing to.
	_gl.clearColor(fadeAmount, 1 - fadeAmount, 0.0, 1.0);
	// Clear.
	_gl.clear(RenderingContext.COLOR_BUFFER_BIT);

	_gl.bindBuffer(ARRAY_BUFFER, vbuffer);
	_gl.vertexAttribPointer(aVertexPosition, 2, FLOAT, false, 0, 0);

	_gl.bindBuffer(ARRAY_BUFFER, tbuffer);
	_gl.vertexAttribPointer(aTextureCoord, 2, FLOAT, false, 0, 0);

	_gl.bindTexture(TEXTURE_2D, playerTexture);
	_gl.uniform1i(uSampler, 0);

	_gl.drawArrays(TRIANGLES, 0, numItems);
	}
	}
	</script>
	<script src="packages/browser/dart.js"></script>
	</body>
	</html>