texture-corner-case-videos.js (12561B)
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 // This block needs to be outside the onload handler in order for this 8 // test to run reliably in WebKit's test harness (at least the 9 // Chromium port). https://bugs.webkit.org/show_bug.cgi?id=87448 10 initTestingHarness(); 11 12 var old = debug; 13 var debug = function(msg) { 14 bufferedLogToConsole(msg); 15 old(msg); 16 }; 17 18 function generateTest(desc, 19 internalFormat, pixelFormat, pixelType, prologue, resourcePath, defaultContextVersion, 20 videos) { 21 var wtu = WebGLTestUtils; 22 var tiu = TexImageUtils; 23 var gl = null; 24 var c2d = null; 25 var successfullyParsed = false; 26 var redColor = [255, 0, 0]; 27 var greenColor = [0, 255, 0]; 28 var currentTolerance = 0; 29 30 function init() 31 { 32 description(desc + ' (' + internalFormat + '/' + pixelFormat + '/' + pixelType + ')'); 33 34 // Set the default context version while still allowing the webglVersion URL query string to override it. 35 wtu.setDefault3DContextVersion(defaultContextVersion); 36 gl = wtu.create3DContext("example"); 37 38 // Subsume 2D canvas tests into this test case since they usually go down similar code paths and 39 // these tests are usually already set up to run with hardware accelerated video decoding. 40 c2d = document.getElementById("c2d").getContext("2d"); 41 42 if (!prologue(gl)) { 43 finishTest(); 44 return; 45 } 46 47 switch (gl[pixelFormat]) { 48 case gl.RED: 49 case gl.RED_INTEGER: 50 greenColor = [0, 0, 0]; 51 break; 52 default: 53 break; 54 } 55 56 gl.clearColor(0,0,0,1); 57 gl.clearDepth(1); 58 59 runAllTests(); 60 } 61 62 function runOneIteration(videoElement, useTexSubImage2D, flipY, topColor, bottomColor, sourceSubRectangle, program, bindingTarget) 63 { 64 sourceSubRectangleString = ''; 65 if (sourceSubRectangle) { 66 sourceSubRectangleString = ' sourceSubRectangle=' + sourceSubRectangle; 67 } 68 debug('Testing ' + (useTexSubImage2D ? 'texSubImage2D' : 'texImage2D') + 69 ' with flipY=' + flipY + ' bindingTarget=' + 70 (bindingTarget == gl.TEXTURE_2D ? 'TEXTURE_2D' : 'TEXTURE_CUBE_MAP') + 71 sourceSubRectangleString); 72 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 73 // Disable any writes to the alpha channel 74 gl.colorMask(1, 1, 1, 0); 75 var texture = gl.createTexture(); 76 // Bind the texture to texture unit 0 77 gl.bindTexture(bindingTarget, texture); 78 // Set up texture parameters 79 gl.texParameteri(bindingTarget, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 80 gl.texParameteri(bindingTarget, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 81 gl.texParameteri(bindingTarget, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 82 gl.texParameteri(bindingTarget, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 83 // Set up pixel store parameters 84 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY); 85 gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false); 86 var targets = [gl.TEXTURE_2D]; 87 if (bindingTarget == gl.TEXTURE_CUBE_MAP) { 88 targets = [gl.TEXTURE_CUBE_MAP_POSITIVE_X, 89 gl.TEXTURE_CUBE_MAP_NEGATIVE_X, 90 gl.TEXTURE_CUBE_MAP_POSITIVE_Y, 91 gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, 92 gl.TEXTURE_CUBE_MAP_POSITIVE_Z, 93 gl.TEXTURE_CUBE_MAP_NEGATIVE_Z]; 94 } 95 // Handle the source sub-rectangle if specified (WebGL 2.0 only) 96 if (sourceSubRectangle) { 97 gl.pixelStorei(gl.UNPACK_SKIP_PIXELS, sourceSubRectangle[0]); 98 gl.pixelStorei(gl.UNPACK_SKIP_ROWS, sourceSubRectangle[1]); 99 } 100 // Upload the videoElement into the texture 101 for (var tt = 0; tt < targets.length; ++tt) { 102 if (sourceSubRectangle) { 103 // Initialize the texture to black first 104 if (useTexSubImage2D) { 105 // Skip sub-rectangle tests for cube map textures for the moment. 106 if (bindingTarget == gl.TEXTURE_CUBE_MAP) { 107 continue; 108 } 109 gl.texImage2D(targets[tt], 0, gl[internalFormat], 110 sourceSubRectangle[2], sourceSubRectangle[3], 0, 111 gl[pixelFormat], gl[pixelType], null); 112 gl.texSubImage2D(targets[tt], 0, 0, 0, 113 sourceSubRectangle[2], sourceSubRectangle[3], 114 gl[pixelFormat], gl[pixelType], videoElement); 115 } else { 116 gl.texImage2D(targets[tt], 0, gl[internalFormat], 117 sourceSubRectangle[2], sourceSubRectangle[3], 0, 118 gl[pixelFormat], gl[pixelType], videoElement); 119 } 120 } else { 121 // Initialize the texture to black first 122 if (useTexSubImage2D) { 123 var width = videoElement.videoWidth; 124 var height = videoElement.videoHeight; 125 if (bindingTarget == gl.TEXTURE_CUBE_MAP) { 126 // cube map texture must be square. 127 width = Math.max(width, height); 128 height = width; 129 } 130 gl.texImage2D(targets[tt], 0, gl[internalFormat], 131 width, height, 0, 132 gl[pixelFormat], gl[pixelType], null); 133 gl.texSubImage2D(targets[tt], 0, 0, 0, gl[pixelFormat], gl[pixelType], videoElement); 134 } else { 135 gl.texImage2D(targets[tt], 0, gl[internalFormat], gl[pixelFormat], gl[pixelType], videoElement); 136 } 137 } 138 } 139 140 if (sourceSubRectangle) { 141 gl.pixelStorei(gl.UNPACK_SKIP_PIXELS, 0); 142 gl.pixelStorei(gl.UNPACK_SKIP_ROWS, 0); 143 } 144 145 var c = document.createElement("canvas"); 146 c.width = 16; 147 c.height = 16; 148 c.style.border = "1px solid black"; 149 var ctx = c.getContext("2d"); 150 ctx.drawImage(videoElement, 0, 0, 16, 16); 151 document.body.appendChild(c); 152 153 var loc; 154 if (bindingTarget == gl.TEXTURE_CUBE_MAP) { 155 loc = gl.getUniformLocation(program, "face"); 156 } 157 158 for (var tt = 0; tt < targets.length; ++tt) { 159 if (bindingTarget == gl.TEXTURE_CUBE_MAP) { 160 gl.uniform1i(loc, targets[tt]); 161 } 162 // Draw the triangles 163 wtu.clearAndDrawUnitQuad(gl, [0, 0, 0, 255]); 164 // Check a few pixels near the top and bottom and make sure they have 165 // the right color. 166 var tolerance = currentTolerance; 167 debug("Checking lower left corner"); 168 wtu.checkCanvasRect(gl, 4, 4, 2, 2, bottomColor, 169 "shouldBe " + bottomColor, tolerance); 170 debug("Checking upper left corner"); 171 wtu.checkCanvasRect(gl, 4, gl.canvas.height - 8, 2, 2, topColor, 172 "shouldBe " + topColor, tolerance); 173 174 // Expose bug http://crbug.com/733172. 175 if (sourceSubRectangle) { 176 // Skip sub-rectangle tests for cube map textures for the moment. 177 if (bindingTarget == gl.TEXTURE_CUBE_MAP) { 178 continue; 179 } 180 gl.texSubImage2D(targets[tt], 0, 0, 0, 181 sourceSubRectangle[2], sourceSubRectangle[3], 182 gl[pixelFormat], gl[pixelType], videoElement); 183 } else { 184 gl.texSubImage2D(targets[tt], 0, 0, 0, gl[pixelFormat], gl[pixelType], videoElement); 185 } 186 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors"); 187 } 188 } 189 190 function runCanvas2DTest(videoElement, topColor, bottomColor) 191 { 192 debug('Testing with 2D canvas'); 193 194 var canvas = c2d.canvas; 195 196 // Draw the video to the 2D canvas context. 197 c2d.drawImage(videoElement, 0, 0, canvas.width, canvas.height); 198 199 // Check a few pixels near the top and bottom and make sure they have 200 // the right color. 201 // Origin is upper left in 2D canvas context. 202 var tolerance = currentTolerance; 203 debug("Checking lower left corner"); 204 wtu.checkCanvasRect(c2d, 4, canvas.height - 8, 2, 2, bottomColor, 205 "shouldBe " + bottomColor, tolerance); 206 debug("Checking upper left corner"); 207 wtu.checkCanvasRect(c2d, 4, 4, 2, 2, topColor, 208 "shouldBe " + topColor, tolerance); 209 } 210 211 function runAllTests() 212 { 213 var cases = [ 214 { sub: false, flipY: true, topColor: redColor, bottomColor: greenColor }, 215 { sub: false, flipY: false, topColor: greenColor, bottomColor: redColor }, 216 { sub: true, flipY: true, topColor: redColor, bottomColor: greenColor }, 217 { sub: true, flipY: false, topColor: greenColor, bottomColor: redColor }, 218 ]; 219 220 function runTexImageTest(bindingTarget) { 221 var program; 222 if (bindingTarget == gl.TEXTURE_2D) { 223 program = tiu.setupTexturedQuad(gl, internalFormat); 224 } else { 225 program = tiu.setupTexturedQuadWithCubeMap(gl, internalFormat); 226 } 227 228 return new Promise(function(resolve, reject) { 229 var videoNdx = 0; 230 var video; 231 function runNextVideo() { 232 if (video) { 233 video.pause(); 234 } 235 236 if (videoNdx == videos.length) { 237 resolve("SUCCESS"); 238 return; 239 } 240 241 var info = videos[videoNdx++]; 242 debug(""); 243 debug("testing: " + info.comment); 244 debug("video type: " + info.type); 245 // Default to tolerance of 5. 246 currentTolerance = info.tolerance || 5; 247 debug("tolerance: " + currentTolerance); 248 video = document.createElement("video"); 249 video.muted = true; 250 var canPlay = true; 251 if (!video.canPlayType) { 252 testFailed("video.canPlayType required method missing"); 253 runNextVideo(); 254 return; 255 } 256 257 if(!video.canPlayType(info.type).replace(/no/, '')) { 258 debug(info.type + " unsupported; skipping test"); 259 runNextVideo(); 260 return; 261 }; 262 263 document.body.appendChild(video); 264 video.type = info.type; 265 video.src = info.src; 266 wtu.startPlayingAndWaitForVideo(video, runTest); 267 } 268 function runTest() { 269 for (var i in cases) { 270 if (bindingTarget == gl.TEXTURE_CUBE_MAP) { 271 // Cube map texture must be square but video is not square. 272 if (!cases[i].sub) { 273 break; 274 } 275 // Skip sub-rectangle tests for cube map textures for the moment. 276 if (cases[i].sourceSubRectangle) { 277 break; 278 } 279 } 280 runOneIteration(video, cases[i].sub, cases[i].flipY, 281 cases[i].topColor, cases[i].bottomColor, 282 cases[i].sourceSubRectangle, 283 program, bindingTarget); 284 } 285 runCanvas2DTest(video, redColor, greenColor); 286 runNextVideo(); 287 } 288 runNextVideo(); 289 }); 290 } 291 292 runTexImageTest(gl.TEXTURE_2D).then(function(val) { 293 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors"); 294 finishTest(); 295 }); 296 } 297 298 return init; 299 }