out-of-bounds-uniform-array-access.html (3170B)
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 out of bounds uniform array access.</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 style="background: #666;"> 17 <div id="description"></div> 18 <div id="console"></div> 19 <div>elem mult: <span id="elemMultDisplay"></span></div> 20 <input type="range" id="elemMult" value="4" min="0" max="2048" style="width: 100%;"/> 21 <div>line width: <span id="lineWidthDisplay"></span></div> 22 <input type="range" id="lineWidth" value="512" min="0" max="2540" style="width: 100%;"/> 23 <canvas id="example" width="256" height="256" style="background: black;"> 24 </canvas> 25 <script id="vshader" type="x-shader/x-vertex"> 26 attribute vec4 vPosition; 27 varying vec4 v_color; 28 uniform float lineWidth; 29 uniform int elemMult; 30 uniform vec4 someArray[2]; 31 void main() 32 { 33 vec2 texcoord = vec2(vPosition.xy * 0.5 + vec2(0.5, 0.5)); 34 int index = int(texcoord.x + texcoord.y * lineWidth) * elemMult; 35 v_color = someArray[index]; 36 gl_Position = vPosition; 37 } 38 </script> 39 40 <script id="fshader" type="x-shader/x-fragment"> 41 precision mediump float; 42 varying vec4 v_color; 43 void main() 44 { 45 gl_FragColor = v_color * vec4(1.0 / 256.0, 1.0 / 256.0, 1.0 / 256.0, 1.0 / 256.0) + vec4(0,0,0,0.5); 46 } 47 </script> 48 <script> 49 "use strict"; 50 window.onload = main; 51 debug("Tests a WebGL program that accesses out of bounds uniform array elements"); 52 53 function main() { 54 var wtu = WebGLTestUtils; 55 var gl = wtu.create3DContext("example"); 56 var program = wtu.setupProgram( 57 gl, 58 ['vshader', 'fshader'], 59 ['vPosition'], [0]); 60 var gridRes = 255; 61 wtu.setupIndexedQuad(gl, gridRes, 0); 62 var lineWidthLoc = gl.getUniformLocation(program, "lineWidth"); 63 var elemMultLoc = gl.getUniformLocation(program, "elemMult"); 64 assertMsg(gl.getError() == gl.NO_ERROR, "Should be no errors from setup."); 65 66 var lineWidth = 512; 67 var lineWidthElem = document.getElementById("lineWidth"); 68 var lineWidthDisplayElem = document.getElementById("lineWidthDisplay"); 69 70 lineWidthElem.value = lineWidth; 71 72 lineWidthElem.addEventListener('change', function(event) { 73 //console.log(event.target.value); 74 lineWidth = event.target.value; 75 draw(); 76 }, false); 77 78 var elemMult = 4; 79 var elemMultElem = document.getElementById("elemMult"); 80 var elemMultDisplayElem = document.getElementById("elemMultDisplay"); 81 82 elemMultElem.value = elemMult; 83 84 elemMultElem.addEventListener('change', function(event) { 85 //console.log(event.target.value); 86 elemMult = event.target.value; 87 draw(); 88 }, false); 89 90 draw(); 91 92 function draw() { 93 lineWidthDisplayElem.innerText = lineWidth; 94 elemMultDisplayElem.innerText = elemMult; 95 gl.uniform1f(lineWidthLoc, lineWidth); 96 gl.uniform1i(elemMultLoc, elemMult); 97 gl.drawElements(gl.TRIANGLES, gridRes * gridRes * 6, gl.UNSIGNED_SHORT, 0); 98 } 99 100 var successfullyParsed = true; 101 } 102 103 </script> 104 </body> 105 </html>