lots-of-polys-shader-example.html (4327B)
1 <!-- 2 Copyright (c) 2019 The Khronos Group Inc. 3 Use of this source code is governed by an MIT-style license that can be 4 found in the LICENSE.txt file. 5 --> 6 7 <!DOCTYPE html> 8 <html> 9 <head> 10 <meta charset="utf-8"> 11 <title>WebGL Lots of polygons example.</title> 12 <link rel="stylesheet" href="../resources/js-test-style.css"/> 13 <script src="../js/js-test-pre.js"></script> 14 <script src="../js/webgl-test-utils.js"> </script> 15 <style> 16 html, body { 17 width: 100%; 18 height: 100%; 19 } 20 canvas { 21 border: 1px solid black; 22 width: 95%; 23 height: 80%; 24 } 25 </style 26 </head> 27 <body> 28 <canvas id="example"></canvas> 29 <div id="description"></div> 30 <div id="console"></div> 31 <script> 32 "use strict"; 33 window.onload = init; 34 debug("Tests a WebGL program that draws a bunch of large polygons from a quad mesh"); 35 36 function init() { 37 if (confirm( 38 "After clicking OK your machine may become unresponsive or crash.")) { 39 main(); 40 } else { 41 debug("cancelled"); 42 } 43 } 44 45 function main() { 46 var wtu = WebGLTestUtils; 47 var canvas = document.getElementById("example"); 48 var gridRes = 1000; 49 canvas.width = canvas.clientWidth; 50 canvas.heigt = canvas.clientHeight; 51 canvas.addEventListener("webglcontextlost", function(e) { e.preventDefault(); }, false); 52 canvas.addEventListener("webglcontextrestored", function(e) { }, false); 53 54 var gl = wtu.create3DContext(canvas); 55 var program = wtu.setupProgram( 56 gl, ['vshader', 'fshader'], ['vPosition'], [0]); 57 58 wtu.setupIndexedQuad(gl, gridRes, 0, true); 59 60 // make 1 texture since we'd have at least that in CSS shaders 61 var size = 256; 62 var pixels = new Uint8Array(size * size * 4); 63 for (var y = 0; y < size; ++y) { 64 for (var x = 0; x < size; ++x) { 65 var offset = (y * size + x) * 4; 66 pixels[offset + 0] = x * 255 / size; 67 pixels[offset + 1] = y * 255 / size; 68 pixels[offset + 2] = x * y * 255 / (size * size); 69 pixels[offset + 3] = 255; 70 } 71 } 72 var tex = gl.createTexture(); 73 gl.bindTexture(gl.TEXTURE_2D, tex); 74 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 256, 256, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixels); 75 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 76 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 77 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 78 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 79 80 // add test colors. 81 if (false) { 82 var vertsAcross = gridRes + 1; 83 var numQuads = vertsAcross * vertsAcross; 84 var colors = new Float32Array(numQuads * 4); 85 for (var ii = 0; ii < numQuads; ++ii) { 86 var offset = ii * 4; 87 colors[offset + 0] = Math.random(); 88 colors[offset + 1] = Math.random(); 89 colors[offset + 2] = Math.random(); 90 colors[offset + 3] = 1; 91 } 92 var colorLocation = gl.getAttribLocation(program, "color") 93 var buf = gl.createBuffer(); 94 gl.bindBuffer(gl.ARRAY_BUFFER, buf); 95 gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW); 96 gl.enableVertexAttribArray(colorLocation); 97 gl.vertexAttribPointer(colorLocation, 3, gl.FLOAT, false, 0, 0); 98 } 99 100 var gridResLoc = gl.getUniformLocation(program, "gridRes"); 101 gl.uniform1f(gridResLoc, gridRes); 102 103 assertMsg(gl.getError() == gl.NO_ERROR, "Should be no errors from setup."); 104 105 gl.enable(gl.BLEND); 106 //gl.enable(gl.CULL_FACE); 107 //gl.cullFace(gl.FRONT); 108 109 gl.drawElements(gl.TRIANGLES, gridRes * gridRes * 6, gl.UNSIGNED_SHORT, 0); 110 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after drawing"); 111 112 var successfullyParsed = true; 113 } 114 </script> 115 <script id="vshader" type="x-shader/x-vertex"> 116 attribute vec4 vPosition; 117 varying vec2 v_texCoord; 118 uniform float gridRes; 119 120 #ifdef ADD_TEST_COLORS 121 attribute vec4 color; 122 varying vec4 v_color; 123 #endif 124 125 void main() 126 { 127 // expand each quad to cover the entire element. 128 vec2 p = mod((vPosition.xy * 0.5 + 0.5) * gridRes, 2.0) * 2.0 - 1.0; 129 gl_Position = vec4(p, 0, 1); 130 v_texCoord = vPosition.xy; 131 132 #ifdef ADD_TEST_COLORS 133 v_color = color; 134 #endif 135 } 136 </script> 137 138 <script id="fshader" type="x-shader/x-fragment"> 139 precision mediump float; 140 varying vec4 v_color; 141 varying vec2 v_texCoord; 142 uniform sampler2D tex; 143 void main() 144 { 145 #ifdef ADD_TEST_COLORS 146 gl_FragColor = v_color; 147 #else 148 gl_FragColor = texture2D(tex, v_texCoord); 149 #endif 150 } 151 </script> 152 </body> 153 </html>