integer-cubemap-texture-sampling.html (6521B)
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>