写点什么

使用 ViroReact 开发增强实现应用的一个具体例子

作者:Jerry Wang
  • 2022 年 6 月 09 日
  • 本文字数:2127 字

    阅读完需:约 7 分钟

使用 ViroReact 开发增强实现应用的一个具体例子

笔者之前的文章 使用 JavaScript 开发AR(增强现实)移动应用的预备知识和环境搭建,介绍了使用增强现实开发库 ViroReact 进行应用开发所需掌握的一些最基础的概念和环境搭建步骤。


本文开始详细介绍使用 ViroReact 进行编码开发的技术细节。


按照本文步骤开发而成的应用效果,可以从下面两个视频 demo 查看:


  • https://v.qq.com/x/page/o3003z9y4m7.html

  • https://v.qq.com/x/page/q3003wozfve.html


这个增强现实应用支持实时地更换特斯拉车身的颜色,能够帮助使用者方便地查看同一型号的特斯拉汽车,在不同车身颜色外观下的不同视觉效果。



ViroReact 的官网有一个步骤非常详细的向导:



一步步照着做,最后就能通过手机摄像头,在真实的场景里能看到一个硬编码的 Hello World 字符串和一些 3D 物体。



这个 Hello World 级别的源代码在 ViroReact 官网上能下载,大家可以下载到本地运行,跑通之后,就能继续学习本文余下部分介绍的技术细节了。


打开基于 ViroReact 的 Node.js 项目,找到 package.json,项目名称为 ViroSample, 里面声明了对 React-Native 和 React-viro 的依赖。



React-Native 加 ViroReact 这套组合的妙处在于“一次编写,到处运行”的跨平台特性。编写一次 JavaScript 代码,能在 iOS 和 Android 两套操作系统里以原生应用的方式运行。


以 Android 为例,执行命令行 react-native start 加上 react-native run-android 后,在 android 文件夹里能找到针对 Android 平台生成的原生应用部分源代码。最重要的两个应用引导文件,一个是 MainActivity.java, 通过回调函数的方式返回了 AR 应用的项目名称:



MainApplication.java 的 getJSMainModuleName 通过回调函数的方式指明了 JavaScript 入口模块的名称:



因为本文不是 React-Native 的讲解文章,所以不深入阐述 React-Native 应用在 Android 平台的启动原理,感兴趣的朋友可以自行搜索。React-Native 生态圈非常活跃,类似的原理分析文章数不胜数。



React-Native + ViroReact 开发的增强现实应用,其典型实现套路 Jerry 归纳起来就三步:Match - Replace - Augment

Match - 匹配

由于增强现实应用都是将代码生成的虚拟物品叠加到现实场景中,因此应用开发人员需要帮助 ViroReact 找到现实场景中的一个依附平面,这样 ViroReact 可以把这个依附平面映射到手机的二维屏幕上,接下来 ViroReact 就能在二维屏幕上绘制虚拟物体了。


ViroReact 提供了一个标签 ViroARImageMarker, 顾名思义,该标签能够允许应用开发人员定义一个“Marker”(标识,标记)。



用编程术语来说,这个标签定义的就是一个 place holder,通过 target 属性,关联一个应用开发人员指定的图片。当用户使用增强现实应用通过摄像头在现实世界扫描到和 ViroARImageMarker 指定的图片相匹配的图形时,ViroReact 就会将 Marker 指定的图形替换成应用开发人员事先准备好的 3D 模型。这个匹配 - 替换过程是 ViroReact 自动完成的,应用开发人员只需要提供 Marker 指向的图片和待替换的 3D 模型即可。采用这种方式实现的 AR 应用也称为 Marker based AR 应用(当然还有不借助 Marker 实现的 AR 应用).


从上图能看出 target 指向的 Marker 内容为一个名为 logo 的对象,这个对象通过 API ViroARTrackingTargets.createTargets 创建,输入参数是该图片在 AR 项目里的相对路径:



该图片如下所示。这也是为什么我们在演示这个应用时,第一步总是先在电脑上打开这张图片,然后再用手机摄像头去扫描的原因。


Replace - 替换

ViroReact 将现实世界的图形和 AR 应用的 Image Marker 匹配后,就会自动使用一个 3D 对象替换并渲染到 Marker 所在的位置上。


待替换的 3D 对象通过标签 Viro3DObject 定义,有三个重要的属性需要指定:



  • source 和 resources:3D 模型文件,一般通过专业的 3D 软件生成。Windows10 自带的 Paint 3D 软件可以打开.obj 结尾的模型文件:



您可以查看下面的视频来 360 度全方位观察 demo 中使用的特斯拉的 3D 模型:


https://v.qq.com/x/page/s3003qkje8u.html


我们很容易观察到,在 Paint 3D 里看到的这辆特斯拉汽车,表面毫无光泽,而 Leo 视频中的特斯拉,外表可以更换不同的颜色,这是通过给 3D 模型添加不同的 texture(纹理)来实现的。我们通过 ViroMaterials.createMaterials,传入不同的 texture 参数,生成不同的 Material 对象,最后赋给上图 Viro3DObject 的 materials 属性,即完成了待替换 3D 对象的声明。



通过使用 React 编程动态修改 Viro3DObject materials 属性的值,我们就能实现动态修改摄像头里观察到的特斯拉车身的颜色。


当然这些不同的 texture 对应的图形文件也需要专业人员制作才行:


Augment 增强

这一步是即使从未接触过 AR 应用开发的程序员也非常熟悉的:标签 Viro3DObject 支持各种事件响应函数,比如点击之后触发的 onClick 回调函数:



我们把自己实现的_toggleButtons 函数注册到 onClick 事件上,当特斯拉模型被点击之后,我们就可以弹出演示视频里的颜色选择菜单,允许用户指定新的车身颜色。


因为 Viro3DObject 的 materials 属性绑定的 React 模型字段为 this.state.texture, 因此用户选择了新的颜色后,调用 React 的 this.setState 方法将 texture 属性设置成选中的颜色,即可实现车身颜色的动态刷新。


总结

本文从之前的文章使用 JavaScript 开发 AR(增强现实)移动应用的预备知识和环境搭建出发,以一个具体的 ViroReact 项目出发,详细介绍了增强现实应用编码开发的匹配,替换和增强的实现三部曲。

发布于: 3 小时前阅读数: 13
用户头像

Jerry Wang

关注

🏆InfoQ写作平台-签约作者🏆 2017.12.03 加入

SAP成都研究院开发专家,SAP社区导师,SAP中国技术大使。2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今。工作中使用 ABAP, Java, JavaScript 和 TypeScript 进行开发。

评论

发布
暂无评论
使用 ViroReact 开发增强实现应用的一个具体例子_AR_Jerry Wang_InfoQ写作社区