ARCore基本概念和工作原理简介
谷歌的WebAROnARCore项目基于Android手机提供的ARCore增强现实引擎,要了解WebAROnARCore,需要先了解ARCore的工作原理。
基本上ARCore做了两件事,首先跟踪手机的运动轨迹,然后构建出它对现实世界的理解。
ARCore的运动跟踪技术是通过相机(Camera)识别出特征点,并随着时间的推移跟踪这些特征点是如何移动的。
通过这些特征点的运动数据及从手机惯性传感器读到的信息,ARCore计算出手机移动的位置和方向,并称其为姿态(pose)。
除了识别出这些特征点外,ARCore还能检测出像地板、桌面等平面信息以及在某个地方的光线强度。这些信息使得ARCore能够构建出自己理解的真实世界。构建出这样一个模型后,可以在上面放置一些虚拟内容了。
ARCore是如何做到的呢?它使用三项关键技术将虚拟内容与真实世界整合到一起,这三种技术分别是:
运动跟踪
环境理解
光线评估
运动跟踪
ARCore 可以在手机移动的过程中知道,相对于真实世界手机所在的位置和方向(姿势)。
当手机在真实世界移动时,ARCore使用称为并发测距和映射的过程来了解手机与周围世界的相对位置。
ARCore能检测到Camera捕获的图像在视觉上的不同特征,称为特征点。它使用这些点计算其位置变化。随着时间的推移,通过视觉信息与来自IMU设备的惯性测量,ARCore就可以估算出Camera相对于真实世界的姿态(位置和方向)。
通过将渲染的3D虚拟内容与物理Camera的姿势对齐,开发人员就可以从正确的角度渲染虚拟内容。 再通过将虚拟物品的图像渲染到从Camera获得的图像之上,这样看起来就好像虚拟内容是真实世界的一部分似的。
环境理解
ARCore可以让手机检测出一块水平面的位置和大小。如地面、桌子、书架等等。这样就可以将虚拟物体放置到检测出的水平面上了。
它是如何做到的呢?ARCore通过检测特征点和平面不断改善对现实世界环境的理解。
ARCore会查找常见水平表面(如桌面)上的特征点集群,除此之外,ARCore还可以确定每个平面的边界,并将以上信息提供给您的应用程序。 这样,开发人员就可以使用这些信息,并将虚拟物体放置在平坦的表面上了。
由于ARCore使用特征点检测平面,因此可能无法正确检测到没有纹理的平坦表面(如白色桌面)。
光线评估
ARCore 可以让手机估算出当前环境的光线强度,这样可以让虚拟物理显示在真实环境中更加逼真。
用户交互
ARCore使用 hit testing(命中测试) 获取与手机屏幕相对应的(x,y)坐标(如通过点击屏幕等交互方式),将其投射到 Camera 的3D坐标系中,并返回与命中点射线相交的所有平面和特征点,以及在世界坐标系中该交叉点的姿态。这样就能实现用户与ARCore环境中的对象交互了。
锚点与跟踪
ARCore可以改变对自身位置和环境的理解来调整姿态。如我们要在ARCore环境中放置一个虚拟对象,首先要确定一个锚点,以确保ARCore能随着时间的推移不断跟踪对象的位置。通常情况下,会根据命中测试返回的姿势创建一个锚点。
姿势改变这项技术特别关键,只有得到姿势,ARCore才可以随着时间的推移不断更新环境对象(像飞机和特征点)的位置。ARCore将平面和点认为是可跟踪的特殊类型的对象。您可以将虚拟对象锚定到这些可追踪的对象上,以确保在设备移动时,虚拟对象和可跟踪对象之间保持稳定的关系。这就好像您在桌面上放置一个虚拟的花瓶,如果ARCore稍后调整与桌面相关的姿势,那么花瓶仍然会保持在桌面上。
最新评论
- 相关文章
微信公众号在线生成二维码带参数怎么搞?
带参数二维码是微信公众号渠道二维码的一种实现
微信的带参数二维码有两种,一种是临时二维码,一种是永久二维码,但是永久二维码的生成是有个数限制的,微...CentOS6 Apache2.2多站点HTTPS配置
可以使用letsencrypt(certbot)免费证书服务。支持多系统、多站点和多目录,支持wildcard(通配符域名),90天生效,可用定时任务自动更新。需要注意一点的是apache2.4以下版本需要在默认的ssl配置中添加如下的指令:NameVirtualHost
2019年开源WebRTC媒体服务器选型比较
什么是WebRTC服务器?在WebRTC的早期开始,该技术的主要卖点之一是它允许点对点(浏览器到浏览器)通信,几乎没有服务器的干预,服务器通常仅用于信令(比如用于...
OpenGL/WebGL顶点坐标变换过程简介
世界坐标是按照笛卡尔坐标系定义出来的绝对坐标系,下面的各种坐标系都建立在世界坐标的基础上。对象坐标系对象被应用于任何...
html5跨平台实战-第一周-水平测验-新闻列表页面
这是一个DIV+CSS布局页面的一个实例,主要介绍POSITION定位、导航UL LI的制作、利用浮动原理对页面分栏、分列的页面布局。新闻页面的效果图
如何使用BabylonJS加载OBJ或STL模型
BabylonJS(也就是babylon.js,这是一个和three.js类似的WebGL开发框架),更多的用在游戏领域。
本文说明和演示如何使用babylon.js来加载一个标准3d模型文...A-Frame WebVR(网页虚拟现实)快速开发入门教程
WebVR和WebGL应用程序接口使得我们已经可以在浏览器上创建虚拟现实(VR)体验,但从工程化的角度而言,开发社区还需要更多方便强大的开发库来简化编程,Mozilla的
WebAssembly工作原理和JavaScript语言性能对比分析
本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...
Three.js入门教程5 - 10个必须知道的编程技巧
作者为Google的Paul,关于如何写出好的WebGL代码的文章。和很多开发者一样,我通过实践学习,但同时我也向其他更有经验的开发者们学习。在过去的几个月中,我在c...
WebGL入门教程6 - 光照效果和Phong光照模型
正是因为有了光,世界才能被我们看见,在3D的世界里,光照给物体带来真实的视觉感受。当光照射在某一表面上时,它可能被吸收、反射或投射。其中入射到表面上的一...
如何使用WebGL实现空气高温热变形动画特效
我们在炎炎夏日,或者在火堆旁,经常会观察到热源周围空气的不稳定波动现象。本文将讲解如何通过WebGL来实现这个特效。该效果可用于热变形、波浪、水面波光等场...
如何使用CSS3实现一个平滑的3D文本标题
要实现3D文本,基本上有3种方法:1. 使用CSS3的投影滤镜(filter: drop-shadow)2. 使用3d建模和CSS3 3d变换来实现(最真实)3. 使用CSS3 text-shadow属性来实现...
更多...