Firefox踏出虚拟现实网络的第一步

0

firefox-logo

如果你够老,也许会记得 VRML,想起曾经在上世纪九十年代风光一时的虚拟现实技术大潮,将尚处萌芽阶段的万维网与虚拟实境结合在一起,妄想将科幻作品带入现实中来。 这个梦想被残酷落后的现实击碎,技术梦想家们也不在提及这些东西。不过,VRML 的理念和雄心却保留了下来。

当然时至今日,虚拟现实又死灰复燃,成长得愈加强壮、快速,并展现了能真正成为现实的绝佳可能性。因此尽管 VRML 已然不再,但它的后辈 X3D 事实上已经成长得相当不错,逐渐成为了程序员们为浏览器渲染 3D 内容并进行加速的标准。但是,基于大众的推动,以及对这类技术进行的鼓励依旧较少。

Vladimir_Vukićević
Vladimir Vukićević,WebGL 的工程师之一

而现在看起来 Mozilla 基金想借着重获新生的虚拟现实来激励新生代的虚拟现实网络内容。在一位主攻 3D 加速网络技术的知名图形程序员 Vladimir Vukićević 最近的一篇博客中,他描述了当年虚拟实境的梦想,然后阐述了一系列新的 API,可以让程序员为浏览器打造虚拟现实内容。

尽管时日尚早,但开发者们已经做出了一些例子,甚至还有入门的教学

浏览器支持可以允许简易的使用以及基于虚拟现实的可扩展网络内容,实乃重要的一步。沉浸式技术以及网络信息的融合让我们离传说中的虚拟实境越来越近。

 

以下为 Vladimir Vukićević 的博客原文


公众对于虚拟现实的兴趣越来越浓厚,因为类似 Oculus Rift 等显示设备以及 Leap MotionPrioVRSixense Stem 等输入设备正在逐渐组成一个强有力的生态系统,让高品质的消费级别虚拟现实体现离我们越来越近。

在网络方面的虚拟现实机会也很多。网络世界充满活力,各种不同的体验都在时刻被创造、分享。人们能够在浏览器里通过愉快的方式来让工作生活更有效率。网络可以称作是最早期的虚拟实境 — 而浏览器就是传送门。当然,它离理想状态还很远,也没有什么“虚拟”、“沉浸”等方面的元素。但是,难道我们就不能将三维立体虚拟宇宙的沉浸元素加入进来吗?网络是否有可能进化成史蒂芬孙描述的虚拟实境?

而今天,Firefox 打算为这些问题提供一些初步的思路。他们将为 FireFox 的实验版本加入对虚拟现实内容的原生支持,让网络开发者能够自由为他们的站点加入虚拟现实交互内容。当然,这只是万里长征的第一步。

最初的网络浏览虚拟现实技术特性包括:

  • 渲染 Canvas(WebGL 或 2D)影像输出到虚拟现实设备上
  • 渲染 3D 影像输出到虚拟现实设备上(尽量直接)
  • 渲染 HTML(DOM+CSS)内容输出到虚拟现实设备上 – 部分利用现有的 CSS 功能,比如 3D 变形功能等
  • 单一的 3D 画面,将由 WebGL 渲染的 3D 内容和 DOM 渲染的 3D 变形画面混合而成。
  • 接收方位、位置感应器的输入信息,功能特性集中在减少从输入/渲染到最终呈现的整体延迟上

特别要强调的是,网络内容不应该需要检测虚拟现实设备的种类,除非一些通用的渲染标准特性(比如某种需要的投射矩阵)。如果用 Oculus Rift 来打比方的话,内容不应该需要针对 Rift 特定的扭曲形变来进行渲染。

核心技术功能需要支持的第一种虚拟现实内容列表如上文所示:接收感应器输入信息并以虚拟现实形式来渲染 Canvas/WebGL 内容。在接下来几周内,代码作者 Vladimir Vukićević 将为网络平台进行针对虚拟现实的扩展与支持,使得以上皆为可能。此外,Mozilla 的 Josh Carpenter 将从用户体验和设计的角度来对这个问题进行解决,尝试找出一些虚拟现实网络内容的最佳呈现方式 – 比如浏览虚拟现实网络内容的感受应该是怎么样,制作虚拟现实网络内容可能是怎样,以及使用虚拟现实界面来浏览现有网页界面会怎样等等。

如果你有兴趣共同探讨,交流反馈,可以在这里订阅虚拟现实网络内容探讨邮件列表。如同任何技术性实验一样,社区期待大家发挥自己的创造性!


这是一个将会进行持续改进的代码段的预览版本,目的是让开发者可以为虚拟现实网络内容进行开发、实验。 Windows 以及 OS X 的版本现已可以下载,Linux 也将马上得到支持。目前,浏览工具仅支持 Oculus Rift,稍后也会支持其它设备(包括 Google 的 Cardboard 以及其它基于手机的浏览设备!)。

如何反馈漏洞: 因为这些代码还未进入 Mozilla 的上游代码库,因此任何相关问题请直接在这个 GitHub 页面 进行提交。当代码进入主库后,大家可以同往常一样使用 Bugzilla 来跟踪 Bug。其实,对码农来说,期待 Bug 和崩溃也是很有意思的事。

vrrenderer

这个 three.js 方块样本已经经过了修改,可以支持虚拟现实。按“f”切换到全屏。如果没有检测到 Oculus Rift 的接入,系统将模拟一个 DK1,但不会有任何方位输入(orientation input)。

在这里被列举的功能将会得到快速迭代变化;它们不代表任何标准,也将可能在接下来发布的任何版本中被改变乃至破坏。这些代码目前还未隶属任何 Firefox 源码树,尽管加入的过程已经开始了。这次发布的目的很简单:希望大家能针对这些代码做出实验,并给予反馈。目前发布所支持的 API 可以允许你:

  • 让元素全屏,并进行虚拟现实的后处理。对于这次发布,元素将支持左右分屏内容。
  • 查询推荐的每眼视野范围(FOV),以及设置每眼的视野范围。
  • 查询当前感应器的状态(方向,位置)。

还未引进,但也会马上加入的功能为:

  • [highlight style='smoke']requestAnimationFrame[/highlight]与感应器的时间 (比如,你目前查询的方位值将是连续的,并不会与渲染的某一帧连在一起)一致。
  • 全屏后自动为设备视角重置位置(你需要将浏览器窗口移动到虚拟现实设备的显示屏幕里去)。
  • 浏览器支持 CSS 内容的左右分屏渲染。

使用方面的技术细节:

[highlight style=’smoke’]mozGetVRDevices[/highlight]入口点将会把虚拟现实设备列表发送给一个指定的回调函数:

navigator.mozGetVRDevices(vrCallback);

这个回调函数将会接受一个阵列的设备,目前要么是一个[highlight style=’smoke’]HMDVRDevice[/highlight]要么是一个[highlight style=’smoke’]PositionSensorVRDevice[/highlight]。你需要先找到一个头戴设备,然后再找到其感应器。

var vrHMD, vrSensor;
function vrDeviceCallback(vrdevs) {
  // First, find a HMD -- just use the first one we find
  for (var i = 0; i < vrdevs.length; ++i) {
    if (vrdevs[i] instanceof HMDVRDevice) {
      vrHMD = vrdevs[i];
      break;
    }
  }

  if (!vrHMD)
   return;

  // Then, find that HMD's position sensor
  for (var i = 0; i < vrdevs.length; ++i) {
    if (vrdevs[i] instanceof PositionSensorVRDevice &&
        vrdevs[i].hardwareUnitId == vrHMD.hardwareUnitId)
    {
      vrSensor = vrdevs[i];
      break;
    }
  }

  if (!vrHMD || !vrSensor) {
    alert("Didn't find a HMD and sensor!");
    return;
  }

  startRendering();
}

当你得到一个 vrHMD 后,你可以去查询它的配置(初始为推荐的视角范围值):

leftFOV = vrHMD.getCurrentEyeFieldOfView("left");
rightFOV = vrHMD.getCurrentEyeFieldOfView("right");

leftTranslation = vrHMD.getEyeTranslation("left");
rightTranslation = vrHMD.getEyeTranslation("right");

样本 HTML 可能是这个样子:

<div id="container">
  <canvas id="content" width="1920" height="1080"></canvas>
</div>

请求全屏且带有形变效果的容器,调用:

document.addEventListener("mozfullscreenchange", fullScreenChange, false);

var container = document.getElementById("container");
container.mozRequestFullScreen({ vrDisplay: vrHMD });

如果 vrHMD 为空或者未激活,这个动作会成为常规的全屏请求。而当你得到了[highlight style=’smoke’]fullscreenchange[/highlight]事件后,将开始进行左右分屏的渲染模式:

function fullScreenChange() {
  if (document.mozFullScreenElement && vrHMD) {
    // reconfigure for two-camera left/right split rendering
    vrEnabled = true;
  } else {
    // reconfigure for non-VR single camera renering
    vrEnabled = false;
  }
}

当渲染某一帧时,你可以从感应器查询当前的方向和位置信息:

var state = vrSensor.getState();
if (state.orientation) {
  ... use state.orientation.xyzw as a quaternion ...
}
if (state.position) {
  ... use state.position.xyz as position ...
}

在立方体演示中,注意所有“container”容器内的内容皆为全屏 – 它可以包含 WebGL Canvas 以外的内容。尽管目前浏览器本身并没有直接支持左右分屏的 CSS 3D 内容渲染,你依然可以在这方面自己去做一些实验! mozilla_firefox


Source:RoadtoVRBitopsTyroVR

LEAVE A REPLY

Please enter your comment!
Please enter your name here