blob: 7af7346808f4c34e395cfb8f741174c378e916e3 [file] [log] [blame]
<html>
<!--
Copyright (c) 2013 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<head>
<title>Bullet Physics</title>
<script type="text/javascript" src="NaClAM.js"></script>
<script type="text/javascript" src="NaClAMBullet.js"></script>
<script type="text/javascript" src="http://commondatastorage.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>
<link href="/static/common.css" rel="stylesheet" type="text/css">
<style>
.main {
background-color: #fff;
}
#curtain {
background-color: rgba(0, 0, 0, 1.0);
}
#curtain.lift {
-webkit-transition: background-color 1s;
background-color: rgba(0, 0, 0, 0);
pointer-events: none;
}
.no-pointer-events {
pointer-events: none;
}
button {
display: block;
}
</style>
</head>
<body>
<div class="absolute-fill">
<div class="flex-container">
<div class="main absolute-fill-parent">
<div id="rendererContainer" class="absolute-fill"></div>
<div id="curtain" class="absolute-fill"></div>
<div class="absolute-fill no-pointer-events">
<div class="flex-container flex-column flex-justify-center">
<div id="message">
<div id="statusField"></div>
<progress id="progress"></progress>
</div>
</div>
</div>
</div>
<div class="sidebar">
<h1>Bullet Physics</h1>
<div id="config">
<button id="jenga10">Block Tower (10 blocks)</button>
<button id="jenga20">Block Tower (20 blocks)</button>
<button id="randomShapes">Random Shapes</button>
<button id="randomCube250">Random Cubes (250)</button>
<button id="randomCylinder500">Random Cylinders (500)</button>
<button id="randomCube1000">Random Cubes (1000)</button>
<button id="randomCube2000">Random Cubes (2000)</button>
<button id="reload">Reload Scene</button>
</div>
<ul>
<li>Click and drag an object to move it</li>
<li>Click and drag elsewhere to rotate the camera</li>
<li>Use the mousewheel to zoom in/out</li>
</ul>
<p class="small">
More info about Bullet Physics can be found at <a
href="http://bulletphysics.org/">http://bulletphysics.org</a>.
</p>
<p class="small">
This demo was implemented by <a
href="http://www.johnmccutchan.com">John McCutchan</a>. Read his
blog post about Native Client acceleration modules <a
href="http://www.johnmccutchan.com/2012/10/bullet-native-client-acceleration-module.html">here</a>,
and see the source for this demo <a
href="https://github.com/johnmccutchan/NaClAMBase">here</a>.
</p>
<p class="small">
Simulation time: <span id="simulationTime">0</span>&mu;s.
</p>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="main.js"></script>
</html>