Home | History | Annotate | Download | only in Canvas 
      1 <!DOCTYPE html>
      2 <html>
      3 <body>
      4 <video id="video" loop></video>
      5 <script src="../resources/runner.js"></script>
      6 <script src="resources/canvas_runner.js"></script>
      7 <script>
      8 var videoElement = document.getElementById("video");
      9 var canvas3D = document.createElement('canvas');
     10 var gl = canvas3D.getContext('experimental-webgl');
     11 if(!gl)
     12     CanvasRunner.logFatalError("\nWebGL is not supported or enabled on this platform!\n");
     13 
     14 function setSize(width, height) {
     15     canvas3D.width = width;
     16     canvas3D.height = height;
     17 }
     18 
     19 function addPlayCallback(videoElement) {
     20     // This logic makes sure this perf test starts after playing the video.
     21     videoElement.addEventListener("canplaythrough", startVideo, true);
     22     videoElement.addEventListener("play", startPerfTest, true);
     23     videoElement.addEventListener('error', function(ev) {
     24         CanvasRunner.logFatalError("\nmp4 codec is not supported on this platform. Received error event:" + ev.target.error.code + "\n");
     25     }, false);
     26     videoElement.src = "../resources/bear-1280x720.mp4";
     27 }
     28 
     29 function startVideo() {
     30     // loop can emit this event again.
     31     videoElement.removeEventListener("canplaythrough", startVideo, true);
     32     videoElement.play();
     33 }
     34 
     35 
     36 function startPerfTest() {
     37     CanvasRunner.start({
     38         description: "This bench test checks the speed on texSubImage2D(Video) on Webgl.",
     39         preRun: preRun,
     40         doRun: doRun,
     41         ensureComplete: ensureComplete,
     42         postRun: postRun});
     43 }
     44 
     45 var flipYAndPremultipyAlphas =
     46   [[ false, false ],
     47    [ false, true  ],
     48    [ true,  false ],
     49    [ true,  true  ]];
     50 var optionIndex = 0;
     51 var tex = null;
     52 
     53 function preRun() {
     54     tex = gl.createTexture();
     55     gl.bindTexture(gl.TEXTURE_2D, tex);
     56     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, videoElement.videoWidth, videoElement.videoHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
     57     optionIndex = 0;
     58 }
     59 
     60 function doRun() {
     61     var i = optionIndex++ % flipYAndPremultipyAlphas.length;
     62     gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipYAndPremultipyAlphas[i][0]);
     63     gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, flipYAndPremultipyAlphas[i][1]);
     64     gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, videoElement);
     65 }
     66 
     67 function ensureComplete() {
     68     gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array(4));
     69 }
     70 
     71 function postRun() {
     72     gl.deleteTexture(tex);
     73 }
     74 
     75 window.onload = function () {
     76     setSize(1, 1);
     77     addPlayCallback(videoElement);
     78 }
     79 
     80 </script>
     81 </body>
     82 </html>
     83