dom/canvas/test/webgl-conf/checkout/conformance2/textures/misc/integer-cubemap-texture-sampling.html

   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 Integer Cubemap Texture Sampling Tests</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 <script src="../../../js/tests/tex-image-and-sub-image-utils.js"></script>
  16 </head>
  17 <body>
  18 <canvas id="example" width="128" height="128"></canvas>
  19 <div id="description"></div>
  20 <div id="console"></div>
  21 <script>
  22 "use strict";
  23
  24 var wtu = WebGLTestUtils;
  25 var tiu = TexImageUtils;
  26
  27 description("Verify sampling works fine with integer cubemap textures");
  28 debug("https://github.com/KhronosGroup/WebGL/issues/1819");
  29
  30 var gl = wtu.create3DContext("example", undefined, 2);
  31
  32 var testCases = [
  33     { internalFormat: "R8UI", format: "RED_INTEGER", type: "UNSIGNED_BYTE" },
  34     { internalFormat: "RG8UI", format: "RG_INTEGER", type: "UNSIGNED_BYTE" },
  35     { internalFormat: "RGB8UI", format: "RGB_INTEGER", type: "UNSIGNED_BYTE" },
  36     { internalFormat: "RGBA8UI", format: "RGBA_INTEGER", type: "UNSIGNED_BYTE" },
  37 ];
  38
  39 function setupData(internalFormat, size) {
  40     var numComponents = 0;
  41     switch (gl[internalFormat]) {
  42       case gl.R8UI:
  43         numComponents = 1;
  44         break;
  45       case gl.RG8UI:
  46         numComponents = 2;
  47         break;
  48       case gl.RGB8UI:
  49         numComponents = 3;
  50         break;
  51       case gl.RGBA8UI:
  52         numComponents = 4;
  53         break;
  54     }
  55     if (numComponents == 0) {
  56         testFailed("This should never be reached");
  57         return null;
  58     }
  59     var data = new Uint8Array(numComponents * size * size);
  60     for (var ii = 0; ii < size * size; ++ii) {
  61         // Set all pixels to RED.
  62         data[ii * numComponents] = 255;
  63         if (numComponents > 1)
  64             data[ii * numComponents + 1] = 0;
  65         if (numComponents > 2)
  66             data[ii * numComponents + 2] = 0;
  67         if (numComponents > 3)
  68             data[ii * numComponents + 3] = 255;
  69     }
  70     return data;
  71 }
  72
  73 function checkIntegerTextureValues(internalFormat, size) {
  74     var buffer = new Uint32Array(4 * size * size);
  75     gl.readPixels(0, 0, size, size, gl.RGBA_INTEGER, gl.UNSIGNED_INT, buffer);
  76     for (var y = 0; y < size; ++y) {
  77         for (var x = 0; x < size; ++x) {
  78             var index = (y * size + x) * 4;
  79             if (buffer[index] != 255 || buffer[index + 1] != 0 || buffer[index + 2] != 0) {
  80                 testFailed("At (" + x + ", " + y + "), expected 255,0,0,255, was " +
  81                            [buffer[index], buffer[index + 1], buffer[index + 2], buffer[index + 3]]);
  82                 return;
  83             }
  84         }
  85     }
  86     testPassed("All pixels are as expected");
  87 }
  88
  89 function runOneTest(internalFormat, format, type, size) {
  90     debug("");
  91     debug("Testing internalformat = " + internalFormat + ", format = " + format + ", type = " + type + ", size = " + size);
  92
  93     gl.clearColor(1, 1, 0, 1);
  94     gl.clearDepth(1);
  95     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  96
  97     var tex = gl.createTexture();
  98     gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex);
  99     gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
 100     gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
 101     gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
 102     gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 103
 104     gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
 105
 106     var targets = [gl.TEXTURE_CUBE_MAP_POSITIVE_X,
 107                    gl.TEXTURE_CUBE_MAP_NEGATIVE_X,
 108                    gl.TEXTURE_CUBE_MAP_POSITIVE_Y,
 109                    gl.TEXTURE_CUBE_MAP_NEGATIVE_Y,
 110                    gl.TEXTURE_CUBE_MAP_POSITIVE_Z,
 111                    gl.TEXTURE_CUBE_MAP_NEGATIVE_Z];
 112     var data = setupData(internalFormat, size);
 113     for (var tt = 0; tt < targets.length; ++tt) {
 114         gl.texImage2D(targets[tt], 0, gl[internalFormat], size, size, 0, gl[format], gl[type], data);
 115     }
 116
 117     debug("1) Reading back texture data");
 118     var fbo = gl.createFramebuffer();
 119     gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
 120     for (var tt = 0; tt < targets.length; ++tt) {
 121         gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, targets[tt], tex, 0);
 122         if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE) {
 123             checkIntegerTextureValues(internalFormat, size);
 124         }
 125     }
 126     gl.deleteFramebuffer(fbo);
 127
 128     debug("2) Rendering with texture");
 129     var program = tiu.setupTexturedQuadWithCubeMap(gl, internalFormat);
 130     var loc = gl.getUniformLocation(program, "face");
 131     for (var tt = 0; tt < targets.length; ++tt) {
 132         gl.uniform1i(loc, targets[tt]);
 133         // Draw the triangles
 134         wtu.clearAndDrawUnitQuad(gl, [0, 255, 0, 255]);
 135         wtu.checkCanvasRect(gl, 0, 0, gl.canvas.width, gl.canvas.height, [255, 0, 0, 255], "Should be red");
 136     }
 137     gl.deleteProgram(program);
 138     gl.deleteTexture(tex);
 139     wtu.glErrorShouldBe(gl, gl.NO_ERROR, "No GL errors");
 140
 141     var m = wtu.makeImageFromCanvas(gl.canvas);
 142     document.getElementById("console").appendChild(m);
 143     document.getElementById("console").appendChild(document.createElement("hr"));
 144 }
 145
 146 function runTests() {
 147     for (var ii = 0; ii < testCases.length; ++ii) {
 148         runOneTest(testCases[ii].internalFormat, testCases[ii].format, testCases[ii].type, 2);
 149         runOneTest(testCases[ii].internalFormat, testCases[ii].format, testCases[ii].type, 4);
 150         runOneTest(testCases[ii].internalFormat, testCases[ii].format, testCases[ii].type, 8);
 151         runOneTest(testCases[ii].internalFormat, testCases[ii].format, testCases[ii].type, 16);
 152         runOneTest(testCases[ii].internalFormat, testCases[ii].format, testCases[ii].type, 32);
 153         runOneTest(testCases[ii].internalFormat, testCases[ii].format, testCases[ii].type, 64);
 154         runOneTest(testCases[ii].internalFormat, testCases[ii].format, testCases[ii].type, 65);
 155         runOneTest(testCases[ii].internalFormat, testCases[ii].format, testCases[ii].type, 127);
 156         runOneTest(testCases[ii].internalFormat, testCases[ii].format, testCases[ii].type, 128);
 157         runOneTest(testCases[ii].internalFormat, testCases[ii].format, testCases[ii].type, 129);
 158     }
 159 }
 160
 161 runTests();
 162
 163 debug("");
 164 var successfullyParsed = true;
 165 </script>
 166 <script src="../../../js/js-test-post.js"></script>
 167
 168 </body>
 169 </html>