文档章节

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

xhload3d
 xhload3d
发布于 2015/12/07 10:46
字数 981
阅读 53
收藏 0
点赞 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

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
粉丝 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

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

上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果,同上篇其实Box2DJS只是二维的平面碰撞物理引擎,但同样通过3...

xhload3d ⋅ 2015/12/08 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

SpringCloud 微服务 (六) 服务通信 RestTemplate

壹 通信的方式主要有两种,Http 和 RPC SpringCloud使用的是Http方式通信, Dubbo的通信方式是RPC 记录学习SpringCloud的restful方式: RestTemplate (本篇)、Feign 贰 RestTemplate 类似 Http...

___大侠 ⋅ 11分钟前 ⋅ 0

React创建组件的三种方式

1.无状态函数式组建 无状态函数式组件,也就是你无法使用State,也无法使用组件的生命周期方法,这就决定了函数组件都是展示性组件,接收Props,渲染DOM,而不关注其他逻辑。 无状态函数式组...

kimyeongnam ⋅ 18分钟前 ⋅ 0

react 判断实例类型

今天在写组件的时候想通过判断内部子元素不同而在父元素上应用不同的class,于是首先要解决的就是如何判断子元素的类型。 这里附上一个讲的很全面的文章: https://www.cnblogs.com/onepixel...

球球 ⋅ 24分钟前 ⋅ 0

Centos7备份数据到百度网盘

一、关于 有时候我们需要进行数据备份,如果能自动将数据备份到百度网盘,那将会非常方便。百度网盘有较大的存储空间,而且不怕数据丢失,安全可靠。下面简单的总结一下如何使用 bypy 实现百...

zctzl ⋅ 38分钟前 ⋅ 0

开启远程SSH

SSH默认没有开启账号密码登陆,需要再配置表中修改: vim /etc/ssh/sshd_configPermitRootLogin yes #是否可以使用root账户登陆PasswordAuthentication yes #是都开启密码登陆ser...

Kefy ⋅ 41分钟前 ⋅ 0

Zookeeper3.4.11+Hadoop2.7.6+Hbase2.0.0搭建分布式集群

有段时间没更新博客了,趁着最近有点时间,来完成之前关于集群部署方面的知识。今天主要讲一讲Zookeeper+Hadoop+Hbase分布式集群的搭建,在我前几篇的集群搭建的博客中已经分别讲过了Zookeep...

海岸线的曙光 ⋅ 49分钟前 ⋅ 0

js保留两位小数方法总结

本文是小编针对js保留两位小数这个大家经常遇到的经典问题整理了在各种情况下的函数写法以及遇到问题的分析,以下是全部内容: 一、我们首先从经典的“四舍五入”算法讲起 1、四舍五入的情况...

孟飞阳 ⋅ 今天 ⋅ 0

python log

python log 处理方式 log_demo.py: 日志代码。 #! /usr/bin/env python# -*- coding: utf-8 -*-# __author__ = "Q1mi""""logging配置"""import osimport logging.config# 定义三种......

inidcard ⋅ 今天 ⋅ 0

mysql 中的信息数据库以及 shell 查询 sql

Information_schema 是 MySQL 自带的信息数据库,里面的“表”保存着服务器当前的实时信息。它提供了访问数据库元数据的方式。 什么是元数据呢?元数据是关于数据的数据,如数据库名或表名,...

blackfoxya ⋅ 今天 ⋅ 0

maven配置阿里云镜像享受飞的感觉

1.在maven目录下的conf/setting.xml中找到mirrors添加如下内容,对所有使用改maven打包的项目生效。 <mirror> <id>alimaven</id> <name>aliyun maven</name> <url>http://maven.al......

kalnkaya ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部