WebGPU vs. 像素流
在构建 Bzar 之前,我们讨论过我们的技术栈是基于在云上渲染内容的像素流,还是基于使用设备自身计算能力的本地渲染技术。 由于这种选择会极大地影响项目的成本、可扩展性和用户体验,因此在开始编写一行代码之前,从一开始就采取正确的做法是一个重要的方面。
NSDT工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器 - REVIT导出3D模型插件 - 3D模型语义搜索引擎 - Three.js虚拟轴心开发包 - 3D模型在线减面 - STL模型在线切割
到目前为止,我们必须在质量和规模之间做出选择。 WebGL 很便宜,但图形效果还有很多不足之处。 另一方面,云渲染可以实现高端图形,但扩展成本太高。 即使最近云渲染方面的发展(最多 4 个用户可以使用一个 GPU)也无法解决核心问题。
但这种情况最近发生了变化。
经过长时间的开发,Google Chrome 团队发布了名为 WebGPU 的东西。 与之前的迭代 WebGL 不同,此次推出使你的浏览器能够访问设备 GPU 的更多计算能力。 (图形处理单元)。
换句话说,高质量 3D 图形的实时计算现在可以在你的设备上本地进行——这是一项了不起的壮举,将推动沉浸式虚拟空间的大规模主流采用。
那么 WebGPU 与像素流相比如何呢?
让我们深入研究这两种技术,根据实际测试考虑这两种技术的优缺点,并解释如何做出最适合特定沉浸式应用程序的决策。
1、WebGPU 与像素流:正面交锋
为了全面了解用户体验,我们进行了一项测试,将两种技术进行正面对比。
目标是使用 Pixel Streaming(利用 Unreal 5.3 和 MetaHuman Avatar)和 WebGPU(利用 Babylon.js 和 Ready Player me Avatar)构建相同的环境。 通过对两种解决方案的广泛实践以及对不同结果的仔细分析,我们获得了细致入微的视角。
简要说明:我们的探索将集中于移动设备、平板电脑和 PC 上的图形,不包括 VR,因为 VR 会带来不同的挑战和解决方案。
我们的测试显示了一些核心差异:
- 两种环境之间的保真度对比是可以察觉的,但并不明显。 特别是在移动设备上,普通用户可能无法辨别出实质性差异。
- Avatar的质量是最显着的差异。 例如,MetaHuman Avatar比 Ready Player Me 化身要真实得多。 然而,使用超人虚拟形象实现这种真实感需要更昂贵的硬件,这使得它成为受成本和可用性限制的特定用例的考虑因素。
- WebGPU 体验的卓越响应能力脱颖而出,即使在平均互联网连接上,延迟也可以忽略不计。 虽然 WebGPU 可能无法达到与像素流相同的真实感高度,但它比其前身 WebGL 有了显着的改进。
- WebGPU 可能很难实时渲染更大的虚拟体验。 体验内区域之间的转换需要短暂的加载间隔。
- 即便如此,WebGPU 渲染的动态光线和反射有助于整体真实感,增加视觉体验的深度。
虽然没有明显的赢家,但由于像素流和 WebGPU 都有其独特的用例,我们已经确定了每种技术各自的优点和缺点。
2、像素流:优点和缺点
Pixel Streaming 旨在使用云服务器实时渲染图形,然后将该体验提供给最终用户的设备。 这意味着它可以支持高质量的体验,而无需用户下载更大的文件、安装软件或使用高性能设备。
像素流有几个优点:
- 高质量图形:最终用户受益于减少的本地设备需求,因为像素流可以在强大的服务器级硬件上有效地渲染高质量图形,这确保了视觉上引人入胜的用户体验并提升了整体视觉质量,创造了令人信服的沉浸式环境 。
- 虚幻引擎:虚幻引擎通常与高端游戏体验联系在一起,因其易于使用来创建高质量图形而脱颖而出。 它提供保真度和用户友好的功能,并配备了自动优化和模拟的工具,简化并加快了开发人员的流程。
- 高品质头像:在我们的测试中,通过虚幻 5.3 实现的像素流元人类头像被证明是高度真实且可定制的。 这种灵活性允许用户和企业根据自己的喜好修改头像,增强沉浸式体验的定制化。
- 设备独立性:像素流使用户能够在各种设备(包括低功耗设备)上访问图形密集型应用程序。 将渲染任务卸载到服务器可以将用户从本地硬件的限制中解放出来,从而促进不同设备之间的包容性。
然而,像素流方案也存在挑战:
- 带宽依赖性:像素流的效率依赖于强大的互联网连接,因此需要大量带宽。 这种依赖性可能会带来限制,特别是对于连接速度较慢或担心数据使用成本的用户而言。
- 延迟挑战:延迟问题可能会影响体验的无缝流程。 通常由于用户和云硬件之间的地理距离而导致的数据传输延迟可能会对体验产生负面影响。
- 服务器基础设施成本:实施像素流需要强大的服务器基础设施,从而导致维护和扩展服务器场的运营成本很高。 财务方面成为平衡技术效益与其维护费用的关键考虑因素。
- 成本和可扩展性:经济因素在评估像素流对于特定用例的适用性方面起着关键作用。 在云中渲染图形的规模可能会非常昂贵,而且随着用户数量和参与时间的增加,相关成本也会增加,需要仔细的成本效益分析。
3、WebGPU:优点和缺点
WebGPU 是专门为释放现代图形硬件的潜力而创建的,允许开发人员利用现代 GPU 的全部功能在网络浏览器中执行渲染和计算任务 - 无需花哨的游戏控制台或加速计算机。 之前的迭代 WebGL 也可以在浏览器中渲染 3D 图形,但保真度较低。
WebGPU 在几个核心领域脱颖而出:
- 增强的性能:WebGPU 使 Web 应用程序能够直接利用 GPU 功能,从而促进更高效的图形渲染和计算。 这种直接访问增强了基于 Web 应用程序的性能,并且与 WebGL 相比显着提升了 Web 应用程序的性能。 这转化为更流畅、更灵敏的用户体验,这是参与在线交互的一个关键方面。
- 低延迟:本地渲染图形意味着较低的带宽要求。 即使在平均互联网连接情况下,WebGPU 也能提供非常流畅和响应灵敏的体验。
- 成本和可扩展性:与像素流不同,WebGPU 不需要昂贵的云硬件或强大的互联网连接。 这种经济高效的方法有利于可扩展性,无需大量成本即可拥有庞大的用户群。
- 视觉保真度。 WebGPU 支持先进的渲染技术,例如光线追踪和高动态范围 (HDR),通过动态光照、反射和阴影显着改善视觉效果。 高视觉保真度使品牌能够创造真正的沉浸式体验,吸引用户并消除任何挥之不去的虚拟世界怀疑论。
即便如此,WebGPU 也有一些局限性,即:
- 有限的浏览器支持:WebGPU 的广泛采用面临着浏览器支持有限的障碍。 截至目前,并非所有网络浏览器都完全支持 WebGPU,这给开发人员带来了兼容性挑战,至少在短期内是这样。
- 学习曲线:WebGPU 的低级性质需要对 GPU 编程有更深入的了解。 这一特性可能会增加开发人员的学习曲线,要求更高水平的技术熟练程度。
- 开发时间:缺少虚幻引擎等工具会延长 WebGPU 上沉浸式体验的开发时间。 开发人员经常发现自己使用不太先进的 3D 软件(例如 PlayCanvas 和 Babylon.js),从而导致项目时间延长。
- 安全问题:直接 GPU 访问引发了安全问题,强调了细致实施的必要性。 开发不良的应用程序可能会暴露可能被恶意利用的漏洞。
- Avatar:WebGPU 应用程序目前缺乏与 MetaHuman 相媲美的高端化身选项。 本地渲染能力无法处理与像素流相同的复杂 3D 图形,从而导致头像不那么真实。 此限制可能会影响 WebGPU 支持的应用程序的整体视觉丰富度。
4、哪个更好:像素流或 WebGPU?
Pixel Streaming 和 WebGPU 之间的选择取决于具体的用例:每个应用程序都是不同的,并且应该根据该应用程序的独特需求和最终用户的期望拥有其理想的架构。
像素流在提供远程高质量图形方面表现出色,但面临着与带宽、延迟和大量运行成本相关的挑战。
相反,WebGPU 使 Web 应用程序能够直接访问 GPU,从而提高了性能,但代价是图形性能和安全性方面有所下降。
这些技术之间的决定取决于体验的意图和目标受众。 对于在用户群有限的情况下开发高安全性、高保真体验的企业来说,像素流媒体成为合理的选择。 此类解决方案通常需要较短的时间,在员工培训或技术模拟等应用中会引起共鸣。
另一方面,如果目标是为庞大的用户群构建可扩展的、面向消费者的体验,那么 WebGPU 就成为合理的选择。 尤其是移动设备用例,发现 WebGPU 是一个不错的选择,其中保真度差异不太明显,并且带宽、连接速度和移动数据成本等考虑因素也不太重要。 所选择的路径最终符合客户的需求和预期用例的具体情况。
原文链接:WebGPU vs. 像素流 - BimAnt
相关文章:

WebGPU vs. 像素流
在构建 Bzar 之前,我们讨论过我们的技术栈是基于在云上渲染内容的像素流,还是基于使用设备自身计算能力的本地渲染技术。 由于这种选择会极大地影响项目的成本、可扩展性和用户体验,因此在开始编写一行代码之前,从一开始就采取正确…...

Windows下docker-compose部署DolphinScheduler
参照:快速上手 - Docker部署(Docker) - 《Apache DolphinScheduler v3.1.0 使用手册》 - 书栈网 BookStack 下载源文件 地址:https://dolphinscheduler.apache.org/zh-cn/download/3.2.1 解压到指定目录,进入apache-dolphinscheduler-xxx-…...

微服务项目sc2024通用Base工程
1. cloud-provider-payment8001 2.pom文件 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"ht…...

git学习 1
打开自己想要存放git仓库的文件夹,右键打开git bush,用git init命令建立仓库 用 ls -a(表示全都要看,包括隐藏的)可以看到git仓库 也可以用 git clone 接github链接(点code选项里面会给链接,结尾是git的那个…...

HTML - 请你说一下如何阻止a标签跳转
难度级别:初级及以上 提问概率:55% a标签的默认语义化功能就是超链接,HTML给它的定位就是与外部页面进行交流,不过也可以通过锚点功能,定位到本页面的固定id区域去。但在开发场景中,又避免不了禁用a标签的需求,那么都有哪些方式可以禁用…...
【CV】ORB算法
1. ORB算法: 特点: 实现了旋转不变性、尺度不变性和计算效率高等特性。 旋转不变性: 通过计算关键点周围的梯度信息,确定关键点的主方向。将图像旋转到关键点的主方向,然后再提取BRIEF描述符,增强了旋转不…...
【算法】Cordic算法的原理及matlab/verilog应用
一、前言 单片机或者FPGA等计算能力弱的嵌入式设备进行加减运算还是容易实现,但是想要计算三角函数(sin、cos、tan),甚至双曲线、指数、对数这样复杂的函数,那就需要费些力了。通常这些函数的计算需要通者查找表或近似…...

QT:信号与槽
作业: 完善对话框,点击登录对话框,如果账号和密码匹配,则弹出信息对话框,给出提示”登录成功“,提供一个Ok按钮,用户点击Ok后,关闭登录界面,跳转到其他界面 如果账号和…...

以动态库链接库 .dll 探索结构体参数
Dev c C语言实现第一个 dll 动态链接库 创建与调用-CSDN博客 在写dll 插件中发现的函数指针用途和 typedef 的定义指针的用法-CSDN博客 两步之后,尝试加入结构体实现整体数据使用。 注意结构体 Ak 是相同的 代码如下 DLL文件有两个,dll.dll是上面提到…...

vue快速入门(三)差值表达式
注释很详细,直接上代码 上一篇 新增内容 插值表达式基本用法插值表达式常用公式 源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-wid…...

RabbitMQ的交换机与队列
一、流程 首先先介绍一个简单的一个消息推送到接收的流程,提供一个简单的图 黄色的圈圈就是我们的消息推送服务,将消息推送到 中间方框里面也就是 rabbitMq的服务器,然后经过服务器里面的交换机、队列等各种关系(后面会详细讲&am…...
Spring的 IOC和AOP编程思想
Spring的IOC(控制反转)编程思想 IOC(Inversion of Control,控制反转)是Spring框架的核心思想之一。在传统的编程方式中,我们直接通过new关键字来创建对象,并直接调用对象的方法。这种方式下&am…...
Qt中显示hex数据的控件
效果类似QTextEdit,但是显示十六进制的数据,比如用于显示抓取串口或者bin文件的数据等等 chunks.h #ifndef CHUNKS_H #define CHUNKS_H/** \cond docNever *//*! The Chunks class is the storage backend for QHexEdit.** When QHexEdit loads data, C…...
python web 开发 - 常用Web框架
python web 开发 - 文章目录 python web 开发 -1、关于Web开发2、常用Web框架3、开发案例3.1. 使用Flask框架创建一个简单的Web应用程序3.2. 使用tornado框架创建一个简单的Web应用程序3.3. 使用Django框架创建一个简单的待办事项应用程序 4、总结 1、关于Web开发 Web当然是网…...
设计模式——适配器模式06
适配器模式 通常在已有程序中使用,至少有两个类的接口不兼容时,让相互不兼容的类能很好地合作。例如之前系统 用的Target 接口调用,现在要新增第三方接口Adaptee。如何进行适配,面向客户端提供 调用Target接口方式达到使用Adaptee…...

【鸿蒙开发】组件状态管理@Prop,@Link,@Provide,@Consume,@Observed,@ObjectLink
1. Prop 父子单向同步 概述 Prop装饰的变量和父组件建立单向的同步关系: Prop变量允许在本地修改,但修改后的变化不会同步回父组件。当父组件中的数据源更改时,与之相关的Prop装饰的变量都会自动更新。如果子组件已经在本地修改了Prop装饰…...

Web 前端性能优化之八:前端性能检测实践
五、前端性能检测实践 1、常用的检测工具 Lighthouse、Chrome开发者工具中与性能检测相关的一些工具面板、页面加载性能分析工具PageSpeed Insights、专业的性能检测工具WEBPAGETEST等 1、Chrome 任务管理器 通过Chrome任务管理器我们可以查看当前Chrome浏览器中࿰…...

安装VMware ESXi虚拟机系统
简介:ESXi是VMware公司开发的一款服务器虚拟化操作系统。它能够在一台物理服务器上运行多个虚拟机,每个虚拟机都可以独立运行操作系统和应用程序,而且对硬件配置要求低,系统运行稳定。 准备工具: 1.8G或者8G以上容…...
Vue3实践之全局请求URL配置和请求参数说明
Vue3实践之全局请求URL配置和请求参数说明 全局请求URL配置 1、首先需要导入router和axios import router from "/router";2、创建app,将router挂载到app上 const app createApp(App) app.use(router).use(elementIcons).mount(#app)3、设置全局请求…...

类和对象—初阶
目录 1.面向过程和面向对象初步认识 2.类的引入 3.类的定义 4.类的访问限定符及封装 4.1 访问限定符 【面试题】 4.2 封装 【面试题】 5.类的作用域 6.类的实例化 7.类对象模型 7.1 如何计算类对象的大小 7.2 类对象的存储方式 7.3 结构体内存对齐规则 【面试题】…...

JavaSec-RCE
简介 RCE(Remote Code Execution),可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景:Groovy代码注入 Groovy是一种基于JVM的动态语言,语法简洁,支持闭包、动态类型和Java互操作性,…...

TDengine 快速体验(Docker 镜像方式)
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能,本节首先介绍如何通过 Docker 快速体验 TDengine,然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker,请使用 安装包的方式快…...

【网络安全产品大调研系列】2. 体验漏洞扫描
前言 2023 年漏洞扫描服务市场规模预计为 3.06(十亿美元)。漏洞扫描服务市场行业预计将从 2024 年的 3.48(十亿美元)增长到 2032 年的 9.54(十亿美元)。预测期内漏洞扫描服务市场 CAGR(增长率&…...

【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多,如何一步解决,采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集(每个目录代表一个类别,目录下是该类别的所有图片),你需要进行以下配置步骤&#x…...

Rust 开发环境搭建
环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行: rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu 2、Hello World fn main() { println…...
go 里面的指针
指针 在 Go 中,指针(pointer)是一个变量的内存地址,就像 C 语言那样: a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10,通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...
pycharm 设置环境出错
pycharm 设置环境出错 pycharm 新建项目,设置虚拟环境,出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...

恶补电源:1.电桥
一、元器件的选择 搜索并选择电桥,再multisim中选择FWB,就有各种型号的电桥: 电桥是用来干嘛的呢? 它是一个由四个二极管搭成的“桥梁”形状的电路,用来把交流电(AC)变成直流电(DC)。…...

AxureRP-Pro-Beta-Setup_114413.exe (6.0.0.2887)
Name:3ddown Serial:FiCGEezgdGoYILo8U/2MFyCWj0jZoJc/sziRRj2/ENvtEq7w1RH97k5MWctqVHA 注册用户名:Axure 序列号:8t3Yk/zu4cX601/seX6wBZgYRVj/lkC2PICCdO4sFKCCLx8mcCnccoylVb40lP...

门静脉高压——表现
一、门静脉高压表现 00:01 1. 门静脉构成 00:13 组成结构:由肠系膜上静脉和脾静脉汇合构成,是肝脏血液供应的主要来源。淤血后果:门静脉淤血会同时导致脾静脉和肠系膜上静脉淤血,引发后续系列症状。 2. 脾大和脾功能亢进 00:46 …...