H5也能玩VR
In 视觉设计 on by 街霸
一直以来对VR技术都颇为关注，得知这一次香港电玩动漫展上SONY将大设展台，为其10月即将上市的PS VR造势后；立即问腾讯动漫小伙伴刷了几张电玩展的VIP票,准备前去接受SONY大法的洗礼。
来到展馆前时我瞬间就惊呆了...长龙般的队伍已经排场馆外的天桥上了，港胞们对电玩动漫展的热情真是刷新的我三观。通过VIP通道快速进入展馆后，在门口最显眼的位置就是到SONY大法的展台，齐刷刷的VR体验厅酷到不行，二话不说立马开刷。经过漫长的排队等候，终于体验到了传说中的PSVR。
简单的分享下体验感受：
之前看概念图，一直纳闷大法这设计咋那么奇葩，不像同类产品一样，眼镜的固定装置是在主体的两边。PSVR则是在眼镜上方通过一个类似紧箍咒样的圆环连接着眼镜主体。紧箍咒的重量既然比眼镜主体还重，但当我带上时，瞬间就能体会到大法产品设计师的用心所在了。
第一，我有佩戴眼镜，这样的设计让我轻松的将VR眼镜扣下来即完毕佩戴。这里要吐槽下Oculus Rift，根本就没有放眼镜的空间，且没有近视度数调节装置。这样的体验真心得对得起你高高昂的价格么...
第二，这样的设计把整个VR眼镜的重量平均分散到了额头上的一圈类似紧箍咒样的环。环内有特别柔软的橡胶。不会像在公司体验的Oculus Rift与HTC Vive那样，重量全部让你的脸跟鼻子来承担。这样玩一会儿游戏就会让你的苹果肌与鼻梁被设备压得非常不适。这一点SONY作为游戏硬件的老研发商，设备的人体工学设计还是相当到位的。整体佩戴的舒适性应该是目前同类产品中最好的。
接下来就是画质了，可能是出于对价格以及主机性能的权衡。PSVR的单眼分辨率只有960*1080，画质上自然略输于Oculus Rift与HTC Vive，但真的进入到游戏画面后体验到大法营造的游戏氛围时，这点差距根本就不是事..再配上大法新发布的枪型控制器VR Aim Controller整个游戏体验不要太赞..在竞品还在拼命追求硬件上的优越感时，SONY已经将自己能够掌握的技术与游戏完美的磨合了。
总体感觉PSVR无论是在性价比以及适用性上都有非常大的优势。而且PS4还有那庞大的粉丝群体，就当卖个情怀肯定也会大堆人买单.
这次体验唯一的遗憾就是排完队体验完设备后，发现展台的另一面有即将发售的PS4VR套装。现场预定名额...但发现时，名额早就被洗劫一空了... 这展台的设定就是个BUG啊.../(ㄒoㄒ)/
好了展会体验就先告一段落，接下来我们聊点正事。都说今年势必将是VR的元年，但真正能够得到成熟的VR体验用户还是相对较少的。最重要的因素还是设备的价格太不亲民。
我们来看看目前一些主流VR设备的市场价格：
按照最高配置OculusRift VR设备，想要玩起来还得配备一台高性能PC，一套下来怎么也得2万+吧。这样的价格对普通用户来说着实有点遥不可及。而且实际能够消费的内容也非常之少。
反观价格排名最后的Cardboard，科技龙头——大谷歌为啥会整出个如此粗坯纸盒子VR来？讲道理，大谷哥硬件上想秒OculusRift也是分分钟的事哇。其实，大谷哥早就看穿了一切。
当各个厂商还在军备竞赛时，谷歌就已经把目标锁定在海量的普通用户身上了。而纸板眼镜售价仅为20美元，就是为了让VR技术快速普及化。实时上Cardboard确实是目前最受欢迎的虚拟现实设备。
其实VR就那么简单!
人看周围的世界时，由于两只眼睛的位置不同，得到的图像略有不同，这些图像在脑子里融合起来，就形成了一个关于周围世界的整体景象，这个景象中包括了距离远近的信息。当然，距离信息也可以通过其他方法获得，例如眼睛焦距的远近、物体大小的比较等。
在VR系统中，双目立体视觉起了很大作用。用户的两只眼睛看到的不同图像是分别产生的，显示在不同的显示器上。有的系统采用单个显示器，但用户带上特殊的眼镜后，一只眼睛只能看到奇数帧图像，另一只眼睛只能看到偶数帧图像，奇、偶帧之间的不同也就是视差就产生了立体感。
就这样谷歌通过几块硬纸片加2块树脂玻璃透镜即可呈现VR效果。
不出所料，不久前谷歌就发布了Chrome浏览器将支持Web VR的消息！各大产商正在削尖了脑袋研究硬件的同时，谷歌早已把精力投入在打造VR平台上了—Daydream 中文简称白日梦系统。不同于Oculus和Vive的高端定位。谷歌通过简易的Cardboard就为一般消费者提供快速体验VR的场景。随着下半年Daydream硬件上市，Web VR战略会越来越清晰。
如果Chrome完美支持Web VR，谷歌将颠覆人们访问互联网的方式。
聊到Web VR这种扫扫二维码，再将手机放入类似谷歌纸盒VR眼镜里就能快速体验VR的亲民技术。这对于腾讯游戏海量的普通用户来说着实是个非常好的技术应用场景。
正好最近支持的游戏产品——龙之谷手游。其在CHINAJOY上，有一个跟玩家互动的送奖品的环节。而团队里的前端大神“万技师”对此技术也颇有研究，就打算借此次机会实验性的应用下Web VR技术。
这次CHINAJOY上龙之谷手游的主题是——重历阿尔特里亚大陆。找回曾经玩端游时的一些回忆。所以我们选择了游戏最开始时的新手关卡，通过WebVR技术让玩家通过沉浸式的体验，真正的进入一次熟悉游戏场景中。
拿到品牌经理的交互稿梳理后第一版设计是这样的...
设计稿给到前端大神万技师的手里时那么问题就来了。
首先在选择VR模式后用户就进入了一个3D的VR场景用户必须通过视野中心的圆点进行操作，这时背景就不能是黑色透明的了。去掉黑色底后也没法看了...最终优化成这样。
所以在设计开始游戏画面时需让标题与按钮融入场景中为妙。
再来就是设计在画面右上角的倒计时，在实际应用场景中位于VR眼镜的画面边缘其画面质量会下降得非常严重，也非常不利于阅读。应像击杀提示那样居中显示。为了不增程序的计算量所有的UI也都是跟随中心光标移动的。
还有因为VR模式中画面被分为左右2个屏幕显示，那画面里UI的大小应是正常情况下的两倍这样VR模式中才不会出现UI偏小不易阅读的情况。
最后在设置游戏过场镜头时尽量让镜头穿越一些物体，加入一些视角旋转的镜头让用户看到的画面更3D代入感更强一些。
以下是一些H5的录屏画面。
由于项目时间非常赶，细节上还有提升的空间。好在还是赶上了CHINAJOY，据品牌经理反馈实际现场效果也非常不错。
如果你身边正好有VR眼镜，可以体验下VR模式；如果没有，请选择普通模式。
由于本次应用针对线下场景，而合作方三星提供了最新的S7手机和GearVR设备，所以项目只针对S7做了体验优化，所以可能部分手机会有卡顿或者3D模型错乱的情况。
体验地址：
WebVR技术确实能低成本，较轻松的体验VR。日后当随着穿戴设备日益成熟，轻量、性价比高的VR眼镜能像耳机一样普及时；那VR平台或许将成为是下一个微信！
自此就快到分享的尾声了，这里要感谢前端大神“万技师”的给力技术支持。各位Leader的指导。品牌同学的信任与给予的机遇。这只迈向VR时代的一小步，后续会继续研发更多介于VR平台上的创意。
未来已来！让我们共同努力，加速让全盛的VR元年早日到来。