目录
基础知识:3D 世界与四元数
例子: 一个 hello,world
高级应用: 火星漫游者
总结: All in JavaScript
首页 web前端 js教程 为何JavaScript也将征服VR世界

为何JavaScript也将征服VR世界

Mar 08, 2017 pm 02:55 PM

这篇文章本应该在 2 个月前就出现了,但是一直都没有足够的动力去写。直到,我最近在玩知乎,也看到了一个类似的问题。加上这是一个无聊的小长假,就把这篇文章写出来。

这篇文章分成四部分:

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

  • 一个 Hello, World

  • 应用篇——高级示例

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

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

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

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

  3. 读取传感器的值将其表示在 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

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

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

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

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

如下图所示:

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

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

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

更详细的介绍可以见: http://www.php.cn/

高级应用: 火星漫游者

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

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

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

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

这里有一个在线的 Demo:http://www.php.cn/

架构大致如下图所示:

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

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

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

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

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

总结: All in JavaScript

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


以上是为何JavaScript也将征服VR世界的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

徕卡Sofort 2:徕卡味浓,但画质不尽如人意 徕卡Sofort 2:徕卡味浓,但画质不尽如人意 Jan 03, 2024 pm 04:08 PM

是的,我用三千多元买了一台真正的徕卡相机,这可不是什么小米、夏普联名,是真真正正的徕卡相机,甚至能在徕卡官方APP中找到它的存在。它就是徕卡上个月才发布的全新产品——Sofort2。(图片来源:雷科技摄制)在上个月我就曾写过一篇文章评论徕卡的这台新机简直是在割韭菜,三千多元买这么一台配置在拍立得市场中都极度落后的产品一定是钱多的没地方花,纯纯的「大冤种」。但秉持着我不入地狱谁入地狱的理念,我还是在开售当晚就下单了徕卡Sofort2,成为了一位「真正的」徕卡用户。外观:一台精致的玩具?徕卡Sofo

放弃ProXDR,OPPO做对了 放弃ProXDR,OPPO做对了 Jan 06, 2024 pm 11:37 PM

不久前,OPPO在巴黎影展上宣布与哈苏联手打造新一代超光影影像系统,将由OPPOFindX7系列首发搭载。选择在全球规模最大、最具影响力的摄影展上宣布这一消息,可见OPPO对于新一代超光影影像系统的重视程度。按照OPPO的说法,新一代超光影影像系统主要包含三部分:-超光影全主摄系统,从提升变焦倍率到打造多视角的创作自由;-超光影图像引擎,用更多的计算实现更少的计算痕迹;-超光影ProXDR显示,符合屏幕观看方式的照片显示技术。其中「超光影全主摄系统」是指影像系统的硬件,「超光影图像引擎」是指影像

魅族21 Pro能与大厂旗舰硬碰硬吗? 魅族21 Pro能与大厂旗舰硬碰硬吗? Jan 03, 2024 pm 06:10 PM

赶在11月的最后一天,魅族趁着骁龙8Gen3新机潮,带来了自家的年度旗舰新机魅族21。不久之前,本站还做了这款产品的评测,它是一款优点和缺点都比较明显的手机。而且,魅族21目前只有一款机型,不像其他品牌那样分成中杯、大杯。对想要一款超级旗舰的人来说,魅族21显得有点不够“Pro”。(图源:本站摄制)不过,最近网络上出现了关于魅族21Pro的爆料,这对想要更极致配置和体验的魅友来说,是个好消息。魅族21的屏幕不够强?2K屏来了!魅族21的充电功率不够高,百瓦快充来了!难道,魅族21只是“小试牛刀”

重新定义人机交互,荣耀MagicOS 8.0正式发布! 重新定义人机交互,荣耀MagicOS 8.0正式发布! Jan 11, 2024 pm 10:06 PM

2024年1月10日,荣耀在上海举行了今年的第一场线下发布会,MagicOS8.0正式登场。MagicOS8.0是荣耀打造的全新自研操作系统,行业首发新一代人机交互——意图识别人机交互。此外,新系统还带来了不少基于AI打造的全新功能,例如「任意门」、「对话成片」、「多模态日程管理」等。(雷科技摄制)荣耀将MagicOS8.0称之为继命令行交互、图形交互与自然交互后的新一代的交互模式系统,至于到底有多牛,我们接着往下看。会学习的系统,更懂你的系统提到「AI」,实际上,荣耀早在2016年就打造出了第

雷蛇炼狱蝰蛇V3专业版评测:权衡力量与轻便的代价是什么? 雷蛇炼狱蝰蛇V3专业版评测:权衡力量与轻便的代价是什么? Jan 03, 2024 pm 04:17 PM

前段时间关于游戏鼠标的讨论中,小雷提到第一只真正意义上的“游戏鼠标”是2003年发布于雷蛇的RazerBoomslang——一款DPI“高达”2500、轮询率125Hz的USB游戏鼠标。但其实说法并不准确,因为这款2100/25轮询率00DPI的Boomslang其实是这个系列的升级版了,它的上一代——发布于1999年的Boomslang才是真正意义上的第一款游戏鼠标。跟4年后发布的第二代相比,第一代Boomslang采用的是更为原始的PS/2接口,同时轮询率也只有10-200Hz;直到2005

新款经济实惠的 Meta Quest 3S VR 耳机出现在 FCC 上,暗示即将推出 新款经济实惠的 Meta Quest 3S VR 耳机出现在 FCC 上,暗示即将推出 Sep 04, 2024 am 06:51 AM

Meta Connect 2024 活动定于 9 月 25 日至 26 日举行,在本次活动中,该公司预计将推出一款价格实惠的新型虚拟现实耳机。据传这款 VR 耳机是 Meta Quest 3S,它似乎已经出现在 FCC 清单上。这个建议

华为星闪,要革蓝牙的命? 华为星闪,要革蓝牙的命? Jan 11, 2024 pm 09:51 PM

前段时间的发布会上,华为正式发布新一代无线连接技术——星闪(NearLink),不同于以往的无线技术,星闪并非基于蓝牙等传统无线技术的规范开发,而是华为在多年的无线技术积累的情况下,打造的全新无线连接规范。如果你没看发布会,没关系,让我们来快速了解一下星闪:使用一套标准集合蓝牙和WIFI等传统无线技术的优势,这项技术适用于消费电子、智能家居、新能源汽车、工业智造等多种场景。相比蓝牙技术,功耗降低60%、传输速率提升6倍,具备更低时延、更稳定连接抗干扰能力,覆盖距离提升2倍,连接数提升10倍。以上

石头洗地机A10 Plus体验:功能全面升级,体验如何? 石头洗地机A10 Plus体验:功能全面升级,体验如何? Jan 07, 2024 am 11:50 AM

石头科技在家庭清洁产品的强劲势头有目共睹,自有品牌的扫地机器人不仅站稳了脚跟,做到持续扩大用户群体,并在高端扫地机器人引入集尘、拖地、自清洁等功能的新时期仍有不俗竞争力。这之后,石头更是进入扫地机器人之外的品类,推出了手持吸尘器和洗地机产品。洗地机是扫地机器人后的又一个家庭清洁热门赛道,早早地涌入了老牌家电企业、科技创新品牌、原生创业公司等玩家,石头科技其实算得上是后来者。而在最近一两年间,洗地机产品的功能、性能、价格都发生了巨大变化,所有厂商都想率先成为彻底解决需求的赢家。石头科技就在如此竞争

See all articles