1 <!DOCTYPE html> 2 <!-- 3 * Copyright 2014 The Chromium OS Authors. All rights reserved. 4 * Use of this source code is governed by a BSD-style license that can be 5 * found in the LICENSE file. 6 --> 7 8 <html> 9 <head> 10 <title>WebGL Clear Test</title> 11 <script type="text/javascript" src="tdl/base.js"></script> 12 <script type="text/javascript"> 13 tdl.require('tdl.fps'); 14 tdl.require('tdl.webgl'); 15 16 window.onload = initialize; 17 18 var g_fpsTimer; // object to measure frames per second 19 20 function initialize() { 21 var then = 0.0; 22 var last = 0.0; 23 var fpsElem = document.getElementById('fps'); 24 var canvas = document.getElementById('canvas'); 25 var w = 1024; 26 var h = 1024; 27 28 canvas.width = w; 29 canvas.height = h; 30 31 tdl.fps.NUM_FRAMES_TO_AVERAGE = 120; 32 g_fpsTimer = new tdl.fps.FPSTimer(); 33 34 gl = tdl.webgl.setupWebGL(canvas, {alpha:false,antialias:false}); 35 if (!gl) { 36 return false; 37 } 38 39 gl.clearColor( 40 Math.random(), Math.random(), Math.random(), 1.0); 41 gl.viewport(0, 0, w, h); 42 43 function render() { 44 tdl.webgl.requestAnimationFrame(render, canvas); 45 46 var now = (new Date()).getTime(); 47 var elapsedTime = 0.0; 48 if (then != 0.0) { 49 elapsedTime = now - then; 50 } 51 then = now; 52 53 g_fpsTimer.update(elapsedTime * 0.001); 54 fpsElem.innerHTML = g_fpsTimer.averageFPS; 55 56 // Regulate how often we change the clear color over time. If we 57 // were to change the color every frame then, depending on the 58 // FPS rate, this would potentially happen very very fast and is 59 // really irritating to watch. I'm not sure how much impact 60 // changing the color really has on performance, if any. 61 // Nonetheless, changing the color periodically gives us a 62 // visual cue that somethings actually happening. 63 if (now - last > 500) { 64 gl.clearColor( 65 Math.random(), Math.random(), Math.random(), 1.0); 66 last = now; 67 } 68 69 // Clear color and depth buffers 70 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 71 } 72 73 render(); 74 75 return true; 76 } 77 </script> 78 </head> 79 <body> 80 <div>fps: <span id="fps"></span></div> 81 <canvas id="canvas" width="1024" height="1024" style="width: 100%; height: 100%;"></canvas> 82 </body> 83 </html> 84
