/lenasys/trunk : contents of WebGL and Benchmarking/test1shaderstartup.html at revision 137

: (revision 137)

To get this branch, use:

bzr branch
http://gegoxaren.bato24.eu/bzr/lenasys/trunk

<!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>

4.8.1 by galaxyAbstractor Cleaned up shitty code	1	<!DOCTYPE html>
	2	<html>
	3
	4	<head>
	5	<title>Shader Startup Benchmark</title>
	6	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	7
11.2.6 by Erik Wikström Added missing WebGL javascript files, moved bothe them and the existing ones to /js. Updated references	8	<script type="text/javascript" src="../js/glMatrix-0.9.5.min.js"></script>
	9	<script type="text/javascript" src="../js/webgl-utils.js"></script>
	10	<script type="text/javascript" src="../js/webgl-helpers.js"></script>
	11	<script type="text/javascript" src="../js/httpAjax.js"></script>
4.8.1 by galaxyAbstractor Cleaned up shitty code	12
	13	<script id="shader-fs" type="x-shader/x-fragment">
	14	precision mediump float;
	15
	16	uniform vec2 iResolution;
	17	uniform float iGlobalTime;
	18
	19	void main(void) {
	20	vec2 uv = gl_FragCoord.xy / iResolution.xy;
	21	gl_FragColor = vec4(uv, 0.5 + 0.5 * sin(iGlobalTime), 1.0);
	22	}
	23
	24	</script>
	25
	26	<script id="shader-vs" type="x-shader/x-vertex">
	27	attribute vec3 aVertexPosition;
	28
	29	uniform mat4 uMVMatrix;
	30	uniform mat4 uPMatrix;
	31
	32	varying vec4 vColor;
	33
	34	void main(void) {
	35	gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
	36	}
	37	</script>
	38
	39
	40	<script type="text/javascript">
	41
	42	function initShaders() {
	43	var fragmentShader = getShader(gl, "shader-fs");
	44	var vertexShader = getShader(gl, "shader-vs");
	45
	46	shaderProgram = gl.createProgram();
	47	gl.attachShader(shaderProgram, vertexShader);
	48	gl.attachShader(shaderProgram, fragmentShader);
	49	gl.linkProgram(shaderProgram);
	50
	51	if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
	52	alert("Could not initialise shaders");
	53	}
	54
	55	gl.useProgram(shaderProgram);
	56
	57	shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
	58	gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
	59
	60	shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
	61	shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
	62
	63	shaderProgram.iResolutionUniform = gl.getUniformLocation(shaderProgram, "iResolution");
	64	shaderProgram.iGlobalTimeUniform = gl.getUniformLocation(shaderProgram, "iGlobalTime");
	65
	66	}
	67
	68	var squareVertexPositionBuffer;
	69
	70	function initBuffers() {
	71	squareVertexPositionBuffer = gl.createBuffer();
	72	gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
	73	vertices = [
	74	1.0, 1.0, 0.0,
	75	-1.0, 1.0, 0.0,
76	1.0, -1.0, 0.0,
77	-1.0, -1.0, 0.0
78	];
79	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
80	squareVertexPositionBuffer.itemSize = 3;
81	squareVertexPositionBuffer.numItems = 4;
82	}
83
84	function drawScene() {
85	gl.uniform2f(shaderProgram.iResolutionUniform, gl.viewportWidth, gl.viewportHeight);
86	gl.uniform1f(shaderProgram.iGlobalTimeUniform, timecount);
87
88	gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
89	gl.clear(gl.COLOR_BUFFER_BIT \| gl.DEPTH_BUFFER_BIT);
90
91	mat4.ortho(-1, 1, -1, 1, -1, 1, pMatrix);
92	mat4.identity(mvMatrix);
93
94	gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
95	gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
96
97	gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
98	gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
99
100	gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
101	}
102
103
104	var lastTime = 0;
105
106	function animate() {
107	var timeNow = new Date().getTime();
108	if (lastTime != 0) {
109	var elapsed = timeNow - lastTime;
110	}
111	lastTime = timeNow;
112
113	updatefps(elapsed, "fps");
114	sendbenchmark(8.0, "Startup Screenaligned");
115	}
116
117	function tick() {
118	requestAnimFrame(tick);
119	drawScene();
120	animate();
121	}
122
123	function webGLStart(canvas) {
124	var canvas = document.getElementById(canvas);
125	initGL(canvas);
126	initShaders();
127	initBuffers();
128
129	gl.clearColor(0.0, 0.0, 0.0, 1.0);
130	gl.enable(gl.DEPTH_TEST);
131
132	tick();
133	}
134
135	</script>
136
137	</head>
138
139
140	<body onload="genID('Startup Screenaligned'); webGLStart('canvas');">
141
8.2.1 by Daniel Johansson Broken out inline CSS in WebGL	142	<canvas id="canvas"></canvas>
4.8.1 by galaxyAbstractor Cleaned up shitty code	143	<div id="fps"></div>
	144
	145	</body>
	146
	147	</html>