基于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结合。

以下代码在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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据结构与算法

Day3下午解题报告

预计分数:20+40+30=90 实际分数:40+90+60=190 再次人品爆发&&手感爆发&&智商爆发 谁能告诉我为什么T1数据这么水。。 谁能告诉我为什么...

3295
来自专栏落影的专栏

基于视锥体(平截体)的OpenGL ES性能优化

教程 OpenGLES入门教程1-Tutorial01-GLKit OpenGLES入门教程2-Tutorial02-shader入门 OpenGLES入门...

3117
来自专栏hightopo

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

1152
来自专栏施炯的IoT开发专栏

Alpha Blending and Alpha Channel on Windows Mobile

      2007年的时候,Alex在《Compelling UI's in NetCF anybody?》一文中,讲述了windows mobile 5平台...

20510
来自专栏深度学习之tensorflow实战篇

require(Rwordseg)分析案例展示(未去冠词以及无意义的词)

看网络上很多朋友都在用“Rwordseg”程序包进行分词练习。我也忍不住进行了一次实验。 首先,肯定是装程序包了,个人感觉是废话,纯凑字数。 如下是...

2774
来自专栏HT

数百个 HTML5 例子学习 HT 图形组件 – 3D建模篇

http://www.hightopo.com/demo/pipeline/index.html ? 《数百个 HTML5 例子学习 HT 图形组件 – Web...

27010
来自专栏章鱼的慢慢技术路

用OpenGL实现粒子的随机运动

1325
来自专栏华仔的技术笔记

SceneKitScene Kit 概要节点 (Nodes)光照动画开始用 Scene Kit 写游戏扩展默认渲染流程延时着色

3628
来自专栏木子昭的博客

机器学习三剑客之Matplotlab绘制条形图直方图饼图

? Matplotlib 是Python 2D绘图领域的基础套件,它让使用者将数据图形化,并提供多样化的输出格式。这里将会以四个小案例探索Matplotli...

3696
来自专栏HT

基于HT for Web 3D呈现Box2DJS物理引擎

上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎...

2489

扫码关注云+社区