18. Html5的局: 用WebVR来解释小米VR眼镜

紧接上文

WebVR使用跨平台H5技术，降低了开发者的技术门槛，提升了开发效率，我们来做个VR的Demo如何？本周小米发布了VR头盔，头盔还自带芯片，那又是什么呢？

本次Demo二维码

依旧800k，这次可以支持URL在线播放WebVR的程序了。

WebGL+WebVR+Three.js

JS常见的3D引擎框架

Three.js

浏览器常见的3D动画引擎，居于WebGL的渲染技术，整合了常见的精灵、纹理、异步加载、动画、场景、骨骼等等，无需安装IDE，直接在浏览器上开发即可，目前网上已经有许多在线IDE，支持骨骼、地图、场景等绘制。同时，代码开源，易于定制，是前端同学学习成长的好榜样。

cocos-js

cocos和u3d是常见的手机游戏引擎，双方都出了3D和VR版本。cocos还支持H5运行模式，开发的游戏可以支持在H5上运行，同时也可以运行在自己的内核中。虽然cocos-js的性能已经有了质的提升，不过Native的运行环境并不是基于WebGL，而是基于自己的cocos内核，所以只能使用自己的cocosjs，并不支持第三方的动画引擎。这对于前端同学来说，可能丧失了自己的技术成长空间。

其他引擎

Construct 2 （收费）
PlayCanvas
Turbulenz
voxel.js
有喜欢的同学，可以研究一下

WebVR基础

随着移动互联网的快速发展，H5的标准在智能硬件领域的不足，逐步明显。WebVR出现，主要是弥补了头戴设备和定位设备的标准，分工了3种设备的关系。如下图所示：

head mounted display（HMD）

我翻译为：头戴显示器，HMD用来模拟虚拟世界的参与者
HMD在VR概念里，用来取代了显示器，同时把陀螺仪、重力感应、加速度、海拔等信息实时的同步给引擎。
参考最新发布的小米VR眼镜。
049元款，是基础版本，官方说是《玩具版》，只是一个玩具
199元款，是高配版本，官方说是：内置独立运动传感器，硬件级加速抗眩晕。
但小米不是完整的HMD，因为TA缺少了Display。
玩具版之所以称为之玩具，可以对比一下HMD的概念，只有两个放大镜。。

Position Sensor（PS）

我翻译为：场景位置定位仪，用于模拟虚拟世界的位置信息，包括高度等
PS在VR的概念里，用来取代我们GPS等定位设备，TA的精度要求非常高，不能让人感受到不真实，自己设想一下精度需要多高。
参考HTC VIVE发布的VR眼镜
不仅包含VR眼镜、主机，还包括了2个支架，对的，那两个支架在WebVR的概念里，就是PS
HTC VIVI的VR眼镜，才是WebVR里面的HMD，他包含了显示器！

主机

这点相信很多人都忽略了，主机才是真正的渲染和业务处理的核心。好一点的，用于VR的显卡，基本都是万元级别的，想想都是醉了。

距离我们最近的VR

CardBoard

VR纸盒眼镜，提供两个镜片做屏幕到人眼的光线转换。比如小米的玩具VR眼镜

手机

手机的显示器，可以作为VRDisplay
手机的处理器，可以作为VRComputer
手机的传感器，可以作为HeadMounted
手机的定位仪，不可以作为PS，因为她的精度最好的情况下，也只有10cm，这样的设备容易让参与者感受到明显的眩晕感。

VR内容的现状

只适合做位置保持不变的场景，或者用户的位置按照既定义的轨迹和速度，做有规律的变化。
参考Demo中的《过山车》和视频类的《VR视频》，也就是固定轨迹和规定坐标的两种内容方式。

从WebVR看技术和硬件发展的方向

3D建模工具化

对显示世界的物体，需要低成本、批量的、计算机化，快速生成3D模型，把现实世界的内容，快四的搬到虚拟世界，这点很像当年PC兴起时的过程，把线下的商品交易，搬到线上

手机传感器的精度化

手机可以作为HMD和PS，只要精度到达一定程度（这个标准可能是将来决定手机成败的关键），手机可以一统HMD、PS，成为VR核心。

手机CPU、GPU性能大幅提升

手机取代PC的主机，成为业务中心。CPU、GPU将会朝着更加节能省电、超级性能怪兽方向前进，PC市场进一步消失

商业分为线下、线上、虚拟三大流量入口

VR可以降低人们的出行成本，如果体验可以很好的话，
可以通过VR“进入”旅游目的地，感受当地的风情；
可以实现电影院效果，自己成为电影中的一个角色
可以模拟实战演习，减少不必要的消耗和伤害
可以帮助受伤患者，帮助健康恢复
。。。。

下集再见

接下来，我们会手把手的写一个3D小程序，无需安装任何IDE，直接在浏览器上开发&调试，感受WebGL时代的便捷。