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

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

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

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

clipboard1,1

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

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

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

clipboard2,2

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

clipboard3,3

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

clipboard4,4

我们打开一个声明了如上依赖的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是个什么东西。

clipboard5,5

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

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

clipboard6,6

Motion Tracking

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

clipboard7,7

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

Environmental understanding - 环境识别

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

clipboard8,8

Light estimation - 光源估算

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

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

clipboard9

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

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

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

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

clipboard10
clipboard11

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

本文来自云栖社区合作伙伴“汪子熙”,了解相关信息可以关注微信公众号"汪子熙"。

相关文章
|
14天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
279 1
|
18天前
|
JavaScript 前端开发 安全
TypeScript的优势与实践:提升JavaScript开发效率
【10月更文挑战第8天】TypeScript的优势与实践:提升JavaScript开发效率
|
18天前
|
JavaScript 前端开发 IDE
深入理解TypeScript:提升JavaScript开发的利器
【10月更文挑战第8天】 深入理解TypeScript:提升JavaScript开发的利器
27 0
|
4天前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
26 8
|
2天前
|
JavaScript 前端开发
javascript开发的简单的弹幕插件
这是一个原生javascript开发的简单的弹幕插件,具有美观、易用,占用的资源较低等特点,可以给弹幕设置内容、颜色、头像、链接地址等属性,鼠标悬停等,简单实用,欢迎下载!
18 5
|
14天前
|
存储 JSON JavaScript
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
32 0
|
18天前
|
传感器 JavaScript 前端开发
深入理解TypeScript:提升JavaScript开发效率
【10月更文挑战第8天】深入理解TypeScript:提升JavaScript开发效率
26 0
|
5月前
|
人工智能 编解码 5G
虚拟现实(VR)与增强现实(AR)的融合:开启全新交互时代
【6月更文挑战第17天】虚拟现实(VR)与增强现实(AR)融合成混合现实(MR),打造全新交互体验。MR结合VR的沉浸感和AR的现实增强,应用于教育、游戏、设计和营销,带来创新教学方式、沉浸式游戏体验和高效设计工具。尽管面临技术挑战,随着5G和AI的发展,MR有望引领未来交互的革命。
|
5月前
|
传感器 数据可视化 安全
【虚拟现实】二、主要的AR/VR硬件设备
【虚拟现实】二、主要的AR/VR硬件设备
86 3
|
3月前
|
vr&ar 图形学 开发者
步入未来科技前沿:全方位解读Unity在VR/AR开发中的应用技巧,带你轻松打造震撼人心的沉浸式虚拟现实与增强现实体验——附详细示例代码与实战指南
【8月更文挑战第31天】虚拟现实(VR)和增强现实(AR)技术正深刻改变生活,从教育、娱乐到医疗、工业,应用广泛。Unity作为强大的游戏开发引擎,适用于构建高质量的VR/AR应用,支持Oculus Rift、HTC Vive、Microsoft HoloLens、ARKit和ARCore等平台。本文将介绍如何使用Unity创建沉浸式虚拟体验,包括设置项目、添加相机、处理用户输入等,并通过具体示例代码展示实现过程。无论是完全沉浸式的VR体验,还是将数字内容叠加到现实世界的AR应用,Unity均提供了所需的一切工具。
114 0