NO END FOR LEARNING

Writing blog if you feel tired | 学海无涯 苦写博客

技术雷达之Web VR浅尝

| Comments

VR的风口

VR（Virtual Reality）即虚拟现实，这个作为由美国VPL公司创始人拉尼尔在20世纪80年代初提出的一个概念，在16，17年成为了除AI（在此感谢“阿法狗”）之外，最为接近风口的技术行业。

雷总说过“站在台风口，猪都能飞上天”，何况这只猪还有点本事。

回想一下，在这个风口上，哪些人已经参与进去了？VR设备厂家（VR眼镜），视频拍摄设备厂家（360度全景视频拍摄相机），视频制作工作室，游戏工作室，还有CCTV5体育台（忍不住笑出声），最后还有我们普罗大众（整个生态链上的消费者）。

Web VR

有时候，我还真的很羡慕那些做游戏开发的程序员，一边拿着高工资，一边实现着小时候的梦想，偶尔通宵紧急修bug也情有可原，看看他们现在又多了个玩具。

光羡慕可不行，我要充分发挥自己的能动性为最具程序员群众基础的Web程序员谋福利。

我们除了作为一个普通的消费者参与到VR的风口中，当真没有别的办法了？ThoughtWorks技术雷达第16卷（2017年）告诉你，答案就是Web VR。

什么是Web VR

下面快速的引用一下本期技术雷达对Web VR的描述：

Web VR是一组可让你通过浏览器访问VR设备的实验性JavaScript API。它已经获得了技术社区的支持，并有正式版本和每日构建的版本可用。如果你想在浏览器中构造VR 体验，那么WebVR将会是一个不错的开始。此项技术以及相关补充工具，例如 Three.js，A-Frame，ReactVR，Argon.js和Awe.js都能够为浏览器带来AR体验。除了互联网委员会标准以外，该领域中的各种工具也将有助于促进AR和VR更广泛的应用。

WebVR更主要的是一种开放标准，目的是能够从浏览器给用户带来VR体验。 –webvr.info

今天最主要的目的就是和大家一起快速的浏览一下三个github上比较火的开源Web VR技术。

Three.js

github: https://github.com/mrdoob/three.js/

光看这个名字，就能深深的感受它，和3d，和VR，和Web有着非比寻常的相关系。Three.js其实不是一个很新的东西，2010年的4月就已经发布了它的第一个开源版本R1（至今有7年了）。它是一个JavaScript 3D库，提供Canvas，SVG，CSS3D的渲染方式，但更多的是封装了底层的WebGL图形接口，以提供简化、高效的三维图形程序开发。

一个Three.js VR例子（可惜需要兼容性的浏览器，Android的Chrome，HTC Vive，Gear VR等）

A-Frame

github: https://github.com/aframevr/aframe/

A-Frame相对Three.js要更新一些，第一个开源版本发布于2015年12月。它是由Mozilla旗下的VR研究团队MozVR推出的开源框架，A-Frame旨在帮助开发者更轻松的开发在浏览器中运行的高性能响应式的VR体验。

和Three.js不同，A-Frame是纯粹的VR Web框架，而且它与现代Web开发的趋势结合更加紧密，使用Web开发者熟悉的HTML标签来创建WebVR场景，提供自定义的语义化标签，降低学习成本。你只需要仅仅几行代码就可以创建一个VR场景，如下：

1
2
3
4
5
6
7
8
9
10
11
12

<html>
  <head>
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box color="#6173F4" opacity="0.8" depth="2"></a-box>
      <a-sphere radius="2" src="texture.png" position="1 1 0"></a-sphere>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

因为A-Frame基于DOM，他可以和现有其他现代Web框架结合。比如：A-Frame-React。

A-Blast - Mozilla基于A-Frame研发的VR游戏（请在Wifi环境下打开）。

超强的场景Inspector工具 - A-Frame Inspector
A-Frame提供一个场景查看工具A-Frame Inspector，可以让你改变场景，操作组件。 Inspector工具

ReactVR

Mozilla都建立了自己的专门的VR团队来专注于A-Frame的研发，你想其他的巨头们就不会蠢蠢欲动，Facebook就是其中一个。

github: https://github.com/facebook/react-vr

一个好消息是React于2017年04月19日正式推出ReactVR（即正式开源），即去年第一次在Twitter上公布React VR项目已过去10个月了。

React的优势在于它已经在广大人民群众中打下坚实的基础，并且拥有了一群忠实的粉丝。从技术角度上谈，React VR使用了一个简化版的OVRUI库，其内部使用的是我们上面已经介绍的Three.js（即通过WebGL来渲染场景）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import React from 'react';
import {AppRegistry, Pano, Text, View} from 'react-vr';

class WelcomeToVR extends React.Component {
  render() {
    // Displays "hello" text on top of a loaded 360 panorama image.
    // Text is 0.8 meters in size and is centered three meters in front of you.
    return (
      <View>
        <Pano source={asset('chess-world.jpg')}/>
        <Text
          style={{
            fontSize: 0.8,
            layoutOrigin: [0.5, 0.5],
            transform: [{translate: [0, 0, -3]}],
          }}>
          hello
        </Text>
      </View>
    );
  }
};

AppRegistry.registerComponent('WelcomeToVR', () => WelcomeToVR);