为什么 JavaScript 也将征服 VR 世界

这篇文章分成四部分:

基础知识:3D 世界与四元数

一个 Hello, World

应用篇——高级示例

因为我只玩过公司的 Oculus DK2,所以这里是以 DK2 为内容而展开的。

实际上,要用 JavaScript 来用 VR 程序是很简单的一件事:

使用 Node.js 来读取 Oculus 上的传感器的数据,将这些数据用 WebSocket 协议来提供一个服务。

寻找一个 3D 游戏引擎,如 Three.js 来创建一个 3D 世界。

读取传感器的值将其表示在 3D 世界中。

这点也可以用在混合应用上,你只需要有一个 CardBoard 即可。使用 Cordova 读取手机传感器的数据,再通过这些数据来改变 WebView 的状态——除了发热会比较严重,应该没有别的影响。

基础知识:3D 世界与四元数

在我们所熟知的 3D 游戏里,点的位置由三个坐标决定的(x,y,z),如下图所示:

这三个坐标只能表示我们在这个世界的位置,而不能上下的看这个世界。

Oculus DK2 用的是 MPU (Motion Processing Unit)芯片是 MPU6500,是第二个整合性 6 轴运动处理组件(第一个是 MPU6050)。它可以数字输出 6 轴或 9 轴的旋转矩阵、四元数(quaternion)、欧拉角格式(Euler Angle forma)的融合演算数据。

这时候,我们就需要欧拉角以及四元数来表示物体在虚拟世界的状态。(PS:原谅我只能简单地提一下)

欧拉角是一组用于描述刚体姿态的角度,欧拉提出,刚体在三维欧氏空间中的任意朝向可以由绕三个轴的转动复合生成。通常情况下,三个轴是相互正交的。

其对应的三个角度又分别成为 roll(横滚角),pitch(俯仰角)和 yaw(偏航角)。

而四元数则是:

四元数可以用于表示三维空间里的旋转。它常用的另外两种表示方式(三维正交矩阵和欧拉角)是等价的。人们用四元数来表示旋转要解决两个问题,一是如何用四元数表示三维空间里的点,二是如何用四元数表示三维空间的旋转。

之前玩过的 6050 出来大概就是这样子的,如果你玩四轴飞行器的话,你也应该这样玩过:

Copy/Paste 完上面的内容后,你可能没有啥概念,还是举个 hello,world 的例子。

例子: 一个 hello,world

让我们在回到一开始说的那三步,我们将需要做三件事:

寻找一个 Node 的 Oculus 拓展——不过,这件事现在可以交给 WebVR。

寻找一个 Web 的 3D 库,及其对应的 Oculus 展示插件。

读取传感器数据,显示到虚拟世界中。

如下图所示:

于是找至了对应的 Node 库有:Node-HMD,它可以读取传感器的数据。

还有 Three.js 和 Oculus Effect 插件,可以显示出下面的视图:

这样,我们 DK2 Control 读取传感器的数据,就可以到这个虚拟世界玩了~~。

更详细的介绍可以见: https://github.com/phodal/oculus-nodejs-threejs-example

高级应用: 火星漫游者

上面的应用示例还是太简单了,让我们来看一个高级应用——这是我们在两个月前做的另外一个 Hackday Idea,这是另外一个“火星漫游者”:

想象一下你想去看看火星,但是你又没有钱去。而你可以租用这样的一个机器人,然后你就可以在火星漫游了。

因此,首先我们需要一个实时视频通讯,这里我们就用到了 WebRTC:

通过 WebRTC 我们就可以在计算机浏览器上实现实时通讯,再通过 Three.js 就可以将这个视频转为一个近似 3D 的视角。而捕获这个视频即可以通过手机上的浏览器,也可以在手机上编写相应的 Web 应用。

这里有一个在线的 Demo:http://laht.info/WebGL/DK2Demo.html

架构大致如下图所示:

这样我们就解决了实时视频这个问题,然后我们还需要去控制硬件:

用 WebSocket 协议来提供 Oculus 的上、下、左、右运动的数据

在手机上读取这个传感器数据,并将这个数据通过 BLE 传送到小车上。

小车以通过指令来做相应的运动。

关于这部分内容的可以看我之前的那篇文章《我是如何 Hack 一个机器人的?》

总结: All in JavaScript

与C坑坑(C++)相比,JavaScript 更适合搭建原型——快速、直接、有效,毕竟 C++ 编译需要时间的。运行起来的效果也如预期的一样,电脑风扇各种转,不知道是不是 Mac 专有的。不过,我想这个性能问题是一直都有的。

====================================分割线================================
文章转载自 开源中国社区[http://www.oschina.net]

时间: 2024-08-31 14:44:18

为什么 JavaScript 也将征服 VR 世界的相关文章

Androi“.NET研究”d如何在三年时间里征服移动世界的

摩托罗拉Droid手机的出现被大多数人认为是Google在移动市场上的转折点 人们很容易会忘记,其实并不是很久以前,还没有人相信Android和我们的生活会有多大关系. 毕竟,Android的市场爆发也仅仅是在过去的一年里才真正开始的,大概也就是2007年秋天它的首次露面后的两年后.根据ChangeWave公司调查报告,今年上海徐汇企业网站设计与制作一月以来,Android在移动操作系统上的市场份额已经翻了一翻,截止到2010年第三季度,所有销售的智能手机中高达44%的设备是使用的Android

Android如何在三年时间里征服移动世界的

摩托罗拉Droid手机的出现被大多数人认为是Google在移动市场上的转折点 人们很容易会忘记,其实并不是很久以前,还没有人相信Android和我们的生活会有多大关系. 毕竟,Android的市场爆发也仅仅是在过去的一年里才真正开始的,大概也就是2007年秋天它的首次露面后的两年后.根据ChangeWave公司调查报告,今年一月以来,Android在移动操作系统上的市场份额已经翻了一翻,截止到2010年第三季度,所有销售的智能手机中高达44%的设备是使用的Android系统.Gartner调查公

VR浏览器,能否引爆新场景下的“入口之战“?

提及浏览器,可谓是一个古老的行业,伴随着互联网的发展延续至今.PC时代,微软凭借着IE的"免费+捆绑"策略保持了其长达10余年的垄断统治,一度占领着PC时代的入口. PC时代已经证明了浏览器商业化方向,作为一个高活跃度.强展现力的平台,浏览器在移动时代承载的服务范围会更多,服务越多,意味着商业价值越大,鉴于此以BAT为首的巨头均在布局移动端浏览器. 可以说,互联网发轫伊始,以浏览器为焦点的互联网巨头交战一直未曾停歇.究其缘由就是"入口效应","入口&quo

使用 React 构建 VR 应用 React VR

React VR 详细介绍React VR 可让您使用 JavaScript 构建 VR 应用程序.它使用与 React 相同的设计,让您通过声明式的组件构建丰富的 VR 世界和 UI. React VR 是为 VR 应用而创建的框架,运行在 Web 浏览器中.它将现代 API(例如 WebGL 和 WebVR)与 React 的声明能力结合起来,通过各种设备提供适用于消费者的体验. 示例代码: import React from 'react'; import {AppRegistry, Pa

一名UX设计师的VR设计初体验

  本文是某VR团队设计总监在这个新领域当中进行设计初体验时所得到的一些经验分享.相信如今有很多设计师一方面不具备相关的经验,一方面又希望进入VR领域去扩展技能.开拓视野.所以希望本文能够为各位带来一些指引与帮助. 恩,这次仍是VR探索,从设计师职能出发的实战经验漫谈;对比之前的几篇,慢慢可以发现如今的设计先行者们所汇总的东西当中会有一些重要的交集.在尚未实际进入领域之前,通过识别这些交集,我们或许也可以摸到一些关键的东西了.我个人目前还没有能力去做任何偏技术的文章,例如3D方面;在当前阶段,对

基于JavaScript语言的快速物联网开发架构

随 JavaScript 语言的流行,及物联网领域的崛起,我们能看到它们结合的可能性,同时也发现它特别适合于物联网开发.因此,在这篇文章里,笔者将主要从以下三个方面进行介绍: 典型的物联网架构,及多种语言带来的问题: 只使用 JavaScript 语言的物联网架构: 详解基于 JavaScript 语言的物联网不同层级结构. 那么,先让我们看看典型的物联网架构是怎样的吧. 典型的物联网架构 我们甚至还可以认为,物联网只是对互联网的扩展.与传统的 C/S 架构相比,它多了一个"数据采集层"

备战未来,6款优秀的AR/VR开源库推荐

如果说去年是" VR 元年",那今年则可以称得上是 AR 的爆发年.2017 年,VR 市场趋于平静,技术逐渐沉淀;而 AR 增强现实技术的关注度却在不断升温.前段时间发布的支持 AR 的 iOS11 ,也玩出了各种花样.接下来,推荐几款优秀的 AR/VR 开源库,希望能对大家有所帮助. 1.AR.js AR.js 是一款应用于 Web 的高效增强现实(AR)库,基于 three.js + jsartoolkit5,无需安装.它适用于任何带有 webgl 和 webrtc 的手机,且运

谷歌设计师出品的VR设计指南之基础概念与设计工具

  在本文的第二部分当中,我们来了解一些作为设计师需要掌握的VR基础概念及相关设计工具.我们不会探索的过于深入,面向设计师的职能点到为止即可. 新的空间维度与沉浸式体验所带来的冲击是前所未有的.要在三维世界当中打造令人舒适的互动体验,你需要了解一些此前可能并未接触过的设计与技术原则.我们的Cardboard团队将一系列概念知识打包到了Cardboard Design Lab这款app(Android)当中,你可以配合Cardboard沉浸到VR世界当中进行学习. 此外还要记得观看Alex在201

统治网络:JavaScript的胜利

JavaScript正凭借新型工具与功能提升以极度夸张的速度吞噬整个世界.我们是否应该接受这一无法逆转的趋势? 还记得那些旧日往事吗?很多用户因为担心安全问题而在浏览器中禁用JavaScript.如今这样的担忧已经显得相当可笑--JavaScript已经成为统治网络世界的绝对王者. 在以平台多样性为标志的计算时代之下,我们需要能够运行在任何设备浏览器当中的应用程序.原生应用的运行速度也许更快.对于特定平台的功能利用效果也非JavaScript可及,但云时代的来临显著缩小了二者之间的差距.现在摆在