资讯频道 → 编程语言
阅读更多

0顶
0踩

编程语言

转载新闻 为什么JavaScript也将征服VR世界

2016-04-11 16:34 by 副主编 mengyidan1988 评论(1) 有6416人浏览
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的例子。

2.例子
一个hello,world
让我们在回到一开始说的那三步，我们将需要做三件事：
  • 寻找一个Node的Oculus拓展——不过，这件事现在可以交给WebVR。
  • 寻找一个Web的3D库，及其对应的Oculus展示插件。
  • 读取传感器数据，显示到虚拟世界中。

如下图所示：



于是找至了对应的Node库有：Node-HMD，它可以读取传感器的数据。
还有Three.js和 Oculus Effect插件，可以显示出下面的视图：



这样，我们DK2 Control读取传感器的数据，就可以到这个虚拟世界玩了~~。
更详细的介绍可以见：[url=" https://github.com/phodal/oculus-nodejs-threejs-example"] https://github.com/phodal/oculus-nodejs-threejs-example[/url]

3.高级应用
火星漫游者

上面的应用示例还是太简单了，让我们来看一个高级应用——这是我们在两个月前做的另外一个Hackday Idea，这是另外一个“火星漫游者”：
想象一下你想去看看火星，但是你又没有钱去。而你可以租用这样的一个机器人，然后你就可以在火星漫游了。
因此，首先我们需要一个实时视频通讯，这里我们就用到了WebRTC：



通过WebRTC我们就可以在计算机浏览器上实现实时通讯，再通过Three.js就可以将这个视频转为一个近似3D的视角。而捕获这个视频即可以通过手机上的浏览器，也可以在手机上编写相应的Web应用。
这里有一个在线的Demo：http://laht.info/WebGL/DK2Demo.html
架构大致如下图所示：



这样我们就解决了实时视频这个问题，然后我们还需要去控制硬件：
  • 用WebSocket协议来提供Oculus的上、下、左、右运动的数据
  • 在手机上读取这个传感器数据，并将这个数据通过BLE传送到小车上。
  • 小车以通过指令来做相应的运动。
  • 关于这部分内容的可以看我之前的那篇文章《我是如何Hack一个机器人的？》，链接: https://www.phodal.com/blog/how-to-hack-a-robot/

4.总结——All in JavaScript

标题自然只是用来吸引读者来看的~~。与C坑坑（C++）相比，JavaScript更适合搭建原型——快速、直接、有效，毕竟C++编译需要时间的。运行起来的效果也如预期的一样，电脑风扇各种转，不知道是不是Mac专有的。不过，我想这个性能问题是一直都有的。

作者：phodal，出处：微信公众平台 phodal。
  • 大小: 23 KB
  • 大小: 594.2 KB
  • 大小: 130.3 KB
  • 大小: 92.5 KB
  • 大小: 17.5 KB
  • 大小: 248.1 KB
  • 大小: 136.7 KB
  • 大小: 49.3 KB
来自: phodal
0
顶
0
踩
评论 共 1 条 请登录后发表评论
1 楼 wentong0118 2016-04-13 10:57
 

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 解决SVN showlog速度慢的问题

    SVN版本数达到一定数量或运行时间长后，SVN的showlog功能变得非常慢 环境：Trac带的SVN HTTP的方式访问。 原因： 由于Http中默认配置的日志文件为单一一个文件，日积月累变得庞大，有10几个G的规模。 解决： ...

  • SVN:show log问题

    如果客户端SVNTortoiseSVN(TortoiseSVN)出现:show log with no date情况，如下图1所示： 图1 问题解决办法： 1.将客户端SVN(TortoiseSVN)的Log Caching/Cached Repositories下出现 no date的Repository URL 删除...

  • svn show log查看失败

    1.对服务器SVN做以下修改： (1)找到你SVN版本库下conf文件夹下的svnserve.conf文件； (2)打开svnserve.conf文件，将其中名为anon-access的一项设置为 anon-access = none。 这样的话，日志文件即可显示正常。 2.对于...

  • log出错 svn客户端show_解决SVN客户端修改log message失败的问题

    解决svn客户端修改log message失败的问题使用SVN进行版本管理的时候，有时候我们会发现之前提交修改时备注的记录并不是很完整，为了以后可以查看完整的修改记录，我们就需要对之前提交过的“log message”进行修改。...

  • SVN 在Show log时提示offline for now

    SVN 在Show log时提示offline for now 右键小乌龟,然后选择revision graph,出来个窗口进度走完关闭,然后再去查看log,就ok了。

  • SVN解决log日期锁定在1970无法修改的问题

    1.svn查看log时，提示“Want to go offline”错误 2.关闭 或 cancel该提示对话框后，显示1970时间 解决方法 右键 -> TortoiseSVN -> Revison graph

  • Svn更换地址后突然看不了show log

    （引用 svn查看不到自己最近的log - zyz913614263 - 博客园） 后来在网上又查到了一种方法拯救了我 图2 （引用 svn 不显示日志的终极办法_bfult的专栏-CSDN博客） 具体介绍一下第二种操作方式 1.项目右键-》...

  • SVN show log 提示连接服务器失败,需要离线

    问题：svn查看日志显示连接服务器失败。你想使用缓存中的数据吗？后面还有三个选项“立即离线、永远离线、取消“。点击取消显示“Item is not readable”，没有日志信息。 在修改文件后show log无法显示日志，上面...

  • 关于svn的show log 问题

    部署了一套svn repository, 直接复制以前的模板，结果show log时，出现了offline 提示。找了半天资料，发现和在svnserve.conf 文件的配置有关，在svnserve.conf 文件中设置anon-access = none就可以了。记录一下。 ...

  • 【SVN】常见问题——show log无法显示日志1970

    解决办法： 1. vim svnserve.conf，修改 “anon-access=none” 2. 在authz中添加  ...3.重启，ps -aux 找到svn的PID，并复制命令如：svnserve -d -r /var/svn/ 4.执行svnserve -d -r /var/svn/ ...

  • [svn]log命令

    0.svn-log命令参数及说明 svn help log wangyetao@linux_u1604:~/LinuxRoom/PROJECT_CODE_PHP/cfzx_mobile/cfzx$ svn...log: Show the log messages for a set of revision(s) and/or path(s). usage: 1. log [PATH...

  • log出错 svn客户端show_SVN使用：用TortoiseSVN查看Log 无法显示最新的版本和Log信息问题...

    SVN使用：用TortoiseSVN查看Log 无法显示最新的版本和Log信息问题使用svnadmin dump 和load删除版本库中最近提交的十几个无用版本后，再次提交了几个版本，使用TortoiseSVN查看版本库的log信息，发现无法显示最新的...

  • svn查看日志(show log)显示时间为1970正确的解决方案

    其他解决问题 背景由于在公司使用, svn服务端不在本地,无法修改svnserve.conf 而别人都可以查看,自己无法查看 寻找测试无数的方法还是无法解决 后来发现可以在eclipse或者idea编辑器查看历史记录 暂时将就使用 最近...

  • svn 在show log 时候出现 want to go offline

    Show log 这里会提示连接不上服务器或者让我们离线查看日志缓存 解决方法： 方法1、在本人的机器上（win10系统），TortoiseSVN 1.9以上的版本都有这个问题，直到换成1.8的版本才没有问题。这边提供1.8.12下载...

  • SVN客户端show log出错的解决方案

    在使用SVN showLog功能的时候，客户端报告错误:unreadable

  • SVN show log 提示连接服务器失败,需要离线.

    问题：svn查看日志显示连接服务器失败。你想使用缓存中的数据吗？后面还有三个选项“立即离线、永远离线、取消“。点击取消显示“Item is not readable”，没有日志信息。在修改文件后show log无法显示日志，上面的...

  • TortoiseSVN 使用show log 无法查看日志问题解决方案

    服务器上把仓库目录下面的svnserve.conf里的anon-access = read改成anon-access = none，或者新增anon-access = none保存后重试即可.

  • svn修改log信息

    有天提交文件忘记了填写SVN提交日志，于是在项目中使用右键，show log，找到我提交的无日志的那条记录，点击右健，选择了“Edit log message"，想补充一下日志，结果报了下面的错误。 Repository has not been ...

  • 基于springboot教育资源共享平台源码数据库文档.zip

    基于springboot教育资源共享平台源码数据库文档.zip

  • 视频笔记linux开发篇

    linux开发篇，配套视频：https://www.bilibili.com/list/474327672?sid=4493702&spm_id_from=333.999.0.0&desc=1

Global site tag (gtag.js) - Google Analytics