texture-npot.html (10810B)
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 Non-Power of 2 texture conformance 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="4" height="4" style="width: 40px; height: 30px;"></canvas> 18 <div id="description"></div> 19 <div id="console"></div> 20 <script id="vshader" type="x-shader/x-vertex"> 21 attribute vec4 vPosition; 22 attribute vec2 texCoord0; 23 varying vec2 texCoord; 24 void main() 25 { 26 gl_Position = vPosition; 27 texCoord = texCoord0; 28 } 29 </script> 30 31 <script id="fshader" type="x-shader/x-fragment"> 32 precision mediump float; 33 uniform samplerCube tex; 34 varying vec2 texCoord; 35 void main() 36 { 37 gl_FragColor = textureCube(tex, normalize(vec3(texCoord, 1))); 38 } 39 </script> 40 <script> 41 "use strict"; 42 description(document.title); 43 var wtu = WebGLTestUtils; 44 var gl = wtu.create3DContext("example"); 45 var program = wtu.setupTexturedQuad(gl); 46 47 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup."); 48 49 var tests = [ 50 { format: gl.RGBA, 51 type: gl.UNSIGNED_BYTE, 52 color: [192, 0, 128, 64], 53 expected: [192, 0, 128, 64], 54 tolerance: 0, 55 }, 56 { format: gl.RGB, 57 type: gl.UNSIGNED_BYTE, 58 color: [192, 0, 128], 59 expected: [192, 0, 128, 255], 60 tolerance: 0, 61 }, 62 { format: gl.LUMINANCE, 63 type: gl.UNSIGNED_BYTE, 64 color: [192], 65 expected: [192, 192, 192, 255], 66 tolerance: 0, 67 }, 68 { format: gl.ALPHA, 69 type: gl.UNSIGNED_BYTE, 70 color: [64], 71 expected: [0, 0, 0, 64], 72 tolerance: 0, 73 }, 74 { format: gl.LUMINANCE_ALPHA, 75 type: gl.UNSIGNED_BYTE, 76 color: [192, 64], 77 expected: [192, 192, 192, 64], 78 tolerance: 0, 79 }, 80 // { format: gl.RGBA, 81 // type: gl.UNSIGNED_SHORT_4_4_4_4, 82 // color: [0x48FC], 83 // expected: [0x44, 0x88, 0xFF, 0xCC], 84 // tolerance: 16, 85 // }, 86 // { format: gl.RGBA, 87 // type: gl.UNSIGNED_SHORT_5_5_5_1, 88 // color: [0x8309], // 10000 01000 00100 1 89 // expected: [128, 64, 32, 255], 90 // tolerance: 16, 91 // }, 92 // { format: gl.RGB, 93 // type: gl.UNSIGNED_SHORT_5_6_5, 94 // color: [0x8404], // 10000 010000 00100 95 // expected: [128, 64, 32], 96 // tolerance: 16, 97 // }, 98 ]; 99 100 tests.forEach(function(test) { 101 debug(""); 102 debug("test " + wtu.glEnumToString(gl, test.format) + "/" + wtu.glEnumToString(gl, test.type)); 103 var tex = gl.createTexture(); 104 105 // Check that an NPOT texture not on level 0 generates INVALID_VALUE 106 wtu.fillTexture(gl, tex, 5, 3, test.color, 1, test.format, test.type); 107 wtu.glErrorShouldBe(gl, gl.INVALID_VALUE, 108 "gl.texImage2D with NPOT texture with level > 0 should return INVALID_VALUE"); 109 110 // Check that an NPOT texture on level 0 succeeds 111 wtu.fillTexture(gl, tex, 5, 3, test.color, 0, test.format, test.type); 112 wtu.glErrorShouldBe(gl, gl.NO_ERROR, 113 "gl.texImage2D with NPOT texture at level 0 should succeed"); 114 115 // Check that generateMipmap fails on NPOT 116 gl.generateMipmap(gl.TEXTURE_2D); 117 wtu.glErrorShouldBe(gl, gl.INVALID_OPERATION, 118 "gl.generateMipmap with NPOT texture should return INVALID_OPERATION"); 119 120 // Check that nothing is drawn if filtering is not correct for NPOT 121 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 122 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 123 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); 124 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); 125 126 wtu.clearAndDrawUnitQuad(gl); 127 wtu.checkCanvas( 128 gl, [0, 0, 0, 255], 129 "NPOT texture with TEXTURE_WRAP set to REPEAT should draw with 0,0,0,255"); 130 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup."); 131 132 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 133 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 134 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_LINEAR); 135 136 wtu.clearAndDrawUnitQuad(gl); 137 wtu.checkCanvas( 138 gl, [0, 0, 0, 255], 139 "NPOT texture with TEXTURE_MIN_FILTER not NEAREST or LINEAR should draw with 0,0,0,255"); 140 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup."); 141 142 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 143 144 wtu.clearAndDrawUnitQuad(gl); 145 wtu.checkCanvas( 146 gl, test.expected, 147 "NPOT texture with TEXTURE_MIN_FILTER set to LINEAR should draw."); 148 149 gl.copyTexImage2D(gl.TEXTURE_2D, 1, test.format, 0, 0, 5, 3, 0); 150 wtu.glErrorShouldBe(gl, gl.INVALID_VALUE, 151 "copyTexImage2D with NPOT texture with level > 0 should return INVALID_VALUE."); 152 153 // Check that generateMipmap for an POT texture succeeds 154 wtu.fillTexture(gl, tex, 4, 4, test.color, 0, test.format); 155 gl.generateMipmap(gl.TEXTURE_2D); 156 wtu.glErrorShouldBe(gl, gl.NO_ERROR, 157 "gl.texImage2D and gl.generateMipmap with POT texture at level 0 should succeed"); 158 159 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR); 160 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 161 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); 162 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); 163 164 wtu.clearAndDrawUnitQuad(gl); 165 wtu.checkCanvas( 166 gl, test.expected, 167 "POT texture with TEXTURE_MIN_FILTER set to LINEAR_MIPMAP_LINEAR should draw."); 168 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup."); 169 }); 170 171 var testCubemap = function(switchTextureUnitBeforeDraw) { 172 debug(""); 173 var title = "check using cubemap"; 174 if (switchTextureUnitBeforeDraw) { 175 title += " and switch texture unit before draw to check for Chromium bug"; 176 } 177 debug(title); 178 var program = wtu.setupProgram( 179 gl, ['vshader', 'fshader'], ['vPosition', 'texCoord0'], [0, 1]); 180 var tex = gl.createTexture(); 181 182 // Check that an NPOT texture not on level 0 generates INVALID_VALUE 183 fillCubeTexture(gl, tex, 5, 3, [0, 192, 128, 255], 1); 184 wtu.glErrorShouldBe(gl, gl.INVALID_VALUE, 185 "gl.texImage2D with NPOT texture with level > 0 should return INVALID_VALUE"); 186 187 // Check that an NPOT texture on level 0 succeeds 188 fillCubeTexture(gl, tex, 5, 5, [0, 192, 128, 255]); 189 wtu.glErrorShouldBe(gl, gl.NO_ERROR, 190 "gl.texImage2D with NPOT texture at level 0 should succeed"); 191 192 // Check that generateMipmap fails on NPOT 193 gl.generateMipmap(gl.TEXTURE_CUBE_MAP); 194 wtu.glErrorShouldBe(gl, gl.INVALID_OPERATION, 195 "gl.generateMipmap with NPOT texture should return INVALID_OPERATION"); 196 197 var loc = gl.getUniformLocation(program, "tex"); 198 gl.uniform1i(loc, 0); 199 200 // Check that nothing is drawn if filtering is not correct for NPOT 201 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 202 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 203 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.REPEAT); 204 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.REPEAT); 205 206 if (switchTextureUnitBeforeDraw) { 207 debug("Switching active texture unit to gl.TEXTURE1"); 208 // Test for http://crbug.com/390514 209 gl.activeTexture(gl.TEXTURE1); 210 } 211 212 wtu.clearAndDrawUnitQuad(gl); 213 wtu.checkCanvas( 214 gl, [0, 0, 0, 255], 215 "NPOT cubemap with TEXTURE_WRAP set to REPEAT should draw with 0,0,0,255"); 216 217 if (switchTextureUnitBeforeDraw) { 218 var error = gl.getError(); 219 if (error === gl.NO_ERROR) { 220 testPassed("getError was expected value: NO_ERROR : Should be no errors from draw."); 221 } else if (error === gl.INVALID_ENUM) { 222 testFailed("getError returned INVALID_ENUM. Possibly Chromium bug where texture unit is set to 0 instead of GL_TEXTURE0."); 223 } else { 224 testFailed("Drawing resulted in error: " + wtu.glEnumToString(gl, error)); 225 } 226 gl.activeTexture(gl.TEXTURE0); 227 } else { 228 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from draw."); 229 } 230 231 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 232 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 233 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_LINEAR); 234 235 wtu.clearAndDrawUnitQuad(gl); 236 wtu.checkCanvas( 237 gl, [0, 0, 0, 255], 238 "NPOT cubemap with TEXTURE_MIN_FILTER not NEAREST or LINEAR should draw with 0,0,0,255"); 239 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "Should be no errors from setup."); 240 241 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 242 243 wtu.clearAndDrawUnitQuad(gl); 244 wtu.checkCanvas( 245 gl, [0, 192, 128, 255], 246 "NPOT cubemap with TEXTURE_MIN_FILTER set to LINEAR should draw."); 247 248 // Check that an POT texture on level 0 succeeds 249 fillCubeTexture(gl, tex, 4, 4, [0, 192, 128, 255]); 250 wtu.glErrorShouldBe(gl, gl.NO_ERROR, 251 "gl.texImage2D with POT texture at level 0 should succeed"); 252 253 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR); 254 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 255 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.REPEAT); 256 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.REPEAT); 257 258 wtu.clearAndDrawUnitQuad(gl); 259 wtu.checkCanvas( 260 gl, [0, 0, 0, 255], 261 "POT cubemap with TEXTURE_MIN_FILTER set to LINEAR_MIPMAP_LINEAR but no mips draw with 0,0,0,255"); 262 263 // Check that generateMipmap succeeds on POT 264 gl.generateMipmap(gl.TEXTURE_CUBE_MAP); 265 wtu.glErrorShouldBe(gl, gl.NO_ERROR, 266 "gl.generateMipmap with POT texture should return succeed"); 267 268 wtu.clearAndDrawUnitQuad(gl); 269 wtu.checkCanvas( 270 gl, [0, 192, 128, 255], 271 "POT cubemap with TEXTURE_MIN_FILTER set to LINEAR_MIPMAP_LINEAR should draw."); 272 }; 273 274 testCubemap(false); 275 testCubemap(true); 276 277 var successfullyParsed = true; 278 279 function fillCubeTexture(gl, tex, width, height, color, opt_level) { 280 opt_level = opt_level || 0; 281 var canvas = document.createElement('canvas'); 282 canvas.width = width; 283 canvas.height = height; 284 var ctx2d = canvas.getContext('2d'); 285 ctx2d.fillStyle = "rgba(" + color[0] + "," + color[1] + "," + color[2] + "," + color[3] + ")"; 286 ctx2d.fillRect(0, 0, width, height); 287 gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex); 288 var targets = [ 289 gl.TEXTURE_CUBE_MAP_POSITIVE_X, 290 gl.TEXTURE_CUBE_MAP_NEGATIVE_X, 291 gl.TEXTURE_CUBE_MAP_POSITIVE_Y, 292 gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, 293 gl.TEXTURE_CUBE_MAP_POSITIVE_Z, 294 gl.TEXTURE_CUBE_MAP_NEGATIVE_Z]; 295 for (var tt = 0; tt < targets.length; ++tt) { 296 gl.texImage2D( 297 targets[tt], opt_level, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas); 298 } 299 }; 300 </script> 301 <script src="../../../js/js-test-post.js"></script> 302 303 </body> 304 </html>