一股巨大的技术浪潮已经到来——虚拟现实(VR). 你第一次拿着智能手机的感觉, 第一次体验虚拟现实可以在计算的各个方面提供更丰富的情感体验. 从第一代iPhone到现在才过去了12年. 作为一个概念, VR出现的时间甚至更长, 但直到最近，将VR带给普通用户所需的技术才出现.
眼睛的追求是Facebook的虚拟现实消费游戏平台. 它的主要特点是不需要个人电脑. 它提供了一种无线、移动的VR体验. 你可以在咖啡店里递给别人一个VR头显，让他们分享一个3D模型，就像在谈话中用谷歌搜索一样尴尬, 然而，共享体验的回报更引人注目.
VR将改变我们工作、购物、享受内容的方式，等等.
在本系列中, 我们将探索当前支持WebVR和浏览器边缘计算的浏览器技术. 第一篇文章重点介绍了这些技术和我们模拟的架构.
在接下来的文章中，我们将重点介绍代码中的一些独特挑战和机遇. 为了探索这项技术，我制作了一个Canvas和WebVR演示，并在GitHub上发布了代码.
作为一个 Toptal开发人员，我帮助企业将项目从想法转变为用户测试. 那么VR是如何与商业网络应用相关联的呢?
娱乐内容将引领虚拟现实的发展(就像它在移动领域所做的那样). 然而, 一旦VR像手机一样成为主流, “vr优先设计”将是预期的体验(类似于“移动优先”).
“移动优先”是一种范式转变, “离线优先”是当前的一种模式转变, “虚拟现实优先”即将到来. 对于设计师和开发者来说，这是一个非常激动人心的时刻, 因为VR是一种完全不同的设计范式(我们将在本系列的最后一篇文章中对此进行探讨)。. 如果你做不到这一点，你就不是VR设计师 控制.
VR始于个人电脑(PC)革命，但作为移动革命的下一个阶段而到来. Facebook的 眼睛的追求 使用高通骁龙835系统级芯片(SoC)在Google Cardboard上构建, 头戴式跟踪(使用移动摄像头), 并在安卓系统上运行——所有这些都是包装好的，可以舒适地安装在你脸上柔软的感官上.
价值400美元的眼睛的追求拥有我可以与朋友分享的奇妙体验. 1000美元的新款iPhone不会再给人留下深刻印象. 人类是不会放弃虚拟现实的.
VR开始在许多行业和计算领域发挥作用. 除了内容消费和游戏, 哪些会得到媒体的大量报道, VR正在慢慢改变从建筑到医疗保健等行业.
随着技术的进步，我们将看到越来越多的行业采用这种技术. 现在的问题是，这种转变将以多快的速度发生，哪些行业将受到最大的影响.
“边缘计算”将计算移出主应用程序服务器集群，更接近最终用户. 它在市场上很受欢迎，因为托管公司迫不及待地想在每个城市为你租一台低延迟的服务器.
B2C边缘计算的一个例子是谷歌 视距服务, 在谷歌服务器上运行CPU/GPU密集型游戏工作负载的游戏, 然后将游戏发送到Netflix等设备. 任何愚蠢的Netflix Chromebook都可以像高端游戏电脑一样玩游戏. 这也为紧密集成的整体多人游戏创造了新的架构选择.
一个B2B边缘计算的例子是 Nvidia的网格该公司为廉价的Netflix类设备提供支持Nvidia gpu的虚拟远程工作站.
问题: 为什么不把边缘计算从数据中心转移到浏览器呢?
浏览器边缘计算的一个用例是计算机的“动画渲染农场”，通过将一天的过程分解成数千台计算机可以在几分钟内处理的块来渲染3D电影.
等技术 电子 和 NW.js 将web编程引入桌面应用程序. 新的浏览器技术(比如PWA)正在将web应用程序分发模型(SaaS就是关于分发的)带回桌面计算. 例子包括SETI@Home、Folding@Home(蛋白质折叠)或各种渲染农场等项目. 而不必下载安装程序, 现在只要访问网站就可以加入计算农场.
问题: WebVR是一个“真实的东西”，还是VR内容会被挤进“应用商店”和“围墙花园”?
作为一名Toptal自由职业者和技术专家，我的工作就是了解. 所以我做了一个技术原型来回答我自己的问题. 我发现的答案是非常令人兴奋的，我写了这个博客系列与你分享.
剧透: 是的，WebVR确实存在. 是的, 浏览器边缘计算可以使用相同的API来访问支持WebVR的计算能力.
为了验证这一点，我们将对n体问题进行天体物理学模拟.
天文学家可以用方程来计算两个物体之间的引力. 然而, 有三个或更多物体的系统没有方程, 不方便的是，已知宇宙中的每一个系统. 科学!
而n体问题没有解析解(方程), 它确实有一个计算解决方案(算法), 也就是O(n²). O(n²)几乎是最坏的情况, 但这是得到我们想要的东西的方法, 以及为什么大0符号会被发明出来.
图2: “向上，向右? 我不是工程师，但我觉得性能不错!”
如果你要掸掉你的 大O技能, 记住，大O符号衡量算法的工作是如何根据它所操作的数据的大小“扩展”的.
我们收集的是模拟中的所有尸体. 添加一个新物体意味着为集合中每个现有物体添加一个新的两物体重力计算.
While our inner loop is < n, it is not <= O(log n), so the whole algorithm is O(n²). 这些都是休息时间，没有额外的学分.
for (let i: i32 = 0; i < numBodies; i++) { // n
// Given body i: pair with every body[j] where j > i
for (let j: i32 = i + 1; j < numBodies; j++) { // ½ n is > log n, so n.
//计算物体相互作用的力
东西=东西
}
}
n体解决方案也让我们进入了物理/游戏引擎的世界，并探索了WebVR所需的技术.
对于我们的原型，一旦我们建立了模拟，我们会做一个 二维可视化.
最后，我们将把Canvas可视化替换为 WebVR版本.
如果你没有耐心，你可以直接跳到项目 code.
系好安全带，迎接动感十足的旅程, 充满乐趣的嬉戏，通过集群的新技术已经出现在你的现代移动浏览器(对不起, 不是你的Safari):
我们将从Canvas版本开始，因为您可能正在工作中阅读这篇文章.
在前几篇文章中, 我们将使用现有的浏览器api来访问创建CPU密集型模拟所需的计算资源，而不会降低用户体验.
然后, 我们将在浏览器中使用Canvas将其可视化, 最后使用afframe将我们的Canvas可视化转换为WebVR.
我们的n体模拟利用重力预测天体的位置. 我们可以用一个方程精确地计算出两个物体之间的力, 而是为了计算三个或更多物体之间的力, 我们需要将模拟分解成小的时间片段并进行迭代. 我们的目标是30帧/秒(电影速度)或~33毫秒/帧.
为了获得方向感，下面是对代码的快速概述:
main.js 如下面的代码. 的 进口使用Rollup (Webpack的替代品)来处理这些问题./ / src / main.js
导入{nBodyVisPrettyPrint, nBodyVisCanvas}./ nBodyVisualizer”
进口 {Body, nBodySimulator}./ nBodySimulator”
窗口.Onload = function() {
//创建模拟
const sim卡 = new nBodySimulator()
//添加一些可视化工具
sim卡.addVisualization(新nBodyVisPrettyPrint(文档.getElementById(“visPrettyPrint”)))
sim卡.addVisualization(新nBodyVisCanvas(文档.getElementById(“visCanvas”)))
//这是一个模拟，使用自以为是的G = 6.674e-11
//如此无聊的价值观被允许，并创造了数十亿年后崩溃的系统.
//对于spinny，距离=1，质量为1e10是有趣的.
//设置Z轴为1，以获得最佳的可视化效果.
//哈哈，创造稳定的宇宙是很难的
//名称颜色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))
//这就是我为创造一个稳定的太阳系所做的努力.
//我们现在可以在这个系统中通过扔一些碎片(内部植物).
//因为这些碎片的质量要小得多, 它不会扰乱我们稳定的系统(希望:)
//这就要求我们移除那些飞出我们的界外的天体，这些天体是由小行星创造的30x30空间.
//参见sim卡卡.trimDebris (). 它有点粗糙，但我的客户(我)不想花钱，想要WebVR版本.
函数r和o(scale) {
返回(数学.随机()-.5) *刻度
}
文档.getElementById(“混乱”).addEventListener('click', () => {
for (let x=0; x<10; x++) {
sim卡.addBody(new Body)(“碎片”，“白色”，随机(10)，随机(10)，随机(10)，1，随机(.1)、金兰(.1)、金兰(.1)))
}
})
}
这两颗小行星的质量为零，因此不受重力的影响. 他们将我们的2D可视化放大到至少30x30. 最后一点代码是我们的“混乱”按钮，用于添加10个小的内行星，以获得一些旋转的乐趣!
接下来是我们的“模拟循环”——每33毫秒，重新计算和重新绘制. 如果你从中获得乐趣，我们可以称之为“游戏循环”.“实现我们的循环最简单的方法是 setTimeout () ——这就达到了我的目的. 另一种选择是 requestAnimationFrame ().
sim卡.start () 通过调用开始动作 sim卡.步骤() 每33毫秒(约每秒30帧).
// nBodySimulator类中的方法
//模拟循环
start () {
//这是模拟循环. Step()调用可视化()
Const 一步 = 这.一步.bind ()
setInterval(步骤,这.sim卡ulationSpeed)
}
//模拟循环中的一个步骤.
异步步骤(){
//如果worker没有准备好，跳过计算. 每33ms (30fps)运行一次，所以可能会有跳跃.
如果(这.准备好()){
等待这.calculateForces ()
} else {
控制台.日志(“跳过:${这.workerReady}, ${这个.workerCalculating}”)
}
//移除任何超出边界的“碎片”——这是针对按钮的
这.trimDebris ()
//现在更新力. 如果我们跳过上面的calculateForces ()，可以重用旧的力
这.applyForces ()
/ /好!
这.可视化()
}
华友世纪! 我们正在从设计走向实现. 我们将在WebAssembly中实现物理计算，并在单独的Web Worker线程中运行它们.
nBodySimulator包装了实现的复杂性，并将其分成几个部分:
calculateForces () 承诺计算要施加的力.
trimDebris () 删除任何不再有趣的碎片(并且会缩小我们的可视化). O(n)applyForces () 将计算出的力应用到物体上. O(n)
可视化() 将物体数组传递给每个可视化器进行绘制. O(n)这一切都发生在33毫秒内! 我们可以改进这个设计吗? 是的. 好奇还是有建议? 请查看下面的评论. 如果您正在寻找先进的现代设计和实现，请查看开源 事.js.
我很高兴创造这个，我很高兴与你分享. 待会儿见!
娱乐将引领虚拟现实内容(如手机), 但一旦VR成为常态(比如手机), 它将是预期的消费者和生产力体验(如移动).
我们从未像现在这样有能力创造人类体验. 对于设计师和开发者来说，没有比这更令人兴奋的时刻了. 忘掉网页吧——我们将构建世界.
我们的旅程从卑微的网络工作者开始，所以请继续关注我们WebVR系列的下一部分.
当一个人把屏幕绑在脸上时，VR就发生了, 创造一种身临其境的体验，让他们“假装”自己真的在那里.
基于网络的虚拟现实利用了广告的奇异现实性, 搜索引擎优化排名, 猫的表情包(通俗地说就是“网络”)让虚拟现实更贴近人类的心灵, 但在僵化的“信息是书中的一页”范式之外. WebVR是虚拟现实公域.
不带水肺装备的水肺潜水被称为溺水或浮潜. 和水肺一样，VR也是一项“装备运动”，所有装备都支持WebVR. 在购买高质量的无线VR耳机(400美元)之前，卢德分子可以在1500美元的台式机或700美元的手机上使用任何现代网络浏览器来“2D浮潜”VR。.
“边缘计算”是在租用新设备之前，利用运行应用程序的所有边缘设备的计算能力.
世界级的文章，每周发一次.
世界级的文章，每周发一次.