1<!DOCTYPE html> 2<html> 3<body> 4<script src="../resources/runner.js"></script> 5<script> 6 7var canvas2D = document.createElement("canvas"); 8var ctx2D = canvas2D.getContext("2d"); 9var canvas3D = document.createElement('canvas'); 10var gl = canvas3D.getContext('experimental-webgl'); 11if(!gl) 12 PerfTestRunner.log("\nWebGL is not supported or enabled on this platform!\n"); 13var MEASURE_DRAW_TIMES = 1000; 14var MAX_COUNT = 60000; 15var count = 0; 16 17function setSize(width, height) { 18 canvas2D.width = width; 19 canvas2D.height = height; 20 canvas3D.width = width; 21 canvas3D.height = height; 22} 23 24function rand(range) { 25 return Math.floor(Math.random() * range); 26} 27 28function fillCanvas(ctx2d, canvas2d) { 29 ctx2d.fillStyle = "rgba(" + rand(255) + "," + rand(255) + "," + rand(255) + "," + rand(255) + ")"; 30 ctx2d.fillRect(0, 0, canvas2d.width, canvas2d.height); 31} 32 33function uploadCanvas2DToWebGLTexture() { 34 if (gl) { 35 var tex = gl.createTexture(); 36 gl.bindTexture(gl.TEXTURE_2D, tex); 37 38 var start = PerfTestRunner.now(); 39 for (var i = 0; i < MEASURE_DRAW_TIMES; i++) { 40 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas2D); 41 } 42 gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array(4)); 43 gl.deleteTexture(tex); 44 count++; 45 46 var elapsedTime = PerfTestRunner.now() - start; 47 PerfTestRunner.measureValueAsync(MEASURE_DRAW_TIMES * 1000 / elapsedTime); 48 } else 49 PerfTestRunner.measureValueAsync(0); 50 if (count < MAX_COUNT) 51 requestAnimationFrame(uploadCanvas2DToWebGLTexture); 52} 53 54function onCompletedRun() { 55 count = MAX_COUNT; 56} 57 58window.onload = function () { 59 PerfTestRunner.prepareToMeasureValuesAsync({done: onCompletedRun, unit: 'runs/s', 60 description: "This bench test checks the speed on uploading 2d Canvas(1024x1024) to Webgl Texture(1024x1024)."}); 61 setSize(1024, 1024); 62 fillCanvas(ctx2D, canvas2D); 63 uploadCanvas2DToWebGLTexture(); 64} 65 66</script> 67</body> 68</html> 69