diff options
Diffstat (limited to 'demos/webgl/demo.html')
| -rw-r--r-- | demos/webgl/demo.html | 196 |
1 files changed, 0 insertions, 196 deletions
diff --git a/demos/webgl/demo.html b/demos/webgl/demo.html deleted file mode 100644 index f93d54b5..00000000 --- a/demos/webgl/demo.html +++ /dev/null @@ -1,196 +0,0 @@ -<html> - <head> - <title>Bullet/WebGL Demo</title> - <script src="CubicVR.js" type="text/javascript"></script> - <script type="text/javascript">var arguments = [];</script> - <script src="bullet_1_1_q1.ccsimple.js" type="text/javascript"></script> - <script src="bullet_glue.js" type="text/javascript"></script> - <style type="text/css"> - body { background-color: #eee; } - </style> - - <script type="text/javascript"> - /** - Steps to create the demo: - - * Run the bullet test in the test runner, using HelloWorld.cpp from this directory, get the generated .js file - * Preferably use optimizations, etc. - * Disable typed arrays, probably. - * Prevent the compiled bullet from running main(), we don't need it anymore. For example, put a |return;| at the beginning of callMain(). - * Fix an inttoptr issue in compiled bullet, if built with QUANTUM == 1 (division by 16 should be 4) - * Go to the demos/webgl directory - * Run the demangler: python ../../third_party/demangler.py bullet_1_1_q1.js . > bullet.names - * Edit bullet_glue to use the right mangled names, with the output from the demangler - * Add some randomness to the initial cube positions by editing zz_prepare (search for 2.1 in the source) - * Optionally, run through closure compiler - */ - var NUM = 5; - var NUMRANGE = [1,2,3,4,5]; - - var boxes = []; - - function simulatePhysics(dt) { - simulateBulletDemo(dt); - - // Read bullet data into JS objects - var pos = [0,0,0]; - var quat = new CubicVR.Quaternion; - for (var i = 0; i < NUM; i++) { - readBulletObject(i+1, pos, quat); - var renderObject = boxes[i]; - renderObject.position[0] = pos[0]; - renderObject.position[1] = pos[1]; - renderObject.position[2] = pos[2]; - renderObject.rotation = quat.toEuler(); - } - } - - var dts = 0, num = 0, lastHUD = Date.now(); - - function showFPS(dt) { - var now = Date.now(); - dts += dt; - num++; - if (now - lastHUD > 333) { - document.getElementById('out2').innerHTML = '<b>FPS: ' + Math.ceil(1/(dts/num)) + '</b>'; - lastHUD = now; - dts = 0; - num = 0; - } - t = now; - } - - function startUp() { - var canvas = document.getElementById("canvas"); - canvas.width = screen.width*0.70; - canvas.height = screen.height*0.55; - - gl = CubicVR.GLCore.init(canvas, "CubicVR_Core.vs", "CubicVR_Core.fs"); - - if (!gl) { - alert("Sorry, no WebGL support :("); - return; - }; - - var scene = new CubicVR.Scene(canvas.width, canvas.height, 70); - var light = new CubicVR.Light({ - type: CubicVR.enums.light.type.POINT, - method: CubicVR.enums.light.method.DYNAMIC, - diffuse: [1, 1, 1], - specular: [0.25, 0.25, 0.25], - position: [0, 5, 20], - distance: 200 - }); - scene.bindLight(light); - - scene.camera.position = [0, 2.4, 17]; - scene.camera.target = [0, 2.4, 0]; - - var boxMaterials = NUMRANGE.map(function(i) { - return new CubicVR.Material({ - textures: { - color: new CubicVR.Texture("cube" + i + ".jpg") - } - }); - }); - - var boxMeshes = boxMaterials.map(function(boxMaterial) { - return new CubicVR.primitives.box({ - size: 2.0, - material: boxMaterial, - uvmapper: { - projectionMode: CubicVR.enums.uv.projection.CUBIC, - scale: [2, 2, 2] - } - }).triangulateQuads().compile().clean(); - }); - - for (var i = 0; i < NUM; i++) { - boxes[i] = new CubicVR.SceneObject({ mesh: boxMeshes[i], position: [0, -10000, 0] }); - scene.bindSceneObject(boxes[i], true); - } - - - var FLOOR_SIZE = 100; - 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: [FLOOR_SIZE, FLOOR_SIZE, FLOOR_SIZE] - } - }).triangulateQuads().compile().clean(); - - var floor_ = new CubicVR.SceneObject({ mesh: floorMesh, position: [0, -FLOOR_SIZE/2-6, 0] }); - scene.bindSceneObject(floor_, true); - - - - - var totalTime = 0; - var lastCenter = [0,0,0]; - var timeCenterFixed = 0; - function noticeCenter(dt) { - totalTime += dt; - var currCenter = [0,0,0]; - for (var i = 0; i < NUM; i++) { - currCenter = CubicVR.vec3.add(currCenter, boxes[i].position); - } - currCenter = CubicVR.vec3.multiply(currCenter, 1/NUM); - - var diff = CubicVR.vec3.length(CubicVR.vec3.subtract(currCenter, lastCenter))/dt; - if (diff < 0.01) { - timeCenterFixed += dt; - if (timeCenterFixed >= 1.0 && totalTime > 5.0 && - (currCenter[1] < -4.99 || totalTime > 11.0) ) restart(); - } else { - timeCenterFixed = 0; - } - lastCenter = currCenter; - } - - var mvc = new CubicVR.MouseViewController(canvas, scene.camera); - - CubicVR.MainLoop(function(timer, gl) { - var dt = timer.getLastUpdateSeconds(); - - simulatePhysics(dt); - noticeCenter(dt); - scene.render(); - showFPS(dt); - }); - } - - function restart() { - totalTime = 0; - restartBullet(); - } - </script> - </head> - <body onload="startUp()"> - <center> - <h2>Bullet/WebGL Demo</h2> - <!--form onsubmit="restart(); return false"> - <input type="submit" value="restart"> - </form--> - - <canvas id="canvas" width="600" height="500"></canvas> - <br><br> - <div id="out2">waka</div> - <p> - This is the <b><a href="http://www.bulletphysics.com">Bullet physics engine</a></b>, compiled from C++ to JavaScript using <b><a href="http://emscripten.org">Emscripten</a></b>, with rendering by <b><a href="https://github.com/cjcliffe/CubicVR.js/">CubicVR.js</a></b> using WebGL. - </p><p> - <ul> - <li>Adjust the view by dragging the mouse over the canvas.</li> - <li>Note that the first drop of the cubes may be slow - give the JITs time to warm up.</li> - </ul> - </p> - </center> - </body> -</html> - |