为Google Cardboard打造VR友好型3D HTML5用户界面

vr2Vr2 2016-4-19 629 0

利用Autodesk的视角和数据API嵌入以网页为基础的VR样本开发兼容Gear VR和谷歌 Cardboard的安卓原生应用之后,我真的很想再度重拾UI设计问题。

1.jpg

看过由Oculus 移动 SDK提供技术支持的Gear VR 3D UI 效果之后,再看自己的HTML,就觉得实在是太一般了。(虚拟现实)看上去最主要的问题是,(头显)会随着你的头部运动而活动,而且会遮挡住你的视线。同时,当选项菜单偏移到中轴的时候,你还会感受到视线下移带来的不适。

总之,这不是什么很愉快的体验。但是如何让画面变得更3D立体又更具有视觉吸引力呢?我希望UI还是继续保留在HTML5(网页?)里,如果我使用原生Oculus 移动 SDK来呈现UI,就会遭遇无法与其他平台简易兼容的问题

而且将UI保留在HTML5中还意味着,我不必在原生应用中再把信息复制一遍,当我在网中添加东西时,同时也会出现在UI里。

所以我开始使用3D HTML5的样本设置,有几个有趣的地方。获得3D文本视图是一个问题,能根据设备的转动来调整视图又是另外一个问题。最终,我选择采用“3D旋转木马样本”作为UI操作的基础,只需要在设备上添加基础的转动导航就可以了

这个导航共有两个方向设置可供选择…鉴于开机就包含文本,而且文本太多无法一次性全部水平呈现出来,所以我只对其中垂直模式设置比较感兴趣。

我第一步就是首先根据我想要的进行硬编码(?),如下图:

2.jpg

几个小时后,我把垂直和水平方向的导航都设置好,以便能在VR中良好展现。我甚至还为两眼增加了一点视角差,以便能够有更强的3D效果。

3.jpg

在这个版本当中,我们能分别点击屏幕左右侧来控制选择键的上下。因为当页面在移动设备上加载时,添加设备转动支持其实很简单,比如:当你小幅度上下看的时候,选项就会随着你的视线上下动,当你大幅度上下看的时候,就选项就会两个两个地跳,这样你就能选得更快。

眼睛盯着向前看就会停止选择,同时你可以利用磁性触发器打开选项。

有意思的是,我发现尽管因为我们身体总是在运动着寻找方向而导致导航不固定,但在Gear VR的虚拟现实体验中,我并没有体会到在2D版本中那种反胃的感觉。

看上去导航更能适应头部运动,还能有效抑制眩晕感,而且效果也更3D

因为受到头显设备的驱动和启发,我现在移除了单击- vs.双击这样的安卓应用集装模式:只需单击即可打开模型,再点击一下就能关。

如果你拥有一个安卓设备和与Google Cardboard兼容的头显设备,这里有你可以拿来装上测试的应用(只要你装上,就能通过NFC自动开启)。如果你真的试了,请务必在下文评论里留言告诉我你的想法。最后,欢迎你对提升体验提出建议。

点赞 0 收藏 0
国内最大的 Vision Pro 内容平台 - 创造家

评论 (0)