<!DOCTYPE html>
<!--
* Copyright 2014 The Chromium OS Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
-->
<html>
<head>
<title>WebGL Clear Test</title>
<script type="text/javascript" src="tdl/base.js"></script>
<script type="text/javascript">
tdl.require('tdl.fps');
tdl.require('tdl.webgl');
window.onload = initialize;
var g_fpsTimer; // object to measure frames per second
function initialize() {
var then = 0.0;
var last = 0.0;
var fpsElem = document.getElementById('fps');
var canvas = document.getElementById('canvas');
var w = 1024;
var h = 1024;
canvas.width = w;
canvas.height = h;
tdl.fps.NUM_FRAMES_TO_AVERAGE = 120;
g_fpsTimer = new tdl.fps.FPSTimer();
gl = tdl.webgl.setupWebGL(canvas, {alpha:false,antialias:false});
if (!gl) {
return false;
}
gl.clearColor(
Math.random(), Math.random(), Math.random(), 1.0);
gl.viewport(0, 0, w, h);
function render() {
tdl.webgl.requestAnimationFrame(render, canvas);
var now = (new Date()).getTime();
var elapsedTime = 0.0;
if (then != 0.0) {
elapsedTime = now - then;
}
then = now;
g_fpsTimer.update(elapsedTime * 0.001);
fpsElem.innerHTML = g_fpsTimer.averageFPS;
// Regulate how often we change the clear color over time. If we
// were to change the color every frame then, depending on the
// FPS rate, this would potentially happen very very fast and is
// really irritating to watch. I'm not sure how much impact
// changing the color really has on performance, if any.
// Nonetheless, changing the color periodically gives us a
// visual cue that somethings actually happening.
if (now - last > 500) {
gl.clearColor(
Math.random(), Math.random(), Math.random(), 1.0);
last = now;
}
// Clear color and depth buffers
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
}
render();
return true;
}
</script>
</head>
<body>
<div>fps: <span id="fps"></span></div>
<canvas id="canvas" width="1024" height="1024" style="width: 100%; height: 100%;"></canvas>
</body>
</html>