Source code
Revision control
Copy as Markdown
Other Tools
<!--
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 Integer Cubemap Texture Specification Order Bug Test</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>
<canvas id="example" width="128" height="128"></canvas>
<div id="description"></div>
<div id="console"></div>
<script id="vs" type="x-shader/x-vertex">#version 300 es
precision highp float;
in vec4 a_position;
void main(){
gl_Position = a_position;
}
</script>
<script id="fs" type="x-shader/x-fragment">#version 300 es
precision highp float;
// This program samples both textures at varying Lod and exposes
// both of them, the regular on top, and the weird on the bottom.
// On the NVIDIA driver the top is both green and red while the bottom
// is only green. This is a driver bug because both textures should be
// exactly the same.
// I think that because of our level specification order weirdness, the
// driver gets confused as to which levels are complete and thinks only
// level 0 is complete. Then when sampling the texture it clamps the sampling
// to only level 0, resulting in green for all Lod values.
layout(location = 0) out vec4 fragColor;
uniform highp isamplerCube texRegular;
uniform highp isamplerCube texWeird;
void main() {
vec2 fragPos = gl_FragCoord.xy / vec2(128.0, 128.0);
float lod = (fragPos.x - 0.5) * 10.0 + 0.5;
ivec4 colorRegular = textureLod(texRegular, vec3(1.0, 0.0, 0.0), lod);
ivec4 colorWeird = textureLod(texWeird, vec3(1.0, 0.0, 0.0), lod);
if (fragPos.y > 0.51) {
fragColor = vec4(vec2(colorRegular.rg), 0.0, 1.0);
} else if (fragPos.y < 0.49){
fragColor = vec4(vec2(colorWeird.rg), 0.0, 1.0);
} else {
fragColor = vec4(0.0, 0.0, 0.0, 1.0);
}
}
</script>
<script>
"use strict";
var wtu = WebGLTestUtils;
description("Test for a driver bug when specifying integer cubemaps in weird order");
var gl = wtu.create3DContext("example", undefined, 2);
function createTextureCube(layers, maxLevel) {
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
layers.forEach(function(layer) {
var level = layer.level;
var face = layer.face;
var color = layer.color;
var levelSize = 1 << (maxLevel - level);
var backingBuffer = new ArrayBuffer(levelSize * levelSize * 2);
new Int16Array(backingBuffer).fill(color);
gl.texImage2D(face + gl.TEXTURE_CUBE_MAP_POSITIVE_X, level, gl.RG8I, levelSize, levelSize, 0, gl.RG_INTEGER, gl.BYTE, new Int8Array(backingBuffer));
});
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_NEAREST);
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
return texture;
}
function makePermutedLayers(layers, permutation) {
return permutation.map(i => layers[i]);
}
function test() {
var kMaxLevel = 4;
var kBlack = 0x0000;
var kGreen = 0x7F00;
var kRed = 0x007F;
// Create two integer cubemaps with green on level 0 and red on the others.
// The "regular" cube map is filled in a sensible manner.
var regularLayers = [];
for (var level = 0; level <= kMaxLevel; level ++) {
for (var face = 0; face < 6; face ++) {
if (level == 0) {
regularLayers.push({level: level, face: face, color: kGreen});
} else {
regularLayers.push({level: level, face: face, color: kRed});
}
}
}
// The "weird" cube map has all its >= 1 levels filled, then the first level,
// then the >= 1 levels again but for one face. This replicates what the
// Chromium command buffer "cubemap completeness" workaround is doing.
var weirdLayers = [];
for (var level = 1; level <= kMaxLevel; level ++) {
for (var face = 0; face < 5; face ++) {
weirdLayers.push({level: level, face: face, color: kBlack});
}
weirdLayers.push({level: level, face: 5, color: kRed});
}
for (var level = 0; level <= kMaxLevel; level ++) {
for (var face = 0; face < 6; face ++) {
if (level == 0) {
weirdLayers.push({level: level, face: face, color: kGreen});
} else {
if (face != 5) {
weirdLayers.push({level: level, face: face, color: kRed});
}
}
}
}
var regularTex = createTextureCube(regularLayers, kMaxLevel);
var sampleProgram = wtu.setupProgram(gl, ["vs", "fs"], ["a_position"]);
var regularLocation = gl.getUniformLocation(sampleProgram, "texRegular");
var weirdLocation = gl.getUniformLocation(sampleProgram, "texWeird");
wtu.setupQuad(gl, gl.getAttribLocation(sampleProgram, "a_position"));
gl.uniform1i(regularLocation, 0);
gl.uniform1i(weirdLocation, 1);
function testcase(layers1, casename) {
var tex1 = createTextureCube(layers1, kMaxLevel);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_CUBE_MAP, regularTex);
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex1);
// At this point both textures should be the same.
wtu.drawUnitQuad(gl);
gl.deleteTexture(tex1);
wtu.checkCanvasRect(gl, 96, 32, 1, 1, [255, 0, 0, 255], "should be green: " + casename);
wtu.checkCanvasRect(gl, 96, 96, 1, 1, [255, 0, 0, 255], "should be green: " + casename);
wtu.checkCanvasRect(gl, 32, 32, 1, 1, [0, 255, 0, 255], "should be red: " + casename);
wtu.checkCanvasRect(gl, 32, 96, 1, 1, [0, 255, 0, 255], "should be red: " + casename);
}
testcase(weirdLayers, "original");
const cases = [
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
[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],
];
for (const c of cases) {
testcase(makePermutedLayers(regularLayers, c), "case " + c.toString());
}
}
test();
debug("");
var successfullyParsed = true;
</script>
<script src="../../../js/js-test-post.js"></script>
</body>
</html>