本文封面配图是去年Jerry看的一部电影《异形：契约》的剧照。

所谓AR(Augmented Reality), 即增强现实，是一种将通过计算机渲染出的虚拟图像与真实世界巧妙融合的手段，背后广泛运用了多媒体、三维建模、实时跟踪、智能交互、传感等多种计算机技术，将程序代码生成的文字、图像、三维模型、音乐、视频等虚拟信息模拟仿真后，显示在终端用户通过移动设备的摄像头观察到的真实世界中，虚拟和真实的两种世界互为补充，从而让终端用户感受到真实世界被“增强”的体验。

前端开发者的一个福音，就是如今我们可以仅仅凭借JavaScript技能，就能开发一个支持增强实现的移动应用了。使用的工具是React-Native + ViroReact.

下面这个视频是Jerry的同事，SAP成都研究院数字创新空间的开发工程师Leo Wang用React-Native加上ViroReact的组合做的一个小例子：

React-Native在国内早已不是一个新技术了。区分于另一种通过JavaScript语言开发移动应用的Cordova开源项目，React Native产出的并不是运行在移动设备操作系统的WebView控件里这种混合应用，而是一个真正的原生移动应用，所使用的基础UI组件和原生应用完全一致。从用户体验上来说，React-Native打包而成的原生应用给终端用户的使用感受同用Objective-C或Java编写的原生应用相比几乎无法区分。

ViroReact, 是基于React-Native的一个开发库，给React-Native的开发人员提供了一种通过JavaScript语言开发跨平台的支持AR的原生移动应用的手段。
官网：https://docs.viromedia.com/docs/viro-platform-overview

尽管在React-Native项目里引入ViroReact的依赖只需要一行代码，但这只是冰山一角：

我们打开一个声明了如上依赖的React-Native应用，npm install安装依赖后，在node_modules文件夹下面能看见ViroReact的实现。

ViroReact官网里声称的“一次编写，到处运行“的特性也体现在这：ViroReact提供了一个跨iOS和Android平台的高性能3D渲染引擎，分别基于iOS的ARKit和Android的ARCore.

因为Jerry平时使用的是Android手机并且是一个Android粉，所以本文着重介绍ARCore.

在ViroReact库文件夹下的android子文件夹内，我们看到了名为arcore的文件夹。那么要使用ViroReact，我们得先了解ARCore是个什么东西。

ARCore是Google为Android提供的开发AR原生应用的一个平台, 以SDK的方式，为开发者提供了AR应用必需的三大功能：

Motion Tracking - 运动跟踪
Environmental understanding - 环境识别
Light estimation - 光源估算

Motion Tracking

当我们移动Android手机时，ARCore使用一个称为COM(Concurrent Odometry & Mapping，并行测距映射)的进程，结合手机硬件传感器，来确定手机在真实世界的准确位置和姿势。当真实世界的景物出现在手机摄像头里并发生位移变化后，ARCore使用一系列算法标注出图像上的特征点，并基于这些特征点来计算位置的变化。

大家看前文Leo视频中在摄像头里显示的特斯拉汽车，能发现随着手机位置的变化，汽车在摄像头里显示的3D形象也随之变化，仿佛是一个存在于真实世界中的物体一样。这种效果就是ARCore的功劳：手机摄像头捕捉到的视觉信息，结合手机设备中惯性测量单元(Inertial Measurement Unit，简称IMU，由三个单轴的加速度计和三个单轴的陀螺仪组成)测量出的惯性测量值进行综合计算，就能渲染出摄像头内的虚拟物体，并确保随着时间推移和手机的位移变化，在现实世界中位置和朝向也能跟着变化的效果。

Environmental understanding - 环境识别

一系列出现在摄像头中的真实世界里水平面或者垂直面(比如桌子表面或者墙壁)上的特征点，都是ARCore试图识别环境的输入。ARCore以这些特征点为输入，识别出真实世界的平面和边界信息之后，就能允许开发者通过编程的方式，在这些识别出的平台上放置一些虚拟物体。

Light estimation - 光源估算

我们在摄像头里观察到的真实世界的所有物体，无不被各种强弱各异的光线所笼罩，从而形成灰度不一的阴影效果。如果通过代码投射到真实世界里的虚拟物体，不支持这种被光源照射的阴影效果，则虚拟物体的逼真程度会大打折扣。

好消息是，ARCore具有探测真实环境下的光照信息，开发者可以通过ARCore捕获到出现在摄像头里的真实世界的平均光照强度，从而将这些光照信息投射给虚拟物体，进一步增加其真实感。

一个SDK就支持这么多强大的功能，谷歌不愧是谷歌啊!

支持ARCore的Android手机型号列表，可以从Google官网获得：

https://developers.google.com/ar/discover/supported-devices

在三星应用商店或者腾讯应用包里搜索ARCore并下载：

安装之后，我们就可以开始用ViroReact进行应用开发了。请关注Jerry后续的文章来获得技术细节。感谢阅读。

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

如何使用JavaScript开发AR(增强现实)移动应用 (一)相关推荐

使用高通Vuforia开发AR增强现实游戏（开篇）
@废话在前之前想做暴风魔镜的VR游戏,最后来香港学习设备没带过来就没继续做,现在开始学习研究做一下AR游戏开发,毕竟对设备的要求比较低,很方便,看了不少资料,最后还是选了Vuforia这个经典的AR ...
如果您是JavaScript开发人员，为什么要进行增强现实-以及如何开始
by Evaristo Caraballo 通过Evaristo Caraballo 如果您是JavaScript开发人员,为什么要进行增强现实-以及如何开始 (Why you should do A ...
AR增强现实开发介绍
AR增强现实开发介绍(续) - 刘国柱老师 - 博客园关注公众号风色年代(itfantasycc) 200G 游戏开发资料合集送上~ ---开发基础篇开发增强现实技术,无论是商业级应用,还是面向 ...
AR(增强现实)开发资源汇总
微信公众号:AIRX社区 AR platform ARKit-ARKit是苹果在2017年WWDC推出的AR开发平台.开发人员可以使用这套工具iPhone和iPad创建增强现实应用程序 ARCore- ...
跨平台AR增强现实开发（一）（AR开发环境的搭建）
简介: AR,英文单词为AugmentedReality,增强现实:该技术在几十年前就被提出来了:但一直局限于设备,硬件的限制,无法在生活中应用开来,随着这几年移动互联网的快速发展以及市场的需求变更速 ...
超详细的AR增强现实开发入门总结
最近有一些朋友在QQ群或者微信公众号后台问Relax关于AR应用开发如何入门的问题,我想后面肯定还有很多人会问这样的问题,干脆就自己所知道的,比较系统的写一篇入门文章出来,供大家参考一下. 这是AR应 ...
javascript案例_如何在JavaScript中使用增强现实-一个案例研究
javascript案例 by Apurav Chauhan 通过Apurav Chauhan 如何在JavaScript中使用增强现实-一个案例研究 (How to use Augmented Re ...
AR增强现实的未来展望
国外媒体将增强现实技术列为 2014 年 15 大科技发展趋势之一,市场调查研究公司 Juniper Research 则预计增强现实相关应用 2015 年的全球下载量将高达 14 亿次,较 2010 ...
VR虚拟现实AR增强现实编程（1）：VR和AR简介
VR虚拟现实&AR增强现实编程(1):什么是VR和AR VR VR技术也称灵境技术或人工环境,其定义是集合仿真技术.计算机图形学.人机接口技术.多媒体技术传感技术以及网络技术等多种领域技术而开 ...

如何使用JavaScript开发AR(增强现实)移动应用 (一)

Motion Tracking

Environmental understanding - 环境识别

Light estimation - 光源估算

如何使用JavaScript开发AR(增强现实)移动应用 (一)相关推荐

最新文章

热门文章