玩这个Demo的时候需要一个有摄像头的电脑和手机，将鼠标移动到天气图标上会有二维码，用手机扫描二维码进入天气图标网页，将图标对准屏幕的黑色区域进行扫描就可以出现对应的动画。
这是一个Markerbase的AR程序，Markerbase就是识别一个特定的图像（的二维码...），而的AR可能是MarkerLess的，比如识别环境中的车，房子，行人。目前由于技术限制，大部分AR都是Markerbase的。
其实我觉得AR比VR更困难，VR只需要给用户“输出”一个虚拟世界，而AR还需要根据用户“输入”的现实世界，“输出”虚拟的效果。“输出”动画对于前端来说已经是轻车熟路，但是如何处理用户“输入”的现实世界是很大的技术挑战。虽然现代JS引擎已经很快了，但是在处理摄像头传入的图像数据任务时，单线程的JS的马车远远落后于同时代的Native火箭。
在WebRTC技术的支持下，我们可以拿到摄像头的数据并且把它绘制成图片，一旦用JS处理像素，噩梦就开始了。AR应用对计算速度要求极高，动画至少要30帧才能被用户勉强接受，也就是说，要在34ms的时间内，完成图像处理-->图像识别-->动画渲染。这三个操作都是CPU密集运算，如果全部用JS来做，肯定无法在一般配置的电脑上保证帧数。这时就要拿出WebGL和WebWorker一起来加速了。
图像识别的步都是图像处理，彩色图片中包含太多无用的信息，同时摄像头在连续拍摄的时候有噪点，需要把主要信息提取出来，并且尽可能降噪。
转换成黑白的算法有很多，但是基于GPU计算的话，大多还是边缘检测，边缘特征的点会被标记成白色，另外再对图中的白点大小进行筛选，太小的白点可能是摄像头的噪点。这样两步操作用WebGL来做60帧毫无压力。
接下来把黑白的图片像素读取出来进行图像识别，用GPU实现的图像识别还真的很少见，这里我选用了第三方的神经网络(ConvNetJS)进行图像识别。对于前端来说，神经网络还是一个比较陌生的词语。大概就是机器学习的一种算法，如果探索精神不是特别强，可以把它当成一个工具而不用了解具体实现，就像你用React不需要知道具体怎么将jsx转化成DOM。接下来主要讲一下怎么用神经网络进行识别。