乐趣区

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

本文封面配图是去年 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/do…

尽管在 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 应用必需的三大功能:

  1. Motion Tracking – 运动跟踪
  2. Environmental understanding – 环境识别
  3. 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…

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


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

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

退出移动版