乐趣区

关于前端:WebVR系列文章1WebVR-和浏览器边缘计算革命

jiezi

虚拟现实 (VR) 正在进入各个行业，但尚未成为支流。WebVR 和边缘计算有可能进步 VR 的采用率并将 VR 带给更宽泛的受众。在本系列文章中，我会向你介绍 WebVR 和边缘计算的基础知识，并附有具体的示例。

虚拟现实（VR）是一个微小的技术浪潮，它曾经到来。无论你第一次拿着智能手机时的感触如何，第一次体验 VR 时计算机都会在各个方面提供更丰盛的情感体验。作为一个概念，VR 的存在工夫比第一部 iphone 的工夫更长，但将 VR 带给普通用户所需的技术直到最近才呈现。

Oculus Quest 是 Facebook 的 VR 消费者游戏平台。它的 次要特点是不须要 PC。因为它提供无线、挪动的 VR 体验。你能够在咖啡店里给某人一个 VR 头显来分享一个 3D 模型，尽管这么做与在对话中应用谷歌搜寻一样难堪，但它的共享体验所带来的的回报却更引人注目。因而，我能够预感的是，VR 将扭转咱们工作、购物、分享内容等的形式。

在本系列中，咱们将摸索以后反对 WebVR 和浏览器边缘计算的浏览器技术。本篇文章重点介绍会应用到的这些相干技术。

为了摸索这项技术，我制作了一个 Canvas 和 WebVR 演示。

VR 对用户体验意味着什么？

就像在挪动设施上那样，娱乐内容将会引领虚拟现实技术的遍及。然而，一旦 VR 像挪动利用一样成为支流，或者行业里就会蹦出这么一句：“VR First”，即 VR 优先。对于设计师和开发人员来说，这是一个十分激动人心的时刻，因为 VR 是一种齐全不同的设计范式。

VR 始于集体计算 (PC) 反动，但正在作为挪动反动的下一步到来。Facebook 的 Oculus Quest 应用高通公司的 Snapdragon 835 零碎级芯片 (SoC)、耳机跟踪（应用挪动摄像头）在 Google Cardboard 上构建，并在 Android 上运行。所有这些技术都通过封装的，能够舒服地装置在你脸部的柔软感觉器官上。

VR 的行业利用

VR 开始在泛滥行业和计算畛域中失去体现。除了常常受到媒体报道的内容生产和游戏之外，VR 正在从修建到医疗保健行业缓缓扭转。

  • 修建和房地产 以不凡的老本发明了物理事实的价值，因而建筑师和房地产经纪人很适宜通过虚拟现实来展现客户体验。
  • VR 在学习和教育中能够 传播本来无奈通过图像或视频复制的体验。
  • 汽车公司也 从 VR 中受害了，从设计、平安到培训和营销方方面面。
  • 斯坦福大学露西尔帕卡德儿童医院的 医疗保健 业余人员始终在 应用 VR 来打算心脏手术，让他们可能在进行单个切口之前理解患者的解剖构造。VR 也正在取代药物来缓解疼痛。
  • 批发、营销和酒店业也 曾经提供产品和地点来供顾客进行虚构旅行。

随着技术的提高，咱们将看到各个行业减少对 VR 的采纳。当初的问题是这种转变将以多快的速度产生，哪些行业将受到最大的影响。

VR 对 Web 和边缘计算意味着什么

“边缘计算”是 将计算从你的主应用服务器集群中移出 ，并更凑近你的最终用户。这个技术引起了营销行情，因为托管公司急不可待地在每个城市为你租用低提早服务器。
例如，在 B2C 边缘计算中，Google 的 Stadia 服务就是其中一个，它在 Google 的服务器上运行 CPU/GPU 密集型游戏工作负载，而后将游戏发送到 Netflix 等设施。任何蠢笨的 Netflix Chromebook 都能够忽然像高端游戏电脑一样玩游戏 。
而 B2B 边缘计算中，Nvidia 的 GRID 能够 为便宜的 Netflix 类设施提供反对 Nvidia GPU 的虚构近程工作站。

问题：为什么不将边缘计算从数据中心转移到浏览器中？

答案是能够的。其中，浏览器边缘计算 的一个案例就是计算机的“动画渲染农场”，它 通过将长达一天的过程分解成数以千计的计算机能够在几分钟内解决的块来渲染 3D 电影。

Electron 和 NW.js 等技术将 Web 编程带入了桌面应用程序。新的浏览器技术（如 PWA）正在将 Web 应用程序散发模型带回桌面计算。用户无需下载安装程序，当初只需拜访网站即可退出计算场中。

问题：WebVR 是“实在的货色”吗？

WebVR 是实在存在的。浏览器的边缘计算能够应用雷同的 API 来拜访反对 WebVR 的计算能力。为了验证这一点，我将对 N 体问题进行天体物理学模仿。

N 体问题是指找出已知初始地位、速度和品质的多个物体在经典力学状况下的后续静止

天文学家能够应用方程式来计算两个物体之间的引力。然而，对于具备三个或更多物体的零碎，没有方程，这对于已知宇宙中的每个零碎来说都是不不便的。

尽管 n 体问题没有解析方程，但它的确有一个计算解，即 O(n²)。O(n²) 简直是最坏的状况。

n-body 解决方案也让咱们置身于物理 / 游戏引擎的世界，摸索 WebVR 所需的技术。

Web Workers、WebAssembly、AssemblyScript、Canvas、Rollup、WebVR、Aframe

一系列新的 Web 技术，曾经呈现在古代挪动浏览器。例如咱们能够：

  • 应用 Web Workers 模仿转移到本人的 CPU 线程中，以便进步感知和理论性能。
  • 应用 WebAssembly 在晋升编译代码的运行效率。
  • 应用 Canvas 进行 2D 可视化模仿。
  • 应用 Rollup 和 Gulp 作为 Webpack 的轻量级替代品。
  • 应用 WebVR 和 Aframe 为你的手机创立虚拟现实场景。

API 设计和仿真循环

咱们的 n 体模仿应用重力来预测天体的地位。咱们能够用方程计算两个对象之间的确切力，但要计算三个或更多对象之间的力，咱们须要将模仿分解成小的时间段并进行迭代 。假如咱们的指标是 30 帧 / 秒（或 ~33 毫秒 / 帧）。
上面有这么一段 index.html 代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <style>
    html,
    body,
    #visCanvas {
      margin: 0;
      padding: 0;
      background-color: #1F1F1F;
      overflow: hidden;
      width: 100vw;
      height: 100vh;
    }

    #hud {
      color: white;
      position: absolute;
      top: 10px;
      left: 10px;
    }

    #hud a {color: white}

    #controls {color: white;}

    #controls button {
      color: white;
      background-color: green;
    }

    #visPrettyPrint {
      color: white;
      min-width: 310px;
      font-size: 10px;
    }
  </style>
</head>

<body>
  <canvas id="visCanvas"></canvas>

  <div id="hud">
    <h4>Demo: WebAssembly + Web Workers + Canvas</h4>
    <p>This "n-body problem" is CPU intensive, and this demo uses new browser tech to push hardware limits: WebAssembly,
      AssemblyScript, Web Workers, and Canvas.</p>
    <p>Solar system = stars + gas giants + "debris". Here is a barely stable star and 3 gas giants. Can you add inner
      planets, without destabilizing your gas giants?
      <div id="controls">
        <button id="mayhem">Throw Inner Planet Debris!</button>
        &nbsp;&nbsp;- &nbsp;&nbsp;
        <a href="#" target="_blank">Code</a>
        &nbsp;&nbsp;- &nbsp;&nbsp;
        <a class="glow" href="#"> 3d WebVR Version</a>
      </div>

      <pre id="visPrettyPrint"></pre>
  </div>

  <script src="main.js"></script>
</body>

</html>

这段代码中它运行了 main.js：

//  src/main.js

import {nBodyVisPrettyPrint, nBodyVisCanvas} from "./nBodyVisualizer"
import {Body, nBodySimulator} from "./nBodySimulator"

window.onload = function() {
  // 创立一个 nBodySimulator 实例
  const sim = new nBodySimulator()
  
  sim.addVisualization(new nBodyVisPrettyPrint(document.getElementById("visPrettyPrint")))
  sim.addVisualization(new nBodyVisCanvas(document.getElementById("visCanvas")))
  //                   name            color     x    y    z    m      vz    vy   vz
  sim.addBody(new Body("star",         "yellow", 0,   0,   0,   1e9))
  sim.addBody(new Body("hot jupiter",  "red",   -1,  -1,   0,   1e4,  .24,  -0.05,  0))
  sim.addBody(new Body("cold jupiter", "purple", 4,   4, -.1,   1e4, -.07,   0.04,  0))
  sim.addBody(new Body("asteroid",     "black", -15,  -15,  0,  0))
  sim.addBody(new Body("asteroid",     "black",  15,   15,  0,  0))

  sim.start()
  
  sim.addBody(new Body("saturn",       "blue",  -8,  -8,  .1,   1e3,   .07,   -.035,  0))

  function rando(scale) {return (Math.random()-.5) * scale
  }

  document.getElementById("mayhem").addEventListener('click', () => {for (let x=0; x<10; x++) {sim.addBody(new Body("debris", "white", rando(10), rando(10), rando(10), 1, rando(.1), rando(.1), rando(.1)))
    }
  })

}
  1. 它创立了一个新的 nBodySimulator()
  2. 同时，这个 nBodySimulator 实例蕴含了一些 API：
  3. sim.addVisualization()
  4. sim.addBody()
  5. sim.start()

这两颗小行星的品质为零，因而不受重力影响。他们将咱们的 2D 可视化放大到至多 30×30。最初一段代码是用于增加 10 个小内行星以取得的按钮事件！

接下来是咱们的“模仿循环”——每 33 毫秒，从新计算和从新绘制。如果你玩得开心，咱们能够称之为“游戏循环”。可能实现咱们的循环的最简略的事件是 setTimeout() – 这实现了我的目标。另一种办法是 requestAnimationFrame()。

sim.start() 通过每 33 毫秒（大概每秒 30 帧）调用 sim.step() 来启动操作。

// Methods from class nBodySimulator

  start() {const step = this.step.bind(this)
    setInterval(step, this.simulationSpeed)
  }

  async step() {if (this.ready()) {await this.calculateForces()
    } else {console.log(`Skipping:  ${this.workerReady}, ${this.workerCalculating}`)
    }
    this.trimDebris()
    this.applyForces()
    this.visualize()}

咱们将在 WebAssembly 中实现物理计算，并在独自的 Web Worker 线程中运行它们。

  1. nBodySimulator 包装了该实现的复杂性并将其拆分为几个局部：
  2. calculateForces() 承诺计算要利用的力。这些次要是浮点运算并在 WebAssembly 中实现。
  3. 这些计算是 O(n²) 和咱们的性能瓶颈。
  4. 咱们应用 Web Worker 将它们移出主线程，以取得更好的感知和理论性能。
  5. trimDebris() 删除任何不再乏味的碎片（并且会放大咱们的可视化）。O(n)
  6. applyForces() 将计算的力利用于实体。O(n)
  7. 如果咱们跳过 calculateForces()，咱们会重用旧的力量，因为工人曾经很忙了。这以准确性为代价进步了感知性能（打消抖动）。
  8. 即便计算工夫超过 33ms，主 UI 线程也能够绘制旧权势。
  9. Visualize() 将物体数组传递给每个可视化器进行绘制。O(n)

这所有都产生在 33 毫秒内！咱们能够改良这个设计吗？是的。好奇或有什么倡议？查看上面的评论。如果你正在寻找先进的古代设计和实现，请查看开源的 Matter.js。

结尾

娱乐将引领虚拟现实（如挪动）的内容，但一旦 VR 成为常态（如挪动），它将成为预期的消费者和生产力体验（如挪动）。

咱们从未像当初这样更有能力发明人类体验。成为一名设计师和开发人员从未像当初这样激动人心。遗记网页——咱们将建设世界。

咱们的旅程从不起眼的 Web Worker 开始，敬请期待咱们 WebVR 系列的下一部分。

退出移动版