Permalink
Find file
156e4db Mar 5, 2014
@kripken @jazzzz
193 lines (162 sloc) 6.44 KB
<html>
<head>
<title>Bullet/WebGL Demo</title>
<script src="CubicVR.min.js" type="text/javascript"></script>
<style type="text/css">
body {
background-color: #ccc;
text-size-adjust: none;
}
</style>
<script src="shared.js"></script>
<script type="text/javascript">
// Main demo code
var boxes = [];
var lastFPS = 0;
var outElement = null;
var currFPS = 0, allFPS = 0;
function showFPS() {
if (!outElement) outElement = document.getElementById('out');
var now = Date.now();
if (now - lastFPS > 333) {
outElement.value = currFPS + ' / ' + allFPS;
lastFPS = now;
}
}
var FLOOR_SIZE = 100;
var FLOOR_HEIGHT = -56
var physicsWorker = null;
var nextPhysicsWorker = new Worker('worker.js');
// CubicVR code
function startUp(NUM) {
var NUMRANGE = [];
while (NUMRANGE.length < NUM) NUMRANGE.push(NUMRANGE.length+1);
document.getElementById('postdiv').innerHTML = '(' + NUM + ' cubes)';
//document.getElementById('before').style.visibility = 'hidden';
document.getElementById('during').style.visibility = 'visible';
var canvas = document.getElementById("canvas");
canvas.width = screen.width*0.75;
canvas.height = screen.height*0.50;
var gl = CubicVR.init(canvas);
if (!gl) {
alert("Sorry, no WebGL support :(");
return;
};
var quaternion = new CubicVR.Quaternion;
var scene = new CubicVR.Scene(canvas.width, canvas.height, 70);
var light = new CubicVR.Light({
type:CubicVR.enums.light.type.POINT,
intensity: 0.9,
areaCeiling: 80,
areaFloor: FLOOR_HEIGHT,
areaAxis: [15, 10],
distance: 60,
mapRes: 1024
});
scene.bindLight(light);
scene.camera.position = [0, 2.4, 17];
scene.camera.target = [0, 2.4, 0];
var boxMaterials = [];
var boxMeshes = [];
for (var i = 0; i < 5; i++) {
boxMaterials[i] = new CubicVR.Material({
textures: {
color: new CubicVR.Texture("cube" + (i+1) + ".jpg")
}
});
boxMeshes[i] = new CubicVR.primitives.box({
size: 2.0,
material: boxMaterials[i],
uvmapper: {
projectionMode: CubicVR.enums.uv.projection.CUBIC,
scale: [2, 2, 2]
}
}).calcNormals().triangulateQuads().compile().clean();
}
for (var i = 0; i < NUM; i++) {
boxes[i] = new CubicVR.SceneObject({ mesh: boxMeshes[Math.floor(Math.random()*5)], position: [0, -10000, 0] });
scene.bindSceneObject(boxes[i], true);
}
var floorMaterial = new CubicVR.Material({
textures: {
color: new CubicVR.Texture("cube3.jpg")
}
});
var floorMesh = new CubicVR.primitives.box({
size: FLOOR_SIZE,
material: floorMaterial,
uvmapper: {
projectionMode: CubicVR.enums.uv.projection.CUBIC,
scale: [4, 4, 4]
}
}).calcNormals().triangulateQuads().compile().clean();
var floor_ = new CubicVR.SceneObject({ mesh: floorMesh, position: [0, FLOOR_HEIGHT, 0] });
scene.bindSceneObject(floor_, true);
// Worker
if (physicsWorker) physicsWorker.terminate();
physicsWorker = nextPhysicsWorker;
nextPhysicsWorker = null;
if (!physicsWorker) physicsWorker = new Worker('worker.js');
physicsWorker.onmessage = function(event) {
var data = event.data;
if (data.objects.length != NUM) return;
for (var i = 0; i < NUM; i++) {
var physicsObject = data.objects[i];
var renderObject = boxes[i];
renderObject.position[0] = physicsObject[0];
renderObject.position[1] = physicsObject[1];
renderObject.position[2] = physicsObject[2];
quaternion.x = physicsObject[3];
quaternion.y = physicsObject[4];
quaternion.z = physicsObject[5];
quaternion.w = physicsObject[6];
renderObject.rotation = quaternion.toEuler();
}
currFPS = data.currFPS;
allFPS = data.allFPS;
};
physicsWorker.postMessage(NUM);
// Main loop
var mvc = new CubicVR.MouseViewController(canvas, scene.camera);
CubicVR.MainLoop(function(timer, gl) {
var dt = timer.getLastUpdateSeconds();
scene.render();
showFPS();
});
}
</script>
</head>
<body onload="document.getElementById('during').style.visibility = 'hidden'">
<center>
<h2>ammo.js benchmark</h2>
<canvas id="canvas" width="1" height="1"></canvas>
<br>
<div id="before">
<form>
Boxes:
<select name="boxes">
<option value="10">10</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="500" selected>500</option>
<option value="750">750</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
<option value="2500">2500</option>
</select>
<input type="button" value="go!" onclick="startUp(boxes.value);">
</form>
</div>
<div id="during"><div>Physics FPS (current / stable): <input type="text" id="out" readonly="1" size="7"></div><div id="postdiv"></div></div>
<p>
This is <b><a href="https://github.com/kripken/ammo.js">ammo.js</a></b>, a port of
the <b><a href="http://www.bulletphysics.com">Bullet physics engine</a></b> from C++ to JavaScript
using <b><a href="http://emscripten.org">Emscripten</a></b> in
<b><a href="http://asmjs.org">asm.js</a></b> mode. WebGL rendering in this demo is done using
<b><a href="https://github.com/cjcliffe/CubicVR.js/">CubicVR.js</a></b>.
</p>
</center>
</body>
</html>