android ar.js,web AR 技术与arjs的一些理解

AR与VR的区别与联系：

AR属于增强现实技术，而vr则是虚拟现实技术，两者的区别主要是呈现的场景中，虚拟成分比重的大小；

通俗一点来说的话，VR技术是将场景全部的虚拟化，就是我们佩戴上虚拟现实的设备之后，看到的镜像全部都是经过计算机处理之后的虚拟影像，通过一些传感器，将人的旋转，热度等感应输入到计算机中，计算机会基于这些输入，对虚拟影像做相应的处理，然后再呈现给用户

AR技术是通过对现实影像的处理，然后将一些虚拟的影像叠加到现实影像之中，再呈现给用户；两种的关系图如下：

image

可以理解为vr属于ar的真子集

AR技术一些知识点：

AR的实现方式现在有两种，一种是光学透视，另外一种是视频透视

光学透视式是将电脑生成的数字图像显示在眼前的一层半透明镜片上，这样就可以使现实场景和虚拟信息同时出现在视网膜上；视频透视式技术是将现实场景首先通过相机录入电脑，经过和虚拟对象整合、压缩，再统一呈现在用户眼前

两者的优缺点

光学透视式中的现实场景因为没有经过电脑处理，因此显示得更自然、直接；虽然它实现简单，但是也存在定位精度不高、匹配不准确、显示有延迟等问题。而视频透视式因为经过整合，所以匹配准确，最终显示效果同步程度高，还能对生成的显示结果根据用户需求进行进一步处理；但是它实现难度较高，且丢失了一部分真实感

使用技术做ar

浏览器ar接口技术，可以基于这个扩展app，添加ar技术

WebARonARKit ios中使用的一个库

WebARonARCore android中使用的

提供的功能也类似：运动追踪、环境感知和光线感应，使开发者能用 Web 技术来基于 ARKit 和 ARCore 开发，从而实现 WebAR

使用ar.js;AR.js 是 Jerome Etienne 开发的一款 Web AR 库，可以用十行 HTML 就实现 AR，并有 60 FPS 的帧率。

它主要封装了以下几个库：

WebRTC。下文会详细讲解，主要是获取视频流。使用到

JSARToolKit。ARToolKit 可以说是第一个开源的 AR 框架，在 1999 年发布，一直更新至今。虽然历史悠久但目前仍被广泛应用(官方网站的风格一点也没有历史感)。它主要提供了识别和追踪 marker 的功能，本文附录中还有补充。

Three.js, Babylon.js, A-Frame。这几个都是基于 WebGL 的渲染库，用于渲染要在 AR 环境中显示的东西，下文会扩充。

使用webRTC获取视频流

使用Tracking.js, JSFeat, ConvNetJS, deeplearn.js, keras.js，做图像识别

JSARToolKit通过自己对图片进行的特定标示，在使用webRTC的时候，获取到的数据流，分析流中是否包含这个标示，可以理解分析出来的是，JSARToolKit使用的market是比较简单的一些图像标志，在将视频数据流转化成矩阵之后，和使用JSARToolKit生成的数据矩阵进行对比，如果两者一致的话，就识别到当前位置，然后根据three.js来渲染一个3d的物体到屏幕上

具体的流程

使用jsartookit来对画面进行识别，这个库是将artookit5进行js化，也就是使用js实现了artookit5的功能，具体就是通过将图片数据转化成数字对象，然后和工具生成的标记对象进行对比，得出标记对象的位置

jsartookit分为两部分，

第一部分是初始化摄像机参数(也就是里面.dat文件)，读取标志(也就是里面的.hiro)，可以看到.hiro是0-255的二维矩阵，也就是代表着一张图片，因为图片的rgb通道是0-255的，如果要识别彩色图的话，应该需要3通道的图片也就是wh3，demo中给出的是对黑白标示的识别，所以那个摄像机参数可能设置的也是拿到的是黑白图

第二部分就是从视频源中加载图像，如果是摄像头的话，就会一帧一帧的读取，然后和标志进行对比，识别出标志在视频或者图像中的位置

graph TD

A(初始化摄像机参数.dat文件) --> B[读取标志.hiro文件]

B[读取标志.hiro文件] --> C[加载图像]

C[加载图像] --> D[对比识别标示位置]

而arjs里面同时还是用使用到了webRtc来将获取到的视频流展示在web页面上，使用three.js将一个三维的模型构建并且定位到标识位置上