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

原创 2015年12月08日 00:15:02

上篇我们基于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结合。

以下代码在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的强强结合各施其才。

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);
}

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

例子中物体掉落到-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

Screen Shot 2014-11-25 at 8.05.11 PM

Box2DJS入门教程

本文的主要目的是给大家介绍如何使用Box2DJS库在浏览器中创建一个物理世界,本文为基本入门教程,如果你想更深入的了解Box2D的功能,请看本文结尾“相关资源”中的“Box2D v2.0.1 用户手册...
  • xiaoquanhuang
  • xiaoquanhuang
  • 2011年04月09日 13:36
  • 5584

HTML5游戏开发-Box2dWeb应用(一)-创建各种各样的刚体

本篇开始,会介绍lufylegend-1.4.0的新功能,怎样结合box2dweb创建一个物理世界以及这个物理世界里的各种刚体准备工作首先你需要下载html5开源库件lufylegend-1.4.0h...
  • lufy_Legend
  • lufy_Legend
  • 2012年06月13日 00:30
  • 22956

[HTML5]使用Box2dWeb模拟飞行箭矢

Box2d是一个2D游戏物理引擎,由Erin Catto开发,于2007年发布。很多2D游戏都用过Box2d,其中最有名的自然是愤怒的小鸟。Box2d本身是C++编写,但在不同平台都有它的衍生版本,像...
  • RaymondCode
  • RaymondCode
  • 2013年03月18日 09:14
  • 5749

Box2D.js简易示例

Box2dWeb example //在页面加载完毕后启动整个Box2D程序 function init() { /...
  • MAILLIBIN
  • MAILLIBIN
  • 2015年09月18日 10:45
  • 878

【HTML5物理小Demo】用Box2dWeb实现锁链+弹簧效果

最近开始研究Box2dweb,Box2dweb是一款物理引擎,主要是对物理刚体和关节连接进行了封装,box2dweb很强大当然也有些复杂,不过幸好lufylegend.js做了这方面的封装,在制作时如...
  • yorhomwang
  • yorhomwang
  • 2014年02月05日 16:47
  • 12882

box2d-web.js

  • 2015年04月09日 16:40
  • 420KB
  • 下载

webgl开源三维引擎的选择

webgl发展的很快,可谓日新月异,所以下面的这些引擎过一个月,半年可能就不是现在这样了,对应的连接地址以方便查看比较。 一。小场景的开源三维js引擎 1.babylonjs:http://www....
  • lh1162810317
  • lh1162810317
  • 2016年03月08日 16:43
  • 6606

JavaScript 的物理引擎对比

在本文中,我们将对比看一下当前三个非常流行的和一个目前还在开发中的JavaScript 物理引擎库,分别是: box2dweb,Ammo.js,JigLibJS 以及 Connon.js。我们会简短的...
  • wang16510
  • wang16510
  • 2013年06月04日 17:29
  • 13356

three.js学习笔记 Physijs物理引擎

Three.js可以通过使用Physijs库向场景中加入物理效果。这个库是基于著名的物理引擎ammo.js。 Physiji 1.导入库文件 Phy...
  • u014658748
  • u014658748
  • 2016年06月29日 11:12
  • 3246

创建基础场景---基于WebGL的H5 3D游戏引擎BabylonJS

在本教程里, 我们将用Babylon.js创建一个基础的3D场景.具有两个造型物的基础场景在你开始之前,请确定你有个支持WebGL的浏览器 (比如:IE11+, 火狐4+, 谷歌浏览器9+, Oper...
  • AceWay
  • AceWay
  • 2016年05月08日 21:19
  • 5356
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:基于HTML5的WebGL结合Box2DJS物理引擎应用
举报原因:
原因补充:

(最多只允许输入30个字)