这篇文章应该在2个月前出现,但一直没有动力写它。直到最近在玩知乎,看到一个类似的问题。加上这是一个无聊的小长假,所以就写这篇文章。本文分为四个部分:基础知识:3D世界和四元数AHello,World应用-进阶示例由于本人只玩过公司的OculusDK2,所以本文以DK2的内容为准。其实使用JavaScript来使用VR程序非常简单:使用Node.js读取Oculus上的传感器数据,使用WebSocket协议为这些数据提供一个服务。寻找像Three.js这样的3D游戏引擎来创建3D世界。读取传感器的值代表它在3D世界中。这也可以用于混合应用,你只需要有一个CardBoard。用Cordova读取手机sensor的数据,然后用数据改变WebView的状态——除了发热会更严重外,应该没有其他影响。基础知识:3D世界和四元数在我们熟悉的3D游戏中,一个点的位置是由三个坐标(x,y,z)决定的,如下图:这三个坐标只能代表我们是在这个世界的位置上,却不能上下看世界。OculusDK2使用的MPU(MotionProcessingUnit)芯片是MPU6500,这是第二颗集成6轴运动处理元器件(第一颗是MPU6050)。可以数字输出欧拉角格式的6轴或9轴旋转矩阵、四元数、融合计算数据。这时候我们就需要欧拉角和四元数来表示虚拟世界中物体的状态。(PS:见谅,我只能简单提一下)欧拉角是一组用来描述刚体姿态的角。欧拉提出,刚体在三维欧几里德空间中的任何方向都可以通过绕三个轴的复合旋转来生成。通常,三个轴相互正交。对应的三个角度分别称为roll(横滚角)、pitch(俯仰角)和yaw(偏航角)。四元数是:四元数可用于表示三维空间中的旋转。它的另外两种常用表示(三维正交矩阵和欧拉角)是等价的。人们用四元数表示旋转是为了解决两个问题,一个是如何用四元数表示三维空间中的点,另一个是如何用四元数表示三维空间中的旋转。之前玩过的6050大概长这样。如果你玩四轴飞行器,你也应该这样玩:Copy/Paste看完上面的内容,你可能没有概念,我们举个hello,world的例子。示例:ahello,world让我们回到一开始提到的三个步骤,我们将需要做三件事:为Node找到一个Oculus扩展——不过,这现在可以交给WebVR。查找用于网络的3D库及其相应的Oculus显示插件。读取传感器数据并将其显示在虚拟世界中。如下图所示:于是找到了对应的Node库:Node-HMD,可以读取传感器的数据。还有Three.js和OculusEffect插件,可以显示如下视图:这样我们的DK2Control读取传感器的数据,我们就可以在这个虚拟世界里玩了~~。更详细的介绍可以看:https://github.com/phodal/oculus-nodejs-threejs-example高级应用:上面火星探测器的应用例子还是太简单了,我们来看一个高级应用——这是两个月前我们做的另一个Hackday创意,这是另一个“火星漫游者”:想象一下你想去火星,但你没有钱去。而且你可以像这样租一个机器人,然后你就可以漫游火星了。因此,首先我们需要一个实时的视频通讯,这里我们使用WebRTC:通过WebRTC,我们可以在电脑浏览器上实现实时通讯,然后通过Three.js,我们可以将这个视频转换成一个近似的3D视角。想要抓取这个视频,可以使用手机上的浏览器或者在手机上写一个相应的web应用。这里有一个在线Demo:http://laht.info/WebGL/DK2Demo.html架构大致如下图所示:这样我们就解决了实时视频的问题,接下来我们需要控制硬件:通过WebSocket协议提供Oculus的上下左右移动数据,读取手机上的传感器数据,通过BLE传输数据给小车。小车可以通过命令做出相应的动作。这部分内容可以看我之前的文章《我是如何 Hack 一个机器人的?》总结:AllinJavaScript比C(C++)更适合构建原型,快速、直接、有效。毕竟C++编译是需要时间的。运行效果也符合预期,电脑风扇转动的方式多种多样。不知道是不是Mac独有的。但是,我想这个性能问题一直存在。
