dom/canvas/test/webgl-conf/checkout/conformance2/textures/misc/integer-cubemap-specification-order-bug.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 Specification Order Bug Test</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="128" height="128"></canvas>
  18 <div id="description"></div>
  19 <div id="console"></div>
  20 <script id="vs" type="x-shader/x-vertex">#version 300 es
  21   precision highp float;
  22   in vec4 a_position;
  23   void main(){
  24       gl_Position = a_position;
  25   }
  26 </script>
  27 <script id="fs" type="x-shader/x-fragment">#version 300 es
  28   precision highp float;
  29   // This program samples both textures at varying Lod and exposes
  30   // both of them, the regular on top, and the weird on the bottom.
  31   // On the NVIDIA driver the top is both green and red while the bottom
  32   // is only green. This is a driver bug because both textures should be
  33   // exactly the same.
  34   // I think that because of our level specification order weirdness, the
  35   // driver gets confused as to which levels are complete and thinks only
  36   // level 0 is complete. Then when sampling the texture it clamps the sampling
  37   // to only level 0, resulting in green for all Lod values.
  38   layout(location = 0) out vec4 fragColor;
  39   uniform highp isamplerCube texRegular;
  40   uniform highp isamplerCube texWeird;
  41   void main() {
  42       vec2 fragPos = gl_FragCoord.xy / vec2(128.0, 128.0);
  43       float lod = (fragPos.x - 0.5) * 10.0 + 0.5;
  44
  45       ivec4 colorRegular = textureLod(texRegular, vec3(1.0, 0.0, 0.0), lod);
  46       ivec4 colorWeird = textureLod(texWeird, vec3(1.0, 0.0, 0.0), lod);
  47
  48       if (fragPos.y > 0.51) {
  49           fragColor = vec4(vec2(colorRegular.rg), 0.0, 1.0);
  50       } else if (fragPos.y < 0.49){
  51           fragColor = vec4(vec2(colorWeird.rg), 0.0, 1.0);
  52       } else {
  53           fragColor = vec4(0.0, 0.0, 0.0, 1.0);
  54       }
  55   }
  56 </script>
  57 <script>
  58 "use strict";
  59
  60 var wtu = WebGLTestUtils;
  61
  62 description("Test for a driver bug when specifying integer cubemaps in weird order");
  63
  64 var gl = wtu.create3DContext("example", undefined, 2);
  65
  66 function createTextureCube(layers, maxLevel) {
  67     var texture = gl.createTexture();
  68     gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
  69
  70     layers.forEach(function(layer) {
  71         var level = layer.level;
  72         var face = layer.face;
  73         var color = layer.color;
  74
  75         var levelSize = 1 << (maxLevel - level);
  76
  77         var backingBuffer = new ArrayBuffer(levelSize * levelSize * 2);
  78         new Int16Array(backingBuffer).fill(color);
  79         gl.texImage2D(face + gl.TEXTURE_CUBE_MAP_POSITIVE_X, level, gl.RG8I, levelSize, levelSize, 0, gl.RG_INTEGER, gl.BYTE, new Int8Array(backingBuffer));
  80     });
  81
  82     gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_NEAREST);
  83     gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  84     gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  85     gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  86
  87     return texture;
  88 }
  89
  90 function makePermutedLayers(layers, permutation) {
  91     return permutation.map(i => layers[i]);
  92 }
  93
  94 function test() {
  95     var kMaxLevel = 4;
  96     var kBlack = 0x0000;
  97     var kGreen = 0x7F00;
  98     var kRed = 0x007F;
  99
 100     // Create two integer cubemaps with green on level 0 and red on the others.
 101
 102     // The "regular" cube map is filled in a sensible manner.
 103     var regularLayers = [];
 104     for (var level = 0; level <= kMaxLevel; level ++) {
 105         for (var face = 0; face < 6; face ++) {
 106             if (level == 0) {
 107                 regularLayers.push({level: level, face: face, color: kGreen});
 108             } else {
 109                 regularLayers.push({level: level, face: face, color: kRed});
 110             }
 111         }
 112     }
 113
 114     // The "weird" cube map has all its >= 1 levels filled, then the first level,
 115     // then the >= 1 levels again but for one face. This replicates what the
 116     // Chromium command buffer "cubemap completeness" workaround is doing.
 117     var weirdLayers = [];
 118     for (var level = 1; level <= kMaxLevel; level ++) {
 119         for (var face = 0; face < 5; face ++) {
 120             weirdLayers.push({level: level, face: face, color: kBlack});
 121         }
 122         weirdLayers.push({level: level, face: 5, color: kRed});
 123     }
 124     for (var level = 0; level <= kMaxLevel; level ++) {
 125         for (var face = 0; face < 6; face ++) {
 126             if (level == 0) {
 127                 weirdLayers.push({level: level, face: face, color: kGreen});
 128             } else {
 129                 if (face != 5) {
 130                     weirdLayers.push({level: level, face: face, color: kRed});
 131                 }
 132             }
 133         }
 134     }
 135
 136     var regularTex = createTextureCube(regularLayers, kMaxLevel);
 137
 138     var sampleProgram = wtu.setupProgram(gl, ["vs", "fs"], ["a_position"]);
 139     var regularLocation = gl.getUniformLocation(sampleProgram, "texRegular");
 140     var weirdLocation = gl.getUniformLocation(sampleProgram, "texWeird");
 141
 142     wtu.setupQuad(gl, gl.getAttribLocation(sampleProgram, "a_position"));
 143
 144     gl.uniform1i(regularLocation, 0);
 145     gl.uniform1i(weirdLocation, 1);
 146
 147     function testcase(layers1, casename) {
 148         var tex1 = createTextureCube(layers1, kMaxLevel);
 149
 150         gl.activeTexture(gl.TEXTURE0);
 151         gl.bindTexture(gl.TEXTURE_CUBE_MAP, regularTex);
 152         gl.activeTexture(gl.TEXTURE1);
 153         gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex1);
 154         // At this point both textures should be the same.
 155         wtu.drawUnitQuad(gl);
 156
 157         gl.deleteTexture(tex1);
 158
 159         wtu.checkCanvasRect(gl, 96, 32, 1, 1, [255, 0, 0, 255], "should be green: " + casename);
 160         wtu.checkCanvasRect(gl, 96, 96, 1, 1, [255, 0, 0, 255], "should be green: " + casename);
 161         wtu.checkCanvasRect(gl, 32, 32, 1, 1, [0, 255, 0, 255], "should be red: " + casename);
 162         wtu.checkCanvasRect(gl, 32, 96, 1, 1, [0, 255, 0, 255], "should be red: " + casename);
 163     }
 164
 165     testcase(weirdLayers, "original");
 166     const cases = [
 167         [10,23,3,19,26,29,14,9,4,11,27,28,13,24,20,12,17,21,16,5,6,25,1,15,22,8,7,18,0,2],
 168         [10,27,3,29,17,28,13,20,18,25,9,2,8,4,24,12,15,7,19,11,6,14,16,21,1,26,23,22,0,5],
 169         [11,4,15,13,26,24,25,2,19,20,16,23,1,18,28,27,6,21,14,8,17,29,3,10,12,9,22,7,0,5],
 170         [14,2,6,28,7,25,11,26,22,13,19,21,24,4,16,29,9,27,3,17,18,15,12,20,8,23,10,1,0,5],
 171         [14,20,22,16,11,27,17,21,15,3,5,28,6,2,9,12,7,24,1,26,8,19,23,25,18,13,29,10,0,4],
 172         [14,20,22,16,11,27,17,21,15,3,5,28,6,2,9,12,7,24,1,26,8,19,23,25,18,13,29,10,0,4],
 173         [14,22,27,1,12,24,13,21,6,10,20,28,23,16,5,18,7,3,25,2,11,19,17,26,8,29,15,9,0,4],
 174         [15,22,13,28,6,12,19,9,18,11,3,23,17,8,10,20,5,14,4,25,27,26,21,16,29,24,7,0,1,2],
 175         [15,22,13,28,6,12,19,9,18,11,3,23,17,8,10,20,5,14,4,25,27,26,21,16,29,24,7,0,1,2],
 176         [16,22,18,15,19,6,21,27,4,14,29,17,7,9,11,20,24,23,28,25,2,13,10,26,8,12,3,0,5,1],
 177         [16,26,18,7,20,25,11,24,2,1,28,13,29,10,27,21,6,15,5,19,17,12,14,9,23,22,8,3,0,4],
 178         [2,22,25,12,19,16,7,27,9,10,8,17,18,24,1,21,20,14,13,4,11,29,15,5,23,26,6,28,0,3],
 179         [2,9,16,26,6,15,4,3,17,13,21,10,7,22,23,29,19,18,12,24,14,25,8,5,20,28,11,27,0,1],
 180         [2,9,16,26,6,15,4,3,17,13,21,10,7,22,23,29,19,18,12,24,14,25,8,5,20,28,11,27,0,1],
 181         [20,21,24,15,5,13,6,12,2,17,10,14,27,16,8,22,9,25,29,1,28,11,4,19,7,23,26,18,0,3],
 182         [21,14,19,12,28,6,10,7,16,27,11,22,20,24,25,26,3,8,4,18,5,2,9,15,17,23,13,29,0,1],
 183         [22,4,18,7,11,6,23,17,14,3,13,21,15,19,25,28,9,8,10,12,29,16,27,2,24,1,20,26,0,5],
 184         [22,4,18,7,11,6,23,17,14,3,13,21,15,19,25,28,9,8,10,12,29,16,27,2,24,1,20,26,0,5],
 185         [23,21,9,28,22,15,25,12,24,18,29,2,17,1,14,4,16,26,3,11,27,13,8,7,6,20,10,19,0,5],
 186         [23,6,15,13,19,2,12,7,11,29,3,20,17,10,4,18,1,22,16,27,24,9,21,25,14,26,8,28,0,5],
 187         [25,12,1,4,9,22,16,28,6,11,14,29,15,2,5,13,10,20,21,19,23,27,18,26,7,8,17,24,0,3],
 188         [25,13,29,26,28,17,19,23,7,24,10,1,15,8,3,11,18,21,27,22,12,5,9,6,16,14,20,2,0,4],
 189         [25,18,28,12,27,13,11,4,29,8,21,15,9,6,26,20,22,23,24,17,5,16,2,7,14,19,10,0,1,3],
 190         [25,19,3,10,23,15,27,18,12,8,7,24,16,14,26,4,21,5,9,1,22,28,20,29,6,11,13,17,0,2],
 191         [25,24,12,9,13,10,23,4,19,29,16,1,15,8,21,26,18,11,17,7,20,28,22,14,27,6,0,2,5,3],
 192         [25,9,29,8,3,6,10,27,11,28,13,23,18,16,17,19,5,22,12,26,21,4,7,14,24,15,2,20,0,1],
 193         [27,23,20,2,12,14,6,19,3,28,18,10,29,11,13,22,21,7,15,9,8,17,25,16,26,24,4,5,0,1],
 194         [27,7,2,5,19,10,3,26,22,18,23,16,9,24,21,17,6,28,12,14,25,29,13,15,8,20,11,4,0,1],
 195         [28,7,10,9,29,27,2,20,1,26,11,5,12,23,25,3,17,16,24,13,8,6,14,18,21,19,15,22,0,4],
 196         [28,8,23,13,18,29,20,9,10,27,15,21,3,19,14,4,26,5,24,1,6,17,11,12,16,7,25,22,0,2],
 197         [29,12,13,2,22,19,16,7,14,11,24,23,28,15,17,9,20,21,18,26,27,25,10,5,8,6,4,3,0,1],
 198         [29,8,5,4,7,15,19,17,3,26,13,9,23,6,25,22,27,24,14,16,10,21,11,18,28,12,2,20,0,1],
 199         [5,18,6,17,19,16,13,11,28,8,10,4,29,26,20,24,9,7,21,25,27,23,22,2,15,14,12,0,3,1],
 200         [5,23,2,15,7,13,19,11,27,3,22,14,4,26,28,20,17,18,8,25,16,29,10,24,12,9,6,21,0,1],
 201         [7,24,27,26,16,18,22,20,10,11,9,19,23,12,17,13,4,2,6,1,21,25,15,28,8,3,29,14,0,5],
 202     ];
 203     for (const c of cases) {
 204         testcase(makePermutedLayers(regularLayers, c), "case " + c.toString());
 205     }
 206 }
 207
 208 test();
 209
 210 debug("");
 211 var successfullyParsed = true;
 212 </script>
 213 <script src="../../../js/js-test-post.js"></script>
 214
 215 </body>
 216 </html>