Unity-WebGL配置系统教程(含iis本地部署)

Unity-WebGL配置系统教程(含iis本地部署)

1.模块安装：

2.平台配置切换：

3.Build Settings界面信息配置：

3.1 纹理压缩配置：

由于我们做到是PC端的Unity-WebGl展示，应用于浏览器，因此选择DXT

3.2 自动连接探测器与深度分析支持：

用于性能分析的两个重要功能，无需勾选

注：自动连接探测器和深度分析支持可被其他设置中的“帧时间统计"替代

3.3 Build Settings界面最终配置图：

4.Player Settings玩家设置：

4.1 图标: 不可设置 跳过

4.2 分辨率和演示的相关配置：

后台运行：

后台运行是默认启用的

• 如果启用了 后台运行，则您的内容将在后台继续运行，即用户切换到其他标签或应用程序仍会运行。
• 如果关闭了 后台运行，则在用户切换到其他标签或应用程序时，WebGL 内容将暂停运行。这意味着发布出的应用程序将只在当前浏览器标签处于活动状态时运行。
• 关闭后台运行可以提高资源利用率

在常规的项目需要中往往会启用后台运行

WebGL模板：

模板有三种：

1. Default（默认）
   • 一个简单的白色页面，上面有一个灰色画布和一个加载进度条
   • 适用场景示例：
     • 创建一个小型 WebGL 游戏，只需展示基本功能和加载进度。
     • 需要快速测试或演示最小播放器。
2. Minimal（最小）
   • 一个最小 WebGL 模板，只有运行 WebGL 内容所需的必要样板代码
   • 适用场景示例：
     • 构建一个简单的 3D 模型展示网页，只需展示模型并测试性能。
     • 需要一个轻量级的播放器，不需要额外的功能。
3. PWA（Progressive Web App，渐进式 Web 应用）
   • 一个包含 Web Manifest 文件和 Service Worker 代码的 Progressive Web App
   • 允许工程师将网页应用程序以类似于本机应用程序的方式交付给用户
   • 适用场景示例：
     • 构建一个在线笔记应用，希望用户可以在离线状态下访问和编辑笔记。需要离线访问、推送通知等功能。
     • 需要一个较为复杂的应用程序

我们在初始测试时可以先采用Default来判断WebGl项目是否成功构成，后期再转换成Minimal和PWA

4.3 启动图像: 跳过(原因类似于图标)

4.4 其他设置(重点)

在其他设置中有八个模块分别是：渲染、配置、着色器设置、着色器变体加载设置、脚本编译、优化、堆栈跟踪和旧版。

我们将会一一分析每个模块下的内容。

4.4.1 渲染：

最终渲染模块设置图：

颜色空间：

如上图所示：颜色空间有伽马和线性两种选择。Unity 默认情况下使用线性空间

1. 伽马空间：

   • 人眼对于亮度的感知是非线性的，因此大多数显示设备遵循一个称为伽马曲线的非线性显示。

2. 线性空间：

   • 在线性空间中，色彩值的亮度是线性的，即如果一个像素的色彩值是另一个像素的两倍，那么它在视觉上也应该是两倍的亮度。
   • 因为线性空间更适合基于物理的渲染方法，可以获得更好的渲染效果。

MSAA Fallback：

如上图所示：MSAA Fallback有降级(Downgrade)和升级(Upgrade)两种选择。测试阶段建议使用降级(Downgrade)

1. Downgrade（降级）：

   • 当启用 MSAA（多重采样抗锯齿） 时，如果硬件不支持 MSAA 或者性能不足，Unity 将会自动降级到更低级别的抗锯齿技术。
   • 这意味着如果 MSAA 不可用或者不适合当前硬件，Unity 会选择其他抗锯齿方法，例如 FXAA 或 SMAA

2. Upgrade（升级）：

   • 如果您选择 Upgrade，Unity 将尝试升级到更高级别的抗锯齿技术，即使硬件原本不支持。
   • 这可能会导致性能开销，但可以提供更好的图形质量。

需根据实际的项目需求和硬件性能来选择 Downgrade 或 Upgrade。

如果希望始终使用 MSAA，即使硬件不支持，可以选择 Upgrade。否则，如果性能是首要考虑因素，可以选择 Downgrade。

自动图像API：

如上图所示：自动图像API默认情况下是启用的，由于我们需要使用WebGL 2来进行渲染，因此需要取消启用

取消启用后会变成这样，如下图：

1. 自动图像 API：
   • 默认情况下，Unity WebGL 构建会自动选择适用于目标平台的图形 API。
   • 如果启用了 自动图像 API，Unity 将根据目标平台和硬件自动选择最佳的图形 API。
2. WebGL 2：
   • WebGL 2.0 是一种用于在 Web 浏览器中渲染图形的 API，基于 OpenGL ES 3.0 级的渲染功能。
   • 与 WebGL 1.0 相比，WebGL 2.0 提供更高质量的图形渲染、GPU 实例化支持、方向光照贴图等功能。
   • 如果需要获得更好的图形质量和性能，选择 WebGL 2 是一个不错的选择。

静态批处理、动态批处理和精灵批处理阈值:

在 Unity 中，静态批处理（Static Batching）和动态批处理（Dynamic Batching）是用于优化渲染性能的两种技术。

1. 静态批处理：
   • 静态批处理适用于不移动、不旋转、不缩放的物体，这些物体被视为静态物体。
   • Unity 将静态物体合并为一个大网格，从而以更快的速度渲染它们。
   • 静态批处理不会减少 Draw Call 次数，但会让 CPU 在“设置渲染状态-提交 Draw Call”上更高效。
   • 适用于场景中的静态元素，例如地形、建筑物、树木等。
2. 动态批处理：
   • 动态批处理适用于移动的物体，但有一些限制条件。
   • Unity 会自动完成动态批处理，不需要我们手动操作。
   • 动态批处理的目的是减少 Draw Call 次数，从而优化渲染性能。
   • 适用于一些移动的物体，例如角色、粒子效果、动态生成的物体等。

在 Unity 中，精灵批处理阈值（Sprite Batching Threshold）是一个用于控制精灵渲染批处理的参数。

1. 概念：

   • 精灵批处理是将多个精灵合并为一个大网格，以减少 Draw Call 次数，从而优化渲染性能。
   • 阈值是一个控制参数，用于决定哪些精灵应该被合并到同一个批次中。
   • 阈值的大小影响着精灵批处理的效果。

2. 影响：

   较小的阈值：

   • 如果阈值设置得很小，Unity 将更容易将相邻的精灵合并到同一个批次中。
   • 这会减少 Draw Call 次数，但可能会增加 CPU 和 GPU 的工作量，因为更频繁地进行批处理。

   较大的阈值：

   • 如果阈值设置得较大，Unity 将更少地将精灵合并到同一个批次中。
   • 这可能会增加 Draw Call 次数，但减少了批处理的频率，从而减轻了 CPU 和 GPU 的负担。

Draw Call概念：

前面多次提到了Draw Call，想必大家会对这个概念比较好奇，接下来是关于Draw Call的相关说明：

• Draw Call 是指 CPU 向 GPU 发出的一次绘制请求。具体来说，它包括了设置颜色、绘图方式、顶点坐标、绘制和结束等步骤。每个 Draw Call 都代表了一次绘制操作。

• 当游戏中有许多不同的物体需要绘制时，每个物体都会产生一个 Draw Call。过多的 Draw Call 可能会导致性能问题，因为它们会增加 CPU 和 GPU 的负担。

• 优化 Draw Call 是游戏性能优化的关键之一,项目中的Draw Call 数量过多，可能__会导致性能下降和渲染延迟__。

• 我们可以通过合并相邻的物体、使用批处理技术和减少材质数量等方法，来降低 Draw Call 的数量，从而提高游戏的运行效率。

因此我们为了使得项目最终的视觉效果更好且使用体验更流程往往会采用较小的阈值精灵批处理阈值，即时它可能会增加 CPU 和 GPU 的工作量

图形作业：

默认情况下是禁用(不勾选)

图像作业（Image Jobs）：这个选项用于启用或禁用在WebGL构建中使用多线程___WebAssembly___进行图像处理的功能。

如果启用，Unity将使用WebAssembly来处理图像，以提高性能。

如果禁用，图像处理将在主线程上进行，可能会影响性能。通常情况下，建议启用此选项，以便利用多线程处理图像。

WebAssembly是什么？

WebAssembly（wasm） 是一种全新的可移植、体积小、加载快速并且兼容 Web 的二进制指令格式。它由 W3C 制定的新规范，旨在在某些场景下代替 JavaScript，以获得更接近原生运算体验。

主要功能：

1. 游戏开发：WebAssembly 可以加速游戏的运行，使其在浏览器中获得更好的性能。
2. 图像/视频编辑：通过将图像处理算法编译为 WebAssembly，可以在浏览器中快速执行，提高图像识别的实时性。
3. AR/VR：WebAssembly 可以用于构建增强现实（AR）和虚拟现实（VR）应用程序。

WebAssembly 具有体积更小、运行更快的优势，适用于需要高性能计算的场景。