漫谈 Web VR
2016-11-20 #HTML5 #VR #Coding

VR 初印象

VR 这个词想必大家已经不再陌生，说起 VR 可能最先想到的是游戏相关的内容。

161009141703530.jpg

1
const girlfriend = new Object();

比如以上 I 社的 VR 游戏「夏日客厅」，通过“欺骗”玩家的眼睛，让玩家有种身灵其境，确实在与其互动的感觉。

VR 是如何欺骗你的眼睛 —— 原理

79107.jpg

上图是一个 VR 视频的截图，大家会感觉并没有什么 VR 的体验，只是感觉看到了两个同步的视频。

这个视频还是需要一个 VR 眼镜来播放，通过 VR 眼镜来让两个同步的视频对接上左眼和右眼，来感受到一种立体的感觉。

001215.png

这个模拟出来的立体是基于人眼的深度知觉。

由于人的两个眼睛的位置不一样，眼距大约 5~7cm，看到的东西就会有视差，程序就是模拟了这个视差，让大脑看到两个图像在做融合处理，通过“欺骗”大脑就产生了所谓有深度的立体感觉。

如何在浏览器中搞事情 —— Web VR API

那么回到Web VR 上，我们如何用我们自己的双手创造个虚拟的女朋友那？这要说到Web VR的草案，是早期实验性 API。

MDN Web VR API 草案

草案链接：https://developer.mozilla.org/zh-CN/docs/Web/API/WebVR_API

MDN Web VR API 兼容性覆盖

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit）
Basic support Yes 39 NO NO NO
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support No 39.0 44.0 NO NO NO NO

备注：通过 webvr-polyfill iPhone中 Safari 实测可以，微信中web view也行

polyfill

WebVR仍处于w3c的草案阶段，所以开发和体验都需要polyfill。

Google的 Boris Smus 编写了 webvr-polyfill，同时也搞了一个示例项目 WebVR Boilerplate。图像处理上底层主要依赖于Three.js。

A-Frame 更方便快捷的方式

A Frame

A-Frame 是一个通过 HTML 创建 VR 体验的开源 WebVR 框架。通 过该框架构建的 VR 场景能兼容智能手机、PC、 Oculus Rift 和 HTC Vive。

目的就是吸引更多的开发者设计师参与到 Web VR生态中。

Demo 示例 场景、元素、镜头

1
2
<script src="./lib/aframe.min.js"></script>
<script src="./lib/aframe-extras.loaders.min.js"></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- 创建 scene 场景 -->
<a-scene>
    <!-- 引入外部资源 -->
    <a-assets>
        <img id="texture" src="gf.jpg">
        <img id="city" src="city.jpg">
    </a-assets>

    <!-- 球体 -->
    <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
    <!-- 长方体 -->
    <a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1"  color="#4CC3D9"></a-box>
    <!-- 圆柱体 src 贴图纹理 -->
    <a-cylinder position="1 0.75 1" radius="0.5" height="4"  src="#texture"></a-cylinder>
    <!-- 平面 -->
    <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

    <!-- 天空 -->
    <a-sky id="image-360" radius="10" src="#city"></a-sky>
    <a-entity position="0 0 3.8">
        <!-- camera 镜头 -->
        <a-camera wasd-controls-enabled="true"></a-camera>
    </a-entity>
</a-scene>

01540.png
点击右下角的 VR 眼镜标示即可进入 VR 模式，推荐用手机 Chrome 浏览器打开，然后将手机屏幕放置在 VR 眼镜框中即可体验。

导入自定义模型

从官网的 demo 示例中，你可以很快的创建一些场景和自定义元素并使用 VR 查看效果。

场景框架有了，舞台的主角模型怎么办？

  • 使用基础的组件，然后自己贴图调整
  • 使用建模工具，建模后导入

这里着重演示建模并导入的方式，毕竟建模工具的效率比手写代码还是高很多，同时也可以复用很多现有的模型资源。

使用 MagicaVoxel

MagicaVoxel 是一个快捷的模型编辑工具，比较适合一些类似像素风的建模。

619005215.png
先来打开一个vox文件下预设的模型chr_rain，就当成girlfriend把，然后在 Export 的时候选择ply格式，这个格式可以被 A-Frame 导入并使用。

当然，这里只是演示，你也可以用更复杂的模型编辑工具开发模型，只要可以导出为ply格式即可。

同样的我们也导入一个建筑模型monu9.vox，再导出为build.ply。

然后新建一个 demo.html 并创建场景、摄像机等（省略了 html body和资源导入等）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<a-scene inspector="url: ./lib/aframe-inspector.min.js">
      <!-- camera -->
      <a-entity position="-0.36 0.3 0.21" camera="active:true;userHeight:1.6;near:0.01" wasd-controls="enabled:true;" rotation="-32.887777440509275 -40.90918657234071 0" look-controls="" aframe-injected="" data-aframe-inspector="default-camera"></a-entity>
      <!-- assets -->
      <a-assets>
        <a-asset-item id="build" src="build.ply"></a-asset-item>
        <a-asset-item id="gf" src="gf.ply"></a-asset-item>
        <a-asset-item id="gf_2" src="gf_2.ply"></a-asset-item>
      </a-assets>

      <a-entity scale="" ply-model="src: #build" rotation="-90 0 0"  position="0 0 0"></a-entity>
      <a-entity scale="" ply-model="src: #gf_2" rotation="-90 0 0"  position="0 0 0"></a-entity>

</a-scene>

19004536.png
此时发现我们的“girlfriend”和建筑都过于巨大了，只能按S后退后才看清它们的面目，调整下这两个实体的scale属性，同时调整下position等。

1
2
<a-entity scale="0.01 0.01 0.01" ply-model="src: #build" rotation="-90 0 0"  position="0 1.18 0"></a-entity>
<a-entity scale="0.01 0.01 0.01" ply-model="src: #gf_2" rotation="-90 0 0"  position="0 1.77 -0.28"></a-entity>

9004651.png
然后在打开 VR 模式，既可以近距离的在建筑中观察我们导入的“girlfriend”。

至此，我们已经完成了用 A-Frame 实现了创建场景并导入模型调整，然后开启 VR 模式进行预览。

Web VR 应用展望

Web VR 潜力还有待挖掘，对于VR来说目前在工程、医疗领域应用更为直接，VR已经帮助过宇航员进行一些模拟作业训练。

对于线上WEB购物场景也可以进行VR+AR的结合应用。比如在京东 上购买家电家具，对比的时候很直观的用VR形式告诉你尺寸颜色等， 收藏之后再通过AR增强相机投放在自己家中的位置看合不合适。

更多的应用场景还有待我们不断去发掘。

参考资料

一些 Web VR的应用实例：

PREV
2016-11-20 #HTML5 #VR #Coding
NEXT