7.3 WebGL

7.3 WebGL

7.3 WebGL：让你的 Unity 游戏跃然“网”上

WebGL（Web Graphics Library）是一种跨平台的、免插件的、用于在网页浏览器中渲染 2D 和 3D 图形的 JavaScript API。它允许开发者直接利用 GPU 的硬件加速能力，在浏览器中实现高性能的图形渲染，而无需安装额外的插件，例如 Flash 或 Java Applet。对于 Unity3D 开发者来说，WebGL 发布平台意味着可以将精心制作的 3D 游戏和应用轻松地部署到网页浏览器中，让更广泛的用户群体能够直接通过浏览器体验你的作品，极大地扩展了 Unity 内容的触达范围。

本章节将深入探讨 Unity3D 的 WebGL 发布平台，从基础概念到实践操作，再到性能优化和高级应用，帮助你全面掌握 WebGL 发布技术，让你的 Unity 项目轻松跃然“网”上。

7.3.1 WebGL 的重要性与优势

在传统的游戏发布模式中，用户通常需要下载并安装客户端程序才能体验游戏。而 WebGL 的出现，打破了这种限制，带来了诸多优势：

• 跨平台性与无插件化： WebGL 基于开放的 Web 标准，几乎所有现代浏览器都原生支持 WebGL，包括桌面浏览器（Chrome, Firefox, Safari, Edge 等）和移动浏览器（Android Chrome, iOS Safari 等）。用户无需安装任何插件，即可直接在浏览器中运行 WebGL 内容，真正实现了跨平台体验。

• 易于访问与分享： 基于 Web 的特性，WebGL 内容可以通过简单的 URL 链接进行分享和访问。用户只需点击链接即可立即开始体验，无需繁琐的下载和安装过程，降低了用户的使用门槛，有利于内容的快速传播和推广。

• 快速迭代与更新： Web 平台的更新迭代速度非常快，WebGL 技术也在不断发展和完善。Unity 对 WebGL 的支持也在持续增强，开发者可以利用最新的 Web 技术和 Unity 功能，快速迭代和更新 WebGL 内容，为用户提供更好的体验。

• 更广泛的应用场景： 除了游戏，WebGL 也广泛应用于各种 3D 可视化领域，例如产品展示、虚拟展厅、数据可视化、教育应用、建筑漫游等。Unity 的 WebGL 发布能力，使得开发者可以将 Unity 强大的 3D 渲染能力应用于更广泛的 Web 应用场景。

7.3.2 Unity WebGL 发布平台的核心技术

Unity WebGL 发布平台的核心技术在于将 Unity 项目编译和转换为可以在 Web 浏览器中运行的形式。这个过程主要依赖于以下几个关键技术：

• Emscripten: Emscripten 是一个开源的编译器工具链，可以将 C/C++ 代码编译为高效的 JavaScript 代码（asm.js 或 WebAssembly）。Unity 的脚本运行时（Mono）和引擎底层代码（C++）都是通过 Emscripten 编译成 JavaScript 代码，从而可以在浏览器环境中运行。

• asm.js 和 WebAssembly (Wasm): asm.js 是 JavaScript 的一个严格子集，可以进行静态类型分析和优化，从而实现接近原生性能的 JavaScript 代码。WebAssembly 是一种新的二进制指令集格式，旨在提供接近原生性能的 Web 应用。Unity WebGL 构建可以选择 asm.js 或 WebAssembly 作为输出格式，WebAssembly 通常能够提供更好的性能和更小的文件体积，是更推荐的选择。

• WebGL API: Unity 引擎的渲染管线会调用 WebGL API 来进行图形渲染。Unity 封装了底层的 WebGL API，开发者无需直接编写 WebGL 代码，只需使用 Unity 提供的组件和脚本接口即可完成场景的构建和渲染。

7.3.3 Unity WebGL 构建流程详解与实践

接下来，我们将详细介绍 Unity WebGL 的构建流程，并通过代码实践来演示如何将一个简单的 Unity 项目发布到 WebGL 平台。

7.3.3.1 项目设置与平台切换

1. 创建或打开 Unity 项目： 首先，你需要创建一个新的 Unity 项目，或者打开你想要发布为 WebGL 的现有项目。

2. 切换到 WebGL 平台： 在 Unity 编辑器中，点击 "File" -> "Build Settings..." 打开构建设置窗口。在平台列表中，选择 "WebGL"，然后点击 "Switch Platform" 按钮。Unity 会自动切换到 WebGL 平台，并导入相应的平台模块。

3. WebGL 平台设置： 在 "Build Settings" 窗口中，选中 "WebGL" 平台，可以看到右侧的平台设置选项。以下是一些重要的设置项：

   • Template: 选择 WebGL 构建所使用的 HTML 模板。Unity 提供了默认模板，也可以自定义模板。

   • Compression Format: 设置资源压缩格式，例如 "Gzip" 或 "Brotli"。压缩可以减小构建文件的大小，加快下载速度，但会增加解压的 CPU 负载。

   • Data Caching: 启用数据缓存可以缓存下载的资源文件，在用户下次访问时直接从缓存加载，提高加载速度。

   • Code Optimization: 设置代码优化级别，例如 "Fastest Builds" (最快构建速度，但性能可能较低) 或 "Fastest Runtime" (最快运行时性能，但构建时间可能较长)。

   • Stripping Level: 设置代码剥离级别，用于移除项目中未使用的代码，减小构建文件大小。

   • Memory Size: 设置 WebGL 应用的内存大小限制。需要根据项目需求合理设置，过小可能导致内存溢出，过大可能浪费用户资源。

   • WebGL 2.0 Graphics API: 如果你的项目使用了 WebGL 2.0 特性，需要勾选此选项。WebGL 2.0 提供了更强大的图形功能，但浏览器支持度可能不如 WebGL 1.0 广泛。

7.3.3.2 创建简单的 Unity 场景

为了演示 WebGL 构建，我们创建一个简单的 Unity 场景：

1. 创建 3D 对象： 在 Hierarchy 窗口中，右键点击，选择 "3D Object" -> "Cube" 创建一个立方体。你可以调整立方体的位置、旋转和缩放，使其位于场景中心。

2. 添加光源： 在 Hierarchy 窗口中，右键点击，选择 "Light" -> "Directional Light" 创建一个平行光。调整光源的方向，照亮立方体。

3. 添加摄像机： 场景中默认已经存在一个 Main Camera。你可以调整摄像机的位置和角度，确保能够看到立方体。

   // C# 脚本示例 (可以附加到 Cube 对象上，使其旋转)
   using UnityEngine;
   public class RotateCube : MonoBehaviour
   {
       public float rotationSpeed = 30f;
       void Update()
       {
           transform.Rotate(Vector3.up * rotationSpeed * Time.deltaTime);
       }
   }
   ​

   创建一个 C# 脚本 RotateCube.cs，将以上代码复制粘贴到脚本中，然后将脚本拖拽到场景中的 Cube 对象上。运行游戏，你会看到立方体开始绕 Y 轴旋转。

7.3.3.3 WebGL 构建与本地测试

1. 执行 WebGL 构建： 在 "Build Settings" 窗口中，确保 "Scenes In Build" 列表中包含了你的场景。点击 "Build" 按钮，选择一个输出目录（例如 "WebGLBuild"），开始构建 WebGL 项目。

graph LR
A[Build Settings 窗口] --> B{Scenes In Build 列表}
B --> C[点击 Build 按钮]
C --> D[选择输出目录 WebGLBuild]
D --> E[Unity 执行 WebGL 构建]
style C fill:#ccf,stroke:#333,stroke-width:2px
style E fill:#bfc,stroke:#333,stroke-width:2px

2. **构建输出文件：**  构建完成后，在输出目录 "WebGLBuild" 中，你会看到以下文件：



   * `index.html`:  主 HTML 文件，用于加载和运行 WebGL 应用。

   * `Build` 文件夹：包含构建输出的 JavaScript 代码 (`[项目名称].framework.js`, `[项目名称].loader.js`, `[项目名称].wasm.code.unityweb`, `[项目名称].wasm.data.unityweb`) 和资源文件 (`[项目名称].data.unityweb`).

   * `TemplateData` 文件夹：包含 HTML 模板相关的资源文件，例如样式表 (`style.css`) 和加载进度条脚本 (`UnityProgress.js`).



3. **本地服务器测试：**  直接双击 `index.html` 文件在浏览器中打开 **可能无法正常运行**。因为 WebGL 应用通常需要通过本地服务器来访问资源文件，以避免浏览器的安全限制（例如跨域请求）。



   你需要启动一个本地 HTTP 服务器来测试 WebGL 构建。以下是一些常用的本地服务器启动方法：



   * **Python SimpleHTTPServer:**  如果你的电脑安装了 Python，可以在命令行中进入 "WebGLBuild" 目录，运行命令 `python -m http.server` (Python 3) 或 `python -m SimpleHTTPServer` (Python 2)。然后在浏览器中访问 `http://localhost:8000` 或 `http://localhost:8000/index.html`。

   * **Node.js http-server:**  如果你的电脑安装了 Node.js 和 npm，可以全局安装 `http-server` 包 (`npm install -g http-server`)，然后在命令行中进入 "WebGLBuild" 目录，运行命令 `http-server`。然后在浏览器中访问 `http://localhost:8080` 或 `http://localhost:8080/index.html`。

   * **使用 Unity Editor 的 Web 服务器:**  在 "Build Settings" 窗口中，点击 "Run" 按钮，Unity 会自动启动一个内置的 Web 服务器，并在浏览器中打开 WebGL 应用。这是一种最简单的本地测试方法。



   使用本地服务器启动后，在浏览器中访问相应的 URL，你就可以看到在网页中运行的 Unity 3D 场景，立方体应该在旋转。



**7.3.3.4 代码实践总结**



通过以上步骤，我们成功地将一个简单的 Unity 3D 场景发布到了 WebGL 平台，并在本地浏览器中进行了测试。这个实践过程涵盖了 WebGL 构建的基本流程，包括平台切换、项目设置、场景创建、构建输出和本地测试。



### 7.3.4 WebGL 性能优化关键点



WebGL 的性能通常不如原生平台（例如 PC, Mobile）那么高，尤其是在移动设备上。因此，WebGL 性能优化是 WebGL 开发中非常重要的一环。以下是一些关键的性能优化点：



* **减少 Draw Calls：**  Draw Calls 是 CPU 向 GPU 发送渲染指令的次数。过多的 Draw Calls 会造成 CPU 性能瓶颈。优化 Draw Calls 的方法包括：

    * **Static Batching 和 Dynamic Batching：**  Unity 会自动进行静态和动态批处理，合并符合条件的网格，减少 Draw Calls。

    * **GPU Instancing：**  使用 GPU Instancing 技术可以高效地渲染大量相同的网格，例如草地、树木、粒子等。

    * **减少材质和网格数量：**  尽量复用材质和网格，合并相似的物体。

    * **使用 Sprite Atlas：**  将多个 Sprite 图片打包成一个 Sprite Atlas，减少纹理切换次数。



* **优化 Shader：**  Shader 的复杂度直接影响 GPU 的渲染性能。优化 Shader 的方法包括：

    * **简化 Shader 代码：**  避免使用复杂的计算和分支语句。

    * **使用 Shader LOD：**  根据物体距离摄像机的远近，使用不同 LOD 级别的 Shader。

    * **减少 Shader Pass 数量：**  尽量在一个 Shader Pass 中完成渲染，减少 Pass 数量。

    * **避免使用昂贵的 Shader 特性：**  例如屏幕后处理特效、实时阴影等，在 WebGL 平台上应谨慎使用。



* **纹理优化：**  纹理是 GPU 显存的主要占用者，也影响渲染性能。纹理优化的方法包括：

    * **压缩纹理格式：**  使用压缩纹理格式（例如 ETC, ASTC, DXT）可以减小纹理文件大小和显存占用。

    * **Mipmap：**  使用 Mipmap 可以根据物体距离摄像机的远近，使用不同分辨率的纹理，提高渲染效率。

    * **纹理尺寸优化：**  根据实际需求，选择合适的纹理尺寸，避免使用过大的纹理。

    * **图集纹理 (Texture Atlas)：**  将多个小纹理合并成一个大纹理，减少纹理切换次数。



* **脚本优化：**  JavaScript 脚本的执行效率通常不如 C# 脚本。脚本优化的方法包括：

    * **避免频繁的垃圾回收 (GC)：**  减少不必要的对象创建和销毁。

    * **优化算法和逻辑：**  使用高效的算法和数据结构。

    * **减少函数调用次数：**  尽量将代码内联或合并函数。

    * **使用 Profiler 工具：**  使用 Unity Profiler 和浏览器开发者工具来分析性能瓶颈，定位性能问题。



* **资源加载优化：**  WebGL 应用的资源需要通过网络加载，加载速度直接影响用户体验。资源加载优化的方法包括：

    * **压缩资源文件：**  使用 Gzip 或 Brotli 压缩资源文件，减小文件大小。

    * **Content Delivery Network (CDN)：**  使用 CDN 加速资源分发，提高下载速度。

    * **资源分包加载：**  将资源分成多个包，按需加载，减少首次加载时间。

    * **数据缓存 (Data Caching)：**  启用数据缓存，缓存已下载的资源，下次访问时直接从缓存加载。

    * **加载进度条：**  添加加载进度条，向用户展示加载进度，提高用户等待体验。



```mermaid
graph LR
    A[WebGL 性能优化] --> B[减少 Draw Calls];
    A --> C[优化 Shader];
    A --> D[纹理优化];
    A --> E[脚本优化];
    A --> F[资源加载优化];
    style A fill:#ccf,stroke:#333,stroke-width:2px
    style B fill:#f9f,stroke:#333,stroke-width:2px
    style C fill:#f9f,stroke:#333,stroke-width:2px
    style D fill:#f9f,stroke:#333,stroke-width:2px
    style E fill:#f9f,stroke:#333,stroke-width:2px
    style F fill:#f9f,stroke:#333,stroke-width:2px
​

7.3.5 WebGL 发布的局限性与注意事项

虽然 WebGL 发布平台带来了诸多便利，但也存在一些局限性和需要注意的事项：

• 性能限制： WebGL 的性能通常不如原生平台，尤其是在移动设备上。复杂的场景和特效可能会导致帧率下降，影响用户体验。因此，在 WebGL 开发中，性能优化至关重要。

• 浏览器兼容性： 虽然现代浏览器对 WebGL 的支持度很高，但仍然可能存在一些兼容性问题，尤其是在一些老旧的浏览器或移动浏览器上。需要进行充分的兼容性测试。

• API 限制： WebGL 平台受到浏览器安全策略的限制，一些 Unity 原生平台的功能可能无法在 WebGL 平台上直接使用，例如本地文件系统访问、Socket 通信等。需要使用 WebGL 平台提供的 API 或 JavaScript 桥接来实现相应功能。

• 资源大小限制： WebGL 应用的资源需要通过网络加载，过大的资源文件会增加加载时间，影响用户体验。需要尽量减小资源文件的大小，并进行资源加载优化。

• 移动设备适配： WebGL 应用在移动设备上的性能和体验可能与桌面浏览器有所不同。需要针对移动设备进行适配和优化，例如触摸输入、屏幕分辨率、性能优化等。

• 安全问题： WebGL 应用运行在浏览器环境中，需要注意安全问题，例如跨站脚本攻击 (XSS)、跨域资源共享 (CORS) 等。需要遵循 Web 安全最佳实践，避免安全漏洞。

7.3.6 WebGL 高级应用与扩展

除了基础的游戏发布，WebGL 还可以应用于更高级的应用和扩展：

• 与 JavaScript 交互： Unity WebGL 提供了 Application.ExternalCall 和 Application.ExternalEval API，允许 Unity C# 代码与 JavaScript 代码进行双向通信。可以利用 JavaScript 丰富的 Web API 和库，扩展 WebGL 应用的功能，例如与 Web 服务器交互、调用浏览器原生功能、集成第三方 JavaScript 库等。

• WebGL 插件开发： 可以通过编写 JavaScript 插件来扩展 Unity WebGL 的功能。插件可以访问底层的 WebGL 上下文和 JavaScript API，实现更高级的渲染效果、自定义输入控制、与其他 Web 技术集成等。

• 服务器端渲染 (SSR)： 对于一些对 SEO (搜索引擎优化) 有要求的 WebGL 应用，可以考虑使用服务器端渲染技术。在服务器端预先渲染 WebGL 内容，生成 HTML 静态页面，再将静态页面返回给客户端浏览器，提高 SEO 效果。

• 渐进式 Web 应用 (PWA)： 可以将 Unity WebGL 应用封装成 PWA，利用 PWA 的特性，例如离线访问、推送通知、添加到主屏幕等，提升用户体验。

• AR/VR WebGL： WebGL 也可以用于开发基于 Web 的 AR (增强现实) 和 VR (虚拟现实) 应用。利用 WebXR API，可以访问设备的 AR/VR 功能，例如摄像头、传感器、头戴显示器等，实现 WebAR 和 WebVR 体验。

7.3.7 总结与展望

WebGL 发布平台为 Unity 开发者打开了一扇通往 Web 世界的大门，让 Unity 内容能够轻松地在浏览器中运行，触达更广泛的用户群体。通过本章节的学习，你应该已经掌握了 Unity WebGL 发布的基本流程、性能优化技巧和高级应用方向。

随着 WebGL 技术的不断发展和完善，以及 Unity 对 WebGL 支持的持续增强，相信 WebGL 将在未来的游戏和应用开发领域扮演越来越重要的角色。希望本章节的内容能够帮助你更好地利用 Unity WebGL 平台，创作出更多精彩的 Web 内容！

后续学习建议：

• 深入学习 WebGL API 和 JavaScript 编程，掌握 Web 前端开发技术。

• 研究 Unity WebGL 的官方文档和示例项目，了解更多高级特性和最佳实践。

• 关注 WebGL 社区和技术博客，了解最新的 WebGL 技术动态和发展趋势。

• 实践开发 WebGL 项目，积累实战经验，不断提升 WebGL 开发技能。