texture-npot-video.html (5675B)
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 <!DOCTYPE html> 7 <html> 8 <head> 9 <meta charset="utf-8"> 10 <link rel="stylesheet" href="../../../resources/js-test-style.css"/> 11 <script src="../../../js/js-test-pre.js"></script> 12 <script src="../../../js/webgl-test-utils.js"></script> 13 <script> 14 "use strict"; 15 var wtu = WebGLTestUtils; 16 var gl = null; 17 var textureLoc = null; 18 var successfullyParsed = false; 19 20 initTestingHarness(); 21 22 function logVisibility(isOnload) 23 { 24 let prefix = ''; 25 if (isOnload) 26 prefix = 'Upon load: '; 27 if (document.hidden) { 28 console.log(prefix + '*** Tab was backgrounded (if running in automated test harness, why?) ***'); 29 } else { 30 console.log(prefix + 'Tab was foregrounded'); 31 } 32 } 33 34 function init() 35 { 36 description('Verify npot video'); 37 38 document.addEventListener("visibilitychange", visibilityChanged, false); 39 40 logVisibility(true); 41 42 var canvas = document.getElementById("example"); 43 gl = wtu.create3DContext(canvas); 44 var program = wtu.setupTexturedQuad(gl); 45 46 gl.clearColor(0,0,0,1); 47 gl.clearDepth(1); 48 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 49 // Disable any writes to the alpha channel 50 gl.colorMask(1, 1, 1, 0); 51 52 textureLoc = gl.getUniformLocation(program, "tex"); 53 54 var video = document.getElementById("vid"); 55 wtu.startPlayingAndWaitForVideo(video, runTest); 56 } 57 58 function visibilityChanged() { 59 logVisibility(false); 60 } 61 62 function runOneIteration(videoElement, useTexSubImage2D, flipY, topColor, bottomColor, badMinFilter, badClamp, genMips) 63 { 64 debug('Testing ' + (useTexSubImage2D ? 'texSubImage2D' : 'texImage2D') + 65 ' with flipY=' + flipY); 66 var texture = gl.createTexture(); 67 // Bind the texture to texture unit 0 68 gl.bindTexture(gl.TEXTURE_2D, texture); 69 // Set up pixel store parameters 70 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY); 71 // Upload the videoElement into the texture 72 debug("size: " + videoElement.videoWidth + "x" + videoElement.videoHeight); 73 if (useTexSubImage2D) { 74 // Initialize the texture to black first 75 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 76 videoElement.videoWidth, videoElement.videoHeight, 0, 77 gl.RGBA, gl.UNSIGNED_BYTE, null); 78 gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, videoElement); 79 } else { 80 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, videoElement); 81 } 82 83 // Set up texture parameters 84 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 85 if (badMinFilter) { 86 debug("bad min filter"); 87 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST); 88 } else { 89 debug("good min filter"); 90 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 91 } 92 if (badClamp) { 93 debug("bad clamp"); 94 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); 95 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); 96 } else { 97 debug("good clamp"); 98 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 99 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 100 } 101 if (genMips) { 102 debug("generate mips"); 103 gl.generateMipmap(gl.TEXTURE_2D); 104 wtu.glErrorShouldBe(gl, gl.INVALID_OPERATION, "should be INVALID_OPERATION"); 105 } 106 107 // var c = document.createElement("canvas"); 108 // c.width = 16; 109 // c.height = 16; 110 // c.style.border = "1px solid black"; 111 // var ctx = c.getContext("2d"); 112 // ctx.drawImage(videoElement, 0, 0, 16, 16); 113 // document.body.appendChild(c); 114 115 // Point the uniform sampler to texture unit 0 116 gl.uniform1i(textureLoc, 0); 117 // Draw the triangles 118 wtu.clearAndDrawUnitQuad(gl, [0, 0, 0, 255]); 119 // Check a few pixels near the top and bottom and make sure they have 120 // the right color. 121 var tolerance = 5; 122 debug("Checking lower left corner"); 123 wtu.checkCanvasRect(gl, 4, 4, 2, 2, bottomColor, 124 "shouldBe " + bottomColor, tolerance); 125 debug("Checking upper left corner"); 126 wtu.checkCanvasRect(gl, 4, gl.canvas.height - 8, 2, 2, topColor, 127 "shouldBe " + topColor, tolerance); 128 debug(""); 129 } 130 131 function runTest(videoElement) 132 { 133 var red = [255, 0, 0]; 134 var green = [0, 255, 0]; 135 var black = [0, 0, 0]; 136 runOneIteration(videoElement, false, true, black, black, true, true, true); 137 runOneIteration(videoElement, false, true, black, black, true, false, false); 138 runOneIteration(videoElement, false, true, black, black, false, true, false); 139 runOneIteration(videoElement, false, true, black, black, true, true, false); 140 runOneIteration(videoElement, false, true, green, red, false, false, false); 141 runOneIteration(videoElement, false, false, red, green, false, false, false); 142 runOneIteration(videoElement, true, true, green, red, false, false, false); 143 runOneIteration(videoElement, true, false, red, green, false, false, false); 144 145 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors"); 146 finishTest(); 147 } 148 </script> 149 </head> 150 <body onload="init()"> 151 <canvas id="example" width="64" height="48"></canvas> 152 <div id="description"></div> 153 <div id="console"></div> 154 <video id="vid" style="display:none;" muted> 155 <source src="../../../resources/npot-video.mp4" type='video/mp4; codecs="avc1.42E01E"' /> 156 <source src="../../../resources/npot-video.webmvp8.webm" type='video/webm; codecs="vp8"' /> 157 </video> 158 </body> 159 </html>