笔者之前的文章 使用 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项目里的相对路径：
该图片如下所示。这也是为什么我们在演示这个应用时，第一步总是先在电脑上打开这张图片，然后再用手机摄像头去扫描的原因。
