1<!DOCTYPE html>
2<html>
3<!--
4Copyright (c) 2013 The Chromium Authors. All rights reserved.
5Use of this source code is governed by a BSD-style license that can be
6found in the LICENSE file.
7-->
8<head>
9  <meta charset="UTF-8">
10  <title>Rotating Cube</title>
11  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,700">
12  <link href="/static/styles/style.css" rel="stylesheet">
13  <script type="text/javascript" src="example.js"></script>
14</head>
15<body class="demo">
16
17  <header>
18    <h1>Rotating Cube</h1>
19  </header>
20
21  <section>
22    <div class="intro">
23      <p>
24        An example showing rendering via OpenGLES2 in a Native Client module.
25      </p>
26      <p class="note">
27        Note: the C++ source code of this demo is available in the Native Client SDK (<tt>examples/api/graphics_3d</tt>).
28      </p>
29      <p class="note">
30        FPS: <span id="fps">0</span>
31      </p>
32
33      <div class="panel panel-info">
34        <h2>Controls</h2>
35        <div class="panel-body">
36          <table id="config" cellspacing="0" cellpadding="0">
37            <tbody>
38              <tr>
39                <td class="name">X Angle:</td>
40                <td class="value">
41                  <input type="range" id="xAngle" min="0" max="360" step="1"
42                      value="0">
43                </td>
44              </tr>
45              <tr>
46                <td class="name">Y Angle:</td>
47                <td class="value">
48                  <input type="range" id="yAngle" min="0" max="360" step="1"
49                      value="0">
50                </td>
51              </tr>
52              <tr>
53                <td class="name">Animating:</td>
54                <td class="value">
55                  <label>
56                    off
57                    <input type="radio" id="animateOff" value="false">
58                  </label>
59                  <label>
60                    on
61                    <input type="radio" id="animateOn" value="true"
62                        checked="true">
63                  </label>
64                </td>
65              </tr>
66            </tbody>
67          </table>
68        </div>
69      </div>
70    </div>
71
72    <div class="Demo-body">
73      <div id="listener" class="Demo-content"></div>
74    </div>
75
76    <div id="loading-cover">
77      <div id="message">
78        <div id="statusField"></div>
79          <div id="progress" class="progress progress-striped active">
80            <div id="progress-bar" class="progress-bar"  role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
81            </div>
82          </div>
83        </div>
84      </div>
85    </div>
86
87  </section>
88  </div>
89</body>
90</html>
91