为了入门AR,我做了一个简单的图像识别的Demo,将不同的图片对准检测区域,会出现不同天气效果,效果如下图

 

AR Demo 和 github地址 (PC网站,不推荐手机使用)

 

玩这个Demo的时候需要一个有摄像头的电脑和手机,将鼠标移动到天气图标上会有二维码,用手机扫描二维码进入天气图标网页,将图标对准屏幕的黑色区域进行扫描就可以出现对应的动画.

 

这是一个Marker Base的AR程序,Marker Base就是识别一个特定的图像(高级的二维码...),而高级的AR可能是Marker Less的,比如识别环境中的车,房子,行人.目前由于技术限制,大部分AR都是Marker base的.

 

其实我觉得AR比VR更困难,VR只需要给用户“输出”一个虚拟世界,而AR还需要根据用户“输入”的现实世界,“输出”虚拟的效果.“输出”动画对于前端来说已经是轻车熟路,但是如何处理用户“输入”的现实世界是很大的技术挑战.虽然现代JS引擎已经很快了,但是在处理摄像头传入的图像数据任务时,单线程的JS的马车远远落后于同时代的Native火箭.

 

在WebRTC技术的支持下,我们可以拿到摄像头的数据并且把它绘制成图片,一旦用JS处理像素,噩梦就开始了.AR应用对计算速度要求极高,动画至少要30帧才能被用户勉强接受,也就是说,要在34ms的时间内,完成图像处理-->图像识别-->动画渲染.这三个操作都是CPU密集运算,如果全部用JS来做,肯定无法在一般配置的电脑上保证帧数.这时就要拿出WebGL和WebWorker一起来加速了.

 

图像识别的第一步都是图像处理,彩色图片中包含太多无用的信息,同时摄像头在连续拍摄的时候有噪点,需要把主要信息提取出来,并且尽可能降噪.

 

转换成黑白的算法有很多,但是基于GPU计算的话,大多还是边缘检测,边缘特征的点会被标记成白色,另外再对图中的白点大小进行筛选,太小的白点可能是摄像头的噪点.这样两步操作用WebGL来做60帧毫无压力.

 

接下来把黑白的图片像素读取出来进行图像识别,用GPU实现的图像识别还真的很少见,这里我选用了第三方的神经网络(ConvNetJS)进行图像识别.对于前端来说,神经网络还是一个比较陌生的词语.大概就是机器学习的一种算法,如果探索精神不是特别强,可以把它当成一个工具而不用了解具体实现,就像你用React不需要知道具体怎么将jsx转化成DOM.接下来主要讲一下怎么用神经网络进行识别.

 

“机器学习”一般和“大数据”同时出现,我们建立一个神经网络之后,将分类好的图片传入神经网络后,神经网络会根据图片分类自动调整参数,当传入的图片足够多的时候,神经网络就能学习出正确的参数来区分图片类型.

 

整个训练过程也在网页中进行,首先对每种Maker图像进行取样,JS对这些样本进行旋转,缩放和位移的变化生成大量的图片训练集,训练完成后的神经网络就可以用作识别图像.当我们改变Maker图片后,可以重新训练新的神经网络.

 

任何一张图片传入神经网络之后一定会被进行分类,这会导致当用户没有提供任何Maker时,神经网络错误地进行分类,所以训练的时候增加了一个异常类,这类图片可以是任何数据.