fullscreen.html revision 0529e5d033099cbfc42635f6f6183833b09dff6e
1<!DOCTYPE html> 2<html> 3 <!-- 4 Copyright (c) 2014 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="fullscreen.css"> 14 <script type="text/javascript" src="NaClAM.js"></script> 15 <script type="text/javascript" src="NaClAMBullet.js"></script> 16 <script type="text/javascript" src="//storage.googleapis.com/gonacl/pnacl-demo-bullet/three.min.js"></script> 17 <script type="text/javascript" src="scene.js"></script> 18 <script type="text/javascript" src="world.js"></script> 19 <script type="text/javascript" src="scenes.js"></script> 20 21 <script type="text/javascript"> 22 var expandoClosedMsg = 'Click for options'; 23 var expandoOpenMsg = '×'; 24 var expandoClosed = true; 25 26 function toggleExpando() { 27 var expandoEl = document.getElementById('title-box-expando'); 28 var toggleButton = document.getElementById('title-box-toggle-button'); 29 toggleButton.classList.toggle('open'); 30 expandoEl.classList.toggle('open'); 31 expandoClosed = !expandoClosed; 32 if (expandoClosed) 33 toggleButton.textContent = expandoClosedMsg; 34 else 35 toggleButton.textContent = expandoOpenMsg; 36 } 37 </script> 38 </head> 39 40 <body> 41 <section> 42 <div id="title-box"> 43 <h1>Bullet Physics in Portable Native Client</h1> 44 <span id="title-box-toggle-button" onclick="toggleExpando()"></span> 45 <script type="text/javascript"> 46 var toggleButton = document.getElementById('title-box-toggle-button'); 47 toggleButton.textContent = expandoClosedMsg; 48 </script> 49 <div id="title-box-expando"> 50 <p> 51 <a href="http://bulletphysics.org/wordpress">Bullet Physics</a> is an 52 open-source real-time phsyics simulation. 53 </p> 54 <p> 55 <a href="https://developers.google.com/native-client/dev/">Native 56 Client</a> is a sandbox for running compiled C and C++ code in the 57 browser efficiently and securely. 58 </p> 59 <h2>Scenes</h2> 60 <div> 61 <div><button type="button" id="jenga10">Block Tower (10 blocks)</button></div> 62 <div><button type="button" id="jenga20">Block Tower (20 blocks)</button></div> 63 <div><button type="button" id="randomCube250">Random Cubes (250)</button></div> 64 <div><button type="button" id="randomCube1000">Random Cubes (1000)</button></div> 65 <div><button type="button" id="randomCube2000">Random Cubes (2000)</button></div> 66 <div><button type="button" id="randomCylinder500">Random Cylinders (500)</button></div> 67 <div><button type="button" id="randomShapes">Random Shapes</button></div> 68 <div><button type="button" id="reload">Reload Scene</button></div> 69 </div> 70 <p class="small"> 71 Simulation Time: <span id="simulationTime">0</span>μs 72 <br> 73 FPS: <span id="fps">0</span> 74 </p> 75 </div> 76 </div> 77 78 <div id="listener"> 79 <div id="rendererContainer"></div> 80 </div> 81 82 <div id="loading-cover"> 83 <div id="message"> 84 <div id="statusField"></div> 85 <div id="progress" class="progress progress-striped active"> 86 <div id="progress-bar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"> 87 </div> 88 </div> 89 </div> 90 </div> 91 </section> 92 93 <script type="text/javascript" src="main.js"></script> 94 </body> 95</html> 96