<!DOCTYPE html>
<html>
<!--
Copyright 2013 The Chromium Authors
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">
<meta http-equiv="origin-trial" content="AnnZaSfBggcmPxgNMYPXgW7tVBy3HoIkgSysHge4o7QT7U/n3Sr89HvKuJwNtPxgZ9Z/cs6TzbUy6F+glrMQngIAAABZeyJvcmlnaW4iOiJodHRwczovL2dvbmF0aXZlY2xpZW50LmFwcHNwb3QuY29tOjQ0MyIsImZlYXR1cmUiOiJQTmFDbCIsImV4cGlyeSI6MTU3NTQxNzU5OX0=">
<title>Bullet Physics</title>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,700">
<link href="/static/css/out/site.css" rel="stylesheet">
<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>
</head>
<body class="demo">
<header>
<h1>Bullet Physics</h1>
</header>
<section>
<div class="intro">
<p>
An example of the <a href="http://bulletphysics.org/"
target="_blank">Bullet Physics SDK</a> ported to Native Client,
using WebGL for rendering.
</p>
<p class="note">
Example courtesy <a href="http://www.johnmccutchan.com"
target="_blank">John McCutchan</a>. Read his <a
href="http://www.johnmccutchan.com/2012/10/bullet-native-client-acceleration-module.html"
target="_blank">description</a> of the demo or browse the <a
href="https://github.com/johnmccutchan/NaClAMBase"
target="_blank">source</a>.
<br>
</p>
<p class="note">
Simulation Time: <span id="simulationTime">0</span>μs
<br>
FPS: <span id="fps">0</span>
</p>
<div class="panel panel-info">
<h2>Controls</h2>
<div class="panel-body">
<ul>
<li><b>Click and drag</b> an object to move it</li>
<li><b>Click and drag</b> elsewhere to rotate the camera</li>
<li>Use the <b>mousewheel</b> to zoom in/out</li>
</ul>
</div>
<h2>Add Objects</h2>
<div class="panel-body">
<button type="button" id="jenga10">Block Tower (10 blocks)</button>
<button type="button" id="jenga20">Block Tower (20 blocks)</button>
<button type="button" id="randomCube250">Random Cubes (250)</button>
<button type="button" id="randomCube1000">Random Cubes (1000)</button>
<button type="button" id="randomCube2000">Random Cubes (2000)</button>
<button type="button" id="randomCylinder500">Random Cylinders (500)</button>
<button type="button" id="randomShapes">Random Shapes</button>
<button type="button" id="reload">Reload Scene</button>
</div>
</div>
</div>
<div class="Demo-body">
<div id="listener" class="Demo-content">
<div id="rendererContainer"></div>
</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>