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稍后调整与桌面相关的姿势,那么花瓶仍然会保持在桌面上。
最新评论
- 相关文章
OpenGL/WebGL顶点坐标变换过程简介
世界坐标是按照笛卡尔坐标系定义出来的绝对坐标系,下面的各种坐标系都建立在世界坐标的基础上。对象坐标系对象被应用于任何...
CSS3原生变量(Native Variables)新特性简介
对Web开发者来说,一个盼望已久的特性是CSS终于支持原生变量了!
变量是程序语言中用来解决代码重复和进行表达式计算的关键概念(想想数学方程式中的x)。...使用HTML5 Canvas实现的界面元素截屏功能
HTML5动画背后的数学2 - 仿生智能算法综述
HTML5、Hybrid APP、Native APP对比和技术选型
HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能,搞出来一些混合APP的解决方案。比如Apache的Cordova(也就是以前的PhoneGap),...
Three.js入门教程1 - 基础知识和创建一个红色球体
[ TECHBROOD注:Three.js是一个主流的开源WebGL库,WebGL允许使用JavaScript直接操作GPU,在网页上实现3D效果。
Google的工程师Paul在网站aerotwist.com上...CSS3图片混合(Blend)效果及其参考计算公式一览表
在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于R...
如何使用WebGL实现空气高温热变形动画特效
我们在炎炎夏日,或者在火堆旁,经常会观察到热源周围空气的不稳定波动现象。本文将讲解如何通过WebGL来实现这个特效。该效果可用于热变形、波浪、水面波光等场...
D3.js读取外部json数据
D3.js是一个很好的数据可视化工具,支持从web服务读取json数据,或者从外部文件如.json, .csv文件中直接读取。由于部分服务比如flickrs上的图文数据服务需要VPN...
Three.js 开发基础知识 - 绘制3D对象
Three.js是一个用来简化WebGL开发的JavaScript库,比如绘制一个三维立方体,使用WebGL需要100多行,那Three.js只要10几行就能够完成。本文通过创建一个立方体来...
Processing.js和P5.js的功能简介和区别
什么是ProcessingProcessing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。
什么是Processing.js为了能让Proce... 更多...