slow-shader-example.html (3736B)
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 Slow Shader 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 </head> 16 <body> 17 <canvas id="example" width="1024" height="1024" style="width: 40px; height: 40px;"> 18 </canvas> 19 <div id="description"></div> 20 <div id="console"></div> 21 <script id="slow" type="text/something-not-javascript"> 22 precision mediump float; 23 uniform sampler2D tex; 24 varying vec2 texCoord; 25 void main() { 26 gl_FragColor = texture2D(tex, texture2D(tex, texture2D(tex, texCoord).xy).xy); 27 } 28 </script> 29 <script> 30 "use strict"; 31 window.onload = main; 32 33 debug("Tests drawing a very slow shader."); 34 var wtu = WebGLTestUtils; 35 var canvas = document.getElementById("example"); 36 canvas.addEventListener("webglcontextlost", function(e) { e.preventDefault(); }, false); 37 canvas.addEventListener("webglcontextrestored", function(e) { }, false); 38 var gl = wtu.create3DContext(canvas); 39 var maxTexSize = gl.getParameter(gl.MAX_TEXTURE_SIZE); 40 var texSize = Math.min(maxTexSize, 4096); 41 debug("Max Texture size: " + maxTexSize); 42 debug("Texture size: " + texSize); 43 var shaderSource = 44 document.getElementById("slow").text.replace(/\$size/g, texSize + ".0"); 45 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after getting a context"); 46 var program = wtu.setupProgram( 47 gl, 48 [wtu.simpleTextureVertexShader, shaderSource], 49 ['vPosition', 'texCoord0'], 50 [0, 1]); 51 wtu.setupUnitQuad(gl, 0, 1); 52 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after program setup"); 53 var tex = gl.createTexture(); 54 gl.enable(gl.BLEND); 55 gl.disable(gl.DEPTH_TEST); 56 57 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after creating texture"); 58 debug("preparing..."); 59 var numBytes = texSize * texSize * 4; 60 var pixelBuf = new ArrayBuffer(numBytes); 61 var pixels = new Uint8Array(pixelBuf); 62 for (var ii = 0; ii < numBytes; ++ii) { 63 pixels[ii] = Math.random() * 255; 64 } 65 gl.bindTexture(gl.TEXTURE_2D, tex); 66 gl.texImage2D( 67 gl.TEXTURE_2D, 0, gl.RGBA, texSize, texSize, 0, 68 gl.RGBA, gl.UNSIGNED_BYTE, pixels); 69 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after texture setup"); 70 71 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 72 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 73 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); 74 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); 75 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after texture param setting"); 76 77 var loc = gl.getUniformLocation(program, "tex"); 78 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after getting tex location"); 79 gl.uniform1i(loc, 0); 80 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after setting tex uniform"); 81 82 var numQuads = 1000; 83 var indexBuf = new ArrayBuffer(numQuads * 6); 84 var indices = new Uint8Array(indexBuf); 85 for (var ii = 0; ii < numQuads; ++ii) { 86 var offset = ii * 6; 87 indices[offset + 0] = 0; 88 indices[offset + 1] = 1; 89 indices[offset + 2] = 2; 90 indices[offset + 3] = 3; 91 indices[offset + 4] = 4; 92 indices[offset + 5] = 5; 93 } 94 var indexBuffer = gl.createBuffer(); 95 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); 96 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); 97 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after setting up indices"); 98 99 function main () { 100 if (confirm( 101 "After clicking OK your machine may become unresponsive or crash.")) { 102 gl.drawElements(gl.TRIANGLES, numQuads * 6, gl.UNSIGNED_BYTE, 0); 103 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "after drawing"); 104 } else { 105 debug("cancelled"); 106 } 107 } 108 109 var successfullyParsed = true; 110 </script> 111 </body> 112 </html>