使用 JavaScript 开发AR(增强现实)移动应用的预备知识和环境搭建

简介: 使用 JavaScript 开发AR(增强现实)移动应用的预备知识和环境搭建

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

前端开发者的一个福音,就是如今我们可以仅仅凭借 JavaScript 技能,就能开发一个支持增强实现的移动应用了。使用的工具是 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.


Viro 渲染器能够在移动设备上以原生方式运行,从而获得最佳性能。它支持基于物理的渲染 (PBR)、高动态范围 (HDR) 以及实时照明和阴影,确保开发人员能够创建出令人惊叹的增强现实场景。 使用 Viro 的物理引擎还能为开发对象添加真实世界的力学效果,其提供的全功能粒子系统允许烟雾、火焰等特效的渲染。


Viro 平台提供了一系列大型组件,开发人员可以利用这些组件来构建 JavaScript 应用的 AR 体验。 与传统的 3D 渲染和 VR 相比,AR 的亮点在于响应用户的现实世界所发起的交互请求。


本文着重介绍 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使用一系列算法标注出图像上的特征点,并基于这些特征点来计算位置的变化。

大家看视频中在摄像头里显示的特斯拉汽车,能发现随着手机位置的变化,汽车在摄像头里显示的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 进行应用开发了。

总结

本文首先介绍了增强现实开发领域所需要了解的一些最基础的概念和术语,接着介绍了 ViroReact 这个 AR 开发库的跨平台工作特性,并介绍了其开发环境的搭建和配置步骤。本系列下一篇文章,会具体介绍如何使用 ViroReact 进行应用开发。

相关文章
|
6天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
17 3
|
6天前
|
JavaScript 前端开发
js开发:请解释什么是ES6的async/await,以及它如何解决回调地狱问题。
ES6的async/await是基于Promise的异步编程工具,简化了代码并提高可读性。它避免回调地狱,将异步操作转化为Promise,使得代码同步化。错误处理更直观,无需嵌套回调或.then()。
15 1
|
6天前
|
JavaScript 前端开发 编译器
js开发: 请解释什么是Babel,以及它在项目中的作用。
**Babel是JavaScript编译器,将ES6+代码转为旧版JS以保证兼容性。它用于前端项目,功能包括语法转换、插件扩展、灵活配置和丰富的生态系统。Babel确保新特性的使用而不牺牲浏览器支持。** ```markdown - Babel: JavaScript编译器,转化ES6+到兼容旧环境的JS - 保障新语法在不同浏览器的运行 - 支持插件,扩展编译功能 - 灵活配置,适应项目需求 - 富强的生态系统,多样化开发需求 ```
12 4
|
7天前
|
JavaScript 前端开发
js开发:请解释原型继承和类继承的区别。
JavaScript中的原型继承和类继承用于共享对象属性和方法。原型继承通过原型链实现共享,节省内存,但不支持私有属性。
16 0
|
7天前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
20 2
|
5天前
|
前端开发 JavaScript
js开发中的异步处理
JavaScript中的异步处理包括回调函数、Promise和async/await。回调函数是早期方法,将函数作为参数传递给异步操作并在完成后执行。Promise提供链式处理,通过resolve和reject管理异步操作的成功或失败。async/await基于Promise,允许写更简洁的同步风格代码,通过try-catch处理错误。Promise和async/await是现代推荐的异步处理方式。
|
6天前
|
JavaScript 前端开发
js开发:请解释什么是ES6的Generator函数,以及它的用途。
ES6的Generator函数是暂停/恢复功能的特殊函数,利用yield返回多个值,适用于异步编程和流处理,解决了回调地狱问题。例如,一个简单的Generator函数可以这样表示: ```javascript function* generator() { yield 'Hello'; yield 'World'; } ``` 创建实例后,通过`.next()`逐次输出"Hello"和"World",展示其暂停和恢复的特性。
15 0
|
6天前
|
缓存 JavaScript 前端开发
js开发:请解释什么是Webpack,以及它在项目中的作用。
Webpack是开源的JavaScript模块打包器,用于前端项目构建,整合并优化JavaScript、CSS、图片等资源。它实现模块打包、代码分割以提升加载速度,同时进行资源优化和缓存。Webpack的插件机制可扩展功能,支持热更新以加速开发流程。
13 2
|
6天前
|
Web App开发 JavaScript 前端开发
js开发:请解释什么是Node.js,以及它的应用场景。
Node.js是基于V8引擎的JavaScript运行时,用于服务器端编程。以其事件驱动、非阻塞I/O模型著称,适用于高并发和实时应用。常见用途包括:构建Web服务器、实时应用(如聊天)、API服务、微服务、工具和命令行应用,以及搭配Electron开发桌面软件。
14 1
|
7天前
|
JavaScript 前端开发
js开发:请解释this关键字在JavaScript中的用法。
【4月更文挑战第23天】JavaScript的this关键字根据执行环境指向不同对象:全局中指向全局对象(如window),普通函数中默认指向全局对象,作为方法调用时指向调用对象;构造函数中指向新实例,箭头函数继承所在上下文的this。可通过call、apply、bind方法显式改变this指向。
7 1