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>&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>
103