每天都做一两件你应做但不想做的事,这能减轻精神负担,同时让你觉得愉快。
——威廉.詹姆斯
如何将Unity的VFX特效应用到Web端
本文主要内容总结自Unity官方社区内部人员回答 链接
注:
1、Unity 6 预览版提供WebGPU实验性支持
2、WebGPU目前只支持URP,暂时无法支持HDRP
3、VFX Graph 需要 WebGPU,因为它需要计算着色器。WebGL 不支持计算着色器,因此 VFX Graph 无法在其上运行。
一 、Unity视觉特效
Unity VFX
Unity VFX,全称Unity Visual Effect Graph,是Unity引擎中用于创建和管理视觉特效的一种强大工具。它提供了可视化节点工具、高级粒子系统、自定义着色器、音频动态响应和事件系统等多种功能,使得开发者能够创建出令人惊叹的视觉特效。同时,Unity VFX也具有一定的使用限制,需要在HDRP下才能发挥全部功能。
WebGPU
从 Unity 2023.3 开始,Unity Web Player 现在为新的 WebGPU 图形 API 提供实验性支持。
WebGL 2.0 API 被所有主流浏览器广泛采用和支持,是基于 Web 的实时图形应用程序的行业标准。但是,由于 WebGL 共享 OpenGL ES 3.0 的大部分功能集,因此它无法利用现代 GPU 中的所有功能。
WebGL 2.0 最显着的局限性是缺乏对计算着色器的支持,而计算着色器对于 GPU 上常规计算的大规模并行化和加速至关重要。这一缺点表现为缺乏对较新的(基于计算的)Unity 功能的支持,例如 GPU 蒙皮、VFX 图形和目前正在开发的更高级的 GPU 驱动渲染技术。反过来,这大大限制了基于 Web 的 Unity 应用程序的范围和保真度。
为了解决 WebGL 的局限性,并支持基于 Web 的图形加速的未来,W3 联盟(与 Google、Apple、Mozilla、Microsoft 和 Unity 等行业领导者合作)发布了新 WebGPU 标准的规范。
WebGPU 的设计目标是利用现代 GPU 功能并将其公开给 Web。这个新的 Web API 通过提供现代图形加速接口来实现这一点,该接口通过原生 GPU API(如 DirectX12/Vulkan/Metal)在内部实现。使用的本机实现将取决于浏览器的平台和可用的图形驱动程序。
WebGPU 后端公开的新功能将解锁对令人兴奋的全新渲染功能的支持,并实现 Web 上前所未有的图形保真度。与其他现代图形 API 类似,对渲染设置和 GPU 执行的较低级别控制会带来新的优化机会,这可能会减少 CPU 和 GPU 开销,并改善吞吐量和延迟。
官方案例
蒙皮网格渲染
计算蒙皮支持(以前在 Web 平台上不可用),它可以通过将顶点变换卸载到 GPU 来显著提高复杂和详细的蒙皮网格渲染器的渲染性能。在下面的测试场景中,在渲染大量动画角色模型时,观察到 WebGPU 后端的运行速度明显高于 WebGL 后端:
WebGPU 与 WebGL - 蒙皮网格渲染比较
高级粒子系统
引入了间接绘制支持,它允许直接在计算着色器中程序化地生成几何体和绘制参数数据。此技术可用于大规模并行化复杂几何图形的转换、剔除和渲染。在实现高级粒子系统(如 Unity 自己的 VFX 图形)时,通常会使用这种技术。以下演示利用 VFX Graph 来有效地模拟和渲染超过 100 万个粒子:
Advanced Particle System - Unity VFX
通用渲染管线
准则和限制
Unity 的 WebGPU 图形后端仍在开发中,不建议将其用于生产用例。目前仅支持通用渲染管道:
在试验新的后端时,请记住,尚不支持以下关键软件包和功能:
VFX Graph (开发中)
Forward+ 渲染路径
图形作业
动态分辨率
实体和实体图形
高清渲染管线(及其各种功能)
异步计算 API
其他功能(上面未列出)可能不受支持或不稳定。
二、WebGPU打包
注:不清楚如何导入URP-VFX项目请看这篇文章:Unity - VFX 渲染管线知识
Unity - 手册 - WebGPU(实验性):链接
流程
1、官网下载:Unity 6 预览版:链接
2、额外配置:在 2023.3 到 6000.0 版本(即Unity 6 预览版)中,WebGPU 提供有限的早期访问,并且需要对项目设置进行额外配置:
a. 找到现有的 Unity 项目,然后使用记事本打开 ProjectSettings.asset 文件
(位于: 当前项目/ProjectSettings/ProjectSettings.asset )。
b. 点击编辑——>查找——>搜索标题:webGLEnableWebGPU
c. 如果找到,请将该行更改为 。webGLEnableWebGPU: 1
d. 如果未找到,请添加一行 (此行可以添加到文件中的任何位置,最好位于其他与 Web 相关的设置旁边。 webGLEnableWebGPU: 1
3、内部设置:
(1)在Unity界面左上角点击File——>Build Profiles——>切换安装Web平台——>完成后选择Player Settings
(2)在左侧窗口中找到Player,接着选择Web配置平台,在Other Settings找到Graphics APIs(图形渲染API),选择加号,此时通过上方的额外配置后,我们就可以查询到并添加WebGPU,然后将其拖动到WebGL 2的上方,确保第一优先级。其余保持不变,配置如下。
(3)下滑找到Publishing Settings,将Compression Format设为Disabled,这里是对我们的项目数据进行压缩操作,如果项目不是很大的话就设为Disabled不进行压缩,否则它还需要解压可能会产生一些问题,此时Decompression Fallback就不用勾选;如果项目较大就设为Gzip进行压缩,此时Decompression Fallback进行勾选
(4)配置全部完成后回到Web平台,先点击Build构建项目保存到一个没有汉字的路径下,生成项目后会有一个index.html的网页文件,但此时点击进入网页后还无法运行,因为我们没有将工程上传到服务器上。如果想在本地看到效果,我们需要点击Build And Run,此时Unity帮助我们在本地搭建起一个临时服务器方便预览。
平台支持
WebGPU 浏览器支持仍在开发中,因人而异。截至 2024 年 12 月,已知以下浏览器在其最新版本中提供 WebGPU 支持:
● Windows:Chrome、Microsoft Edge
● macOS:Chrome 浏览器
● Android:Chrome
其他浏览器使用可选的功能标志为 WebGPU 提供实验性支持。我们建议您在此处跟踪 WebGPU 浏览器支持:https://caniuse.com/webgpu
最终效果
文章到这里就结束了,感谢各位小伙伴们观看到这里,希望我的分享可以给你们带来帮助,这将是我不断创作的巨大动力!
加油各位,我们一起学习,共同进步
推荐博客:Unity Shanghai 2024 技术专场 | Unity 6及未来规划:Unity引擎和服务路线图 链接
推荐视频:如何将Unity游戏转换为微信小游戏/网页小游戏 链接
推荐手册:Unity - 手册 - WebGPU(实验性)链接
推荐社区:抢先体验新的 WebGPU 后端 链接
Unity 6 - WebGPU 上的 HDRP 链接
Unity 6.1 中的 WebGPU 支持 链接
文心一言:百度发布的知识增强大语言模型 |