index.html revision 5d1f7b1de12d16ceb2c938c56701a3e8bfa558f7
1<!DOCTYPE html> 2<html> 3 <!-- 4 Copyright (c) 2013 The Chromium Authors. All rights reserved. 5 Use of this source code is governed by a BSD-style license that can be 6 found in the LICENSE file. 7 --> 8 <head> 9 <meta charset="UTF-8"> 10 11 <title>Bullet Physics</title> 12 13 <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,700"> 14 <link href="/static/styles/style.css" rel="stylesheet"> 15 16 17 <script type="text/javascript" src="NaClAM.js"></script> 18 <script type="text/javascript" src="NaClAMBullet.js"></script> 19 <script type="text/javascript" src="//storage.googleapis.com/gonacl/pnacl-demo-bullet/three.min.js"></script> 20 <script type="text/javascript" src="scene.js"></script> 21 <script type="text/javascript" src="world.js"></script> 22 <script type="text/javascript" src="scenes.js"></script> 23 24 </head> 25 26 <body class="demo"> 27 28 <header> 29 <h1>Bullet Physics</h1> 30 31 </header> 32 33 <section> 34 <div class="intro"> 35 <p> 36 An example of the <a href="http://bulletphysics.org/" 37 target="_blank">Bullet Physics SDK</a> ported to Native Client, 38 using WebGL for rendering. 39 </p> 40 <p class="note"> 41 Example courtesy <a href="http://www.johnmccutchan.com" 42 target="_blank">John McCutchan</a>. Read his <a 43 href="http://www.johnmccutchan.com/2012/10/bullet-native-client-acceleration-module.html" 44 target="_blank">description</a> of the demo or browse the <a 45 href="https://github.com/johnmccutchan/NaClAMBase" 46 target="_blank">source</a>. 47 <br> 48 </p> 49 <p class="note"> 50 Simulation Time: <span id="simulationTime">0</span>μs 51 <br> 52 FPS: <span id="fps">0</span> 53 </p> 54 55 <div class="panel panel-info"> 56 57 <h2>Controls</h2> 58 59 <div class="panel-body"> 60 <ul> 61 <li><b>Click and drag</b> an object to move it</li> 62 <li><b>Click and drag</b> elsewhere to rotate the camera</li> 63 <li>Use the <b>mousewheel</b> to zoom in/out</li> 64 </ul> 65 </div> 66 67 <h2>Add Objects</h2> 68 69 <div class="panel-body"> 70 <button type="button" id="jenga10">Block Tower (10 blocks)</button> 71 <button type="button" id="jenga20">Block Tower (20 blocks)</button> 72 <button type="button" id="randomCube250">Random Cubes (250)</button> 73 <button type="button" id="randomCube1000">Random Cubes (1000)</button> 74 <button type="button" id="randomCube2000">Random Cubes (2000)</button> 75 <button type="button" id="randomCylinder500">Random Cylinders (500)</button> 76 <button type="button" id="randomShapes">Random Shapes</button> 77 <button type="button" id="reload">Reload Scene</button> 78 </div> 79 </div> 80 </div> 81 82 <div class="Demo-body"> 83 84 <div id="listener" class="Demo-content"> 85 <div id="rendererContainer"></div> 86 </div> 87 </div> 88 89 <div id="loading-cover"> 90 <div id="message"> 91 <div id="statusField"></div> 92 <div id="progress" class="progress progress-striped active"> 93 <div id="progress-bar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"> 94 </div> 95 </div> 96 </div> 97 </div> 98 </section> 99 100 <script type="text/javascript" src="main.js"></script> 101</body> 102</html> 103