<!DOCTYPE html>
<html>

<head>
	<title>Shader Startup Benchmark</title>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

	<script type="text/javascript" src="../js/glMatrix-0.9.5.min.js"></script>
	<script type="text/javascript" src="../js/webgl-utils.js"></script>
	<script type="text/javascript" src="../js/webgl-helpers.js"></script>
	<script type="text/javascript" src="../js/httpAjax.js"></script>

	<script id="shader-fs" type="x-shader/x-fragment">
		precision mediump float;

		uniform vec2 iResolution;
		uniform float iGlobalTime;

		void main(void) {
			vec2 uv = gl_FragCoord.xy / iResolution.xy;
			gl_FragColor = vec4(uv, 0.5 + 0.5 * sin(iGlobalTime), 1.0);
		}

	</script>

	<script id="shader-vs" type="x-shader/x-vertex">
		attribute vec3 aVertexPosition;

		uniform mat4 uMVMatrix;
		uniform mat4 uPMatrix;

		varying vec4 vColor;

		void main(void) {
			gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
		}
	</script>


	<script type="text/javascript">

		function initShaders() {
			var fragmentShader = getShader(gl, "shader-fs");
			var vertexShader = getShader(gl, "shader-vs");

			shaderProgram = gl.createProgram();
			gl.attachShader(shaderProgram, vertexShader);
			gl.attachShader(shaderProgram, fragmentShader);
			gl.linkProgram(shaderProgram);

			if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
				alert("Could not initialise shaders");
			}

			gl.useProgram(shaderProgram);

			shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
			gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

			shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
			shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");

			shaderProgram.iResolutionUniform = gl.getUniformLocation(shaderProgram, "iResolution");
			shaderProgram.iGlobalTimeUniform = gl.getUniformLocation(shaderProgram, "iGlobalTime");

		}

		var squareVertexPositionBuffer;

		function initBuffers() {
			squareVertexPositionBuffer = gl.createBuffer();
			gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
			vertices = [
				1.0,  1.0,  0.0,
				-1.0,  1.0,  0.0,
				1.0, -1.0,  0.0,
				-1.0, -1.0,  0.0
			];
			gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
			squareVertexPositionBuffer.itemSize = 3;
			squareVertexPositionBuffer.numItems = 4;
		}

		function drawScene() {
			gl.uniform2f(shaderProgram.iResolutionUniform, gl.viewportWidth, gl.viewportHeight);
			gl.uniform1f(shaderProgram.iGlobalTimeUniform, timecount);

			gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
			gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

			mat4.ortho(-1, 1, -1, 1, -1, 1, pMatrix);
			mat4.identity(mvMatrix);

			gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
			gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

			gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
			gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);

			gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
		}


		var lastTime = 0;

		function animate() {
			var timeNow = new Date().getTime();
			if (lastTime != 0) {
				var elapsed = timeNow - lastTime;
			}
			lastTime = timeNow;

			updatefps(elapsed, "fps");
			sendbenchmark(8.0, "Startup Screenaligned");
		}

		function tick() {
			requestAnimFrame(tick);
			drawScene();
			animate();
		}

		function webGLStart(canvas) {
			var canvas = document.getElementById(canvas);
			initGL(canvas);
			initShaders();
			initBuffers();

			gl.clearColor(0.0, 0.0, 0.0, 1.0);
			gl.enable(gl.DEPTH_TEST);

			tick();
		}    

	</script>

</head>


<body onload="genID('Startup Screenaligned'); webGLStart('canvas');">

	<canvas id="canvas"></canvas>
	<div id="fps"></div>

</body>

</html>
