【WebVR系列文章(1)】WebVR 和浏览器边缘计算革命
虚拟现实 (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 innerplanets, without destabilizing your gas giants?<div id="controls"><button id="mayhem">Throw Inner Planet Debris!</button> - <a href="#" target="_blank">Code</a> - <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.jsimport { 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 vzsim.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)))}})}
- 它创建了一个新的 nBodySimulator()
- 同时,这个 nBodySimulator 实例包含了一些API:
- sim.addVisualization()
- sim.addBody()
- sim.start()
这两颗小行星的质量为零,因此不受重力影响。 他们将我们的 2D 可视化缩小到至少 30x30。 最后一段代码是用于添加 10 个小内行星以获得的按钮事件!
接下来是我们的“模拟循环”——每 33 毫秒,重新计算和重新绘制。 如果你玩得开心,我们可以称之为“游戏循环”。 可能实现我们的循环的最简单的事情是 setTimeout() - 这实现了我的目的。 另一种方法是 requestAnimationFrame()。
sim.start() 通过每 33 毫秒(大约每秒 30 帧)调用 sim.step() 来启动操作。
// Methods from class nBodySimulatorstart() {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 线程中运行它们。
- nBodySimulator 包装了该实现的复杂性并将其拆分为几个部分:
- calculateForces() 承诺计算要应用的力。这些主要是浮点运算并在 WebAssembly 中完成。
- 这些计算是 O(n²) 和我们的性能瓶颈。
- 我们使用 Web Worker 将它们移出主线程,以获得更好的感知和实际性能。
- trimDebris() 删除任何不再有趣的碎片(并且会缩小我们的可视化)。 O(n)
- applyForces() 将计算的力应用于实体。 O(n)
- 如果我们跳过calculateForces(),我们会重用旧的力量,因为工人已经很忙了。 这以准确性为代价提高了感知性能(消除抖动)。
- 即使计算时间超过 33ms,主 UI 线程也可以绘制旧势力。
- Visualize() 将物体数组传递给每个可视化器进行绘制。 O(n)
这一切都发生在 33 毫秒内! 我们可以改进这个设计吗? 是的。 好奇或有什么建议? 检查下面的评论。 如果你正在寻找先进的现代设计和实现,请查看开源的 Matter.js。
结尾
娱乐将引领虚拟现实(如移动)的内容,但一旦 VR 成为常态(如移动),它将成为预期的消费者和生产力体验(如移动)。
我们从未像现在这样更有能力创造人类体验。 成为一名设计师和开发人员从未像现在这样激动人心。 忘记网页——我们将建立世界。
我们的旅程从不起眼的 Web Worker 开始,敬请期待我们 WebVR 系列的下一部分。
【WebVR系列文章(1)】WebVR 和浏览器边缘计算革命相关推荐
- 系列文章(十一)丨边缘计算的安全思考
从文章(二)到文章(十),我们讨论的重点都是边缘计算系统内对用户可直接产生使用价值的功能,涵盖构造.部署.编排.集成.管理.运维.智能加速等话题.本篇讨论的中心是安全,即如何降低风险.应对挑战,响应威 ...
- 英特尔最新Xeon D-2100系列芯片,高能低耗瞄准边缘计算
随着如自动驾驶汽车和物联网等行业的发展,边缘计算的需求已越来越大.将部分计算能力从数据中心移动到边缘设备上,是实现万物互联的关键所在.本质上,这表示设备不需要向云发送数据进行处理,而是直接在设备本身上 ...
- 系列文章-大数阶算之计算从入门到精通(序)
摘要:本系列文章将深入探讨大数阶乘之计算的各种算法和实现,从最简单的大家最容易想到的算法,到使用各种大数乘法的版本,包括硬乘法.分治法.快速数论变换(FNT)和快速傅立叶变换(FFT)的版本,甚至还有 ...
- 终于有人把 5G 和边缘计算的关系说清楚了! | 技术头条
作者 | pala 本文经授权转载自"边缘计算社区" 编辑 | 沭七 今年特别火的 5G 是什么?边缘计算和 5G 有什么关系?也许之前你有点搞不清,看完这篇文章相信您会对边缘计算 ...
- 边缘计算工作负载:虚拟机,容器还是裸机?
我们生活在一个连接和智能设备的时代.随着智能设备数量的增长,数据的增长迅速达到了新的高度.这些数据从终端用户到达云或数据中心后再进行处理.存储和其他分析操作,因此,当访问时必定会带来延迟和带宽问题.正 ...
- 万物互联之边缘计算简述-应用场景
0 背景 前面的几篇文章都是在讨论边缘计算的基本概念.发展史和实现的知识地图.本节将从应用的视角去阐述边缘计算的价值,使读者能够更加直观地领略边缘计算带来的新机会和新挑战.为此笔者选择了智能家居.智慧 ...
- 2019中国边缘计算企业20强
中国边缘计算那家实力强? 一张图看明白 我们花了1个月时间,找了100位粉丝做匿名问卷调查,以及和12位边缘计算行业KOL沟通,和36位清华大学.北京大学.西安邮电大学.重庆大学.上海交旦大学.中山大 ...
- 边缘计算网关 物联网时代又一通信神器
物联网盛行的时代,许多通信终端产品层出不穷,为顺应时代发展步伐,更好在物联网领域驰骋天下,通信技术不断更新升级,边缘计算的概念就是鲜明的例子.随着边缘计算逐渐火热,边缘计算网关也开始应用起来.那么,到 ...
- 边缘计算服务器传感器无线组网,边缘计算扩展IoT网络三种方法
如今物联网火热的时代,很多企业并没有为与物联网技术相关的风险做好准备,但边缘计算使用IoT设备的处理能力来聚合.预处理和过滤数据源,并增强数字工具的功能,将边缘应用于云连接相结合,以执行复杂的分析,并 ...
最新文章
- 对tomcat来说,每一个进来的请求(request)都需要一个线程,直到该请求结束。
- R语言ggplot2包和lattice包可视化改变x轴和y轴的显示位置实战
- 解决Android Studio报错:DefaultAndroidProject : Unsupported major.minor version 52.0
- ActiveMQ消息队列的使用及应用
- 鸿蒙系统没有优势了吗,“鸿蒙系统”超震撼,带你细数它的优势
- 网络原理(四)-----动态路由协议篇
- 基于visual Studio2013解决面试题之0210树的最远距离
- pytorch学习——构建多元线性回归的网络结构
- list删除null
- 研究员轻松劫持2.8万台打印机
- 吝啬的国度 ---用vector 来构图
- Angular 项目中使用 ECharts 图表示例
- 一本通————1244 和为给定数
- 怎么做网站,网站制作步骤有哪些?
- C语言定义结构体的几种方法
- by mysql 按每分钟group_MySQL group by 统计每5分钟数据量
- 针孔微创牙龈手术(Pinhole Gum Rejuvenation)
- 字节跳动取消大小周;淘宝、支付宝等阿里系App取消开屏广告;Python 3.10 beta 4发布
- java实现打印机打印发票路径
- 【SHOI 2002】百事世界杯之旅
热门文章
- 每个小型企业都需要的SEO搜索引擎优化
- html怎样设置背景放射线,PPT怎么设计放射线效果背景图
- 酷壳网陈皓:Why C++?王者归来
- android 自定义 snackbar,自定义顶部SnackBar
- 软件测试2019:第六次作业
- you are running on php 5.3.3,Upgrade PHP 5.1/5.2 to 5.3 on CentOS
- obs多路推流插件_直播教程 | OBS主播如何解锁虎牙直播全部的功能玩法?
- 使用 donut 将 exe 转成 shellcode
- 定义枚举类型,输出三角形的形状
- 风起亚洲(Fengqi.Asia)公共云详细介绍