out-of-bounds-uniform-array-access.html

Enable keyboard shortcuts

<!--

Copyright (c) 2019 The Khronos Group Inc.

Use of this source code is governed by an MIT-style license that can be

found in the LICENSE.txt file.

-->

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>WebGL out of bounds uniform array access.</title>

<link rel="stylesheet" href="../../resources/js-test-style.css"/>

<script src="../../js/js-test-pre.js"></script>

<script src="../../js/webgl-test-utils.js"> </script>

</head>

<body>

<div id="description"></div>

<canvas id="example" width="128" height="128" style="background: black;">

</canvas>

<div id="console"></div>

<script id="vshader" type="x-shader/x-vertex">

attribute vec4 vPosition;

varying vec4 v_color;

uniform float lineWidth;

uniform int elemMult;

uniform vec4 colorArray[6];

void main()

    vec2 texcoord = vec2(vPosition.xy * 0.5 + vec2(0.5, 0.5));

    int index = int(texcoord.x + texcoord.y * lineWidth) * elemMult;

    v_color = colorArray[index];

    gl_Position = vPosition;

    gl_PointSize = 1.0;

</script>

<script id="fshader" type="x-shader/x-fragment">

precision mediump float;

varying vec4 v_color;

void main()

  gl_FragColor = v_color;

</script>

<script>

"use strict";

debug("Tests a WebGL program that accesses out of bounds uniform array elements");

var gl;

var gridRes = 127;

var lineWidthLoc;

var elemMultLoc;

var width = 128;

var height = 128;

var pixels = new Uint8Array(width * height * 4);

var lineWidth = 0;

var elemMult = 0;

var knownColors = [

  1.0, 0.0, 0.0, 1.0,  // Red

  0.0, 1.0, 0.0, 1.0,  // Green

  0.0, 0.0, 1.0, 1.0,  // Blue

  0.0, 1.0, 1.0, 1.0,  // Cyan

  1.0, 0.0, 1.0, 1.0,  // Magenta

  1.0, 1.0, 0.0, 1.0   // Yellow

];

function main() {

  var wtu = WebGLTestUtils;

  gl = wtu.create3DContext("example");

  var program = wtu.setupProgram(

gl,

      ['vshader', 'fshader'],

      ['vPosition'], [0]);

  // setupQuad produces the geometry we want for a gridRes x gridRes grid

  // of points. No interpolation will be performed across the points, so

  // according to the WebGL specification for out-of-bounds array accesses,

  // we will get exactly the input colors from the uniform colorArray, or

  // zero, for each pixel on the canvas.

  wtu.setupIndexedQuad(gl, gridRes, 0);

  var colorArrayLoc = gl.getUniformLocation(program, "colorArray[0]");

  assertMsg(colorArrayLoc != null, "color array uniform should be found");

  var colors = new Float32Array(knownColors);

  gl.uniform4fv(colorArrayLoc, colors);

  lineWidthLoc = gl.getUniformLocation(program, "lineWidth");

  elemMultLoc = gl.getUniformLocation(program, "elemMult");

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

  runOneIteration();

function withinEpsilon(val1, val2) {

  return Math.abs(val1 - val2) < 0.0001;

function isKnownColor(r, g, b) {

  if (r == 0 && g == 0 && b == 0)

    return true;

  for (var ii = 0; ii < knownColors.length; ii += 4) {

    if (withinEpsilon(r / 255.0, knownColors[ii + 0]) &&

        withinEpsilon(g / 255.0, knownColors[ii + 1]) &&

        withinEpsilon(b / 255.0, knownColors[ii + 2]))

      return true;

  return false;

function runOneIteration() {

  if (elemMult < 2048) {

    var ok = true;

    var startingLineWidth = lineWidth;

    var firstFailingPixel = null;

    var firstFailingValue = null;

    for (; lineWidth < 2540; lineWidth += 31) {

      // Draw

      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

      gl.uniform1f(lineWidthLoc, lineWidth);

      gl.uniform1i(elemMultLoc, elemMult);

      gl.drawArrays(gl.POINTS, 0, gridRes * gridRes);

      // Read back

      gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

      // Verify

      for (var y = 0; y < height; ++y) {

        for (var x = 0; x < width; ++x) {

          if (!isKnownColor(pixels[4 * (width * y + x) + 0],

                            pixels[4 * (width * y + x) + 1],

                            pixels[4 * (width * y + x) + 2])) {

            ok = false;

            if (firstFailingPixel == null) {

              firstFailingPixel = [x, y];

              firstFailingValue = [pixels[4 * (width * y + x) + 0],

                                   pixels[4 * (width * y + x) + 1],

                                   pixels[4 * (width * y + x) + 2]];

    var endingLineWidth = lineWidth - 31;

    lineWidth -= 2540;

    if (ok) {

      testPassed("Good rendering results for lineWidths " +

                 startingLineWidth + "..." + endingLineWidth +

                 " at elemMult=" + elemMult);

    } else {

      testFailed("for lineWidth=" + lineWidth + ", elemMult=" + elemMult +

                 ": first failing pixel (" + firstFailingPixel[0] + ", " + firstFailingPixel[1] + ") was (" +

                 firstFailingValue[0] + ", " +

                 firstFailingValue[1] + ", " +

                 firstFailingValue[2] + "), should be (0, 0, 0) or one of known colors");

    elemMult += 73;

    setTimeout(runOneIteration, 0);

  } else {

    finishTest();

main();

var successfullyParsed = true;

</script>

</body>

</html>