| <!DOCTYPE html> |
| <html> |
| <!-- |
| Copyright (c) 2013 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Rotating Cube</title> |
| <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,700"> |
| <link href="/static/css/out/site.css" rel="stylesheet"> |
| <script type="text/javascript" src="example.js"></script> |
| </head> |
| <body class="demo"> |
| |
| <header> |
| <h1>Rotating Cube</h1> |
| </header> |
| |
| <section> |
| <div class="intro"> |
| <p> |
| An example showing rendering via OpenGLES2 in a Native Client module. |
| </p> |
| <p class="note"> |
| Note: the C++ source code of this demo is available in the Native Client SDK (<tt>examples/api/graphics_3d</tt>). |
| </p> |
| <p class="note"> |
| FPS: <span id="fps">0</span> |
| </p> |
| |
| <div class="panel panel-info"> |
| <h2>Controls</h2> |
| <div class="panel-body"> |
| <table id="config" cellspacing="0" cellpadding="0"> |
| <tbody> |
| <tr> |
| <td class="name">X Angle:</td> |
| <td class="value"> |
| <input type="range" id="xAngle" min="0" max="360" step="1" |
| value="0"> |
| </td> |
| </tr> |
| <tr> |
| <td class="name">Y Angle:</td> |
| <td class="value"> |
| <input type="range" id="yAngle" min="0" max="360" step="1" |
| value="0"> |
| </td> |
| </tr> |
| <tr> |
| <td class="name">Animating:</td> |
| <td class="value"> |
| <label> |
| off |
| <input type="radio" id="animateOff" value="false"> |
| </label> |
| <label> |
| on |
| <input type="radio" id="animateOn" value="true" |
| checked="true"> |
| </label> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| |
| <div class="Demo-body"> |
| <div id="listener" class="Demo-content"></div> |
| </div> |
| |
| <div id="loading-cover"> |
| <div id="message"> |
| <div id="statusField"></div> |
| <div id="progress" class="progress progress-striped active"> |
| <div id="progress-bar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| </section> |
| </div> |
| </body> |
| </html> |
