Monday, 6 August 2012

Playing with JavaScript - Three.js & Physijs

Web technologies are hot. Everyone is speaking about HTML5 even without a clear definition what HTML5 is. This especially after the latest announcement from WHATWG  and W3C and them driving to different directions.
So lately I have been also playing around with couple of JavaScript libraries, especially with the ones touching the areas of Graphics and Physics.

Getting started dead easy. This especially if selecting Three.js as your 3D library and Physijs as your physics lib. Three.js is an 3D library for dummies, abstracting things like camera, scene, materials, etc. and also includes features like shadow mapping through an simple definition. It also allows you to select which technology you want to use for rendering your scene. But most importantly it includes some really nice examples and its example folder is really a treasury.
Physijs is an plugin to this library to provide some basic physics - built on top of ammo.js which is a direct port of Bullet physics engine.

As starers, I was using these two libraries to build an simple application where you have cubes dropping to an heightmap and bouncing from there. Problem with this was the physics which didn't react correctly to my heightmap. Nicely enough Physijs it self just fixed this problem by introducing HeightfieldMesh which allowed physics to be interpreted correctly with  my simple heightmap (vs. PlaneMesh that I was originally using).

Anyway nothing special, just testing what you can do with these libraries. At this time attaching only an image of this demo appl as the performance with my example is _really_ bad (when calculating the physics for cubes hitting the heightmap, its only ~2fps).  Live demo, including sources from here.