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);