文档章节

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

xhload3d
 xhload3d
发布于 2015/12/08 00:12
字数 938
阅读 75
收藏 4
点赞 0
评论 0

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


© 著作权归作者所有

共有 人打赏支持
xhload3d
粉丝 175
博文 147
码字总数 286340
作品 0
崇明
《WebGL编程指南》学习笔记——2.使用元素

《WebGL编程指南》学习笔记——2.使用< canvas >元素 上一节初步认识了WebGL,这一小节我们来开始学习使用< canvas >元素绘制二维图形 WebGL编程指南学习笔记2使用 canvas 元素 下小节我们正...

hushhw ⋅ 2017/12/16 ⋅ 0

白鹭引擎和layabox哪个好用,哪个技术更成熟 ?

作者:匿名用户 链接:https://www.zhihu.com/question/37819832/answer/104230057 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。...

wangyihero8 ⋅ 04/11 ⋅ 0

扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂 ⋅ 06/01 ⋅ 0

实战分享:淘宝Web 3D应用与游戏开发

大家下午好!我们今天讲个比较有意思的话题,这个话题在业界被谈及得比较少。大家在座有做过移动端开发的同学吗?请举个手,人还挺多的。那做过3D应用的同学请举个手,有用过Threejs的请举个...

技术小能手 ⋅ 05/31 ⋅ 0

《WebGL编程指南》学习笔记——4.绘制一个点

《WebGL编程指南》学习笔记——4.绘制一个点 之前,我们学习了如何建立一个WebGL程序,如何使用一些简单的WebGL相关函数。这一节,我们进一步在一个示例程序中绘制一个最简单的图形:一个点。...

hushhw ⋅ 2017/12/24 ⋅ 0

三角形的 N 种画法与浏览器的开放世界

最近,我完全沉迷在了任天堂 Switch 上的《塞尔达传说:荒野之息》里,以至于专栏都快要停更了(罪过罪过)。大概每个塞尔达玩家都会有这个疑问,那就是 这个游戏为什么这么好玩?! 非常有意...

doodlewind ⋅ 05/02 ⋅ 0

WebGL 可视化引擎 - CesiumJS

Cesium 是通过 Web 浏览器创建 3D 地球和 2D 地图的 JavaScript 库,无需任何插件。Cesium 使用 WebGL 来进行硬件加速图形化;跨平台、跨浏览器;并且针对动态数据进行可视化。 Cesium 基于 ...

匿名 ⋅ 2015/03/25 ⋅ 2

WEB GIS 开发框架 mapbox-gl-js v0.46.beta1 发布

WEB GIS 开发框架 mapbox-gl-js v0.46.beta1 已发布。 Mapbox GL JS 是一个 JavaScript 库,使用 WebGL 渲染交互式矢量瓦片地图和栅格瓦片地图。WebGL 渲染意味着高性能,MapboxGL 能够渲染大...

达尔文 ⋅ 06/15 ⋅ 0

WebGL编程指南(2)绘制和变换三角形

书本源代码 https://download.csdn.net/download/qfire/10371055 2.1 绘制多个点 不管三维模型的形状多么复杂,其基本组成部分都是三角形,只不过复杂的模型由更多的三角形构成而已。 WebGL提...

qfire ⋅ 04/24 ⋅ 0

AR/VR 开发工具 Amazon Sumerian 正式上线

去年 AWS 赶在 re:Invent 大会前,推出 AR/VR 开发工具 Amazon Sumerian,让开发者可以在 Oculus Rift、HTC Vive、iOS 移动装置,甚至网页浏览器环境制作3D、虚拟现实或增强现实(VR/AR)应用...

雨田桑 ⋅ 05/18 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring | IOC AOP 注解 简单使用

写在前面的话 很久没更新笔记了,有人会抱怨:小冯啊,你是不是在偷懒啊,没有学习了。老哥,真的冤枉:我觉得我自己很菜,还在努力学习呢,正在学习Vue.js做管理系统呢。即便这样,我还是不...

Wenyi_Feng ⋅ 今天 ⋅ 0

博客迁移到 https://www.jianshu.com/u/aa501451a235

博客迁移到 https://www.jianshu.com/u/aa501451a235 本博客不再更新

为为02 ⋅ 今天 ⋅ 0

win10怎么彻底关闭自动更新

win10自带的更新每天都很多,每一次下载都要占用大量网络,而且安装要等得时间也蛮久的。 工具/原料 Win10 方法/步骤 单击左下角开始菜单点击设置图标进入设置界面 在设置窗口中输入“服务”...

阿K1225 ⋅ 今天 ⋅ 0

Elasticsearch 6.3.0 SQL功能使用案例分享

The best elasticsearch highlevel java rest api-----bboss Elasticsearch 6.3.0 官方新推出的SQL检索插件非常不错,本文一个实际案例来介绍其使用方法。 1.代码中的sql检索 @Testpu...

bboss ⋅ 今天 ⋅ 0

informix数据库在linux中的安装以及用java/c/c++访问

一、安装前准备 安装JDK(略) 到IBM官网上下载informix软件:iif.12.10.FC9DE.linux-x86_64.tar放在某个大家都可以访问的目录比如:/mypkg,并解压到该目录下。 我也放到了百度云和天翼云上...

wangxuwei ⋅ 今天 ⋅ 0

PHP语言系统ZBLOG或许无法重现月光博客的闪耀历史[图]

最近在写博客,希望通过自己努力打造一个优秀的教育类主题博客,名动江湖,但是问题来了,现在写博客还有前途吗?面对强大的自媒体站点围剿,还有信心和可能型吗? 至于程序部分,我选择了P...

原创小博客 ⋅ 今天 ⋅ 0

IntelliJ IDEA 2018.1新特性

工欲善其事必先利其器,如果有一款IDE可以让你更高效地专注于开发以及源码阅读,为什么不试一试? 本文转载自:netty技术内幕 3月27日,jetbrains正式发布期待已久的IntelliJ IDEA 2018.1,再...

Romane ⋅ 今天 ⋅ 0

浅谈设计模式之工厂模式

工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 在工厂模式中,我们在创建对象时不会对客户端暴露创建逻...

佛系程序猿灬 ⋅ 今天 ⋅ 0

Dockerfile基础命令总结

FROM 指定使用的基础base image FROM scratch # 制作base image ,不使用任何基础imageFROM centos # 使用base imageFROM ubuntu:14.04 尽量使用官方的base image,为了安全 LABEL 描述作...

ExtreU ⋅ 昨天 ⋅ 0

存储,对比私有云和公有云的不同

导读 说起公共存储,很难不与后网络公司时代的选择性外包联系起来,但尽管如此,它还是具备着简单和固有的可用性。公共存储的名字听起来也缺乏专有性,很像是把东西直接堆放在那里而不会得到...

问题终结者 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部