基於HTML5的WebGL結合Box2DJS物理引擎應用

上篇咱們基於HT for Web呈現了A* Search Algorithm的3D尋路效果，這篇咱們將採用HT for Web 3D來呈現Box2DJS物理引擎的碰撞效果，同上篇其實Box2DJS只是二維的平面碰撞物理引擎，但一樣經過3D的呈現能讓人更直觀的體驗到碰撞效果，先上張最終例子效果圖：http://hightopo.com/demo/box2djs/ht-box2d-demo.html

Box2D最先是Erin Catto在GDC大會上的一個展現例子，後來不斷完善成C++的開源物理引擎庫，這些年了衍生出Java、ActionScript以及JS等版本，被普遍應用在遊戲領域。說其豐富的確很豐富，說亂也夠亂的，找個Box2D的JS版就有N多選擇，並且不一樣版本API還有差別，可參考這裏的對比 http://stackoverflow.com/questions/7628078/which-box2d-javascript-library-should-i-use

雖然版本較多有點亂，但各個版本的基本原理和API都相似，如下爲我基於Box2DJS融合HT for Web寫的例子代碼。Box2D有不少參數功能點，這裏例子咱們僅呈現最基礎簡單的要素，主要讓你們理解Box2DJS引擎的基本使用，以及呈現上如何與HT for Web結合。

function init() {
	dm = new ht.DataModel();
	g3d = new ht.graph3d.Graph3dView(dm);
	g3d.setGridVisible(true);
	g3d.addToDOM();
	g3d.setEye(100, 50, 150);

	// Define the world
	var gravity = new b2Vec2(0, -100);
	var doSleep = false;
	world = new b2World(gravity, doSleep);

	createNode([0, -3, 0], [100, 6, 100], false, 0);
	createNode([-100, -50, 0], [400, 6, 100], false, -Math.PI/8);
	createNode([100, -50, 0], [50, 6, 100], false, Math.PI/6);

	createNode([1, 50, 0], [10, 10, 10], true);
	createNode([-1, 90, 0], [10, 10, 10], true);

	render();
}

function createNode(p3, s3, dynamic, angle) {
	var node = new ht.Node();
	node.p3(p3);
	node.s3(s3);               
	node.setRotationZ(angle == null ? Math.PI * Math.random() : angle);
	dm.add(node);

	var fixDef = new b2FixtureDef();
	if (dynamic) {
		fixDef.density = 0.5;
		fixDef.friction = 0.5;
		fixDef.restitution = 0.5;                    
		node.s({
			'all.color': 'red',
			'batch': 'dynamic'
		});
	} else {
		fixDef.density = 0.0;                    
	}

	var shape = new b2PolygonShape();
	shape.SetAsBox(s3[0] / 2, s3[1] / 2);
	fixDef.shape = shape;

	var bodyDef = new b2BodyDef();
	bodyDef.type = dynamic ? b2Body.b2_dynamicBody : b2Body.b2_staticBody;
	bodyDef.position.Set(p3[0], p3[1]);
	bodyDef.angle = node.getRotationZ();
	bodyDef.userData = node;

	world.CreateBody(bodyDef).CreateFixture(fixDef);
}

count = 0
function render() {
	count++;
	if(count % 10 === 0){
		createNode([-1, 50, 0], [10, 10, 10], true);
	}                
	world.Step(1 / 60, 10, 10);
	var list = world.GetBodyList();
	while (list) {                                              
		var node = list.m_userData;
		if(node){
			var position = list.GetPosition();
			if(position.y < -150 || g3d.isSelected(node)){
				dm.remove(node);
				world.DestroyBody(list);
			}else{
				node.p3(position.x, position.y, 0);
				node.setRotationZ(list.GetAngle());                            
			}                                              
		}                    
		list = list.GetNext();
	}                    
	requestAnimationFrame(render);
}

以上代碼在createNode中即構建的HT for Web的Node對象，同時構建了Box2D的Body對象，並經過userData屬性關聯在一塊兒，在requestAnimationFrame的渲染過程，先經過world.Step(1 / 60, 10, 10);更新物理引擎的內部運算，而後遍歷全部Body元素將運算結果，也就是Body的位置和旋轉角度等信息同步到HT for Web的Node對象，從而達到了HT for Web和Box2DJS的強強結合各施其才。

例子中物體掉落到-150如下我就刪除了Box2DJS以及HT的DataModel中對應的數據元素，同時選中圖元也會自動刪除圖元，count % 10 === 0 這個用來沒十次刷新產生一個新的立方體。Box2D還能夠玩出不少花樣，若是數據量大也能夠考慮參考《3D拓撲自動佈局之Web Workers篇》，將Box2DJS的密集運算在WebWork中執行，我沒評估過性能的提高幅度，數據量大時WebWork和GUI線程的數據序列化傳遞也會有負擔需注意，最終的例子3D效果玩起來仍是挺有趣的：http://v.youku.com/v_show/id_XODM0OTQ0NzEy.html

http://hightopo.com/demo/box2djs/ht-box2d-demo.html