<!--

* Copyright 2010, Google Inc.

* All rights reserved.

*

* Redistribution and use in source and binary forms, with or without

* modification, are permitted provided that the following conditions are

* met:

*

* * Redistributions of source code must retain the above copyright

* notice, this list of conditions and the following disclaimer.

* * Redistributions in binary form must reproduce the above

* copyright notice, this list of conditions and the following disclaimer

* in the documentation and/or other materials provided with the

* distribution.

* * Neither the name of Google Inc. nor the names of its

* contributors may be used to endorse or promote products derived from

* this software without specific prior written permission.

*

* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS

* "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT

* LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR

* A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT

* OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,

* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT

* LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,

* DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY

* THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT

* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE

* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

-->

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>WebGL SyncMark - Are you synced?</title>

<style>

html, body {

width: 100%;

height: 100%;

border: 0px;

padding: 0px;

margin: 5px;

background-color: white;

}

canvas {

background-color: #F0F;

}

#instructions {

background-color: #FFEEBB;

font-family: sans-serif;

padding: 4px;

}

</style>

<script type="text/javascript" src="../tdl/base.js"></script>

<script type="text/javascript">

tdl.require('tdl.webgl');

var gl;

var canvas;

var aspect;

var output = alert

var music = null

function mainloop() {

// Repeatedly run render(), attempt to hold 60 but the demo is

// framerate independent so we will still keep sync even if we

// lose frames.

function render() {

tdl.webgl.requestAnimationFrame(render, canvas);

var time = music.currentTime

gl.enable(gl.SCISSOR_TEST)

gl.clearColor(0, 0, 0, 1.0)

gl.scissor(0, 0, 200, 200)

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)

gl.clearColor(0, (time % 2.0) < 0.5 ? 1 : 0.2, 0, 1.0)

gl.scissor(50, 50, 100, 100)

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)

}

render();

}

function initializeGraphics() {

canvas = document.getElementById('render_area');

gl = tdl.webgl.setupWebGL(canvas);

gl = tdl.webgl.create3DContext(canvas)

if (!gl) {

return false;

}

// Set some sane defaults.

gl.disable(gl.BLEND);

gl.depthFunc(gl.LEQUAL);

gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

return true;

}

window.onload = function() {

if (initializeGraphics()) {

music = document.getElementById('soundtrack');

music.volume = 0.13;

music.play();

mainloop()

}

}

</script>

</head>

<body>

<audio id="soundtrack" src="beep.ogg" controls>

No support for the audio tag in this browser.

Get <a href="http://www.google.com/chrome">Google Chrome</a>.

</audio>

<br>

<div id="viewContainer">

<canvas id="render_area" width="200" height="200"></canvas>

</div>

<br>

<br>

<span id="instructions">

The green square should be visible exactly when a beep is heard.

<br>

Losing sync, either after a while or after seeking = <b>FAIL</b>

</span>

</body>

</html>