LayoutTests/webgl/1.0.3/resources/webgl_test_files/extra/lots-of-polys-shader-example.html - WebKit - Git at Google

 <!--

 /*
 ** Copyright (c) 2012 The Khronos Group Inc.
 **
 ** Permission is hereby granted, free of charge, to any person obtaining a
 ** copy of this software and/or associated documentation files (the
 ** "Materials"), to deal in the Materials without restriction, including
 ** without limitation the rights to use, copy, modify, merge, publish,
 ** distribute, sublicense, and/or sell copies of the Materials, and to
 ** permit persons to whom the Materials are furnished to do so, subject to
 ** the following conditions:
 **
 ** The above copyright notice and this permission notice shall be included
 ** in all copies or substantial portions of the Materials.
 **
 ** THE MATERIALS ARE PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 ** EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 ** MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
 ** IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
 ** CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
 ** TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 ** MATERIALS OR THE USE OR OTHER DEALINGS IN THE MATERIALS.
 */

 -->

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>WebGL Lots of polygons example.</title>
 <link rel="stylesheet" href="../resources/js-test-style.css"/>
 <script src="../resources/js-test-pre.js"></script>
 <script src="../conformance/resources/webgl-test-utils.js"> </script>
 <style>
 html, body {
 	width: 100%;
 	height: 100%;
 }
 canvas {
 	border: 1px solid black;
 	width: 95%;
 	height: 80%;
 }
 </style
 </head>
 <body>
 <canvas id="example"></canvas>
 <div id="description"></div>
 <div id="console"></div>
 <script>
 "use strict";
 window.onload = init;
 debug("Tests a WebGL program that draws a bunch of large polygons from a quad mesh");

 function init() {
   if (confirm(
       "After clicking OK your machine may become unresponsive or crash.")) {
     main();
   } else {
     debug("cancelled");
   }
 }

 function main() {
   var wtu = WebGLTestUtils;
   var canvas = document.getElementById("example");
   var gridRes = 1000;
   canvas.width = canvas.clientWidth;
   canvas.heigt = canvas.clientHeight;
   canvas.addEventListener("webglcontextlost", function(e) { e.preventDefault(); }, false);
   canvas.addEventListener("webglcontextrestored", function(e) { }, false);

   var gl = wtu.create3DContext(canvas);
   var program = wtu.setupProgram(
       gl, ['vshader', 'fshader'], ['vPosition'], [0]);

   wtu.setupIndexedQuad(gl, gridRes, 0, true);

   // make 1 texture since we'd have at least that in CSS shaders
   var size = 256;
   var pixels = new Uint8Array(size * size * 4);
   for (var y = 0; y < size; ++y) {
 	for (var x = 0; x < size; ++x) {
       var offset = (y * size + x) * 4;
 	  pixels[offset + 0] = x * 255 / size;
 	  pixels[offset + 1] = y * 255 / size;
 	  pixels[offset + 2] = x * y * 255 / (size * size);
 	  pixels[offset + 3] = 255;
     }
   }
   var tex = gl.createTexture();
   gl.bindTexture(gl.TEXTURE_2D, tex);
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 256, 256, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

   // add test colors.
   if (false) {
     var vertsAcross = gridRes + 1;
     var numQuads = vertsAcross * vertsAcross;
     var colors = new Float32Array(numQuads * 4);
     for (var ii = 0; ii < numQuads; ++ii) {
       var offset = ii * 4;
       colors[offset + 0] = Math.random();
       colors[offset + 1] = Math.random();
       colors[offset + 2] = Math.random();
       colors[offset + 3] = 1;
     }
     var colorLocation = gl.getAttribLocation(program, "color")
     var buf = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, buf);
     gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
     gl.enableVertexAttribArray(colorLocation);
     gl.vertexAttribPointer(colorLocation, 3, gl.FLOAT, false, 0, 0);
   }

   var gridResLoc = gl.getUniformLocation(program, "gridRes");
   gl.uniform1f(gridResLoc, gridRes);

   assertMsg(gl.getError() == gl.NO_ERROR, "Should be no errors from setup.");

   gl.enable(gl.BLEND);
   //gl.enable(gl.CULL_FACE);
   //gl.cullFace(gl.FRONT);

   gl.drawElements(gl.TRIANGLES, gridRes * gridRes * 6, gl.UNSIGNED_SHORT, 0);
   wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after drawing");

   var successfullyParsed = true;
 }
 </script>
 <script id="vshader" type="x-shader/x-vertex">
 attribute vec4 vPosition;
 varying vec2 v_texCoord;
 uniform float gridRes;

 #ifdef ADD_TEST_COLORS
   attribute vec4 color;
   varying vec4 v_color;
 #endif

 void main()
 {
     // expand each quad to cover the entire element.
     vec2 p = mod((vPosition.xy * 0.5 + 0.5) * gridRes, 2.0) * 2.0 - 1.0;
     gl_Position = vec4(p, 0, 1);
     v_texCoord = vPosition.xy;

 #ifdef ADD_TEST_COLORS
 	v_color = color;
 #endif
 }
 </script>

 <script id="fshader" type="x-shader/x-fragment">
 precision mediump float;
 varying vec4 v_color;
 varying vec2 v_texCoord;
 uniform sampler2D tex;
 void main()
 {
 #ifdef ADD_TEST_COLORS
     gl_FragColor = v_color;
 #else
     gl_FragColor = texture2D(tex, v_texCoord);
 #endif
 }
 </script>
 </body>
 </html>
	<!--

	/*
	** Copyright (c) 2012 The Khronos Group Inc.
	**
	** Permission is hereby granted, free of charge, to any person obtaining a
	** copy of this software and/or associated documentation files (the
	** "Materials"), to deal in the Materials without restriction, including
	** without limitation the rights to use, copy, modify, merge, publish,
	** distribute, sublicense, and/or sell copies of the Materials, and to
	** permit persons to whom the Materials are furnished to do so, subject to
	** the following conditions:
	**
	** The above copyright notice and this permission notice shall be included
	** in all copies or substantial portions of the Materials.
	**
	** THE MATERIALS ARE PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
	** EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
	** MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
	** IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
	** CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
	** TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
	** MATERIALS OR THE USE OR OTHER DEALINGS IN THE MATERIALS.
	*/

	-->

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>WebGL Lots of polygons example.</title>
	<link rel="stylesheet" href="../resources/js-test-style.css"/>
	<script src="../resources/js-test-pre.js"></script>
	<script src="../conformance/resources/webgl-test-utils.js"> </script>
	<style>
	html, body {
	width: 100%;
	height: 100%;
	}
	canvas {
	border: 1px solid black;
	width: 95%;
	height: 80%;
	}
	</style
	</head>
	<body>
	<canvas id="example"></canvas>
	<div id="description"></div>
	<div id="console"></div>
	<script>
	"use strict";
	window.onload = init;
	debug("Tests a WebGL program that draws a bunch of large polygons from a quad mesh");

	function init() {
	if (confirm(
	"After clicking OK your machine may become unresponsive or crash.")) {
	main();
	} else {
	debug("cancelled");
	}
	}

	function main() {
	var wtu = WebGLTestUtils;
	var canvas = document.getElementById("example");
	var gridRes = 1000;
	canvas.width = canvas.clientWidth;
	canvas.heigt = canvas.clientHeight;
	canvas.addEventListener("webglcontextlost", function(e) { e.preventDefault(); }, false);
	canvas.addEventListener("webglcontextrestored", function(e) { }, false);

	var gl = wtu.create3DContext(canvas);
	var program = wtu.setupProgram(
	gl, ['vshader', 'fshader'], ['vPosition'], [0]);

	wtu.setupIndexedQuad(gl, gridRes, 0, true);

	// make 1 texture since we'd have at least that in CSS shaders
	var size = 256;
	var pixels = new Uint8Array(size * size * 4);
	for (var y = 0; y < size; ++y) {
	for (var x = 0; x < size; ++x) {
	var offset = (y * size + x) * 4;
	pixels[offset + 0] = x * 255 / size;
	pixels[offset + 1] = y * 255 / size;
	pixels[offset + 2] = x * y * 255 / (size * size);
	pixels[offset + 3] = 255;
	}
	}
	var tex = gl.createTexture();
	gl.bindTexture(gl.TEXTURE_2D, tex);
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 256, 256, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

	// add test colors.
	if (false) {
	var vertsAcross = gridRes + 1;
	var numQuads = vertsAcross * vertsAcross;
	var colors = new Float32Array(numQuads * 4);
	for (var ii = 0; ii < numQuads; ++ii) {
	var offset = ii * 4;
	colors[offset + 0] = Math.random();
	colors[offset + 1] = Math.random();
	colors[offset + 2] = Math.random();
	colors[offset + 3] = 1;
	}
	var colorLocation = gl.getAttribLocation(program, "color")
	var buf = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, buf);
	gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
	gl.enableVertexAttribArray(colorLocation);
	gl.vertexAttribPointer(colorLocation, 3, gl.FLOAT, false, 0, 0);
	}

	var gridResLoc = gl.getUniformLocation(program, "gridRes");
	gl.uniform1f(gridResLoc, gridRes);

	assertMsg(gl.getError() == gl.NO_ERROR, "Should be no errors from setup.");

	gl.enable(gl.BLEND);
	//gl.enable(gl.CULL_FACE);
	//gl.cullFace(gl.FRONT);

	gl.drawElements(gl.TRIANGLES, gridRes * gridRes * 6, gl.UNSIGNED_SHORT, 0);
	wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after drawing");

	var successfullyParsed = true;
	}
	</script>
	<script id="vshader" type="x-shader/x-vertex">
	attribute vec4 vPosition;
	varying vec2 v_texCoord;
	uniform float gridRes;

	#ifdef ADD_TEST_COLORS
	attribute vec4 color;
	varying vec4 v_color;
	#endif

	void main()
	{
	// expand each quad to cover the entire element.
	vec2 p = mod((vPosition.xy * 0.5 + 0.5) * gridRes, 2.0) * 2.0 - 1.0;
	gl_Position = vec4(p, 0, 1);
	v_texCoord = vPosition.xy;

	#ifdef ADD_TEST_COLORS
	v_color = color;
	#endif
	}
	</script>

	<script id="fshader" type="x-shader/x-fragment">
	precision mediump float;
	varying vec4 v_color;
	varying vec2 v_texCoord;
	uniform sampler2D tex;
	void main()
	{
	#ifdef ADD_TEST_COLORS
	gl_FragColor = v_color;
	#else
	gl_FragColor = texture2D(tex, v_texCoord);
	#endif
	}
	</script>
	</body>
	</html>