<!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>