HTML5实现3D和2D可视化QuadTree四叉树碰撞检测

最新推荐文章于 2021-12-16 13:41:37 发布
最新推荐文章于 2021-12-16 13:41:37 发布
阅读量263 收藏 1
点赞数
分类专栏： HTML5</div> 3D</div> 拓扑</div> Hightopo</div> QuadTree</div>
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yixiaof/article/details/79010696
版权
本文介绍了如何使用HTML5结合QuadTree四叉树算法进行2D和3D的碰撞检测，以提升游戏性能。文章通过实例演示了如何使用开源库quadtree-js构建四叉树，并在HT for Web的Canvas拓扑图和WebGL的3D引擎中应用，同时提供了演示链接。
摘要由CSDN通过智能技术生成

QuadTree四叉树顾名思义就是树状的数据结构，其每个节点有四个孩子节点，可将二维平面递归分割子区域。QuadTree常用于空间数据库索引，3D的椎体可见区域裁剪，甚至图片分析处理，我们今天介绍的是QuadTree最常被游戏领域使用到的碰撞检测。采用QuadTree算法将大大减少需要测试碰撞的次数，从而提高游戏刷新性能，本文例子基于HT for Web的Canvas拓扑图和WebGL的3D引擎组件，通过GraphView和Graph3dView共享同一数据模型DataModel，同时呈现QuadTree算法下的2D和3D碰撞视图效果：http://v.youku.com/v_show/id_XODQyNTA1NjY0.html​

http://www.hightopo.com/demo/QuadTree/ht-quadtree.html

Screen Shot 2014-12-06 at 12.41.24 AM

QuadTree的实现有很多成熟的版本，我选择的是 https://github.com/timohausmann/quadtree-js/ 四叉树的算法很简单，因此这个开源库也就两百来行代码。使用也非常简单，构建一个Quadtree对象，第一个参数传入rect信息制定游戏空间范围，在每次requestAnimationFrame刷新帧时，先通过quadtree.clear()清除老数据，通过quadtree.insert(rect)插入

最低0.47元/天 解锁文章
吃货乙
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
用四叉树加速碰撞检测
MaxLykoS的博客
10-04 2406
长话短说 一.Define Quad Tree 四叉树的作用就是从原点开始根据一定的范围画出周围的四个象限，然后每个子象限继续划分为四个孙子象限，以此类推，到达递归深度最大值时停止。 二.在碰撞检测中的作用 如果场景里有1万个障碍物和1个子弹，那么子弹需要和每个障碍物进行一次碰撞检测。而我们进行了空间划分之后，只需要将子弹与其所在的区域内的障碍物进行检测即可。 相当于将碰撞检测分成了两部分，第一部分（粗测）尽可能将不会碰到的物体扔掉，从所有的物体中筛选出与子弹最接近最可能碰到的物体，第二部分（精测）使用尽
HT for Web可视化QuadTree四叉树碰撞检测
HT for Web 3D
12-06 185
QuadTree四叉树顾名思义就是树状的数据结构，其每个节点有四个孩子节点，可将二维平面递归分割子区域。QuadTree常用于空间数据库索引，3D的椎体可见区域裁剪，甚至图片分析处理，我们今天介绍的是QuadTree最常被游戏领域使用到的碰撞检测。采用QuadTree算法将大大减少需要测试碰撞的次数，从而提高游戏刷新性能，本文例子基于HT for Web的图形引擎，通过GraphView和Gr...
quadtree:使用四叉树进行粒子碰撞检测
05-07
四叉树 使用四叉树进行粒子碰撞检测。 四叉树是一种树数据结构，其中每个内部节点恰好具有四个子节点。 四叉树是八叉树的二维模拟，最常用于通过将二维空间递归细分为四个象限或区域来划分二维空间。 演示版 在GitHub页面上查看演示： :
【C++数据结构】四叉树与平面碰撞检测
我的博客
05-10 1823
目录 原理 一. 四叉树 1. 树的结构 2. 数据的插入 3. 数据的删除 4. multimap的作用 二. 碰撞检测 1. 碰撞本质 2. 碰撞检测机制的原理 3. 与四叉树的结合 源码实现 测试案例 测试代码 运行结果： 原理 一. 四叉树 1. 树的结构 ①树的每一个结点要么没有子结点，要么就有四个子结点，结点可以不存放数据。 ②在此次实现中，数据只存放于叶子结点，叶子结点中可存放多个数据，并使用链表存放数据。 ③每个数据视情况可插入到多个叶子结点中，.
4叉树做的碰撞检测demo
08-08
4叉树实现的碰撞检测，只有当需检测的物体足够多时候才能发挥其优势
speedytree:JavaScript中针对Deno的快速四叉树实现
04-02
10. **测试与调试**：为确保快速四叉树实现的正确性，需要编写单元测试覆盖插入、删除、查询等各种操作，同时可以利用可视化工具来帮助理解树的结构和行为。 综上所述，"speedytree:JavaScript中针对Deno的快速四叉...
用opengl和glut实现的简单四叉树的demo
04-22
四叉树是一种数据结构，特别适用于空间分割和物体碰撞检测，常见于游戏开发和计算机图形学应用。在这个demo中，四叉树被用来优化场景中的图形渲染。 OpenGL是一个跨平台的图形库，提供了一套强大的低级编程接口，...
cocos2d-x obb 旋转碰撞 矩形
11-05
- 调试碰撞检测通常需要可视化obb和矩形，以确认它们的位置和旋转是否正确。cocos2d-x提供了绘制几何形状的功能，开发者可以利用这个功能辅助调试。 7. **总结**： - 了解和掌握obb碰撞检测是cocos2d-x游戏开发中...
cocos2d-x游戏开发系列教程-坦克大战游戏之坦克和地图碰撞的检测
12-23
在cocos2d-x游戏开发中，坦克大战游戏的实现涉及到了多个关键知识点，其中最重要的是坦克和地图的碰撞检测。这一过程对于游戏的交互性和趣味性至关重要，因为正确的碰撞检测能够确保坦克与地形、障碍物之间的交互...
碰撞检测算法
02-15
碰撞检测算法在JavaScript中的应用场景非常丰富，如网页游戏、交互式可视化、3D建模工具等。例如，在网页游戏中，它可以用于角色与环境、角色与角色之间的碰撞响应，实现真实的物理效果；在交互式设计中，可以检测...
quadtree-js:javascript的轻量级四叉树实现
05-07
四叉树 这是一个基于JavaScript方法JavaScript Quadtree实现，该实现基于在上描述的Java方法： 许多游戏需要使用碰撞检测算法来确定两个对象何时发生碰撞，但是这些算法通常是昂贵的操作，并且会大大降低游戏的速度。 一种加快处理速度的方法是减少必须进行的检查的次数。 屏幕相对两端的两个对象不可能碰撞，因此无需检查它们之间是否存在碰撞。 这是四叉树发挥作用的地方。 此实现可以在递归2D四叉树中存储和检索矩形。 每个四叉树节点在分成四个子节点之前，最多可以容纳对象数量。 对象仅存储在叶节点（最低级别）上。 如果一个对象重叠到多个叶节点中，则对该对象的引用将存储在每个节点中。 只有639字节！ （压缩+压缩） 演示版 –添加静态对象并查看四叉树拆分 –连续跟踪运动对象 –相互检查所有对象 具有10.000个对象的性能测试 具有10.000个对象的性能测试（旧的实现）
QuadTree四叉树实现代码 C#
02-07
这个代码是一个四叉树的C#实现，使用四叉树文成一个可视项目。四叉树是一种树结构可以用于编码和2D碰撞检测。多用在2D碰撞检测中，在大量的碰撞检测中可以提高效率，但结构略复杂。
HT for Web 入门手册
08-02
HT for Web是基于HTML5标准的企业应用图形界面一站式解决方案， 其包含通用组件、拓扑组件和3D渲染引擎等丰富的图形界面开发类库，提供了完全基于HTML5的矢量编辑器、拓扑编辑器及 3D场景编辑器等多套可视化设计工具，和完善的类库开发手册、工具使用手册、及针对HTML5技术如何进行大规模团队开发的客户深度培训手册。
HT for Web - Box2d
05-14
一直在找苦苦寻找一个Box2D的物理引擎javascript整合例子，发现 http://www.hightopo.com/blog/275.html 这篇文章的例子效果非常棒，通过HT for Web的3D引擎直观的呈现Box2D物理碰撞的实时运行效果，这么强大的3D物理碰撞效果居然只有几十行代码，非常适合Box2D初学者入门直观的学习和测试，不敢私藏这么好的例子，0资源分拿来和大家分享，希望能帮助到些同学
基于 HTML5 Canvas 的 3D 碰撞检测
weixin_33895016的博客
12-10 216
这是公司大神写的一个放官网上给用户学习的例子，我一开始真的不知道这是在干嘛，就只是将三个形状图元组合在一起，然后可以同时旋转、放大缩小这个三个图形，点击“Animate”就能让中间的那一个图元单独绕着某一个点旋转，表单最上方的“Axis”真的完全不知道拿来干嘛用的，觉得好累赘，而且是官网的 Demo，也没有解释。。。所以我今天得任务就是完全剖析这个例子！ 本文例子：http://www.hight...
使用四叉树优化碰撞检测
~生命淡如水~
06-18 3782
四叉树是干什么的？ 百度百科 四元树又称四叉树是一种树状数据结构，在每一个节点上会有四个子区块。四元树常应用于二维空间数据的分析与分类。 它将数据区分成为四个象限。数据范围可以是方形或矩形或其他任意形状。 从定义我们可以看出重点信息： 树状结构 四个区块 分类 矩形 图示讲解 讲解之前需要先说明一下四叉树是用来做什么的，明白了原理才好理解它的行为。 使用四叉树就是使用分类的方法，减少碰撞节点的个数，只取出与给定碰撞体相同区域或者压在碰撞体所在区域边上的对象。 将游戏屏幕分为四个区域。 插入对象
canvas碰撞检测1
Vivian_shuang的博客
08-09 397
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> head> body> canvas id="canvas" width="500" height="500">canvas> script type="text/javascript"> var canvas = document.getElem
Unity中的Bounds（包围盒）的使用
热门推荐
weixin_42977419的博客
08-23 1万+
center:边界盒的中心(世界坐标) extents:边界框的范围，总是size的一半 max:(世界坐标)边界盒的最大点，这个值总是等于center+extents min:(世界坐标)边界盒的最小点，这个值总是等于center - extents size:边界盒的总大小 Public Functions(公告函数)： Encapsulate:重新计算最大最小点 Contains:可判断点是...
程序员的浪漫圣诞树
田田云逸的博客
12-16 5744
环境：win10+python3.8.8 import turtle as t #as就是取个别名，后续调用的t都是turtle from turtle import * import random as r import time n = 100.0 speed("fastest") #定义速度 screensize(bg='black') #定义背景颜色，可以自己换颜色 left(90) forward(3*n) color("orange", "yellow")#定义最上端星
js四叉树碰撞检测
最新发布
05-25
四叉树是一种常用的空间分割数据结构，可以用于优化场景中物体的碰撞检测。四叉树将整个场景划分为四个象限，并将每个象限再次划分为四个象限，递归下去直到每个区域内只包含一个或零个物体。这样，可以快速地判断两个物体是否在同一个区域内，从而减少不必要的碰撞检测。 以下是基于四叉树的碰撞检测的示例代码： ```javascript // 创建四叉树 function QuadTree(bound, n) { this.bound = bound; // 区域范围 this.n = n; // 最大物体数量 this.objects = []; // 包含的物体 this.quadrants = []; // 四个象限 } // 将物体添加到四叉树中 QuadTree.prototype.addObject = function(obj) { // 如果当前节点还没有四个象限，则创建四个象限 if (!this.quadrants.length) { var x = this.bound.x; var y = this.bound.y; var w = this.bound.width / 2; var h = this.bound.height / 2; this.quadrants.push(new QuadTree(new Rectangle(x, y, w, h), this.n)); this.quadrants.push(new QuadTree(new Rectangle(x + w, y, w, h), this.n)); this.quadrants.push(new QuadTree(new Rectangle(x, y + h, w, h), this.n)); this.quadrants.push(new QuadTree(new Rectangle(x + w, y + h, w, h), this.n)); } // 将物体添加到对应的象限中 for (var i = 0; i < this.quadrants.length; i++) { if (this.quadrants[i].bound.contains(obj)) { this.quadrants[i].addObject(obj); return; } } // 如果物体不在任何一个象限中，则将其添加到当前节点 this.objects.push(obj); // 如果当前节点已经包含了最大数量的物体，则分裂成四个象限 if (this.objects.length > this.n) { for (var i = 0; i < this.objects.length; i++) { for (var j = 0; j < this.quadrants.length; j++) { if (this.quadrants[j].bound.contains(this.objects[i])) { this.quadrants[j].addObject(this.objects[i]); this.objects.splice(i, 1); i--; break; } } } } }; // 获取当前节点以及子节点包含的所有物体 QuadTree.prototype.getObjects = function() { var objects = this.objects; for (var i = 0; i < this.quadrants.length; i++) { objects = objects.concat(this.quadrants[i].getObjects()); } return objects; }; // 检测两个物体是否相交 function intersects(obj1, obj2) { return obj1.x + obj1.width > obj2.x && obj1.y + obj1.height > obj2.y && obj1.x < obj2.x + obj2.width && obj1.y < obj2.y + obj2.height; } // 碰撞检测函数 function collisionDetection(objects) { var quadTree = new QuadTree(new Rectangle(0, 0, canvas.width, canvas.height), 4); // 将所有物体添加到四叉树中 for (var i = 0; i < objects.length; i++) { quadTree.addObject(objects[i]); } // 遍历四叉树，检测相交的物体 var checked = []; for (var i = 0; i < objects.length; i++) { var obj = objects[i]; var candidates = quadTree.getObjects().filter(function(candidate) { return candidate !== obj && !checked.includes(candidate); }); for (var j = 0; j < candidates.length; j++) { if (intersects(obj, candidates[j])) { // 处理碰撞 } } checked.push(obj); } } ``` 在上面的代码中，`QuadTree` 表示四叉树节点，`Rectangle` 表示矩形区域。首先，创建一个 `QuadTree` 对象，将所有物体添加到其中，然后遍历 `QuadTree`，检测相交的物体并进行处理。 这里使用的是基于递归的方法，即先将物体添加到对应的象限中，如果某个象限包含的物体数量超过了最大值，则将其继续分割成四个象限，直到每个区域内只包含一个或零个物体。然后通过遍历四叉树来获取所有物体，并检测相交的物体。由于相交的物体可能会被检测多次，所以需要使用 `checked` 数组来避免重复检测。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

吃货乙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值