| <!DOCTYPE html> |
| <html> |
| <!-- |
| Copyright (c) 2014 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>Bullet Physics</title> |
| |
| <link rel="stylesheet" href="fullscreen.css"> |
| <script type="text/javascript" src="NaClAM.js"></script> |
| <script type="text/javascript" src="NaClAMBullet.js"></script> |
| <script type="text/javascript" src="//storage.googleapis.com/gonacl/pnacl-demo-bullet/three.min.js"></script> |
| <script type="text/javascript" src="scene.js"></script> |
| <script type="text/javascript" src="world.js"></script> |
| <script type="text/javascript" src="scenes.js"></script> |
| |
| <script type="text/javascript"> |
| var expandoClosedMsg = 'Click for options'; |
| var expandoOpenMsg = '×'; |
| var expandoClosed = true; |
| |
| function toggleExpando() { |
| var expandoEl = document.getElementById('title-box-expando'); |
| var toggleButton = document.getElementById('title-box-toggle-button'); |
| toggleButton.classList.toggle('open'); |
| expandoEl.classList.toggle('open'); |
| expandoClosed = !expandoClosed; |
| if (expandoClosed) |
| toggleButton.textContent = expandoClosedMsg; |
| else |
| toggleButton.textContent = expandoOpenMsg; |
| } |
| </script> |
| </head> |
| |
| <body> |
| <section> |
| <div id="title-box"> |
| <h1>Bullet Physics in Portable Native Client</h1> |
| <span id="title-box-toggle-button" onclick="toggleExpando()"></span> |
| <script type="text/javascript"> |
| var toggleButton = document.getElementById('title-box-toggle-button'); |
| toggleButton.textContent = expandoClosedMsg; |
| </script> |
| <div id="title-box-expando"> |
| <p> |
| <a href="http://bulletphysics.org/wordpress">Bullet Physics</a> is an |
| open-source real-time phsyics simulation. |
| </p> |
| <p> |
| <a href="https://developers.google.com/native-client/dev/">Native |
| Client</a> is a sandbox for running compiled C and C++ code in the |
| browser efficiently and securely. |
| </p> |
| <h2>Scenes</h2> |
| <div> |
| <div><button type="button" id="jenga10">Block Tower (10 blocks)</button></div> |
| <div><button type="button" id="jenga20">Block Tower (20 blocks)</button></div> |
| <div><button type="button" id="randomCube250">Random Cubes (250)</button></div> |
| <div><button type="button" id="randomCube1000">Random Cubes (1000)</button></div> |
| <div><button type="button" id="randomCube2000">Random Cubes (2000)</button></div> |
| <div><button type="button" id="randomCylinder500">Random Cylinders (500)</button></div> |
| <div><button type="button" id="randomShapes">Random Shapes</button></div> |
| <div><button type="button" id="reload">Reload Scene</button></div> |
| </div> |
| <p class="small"> |
| Simulation Time: <span id="simulationTime">0</span>μs |
| <br> |
| FPS: <span id="fps">0</span> |
| </p> |
| </div> |
| </div> |
| |
| <div id="listener"> |
| <div id="rendererContainer"></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> |
| </section> |
| |
| <script type="text/javascript" src="main.js"></script> |
| </body> |
| </html> |
