1 <!DOCTYPE html> 2 <html> 3 <body> 4 <script src="../resources/runner.js"></script> 5 <script src="resources/canvas_runner.js"></script> 6 <script> 7 var canvas2D = document.createElement("canvas"); 8 var ctx2D = canvas2D.getContext("2d"); 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(canvas2DWidth, canvas2DHeight, webglWidth, webglHeight) { 15 canvas2D.width = canvas2DWidth; 16 canvas2D.height = canvas2DHeight; 17 canvas3D.width = webglWidth; 18 canvas3D.height = webglHeight; 19 } 20 21 function rand(range) { 22 return Math.floor(Math.random() * range); 23 } 24 25 function renderWebGL(gl) { 26 gl.disable(gl.SCISSOR_TEST); 27 gl.clear(gl.COLOR_BUFER_BIT); 28 gl.enable(gl.SCISSOR_TEST); 29 gl.scissor(rand(1024), rand(1024), rand(1024), rand(1024)); 30 gl.clearColor(Math.random(), Math.random(), Math.random(), 1); 31 gl.clear(gl.COLOR_BUFFER_BIT); 32 } 33 34 function doRun() { 35 renderWebGL(gl); 36 // draw dynamic WebGL 37 ctx2D.drawImage(canvas3D, 0, 0); 38 } 39 40 function ensureComplete() { 41 // Calling getImageData() is just to flush out the content when 42 // accelerated 2D canvas is in use. The cost of reading 1x1 pixels is low. 43 ctx2D.getImageData(0, 0, 1, 1); 44 } 45 46 window.onload = function () { 47 // It should use setMinimumAccelerated2dCanvasSize() to enable accelerated Canvas for a specified size 48 // but this API is not available in JS or WebPage. Assume the threshold size is 256x257 49 // and the dest canvas is HW accelerated Canvas when setting its size to 1024x1024. 50 setSize(1024, 1024, 1024, 1024); 51 renderWebGL(gl); 52 CanvasRunner.start({ 53 description: "This bench test checks the speed on drawing dynamic WebGL(1024x1024) to HW accelerated Canvas2D(1024x1024).", 54 doRun: doRun, 55 ensureComplete: ensureComplete}); 56 } 57 58 </script> 59 </body> 60 </html> 61
