文档章节

基于HTML5的WebGL结合Box2DJS物理引擎应用

xhload3d
 xhload3d
发布于 2015/12/07 10:46
字数 981
阅读 58
收藏 0

上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果,同上篇其实Box2DJS只是二维的平面碰撞物理引擎,但同样通过3D的呈现能让人更直观的体验到碰撞效果,先上张最终例子效果图:http://hightopo.com/demo/box2djs/ht-box2d-demo.html

Screen Shot 2014-11-25 at 8.06.57 PM

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

Screen Shot 2014-11-25 at 8.06.57 PM


© 著作权归作者所有

共有 人打赏支持
xhload3d
粉丝 179
博文 156
码字总数 318723
作品 0
崇明
精选9个值得学习的 HTML5 效果【附源码】

这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强、效果丰富的...

赵小宾
2014/11/27
0
0
基于HTML5实现的Heatmap热图3D应用

Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报、医疗成像、机房温度监控等行业,甚至应用于竞技体育领域的数据分析。 已有众多文章分享了生成Heatm...

xhload3d
2014/09/12
0
35
8个前沿的 HTML5 & CSS3 效果(附源码)

作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握。前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大...

wewelove
2014/08/08
0
0
开放的 Web 3D 绘图技术 - WebGL

WebGL是一个开放的Web 3D技术,WebGL不需要在浏览器安装插件,只要浏览器支持WebGL技术你就可以用 Javascript 进行编程. 区别于现在的Flash Player(2D)和Unity Player(3D). 这些浏览器包括 Ch...

eechen
2012/10/06
0
4
如何开启浏览器的WebGL功能?

最近发现很多朋友无法运行HTML5的一些应用或游戏,经询问得知,大部分因为浏览器的WebGL没有开启所导致,那么我们如何开启WebGL呢? 1、哪些浏览器支持WebGL 要运行WebGL,你必须有一个支持它...

山哥
2012/02/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java GC机制详解

垃圾收集 Garbage Collection 通常被称为“GC”,本文详细讲述Java垃圾回收机制。 导读: 1、什么是GC 2、GC常用算法 3、垃圾收集器 4、finalize()方法详解 5、总结--根据GC原理来优化代码 ...

小刀爱编程
17分钟前
1
0
ORACEL学习--理解over()函数

二、理解over()函数 1.1、两个order by的执行时机 分析函数是在整个sql查询结束后(sql语句中的order by的执行比较特殊)再进行的操作, 也就是说sql语句中的order by也会影响分析函数的执行结果...

spinachgit
19分钟前
1
0
抽象语法树

import asttree = ast.parse('def hello_word(): print("hello world!")')def hell_word(): print(1)print(ast.dump(tree)) 语法树 可以基于这个实现另外一种编程语言...

colin_86
20分钟前
1
0
Akka查询设备组《fourteen》译

加入以下依赖到项目中: 介绍: 到目前为止,我们看到的会话模式很简单,因为它们要求Actor保持很少或没有状态。 特别: 设备actor返回一个读数,不需要更改状态。 记录温度,更新单个字段。...

woshixin
27分钟前
1
0
wait、notify、notifyAll 的用法

wait()、notify()、notifyAll()是三个定义在Object类里的方法,用来控制线程的状态。这三个方法最终调用的都是jvm的native方法, 随着jvm运行平台的不同可能有些许差异。 wait(): 使持有该对...

noob_fly
29分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部