tex-image-with-video-test.js (5575B)
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 console.log(msg); 15 old(msg); 16 }; 17 18 function generateTest(pixelFormat, pixelType, prologue) { 19 var wtu = WebGLTestUtils; 20 var gl = null; 21 var textureLoc = null; 22 var successfullyParsed = false; 23 24 // Test each format separately because many browsers implement each 25 // differently. Some might be GPU accelerated, some might not. Etc... 26 var videos = [ 27 { src: "../resources/red-green.mp4" , type: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"', }, 28 { src: "../resources/red-green.webmvp8.webm", type: 'video/webm; codecs="vp8, vorbis"', }, 29 { src: "../resources/red-green.webmvp9.webm", type: 'video/webm; codecs="vp9"', }, 30 ]; 31 32 var videoNdx = 0; 33 var video; 34 35 function runNextVideo() { 36 if (video) { 37 video.pause(); 38 } 39 40 if (videoNdx == videos.length) { 41 finishTest(); 42 return; 43 } 44 45 var info = videos[videoNdx++]; 46 debug(""); 47 debug("testing: " + info.type); 48 video = document.createElement("video"); 49 video.muted = true; 50 var canPlay = true; 51 if (!video.canPlayType) { 52 testFailed("video.canPlayType required method missing"); 53 runNextVideo(); 54 return; 55 } 56 57 if(!video.canPlayType(info.type).replace(/no/, '')) { 58 debug(info.type + " unsupported"); 59 runNextVideo(); 60 return; 61 }; 62 63 document.body.appendChild(video); 64 video.type = info.type; 65 video.crossOrigin = 'anonymous'; 66 video.src = info.src; 67 wtu.startPlayingAndWaitForVideo(video, runTest); 68 } 69 70 var init = function() 71 { 72 description('Verify texImage2D and texSubImage2D code paths taking video elements (' + pixelFormat + '/' + pixelType + ')'); 73 74 gl = wtu.create3DContext("example"); 75 76 if (!prologue(gl)) { 77 finishTest(); 78 return; 79 } 80 81 var program = wtu.setupTexturedQuad(gl); 82 83 gl.clearColor(0,0,0,1); 84 gl.clearDepth(1); 85 86 textureLoc = gl.getUniformLocation(program, "tex"); 87 runNextVideo(); 88 } 89 90 function runOneIteration(videoElement, useTexSubImage2D, flipY, topColor, bottomColor) 91 { 92 debug('Testing ' + (useTexSubImage2D ? 'texSubImage2D' : 'texImage2D') + 93 ' with flipY=' + flipY); 94 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 95 // Disable any writes to the alpha channel 96 gl.colorMask(1, 1, 1, 0); 97 var texture = gl.createTexture(); 98 // Bind the texture to texture unit 0 99 gl.bindTexture(gl.TEXTURE_2D, texture); 100 // Set up texture parameters 101 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 102 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 103 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 104 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 105 // Set up pixel store parameters 106 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY); 107 gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false); 108 // Upload the videoElement into the texture 109 if (useTexSubImage2D) { 110 // Initialize the texture to black first 111 gl.texImage2D(gl.TEXTURE_2D, 0, gl[pixelFormat], 112 videoElement.videoWidth, videoElement.videoHeight, 0, 113 gl[pixelFormat], gl[pixelType], null); 114 gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl[pixelFormat], gl[pixelType], videoElement); 115 } else { 116 gl.texImage2D(gl.TEXTURE_2D, 0, gl[pixelFormat], gl[pixelFormat], gl[pixelType], videoElement); 117 } 118 119 var c = document.createElement("canvas"); 120 c.width = 16; 121 c.height = 16; 122 c.style.border = "1px solid black"; 123 var ctx = c.getContext("2d"); 124 ctx.drawImage(videoElement, 0, 0, 16, 16); 125 document.body.appendChild(c); 126 127 // Point the uniform sampler to texture unit 0 128 gl.uniform1i(textureLoc, 0); 129 // Draw the triangles 130 wtu.clearAndDrawUnitQuad(gl, [0, 0, 0, 255]); 131 // Check a few pixels near the top and bottom and make sure they have 132 // the right color. 133 var tolerance = 5; 134 debug("Checking lower left corner"); 135 wtu.checkCanvasRect(gl, 4, 4, 2, 2, bottomColor, 136 "shouldBe " + bottomColor, tolerance); 137 debug("Checking upper left corner"); 138 wtu.checkCanvasRect(gl, 4, gl.canvas.height - 8, 2, 2, topColor, 139 "shouldBe " + topColor, tolerance); 140 } 141 142 function runTest(videoElement) 143 { 144 var red = [255, 0, 0]; 145 var green = [0, 255, 0]; 146 runOneIteration(videoElement, false, true, red, green); 147 runOneIteration(videoElement, false, false, green, red); 148 runOneIteration(videoElement, true, true, red, green); 149 runOneIteration(videoElement, true, false, green, red); 150 151 wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors"); 152 153 runNextVideo(); 154 } 155 156 return init; 157 }