使用 Bluemix 分析来自 Oculus Rift 的游戏数据

最新推荐文章于 2024-04-18 19:58:02 发布

露西的烦恼

最新推荐文章于 2024-04-18 19:58:02 发布

阅读量1.1k

点赞数

分类专栏： Bluemix 文章标签： Bluemix 游戏虚拟现实

Bluemix 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

虚拟现实 (VR) 是目前很重要的一项技术，VR 设备（比如 Oculus Rift）在科技公司（包括索尼和 Facebook）具有举足轻重的作用。用户与 VR 交互的方式很简单。设备捕捉玩家头部的移动，并将此数据发送给计算机，计算机创建一种沉浸式、交互式的虚拟环境。此外，所捕获的这些数据可存储起来供进一步分析，从而改善用户体验。Bluemix 是完成该任务的绝佳平台。

本教程将介绍如何使用 Bluemix 和 vr.js（一个浏览器插件）创建一个简单应用程序。此应用程序从 Oculus Rift 捕捉四元位置（x、y、z 和 w），并将它们发送到 Cloudant，后者是一个数据库即服务 (DBaaS)。您可以将此应用程序部署到 Bluemix，插入 Oculus Rift 并打开一个浏览器来使用它。

“可以集成 Node.js、Cloudant 和 Oculus Rift 来创建一个灵活的 VR 系统，这个系统可针对许多新应用程序类型而进行扩展。”

构建您的应用程序需要做的准备工作

*与您的 IBM ID 链接的 DevOps Services 帐户
* Bluemix 帐户
* Express framework 和 nano
* Cloudant 数据库
* vr.js 浏览器插件
* 对 Node.js 有基本的了解

第 1 步. 分解此项目

单击本教程的获取代码按钮，分解 DevOps Services 上的项目。

单击 EDIT CODE（如果尚未登录，则输入您的 DevOps Services 凭据）。
单击菜单上的 FORK 按钮创建一个新项目。
看到提示时，为新分解的存储库选择一个名称。我们选择的是 rift2cloudant。
勾选 Deploy to Bluemix。
单击 SAVE 在您项目中和一个 Git 存储库中创建该代码的一个副本。

您可以勾选 Make it private (not public) 复选框，将此项目设置为私有项目。目前保持其未选择状态。

为您的应用程序配置一个主机和名称

要将此代码部署到 Bluemix，需要设置一些配置，以便您能够为您的应用程序定义一个新主机和名称。

单击 BUILD & DEPLOY。
在打开的页面上，选择 OFF。我们不想自动将执行的更改部署在存储库中。
单击 EDIT CODE。
单击 manifest.yml。

您需要将现有的主机和名称更改为您服务器的一个惟一名称。我们将最初的 host 和 name 称呼更改为 rift2cloudant。

提交更改

单击 Git Repository 转到 git 状态页面：

接下来，暂存要提交的修改，然后将它们推送到存储库。

在文本框中，键入您所做的修改。
单击 Select All 添加要提交的文件。
单击 COMMIT：
单击 Push。
返回到 Show Current Folder。
单击 DEPLOY。
在弹出窗口中，按下 Deploy 来部署应用程序。

添加一个 Cloudant 服务

如果应用程序得到成功部署，则会在您的 Bluemix 帐户中启动一个新应用程序。添加一个 Cloudant 服务：

单击仪表板中出现的新应用程序。您应该会看到一个红点，指示应用程序尚未运行。
单击 ADD A SERVICE。
向下滚动，直到找到 Cloudant JSONDB 并选择它。

在 Name 字段中，键入 cloudant 并按下 Create。如果想要对 Cloudant 服务使用不同的名称，也需要更新 app.js 中的代码。查找此代码：

    
    
     
     
      
      
       
       
       
       
        
        1
       
       
      
      
      
      
       
       
       
       
      
      
     
     
     
     
      
      
     
     
     
     
      
      
       
       
       
       
        
         
       
       
      
      
     
     
     
     
      
      
      
      
      
      
      
      
      
      
       
       
        
            
        
        var
        
         cloudantServiceName = 
        
        'cloudant'
        
        ;

将会出现一个弹出窗口，告诉您重新启动应用程序。

单击 OK。

第 2 步. 克隆和推送

我们想保留应用程序的一个本地存储库，以便在修改代码时，可以将更改推送到 Bluemix。首先：

转到 DevOps Services 中您项目的主页并复制 git URL：
要将项目克隆到您的计算机，可以打开一个终端（如果使用的是 Windows，我们建议您使用 git bash），键入 git clone，然后粘贴刚复制的链接（例如 git clone https://hub.jazz.net/project）。
返回到您的 Bluemix 帐户，单击您的应用程序，然后打开 VIEW QUICK START。将显示此窗口：
在一个终端中，转到您克隆的文件夹并执行列出的步骤 1、2 和 3。

将更改推送到 Bluemix

在想要将更改部署在您 Bluemix 帐户中的应用程序中时，需要推送所做的修改。

打开一个新终端。
从克隆的存储库内部键入 cf push –c "node app.js"。

您的应用程序现在已在运行。Running 旁边会出现一个绿点。

第 3 步. 准备 DBaaS (Cloudant)

首先，创建 Cloudant 数据库。首先：

打开 Bluemix 仪表板，单击您的应用程序，然后单击 Cloudant 服务。这将打开一个新页面，其中显示了该服务的信息和如何开始操作。
单击 LAUNCH 访问该服务。请确保您位于 Databases 部分中（标为橙色）。
这一部分显示了您的所有数据库。我们想要创建一个新数据库，以便在应用程序中使用它，所以我们应该单击 Add New Database。
在弹出窗口的 Name of database 中，键入 users 来创建一个名为 users 的数据库。
接下来，创建一个名为 riftbase 的数据库。执行同样的步骤：单击 Add New Database，在提示时键入 riftbase。

第 4 步. 理解并配置应用程序

我们仍然需要安装该插件。但是首先，在进入应用程序本身之前，应对最重要的代码节有所了解。

此代码位于 app.js 文件中：

  
  
   
   
    
    
     
     
     
     
      
      1
     
     
    
    
    
    
     
     
     
     
    
    
   
   
   
   
    
    
   
   
   
   
    
    
     
     
     
     
      
       
     
     
    
    
   
   
   
   
    
    
    
    
    
    
    
    
    
    
     
     
      
      var
      
       cloudantServiceName = 
      
      'cloudant'
      
      ;

这是该程序将在 Bluemix 中查找 Cloudant 服务的地方。如果执行了前面的步骤，并创建了一个名为 cloudant 的服务，则不需要修改此信息。但是，如果创建了一个具有不同名称的服务，只需要将该代码更改为您所选择的名称即可。同样地，您应该在 Cloudant 中创建了两个数据库：user 和 riftbase。这些数据库将在两部分代码中调用：

  
  
   
   
    
    
     
     
     
     
      
      1
     
     
    
    
    
    
     
     
     
     
    
    
   
   
   
   
    
    
   
   
   
   
    
    
     
     
     
     
      
       
     
     
    
    
   
   
   
   
    
    
    
    
    
    
    
    
    
    
     
     
      
      var
      
       db = nano.db.use(
      
      'riftbase'
      
      );

和

  
  
   
   
    
    
     
     
     
     
      
      1
     
     
    
    
    
    
     
     
     
     
    
    
   
   
   
   
    
    
   
   
   
   
    
    
     
     
     
     
      
       
     
     
    
    
   
   
   
   
    
    
    
    
    
    
    
    
    
    
     
     
      
      var
      
       db = nano.db.use(
      
      'users'
      
      );

如果为您的数据库使用了不同的名称，则应修改此代码。

将数据发送到 Cloudant

此代码（位于 app.js 中）创建一个 post 处理函数，所以它可以发送将要存储在我们的 Cloudant 数据库中的信息：

  
  
   
   
    
    
     
     
     
     
      
      1
     
     
     
     
      
      2
     
     
     
     
      
      3
     
     
     
     
      
      4
     
     
     
     
      
      5
     
     
     
     
      
      6
     
     
     
     
      
      7
     
     
     
     
      
      8
     
     
     
     
      
      9
     
     
    
    
    
    
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    
    
   
   
   
   
    
    
   
   
   
   
    
    
     
     
     
     
      
       
     
     
    
    
   
   
   
   
    
    
    
    
    
    
    
    
    
    
     
     
      
      app.post(
      
      '/endpoint'
      
      , 
      
      function
      
      (req, res){
      
      
     
     
     
     
      
      	res.send(req.body);
      
      
     
     
     
     
      
      	db.insert({position:req.body},
      
      function
      
      (err, body, header) {
      
      
     
     
     
     
      
      		
      
      if
      
       (err) {
      
      
     
     
     
     
      
      			res.send(
      
      "Error creating file"
      
      );
      
      
     
     
     
     
      
      			
      
      return
      
      ;
      
      
     
     
     
     
      
      		}
      
      
     
     
     
     
      
          });
      
      
     
     
     
     
      
      });

这个 post 请求由一个名为 myTimer 的函数每秒触发一次（可以在 oculus.ejs 代码中找到myTimer，该代码是位于 views 文件夹中的 raw_data.html 代码的修改版本）：

  
  
   
   
    
    
     
     
     
     
      
      1
     
     
     
     
      
      2
     
     
     
     
      
      3
     
     
     
     
      
      4
     
     
     
     
      
      5
     
     
     
     
      
      6
     
     
     
     
      
      7
     
     
     
     
      
      8
     
     
     
     
      
      9
     
     
     
     
      
      10
     
     
     
     
      
      11
     
     
     
     
      
      12
     
     
     
     
      
      13
     
     
     
     
      
      14
     
     
     
     
      
      15
     
     
     
     
      
      16
     
     
    
    
    
    
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    
    
   
   
   
   
    
    
   
   
   
   
    
    
     
     
     
     
      
       
     
     
    
    
   
   
   
   
    
    
    
    
    
    
    
    
    
    
     
     
      
      function
      
       myTimer() {
      
      
     
     
     
     
      
      	
      
      if
      
      (state.hmd.present){
      
      
     
     
     
     
      
      		
      
      var
      
       data = {};
      
      
     
     
     
     
      
      		data.x = state.hmd.rotation[
      
      0
      
      ].toFixed(
      
      2
      
      );
      
      
     
     
     
     
      
      		data.y = state.hmd.rotation[
      
      1
      
      ].toFixed(
      
      2
      
      );
      
      
     
     
     
     
      
      		data.z = state.hmd.rotation[
      
      2
      
      ].toFixed(
      
      2
      
      );
      
      
     
     
     
     
      
      		data.w = state.hmd.rotation[
      
      3
      
      ].toFixed(
      
      2
      
      );
      
      
     
     
     
     
      
      		
      
      
     
     
     
     
      
      		data.seconds = (endTime - startTime)/
      
      1000
      
      ;
      
      
     
     
     
     
      
      		data.seconds = (data.seconds).toFixed(
      
      0
      
      );
      
      
     
     
     
     
      
      		
      
      
     
     
     
     
      
      		$.post(
      
      "/endpoint"
      
      , data, 
      
      function
      
      (response){
      
      
     
     
     
     
      
      			console.log(data);
      
      
     
     
     
     
      
      		});			
      
      
     
     
     
     
      
      	}
      
      
     
     
     
     
      
      }

这个 users 页面的代码位于 app.js 中。它将一个 Name 和 Age 发送到 Cloudant 上的 users 数据库：

  
  
   
   
    
    
     
     
     
     
      
      1
     
     
     
     
      
      2
     
     
     
     
      
      3
     
     
     
     
      
      4
     
     
     
     
      
      5
     
     
     
     
      
      6
     
     
     
     
      
      7
     
     
     
     
      
      8
     
     
     
     
      
      9
     
     
     
     
      
      10
     
     
     
     
      
      11
     
     
     
     
      
      12
     
     
     
     
      
      13
     
     
     
     
      
      14
     
     
    
    
    
    
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    
    
   
   
   
   
    
    
   
   
   
   
    
    
     
     
     
     
      
       
     
     
    
    
   
   
   
   
    
    
    
    
    
    
    
    
    
    
     
     
      
      app.post(
      
      '/insert'
      
      ,
      
      function
      
      (req,res){
      
      
     
     
     
     
      
      	
      
      var
      
       db = nano.db.use(
      
      'users'
      
      );
      
      
     
     
     
     
      
      	
      
      var
      
       name = req.body.name
      
      
     
     
     
     
      
      	
      
      var
      
       age = req.body.age
      
      
     
     
     
     
      
      
     
     
     
     
      
      	db.insert({name:name,age:age},
      
      function
      
      (err,body,header){
      
      
     
     
     
     
      
      		
      
      if
      
      (err){
      
      
     
     
     
     
      
      			console.log(err);
      
      
     
     
     
     
      
      			
      
      return
      
       res.status(
      
      500
      
      ).send(err.message);
      
      
     
     
     
     
      
      		}
      
      
     
     
     
     
      
      		res.send(
      
      "Contact was created successfully"
      
      );
      
      
     
     
     
     
      
      		console.log(
      
      "success"
      
      );
      
      
     
     
     
     
      
          });
      
      
     
     
     
     
      
      });

第 5 步. 安装 vr.js 插件

vr.js 插件使得 Oculus Rift 可以使用浏览器（Chrome 或 Firefox）工作。需要安装该插件才能打开您应用程序的主页，但没有它也能打开 users 页面。（主页和 users 页面将在以下步骤中介绍。）

这个 Oculus Rift 应用程序中使用的代码是对 GitHub 上的代码稍作修改的版本。

现在，在 app.js 文件中，我们可以编写一个 get 方法来呈现 oculus 页面，该页面使用了 vr.js 插件：

  
  
   
   
    
    
     
     
     
     
      
      1
     
     
     
     
      
      2
     
     
     
     
      
      3
     
     
    
    
    
    
     
     
     
     
     
     
     
     
    
    
   
   
   
   
    
    
   
   
   
   
    
    
     
     
     
     
      
       
     
     
    
    
   
   
   
   
    
    
    
    
    
    
    
    
    
    
     
     
      
      app.get(
      
      '/'
      
      , 
      
      function
      
       (req, res){
      
      
     
     
     
     
      
          res.render(
      
      'oculus'
      
      );
      
      
     
     
     
     
      
      });

第 6 步. 运行该应用程序

该应用程序有两个页面：主页和 users 页面。

主页

在打开应用程序的主页时，会跳转到一个显示从连接到计算机的 Oculus Rift 捕捉的数据的网页。如果您的 Rift 已经连接，那么该页面应类似于下图（请注意，这个页面每秒将四元位置上传到 Cloudant 中的 riftbase 数据库）：

oculus 使用四元系统，该系统是此页面中加粗显示的最后一个四元矢量。四元系统用于编码 3D 坐标系统中的任何旋转。

可存储来自此页面的任何值。在我们的应用程序中，仅存储了最后 4 个元素（四元值）。可以再次查看 myTimer 函数，了解如何从头戴耳机中检索这些值，并通过 post 方法发送它们。

阅读：有关四元法的更多信息

Users 页面

如果没有 Rift，或者某处出错而且您想确保应用程序在正常工作，那么可以将 “/users” 添加到 URL 末尾处来访问 users 页面（例如 http://bluemix.net/users）。此页面只是将数据发送到 Cloudant 的一个例子，不需要使用 Rift。填充这些方框并单击 Upload to Cloudant。随后，检查您的 Cloudant 数据库，查看您的信息是否已成功上传。

第 7 步. 验证数据集合并查询存储在 Cloudant 中的数据

要做的最后一件事是，检查数据是否已上传到 Cloudant 数据库。要显示每个数据库的完整文档，可以访问 Cloudant 数据库的链接并将此链接添加到 URL：_all_docs?include_docs=true。

类似地，如果单击 Edit doc：

数据会加载到页面中：

结束语

通过集成 Node.js、Cloudant 和 Oculus Rift 等技术，我们创建了一个灵活的 VR 系统，该系统可针对许多新应用程序类型进行扩展。尽管 VR 设备提供了玩家的数据，但 Bluemix 还提供了许多工具来存储和分析它。您可尽情尝试将 Bluemix 用于其他服务。您可尽情发挥您的想象，合并 SQL Database、MySQL、Analytics Warehouse 等服务。

点击这里，查看原文

露西的烦恼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用 Bluemix 分析来自 Oculus Rift 的游戏数据

虚拟现实 (VR) 是目前很重要的一项技术，VR 设备（比如 Oculus Rift）在科技公司（包括索尼和 Facebook）具有举足轻重的作用。用户与 VR 交互的方式很简单。设备捕捉玩家头部的移动，并将此数据发送给计算机，计算机创建一种沉浸式、交互式的虚拟环境。此外，所捕获的这些数据可存储起来供进一步分析，从而改善用户体验。Bluemix 是完成该任务的绝佳平台。本教程将介绍如何使
复制链接

扫一扫