这个知识点99%的前端都没有听过,不信你进来看?

简介: 这个知识点99%的前端都没有听过,不信你进来看?

我可不是标题党哦,来!聪明的你请停下脚步,听我灵魂一问:

你知道AABB是什么吗?

哈哈哈,我猜你大概率一脸懵逼。

不服气的你赶紧打开百度:

image.png然后你愣住了。好家伙,沐洒你一个技术人员,跟我在这玩成语?“不不不,沐老师肯定不是在教我们成语。”一些不相信百度的高端玩家,于是打开小火箭🚀,在Google上再次搜索:

image.png


嚯!好嘛,Google给我搜出个非盈利性组织……

好啦,不卖关子啦,我今天既不是要说成语接龙,更不是要聊什么非盈利组织,我要说的AABB其实是这个:

image.png


AABB,全称Axis-Aligned Bounding Boxes,中文直译出来就是“轴对齐包围盒”,参考下MDN的解释:image.png如图所示,AABB呢,其实是一个立体几何概念,起源于数学,但成熟于游戏开发,主要是用于解决3D空间里不同实体的碰撞检测问题。image.png前阵子看过一个视频,讲虚幻引擎5Unreal Engine)的作品为什么画面如此真实自然,其中一个原因说,是因为虚幻5实现了非常优秀的光线追踪算法。没错,光线追踪(Ray Tracing),这门高深的学问,也是基于AABB来展开的。总之,AABB是3D问题的基础,虽然AABB本身不是什么高难度的东西,但是你如果不知道这个概念,那么你面对3D空间的很多问题都是抓瞎的,很容易陷入用2D思维解决3D问题的陷阱,进而产生很离谱的错误。那我作为一个前端,为什么会关注到这个领域的知识的呢?那当然是因为我在做的项目(自动驾驶点云标注)啦!之前我写过一篇文章《当前端遇到了自动驾驶》,非常详细的介绍了我在这个项目里遇到的一个3D问题的整体解决过程。

由于内容过于干燥,在公众号这里的阅读量并不高,但在知乎上,却意外获得了大量的收藏。

image.png


虽然有人反馈太技术了看不懂,但也有不少小伙伴在后台给我留言,说那篇文章很有意思,前端在自动驾驶领域的实践很新鲜有趣,让我多写点相关的东西。

image.png

恰好最近又遇到了一个又意思的场景:碰撞检测,我感觉这东西又可以跟大家聊聊了。

不过考虑到这件事本身也是有一定的理解门槛,所以我今天打算先水一篇,给大家入个门,介绍下AABB是个啥,然后丢点学习链接。感兴趣的朋友可以先私下研究研究,同时可以期待下我的下一篇文章,给你们聊聊我这次又遇到了什么难题,以及整体的解决思路。好啦,文章标题没唬人吧?有多少前端小伙伴是第一次听说AABB的?评论区告诉我。

学习资料:

  • 3D collision detection —— (https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection)
  • Bounding volume collision detection with THREE.js —— (https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js)
  • BVH:Bounding volume hierarchy —— (https://en.wikipedia.org/wiki/Bounding_volume_hierarchy)
  • Collision detection —— (https://en.wikipedia.org/wiki/Collision_detection)




全文完。

目录
相关文章
|
前端开发 网络协议 JavaScript
|
JSON 前端开发 网络协议
前端知识点-----跨域
前端知识点-----跨域
233 0
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
缓存 运维 前端开发
前端必备的运维知识点
【8月更文挑战第25天】前端必备的运维知识点
399 1
|
JavaScript 前端开发 数据库
前端常见知识点汇总(ES6,Vue,axios,Node.js,npm,webpack)-3
前端常见知识点汇总(ES6,Vue,axios,Node.js,npm,webpack)
213 0
|
缓存 负载均衡 前端开发
前端必会的nginx知识点
【8月更文挑战第22天】前端必会的nginx知识点
194 0
|
JavaScript 前端开发 Java
前端知识点03(JS)
前端知识点概览:了解JS中的this指向,包括全局、函数、new、apply/call/bind及箭头函数的规则。理解script的async和defer属性对脚本加载和执行的影响。探讨setTimeout和setInterval的用法及其在性能上的考量。ES6与ES5的区别在于新语法特性,如let/const、箭头函数、模板字符串、模块化、类和继承等。此外,ES6还引入了Symbol、解构赋值、默认参数、Map/Set和Generator等功能。别忘了点赞和支持作者哦!
117 1
|
前端开发 NoSQL JavaScript
前端知识点小结--mongodb,保准看明白
前端知识点小结--mongodb,保准看明白
|
缓存 JavaScript 前端开发
【前端】Vue2知识点大全!
【前端】Vue2知识点大全!
624 1
【前端】Vue2知识点大全!
|
前端开发 JavaScript API
【前端】Vue3知识点合集
【前端】Vue3知识点合集
244 0
【前端】Vue3知识点合集

热门文章

最新文章

  • 1
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 4
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 7
    前端如何禁止用户打开 F12 开发者工具
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
  • 1
    前端如何禁止用户打开 F12 开发者工具
    131
  • 2
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    186
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    52
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    113
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    78
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    179
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    161
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    90
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    50
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    87