texture-video-transparent.html (5713B)
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 <title>Upload texture from animating transparent WebM or HEVC</title> 11 <link rel="stylesheet" href="../../../resources/js-test-style.css"/> 12 <script src="../../../js/js-test-pre.js"></script> 13 <script src="../../../js/webgl-test-utils.js"></script> 14 <script> 15 "use strict"; 16 const wtu = WebGLTestUtils; 17 let gl; 18 let successfullyParsed; 19 let video; 20 21 initTestingHarness(); 22 23 function logVisibility(isOnload) 24 { 25 let prefix = ''; 26 if (isOnload) 27 prefix = 'Upon load: '; 28 if (document.hidden) { 29 console.log(prefix + '*** Tab was backgrounded (if running in automated test harness, why?) ***'); 30 } else { 31 console.log(prefix + 'Tab was foregrounded'); 32 } 33 } 34 35 function init() 36 { 37 description("Upload texture from animating transparent WebM or HEVC"); 38 39 document.addEventListener("visibilitychange", visibilityChanged, false); 40 41 logVisibility(true); 42 43 const canvas = document.getElementById("example"); 44 gl = wtu.create3DContext(canvas); 45 46 const program = wtu.setupTexturedQuad(gl); 47 const texture = gl.createTexture(); 48 // Bind the texture to texture unit 0 49 gl.bindTexture(gl.TEXTURE_2D, texture); 50 const textureLoc = gl.getUniformLocation(program, "tex"); 51 gl.uniform1i(textureLoc, 0); 52 53 gl.enable(gl.BLEND); 54 gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); 55 56 video = document.getElementById("vid"); 57 const typeWebM = 'video/webm; codecs="vp8"'; 58 const typeHEVC = 'video/mp4; codecs="hvc1"'; 59 if (!video.canPlayType) { 60 testFailed("video.canPlayType required method missing"); 61 finishTest(); 62 return; 63 } 64 if (!video.canPlayType(typeWebM).replace(/no/, '') && !video.canPlayType(typeHEVC).replace(/no/, '')) { 65 debug(typeWebM + " unsupported"); 66 debug(typeHEVC + " unsupported"); 67 finishTest(); 68 return; 69 }; 70 wtu.startPlayingAndWaitForVideo(video, runTest); 71 } 72 73 function visibilityChanged() { 74 logVisibility(false); 75 } 76 77 function runTest(videoElement) 78 { 79 let i = 0; 80 requestAnimationFrame(function frame() { 81 runOneIteration(videoElement, false); 82 runOneIteration(videoElement, true); 83 84 ++i; 85 if (i < 120) { 86 requestAnimationFrame(frame); 87 } else { 88 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors"); 89 finishTest(); 90 } 91 }); 92 93 } 94 95 function runOneIteration(videoElement, useTexSubImage2D) 96 { 97 // Upload the videoElement into the texture 98 if (useTexSubImage2D) { 99 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, videoElement); 100 gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, videoElement); 101 } else { 102 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, videoElement); 103 } 104 105 // Set up texture parameters 106 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 107 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 108 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 109 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 110 111 // Draw the triangles 112 wtu.clearAndDrawUnitQuad(gl, [255, 0, 0, 255]); 113 114 const tolerance = 20; 115 const red = [255, 0, 0]; 116 const green = [0, 255, 0]; 117 const blue = [0, 0, 255]; 118 119 // Check the left and right sides. Make sure that EITHER: 120 121 // - Left is green and right is transparent-blended-with-red 122 let leftIsGreen = false, leftIsRed = false, rightIsBlue = false, rightIsRed = false; 123 let greenRedError = "", redBlueError = ""; 124 let leftGreenError = "", rightBlueError = ""; 125 let bufLeft, bufRight; 126 wtu.checkCanvasRectColor(gl, 4, 4, 8, 24, green, tolerance, 127 /* sameFn */ () => { leftIsGreen = true; }, /* differentFn */ (m, b) => { leftGreenError = m; bufLeft = b;}, debug); 128 wtu.checkCanvasRectColor(gl, 20, 4, 8, 24, red, tolerance, 129 /* sameFn */ () => { rightIsRed = true; }, /* differentFn */ (m, b) => { greenRedError = m; bufRight = b;}, debug); 130 131 // - Right is blue and left is transparent-blended-with-red 132 wtu.checkCanvasRectColor(gl, 20, 4, 8, 24, blue, tolerance, 133 /* sameFn */ () => { rightIsBlue = true; }, /* differentFn */ (m, b) => { rightBlueError = m; bufRight = b;}, debug); 134 wtu.checkCanvasRectColor(gl, 4, 4, 8, 24, red, tolerance, 135 /* sameFn */ () => { leftIsRed = true; }, /* differentFn */ (m, b) => { redBlueError = m; bufLeft = b;}, debug); 136 137 if (leftIsGreen) { 138 if (rightIsRed) { 139 testPassed("left is green, right is transparent-blended-with-red"); 140 } else { 141 testFailed("left is green, but: " + greenRedError + "\n" + bufRight); 142 } 143 } else if (rightIsBlue) { 144 if (leftIsRed) { 145 testPassed("right is blue, left is transparent-blended-with-red"); 146 } else { 147 testFailed("right is blue, but: " + redBlueError + "\n" + bufLeft); 148 } 149 } else { 150 testFailed("neither left is green nor right is blue \n" + leftGreenError + "\n" + rightBlueError + "\n" + bufLeft + "\n" + bufRight); 151 } 152 } 153 </script> 154 </head> 155 <body onload="init()"> 156 <canvas id="example" width="32" height="32"></canvas> 157 <div id="description"></div> 158 <div id="console"></div> 159 <video id="vid" style="display:none;"> 160 <source src="../../../resources/transparent-2frames.mp4" type='video/mp4; codecs="hvc1"' /> 161 <source src="../../../resources/transparent-2frames.webm" type='video/webm; codecs="vp8"' /> 162 </video> 163 </body> 164 </html>