native_client_sdk/src/gonacl_appengine/static/bullet/index.html

   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/css/out/site.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>&mu;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>