WebGL

WebGL 构建允许您直接在 Web 浏览器中运行数字孪生，无需任何安装。这使得通过 URL 轻松共享和访问成为可能，非常适合演示和客户展示。

先决条件 (Prerequisites)

WebGL 构建需要使用 IL2CPP 完成，某些接口中使用的 Windows DLL 无法使用（从浏览器通信的唯一方式是 Websocket）。

需要删除的文件夹 (Required Folder Deletions)

构建 WebGL 时，您需要删除项目中存在的以下文件夹：

  • CADLink
  • SpaceNavigator
  • 所有接口（除了 MQTT 和 TwinCATHMI——这两个是唯一可以在 WebGL 中使用的）
  • parts4cad
  • RobotIK
ℹ️

构建 WebGL 时，场景的旋转使用鼠标左键而不是鼠标中键，因为 Web 浏览器具有不同的鼠标按钮行为。

构建配置 (Build Configuration)

1. 设置 WebGL 平台 (Set WebGL Platform)

在构建设置中设置 WebGL：

在 Build Settings 中设置 WebGL

2. 脚本定义符号 (Scripting Define Symbols)

确保在 Player Settings 的 Scripting Define Symbols 中具有与 Windows 相同的设置（例如 GAME4AUTOMATION 和 GAME4AUTOMATION_PROFESSIONAL）。

3. Graphics API 配置 (Graphics API Configuration)

在 Player Settings 中禁用 Auto Graphics API，以独占使用 WebGL2（推荐）：

WebGL2 Graphics API 配置

4. 压缩设置 (Compression Settings)

在发布设置中设置 Decompression Fallback - 这可以防止某些 Web 服务器出现问题。

Decompression Fallback 设置

构建过程 (Build Process)

⚠️

WebGL 构建有时需要很长时间（最多 1 小时），特别是首次构建。

一旦构建成功，Unity 会自动启动一个临时 Web 服务器并打开浏览器显示您的 WebGL 构建。

要运行 WebGL 构建，您需要将构建结果（构建文件夹的内容）复制到 Web 服务器。

  1. 打开 File > Build Settings
  2. 选择 WebGL 作为目标平台
  3. 如上所述配置 Player Settings
  4. 点击 Build 并选择目标文件夹
  5. 等待构建完成（可能需要 30-60 分钟）
  6. Unity 将自动启动本地 Web 服务器并打开浏览器

WebGL 模板 (realvirtual Professional)

使用 realvirtual WebGL 模板增强您的 Unity WebGL 项目，提供全屏响应式设计，与标准 Unity WebGL 模板相比提供更好的用户体验。

安装步骤 (Installation Steps)

  1. 查找模板文件：在 Unity 项目中找到模板文件：

   Assets/realvirtual/Professional/WebGLTemplate/realvirtual
  1. 复制模板文件：复制这些文件。
  2. 粘贴到 WebGLTemplates：将复制的文件粘贴到：

   Assets/WebGLTemplates/realvirtual

设置模板 (Setting the Template)

  1. 打开 Unity。
  2. 转到 Edit > Project Settings。
  3. 在 Player 设置中，找到 Resolution and Presentation。
  4. 从 "Template" 下拉菜单中选择 realvirtual 模板。
  5. 保存更改。
realvirtual WebGL 模板选择

部署 (Deployment)

Web 服务器要求 (Web Server Requirements)

部署 WebGL 构建：

  1. 将整个构建文件夹内容复制到 Web 服务器
  2. 确保 Web 服务器支持：
    • Unity 文件的正确 MIME 类型
    • 压缩（gzip 或 Brotli）
    • HTTPS（推荐用于完整功能）

常用 Web 服务器

  • Apache：添加带有正确 MIME 类型的 .htaccess
  • nginx：为 Unity 文件扩展名配置 mime.types
  • IIS：在 web.config 中添加 MIME 类型
  • 云平台：AWS S3、Azure Static Web Apps、GitHub Pages

接口支持 (Interface Support)

由于浏览器安全限制，WebGL 构建的接口支持有限：

支持的接口：

  • MQTT (Pro) - 基于 Websocket 的消息传递
  • TwinCAT HMI (Pro) - 基于 Websocket 的通信

不支持的接口：

  • OPC-UA
  • S7 TCP/IP
  • Modbus
  • TwinCAT ADS
  • Shared Memory
  • 任何基于 Windows DLL 的接口

对于完整的接口兼容性，请使用 Windows 构建。

性能考虑 (Performance Considerations)

  • 构建时间：首次构建可能需要 30-60 分钟
  • 文件大小：WebGL 构建通常比原生构建更大
  • 运行时性能：通常为原生性能的 60-70%
  • 内存：受浏览器内存限制
  • 移动端：移动浏览器的支持有限

浏览器兼容性 (Browser Compatibility)

推荐的浏览器：

  • Chrome/Edge（基于 Chromium）- 最佳性能
  • Firefox - 良好的兼容性
  • Safari - 基本支持（可能有局限性）

故障排除 (Troubleshooting)

构建失败

  • 确保所有不兼容的文件夹已删除
  • 检查 IL2CPP 是否选择为脚本后端
  • 验证 Unity Hub 中已安装 WebGL 模块

构建在本地运行但在服务器上不运行

  • 检查 Web 服务器 MIME 类型配置
  • 验证压缩设置是否匹配构建设置
  • 如果使用某些功能，确保 HTTPS 已启用

性能问题

  • 降低场景复杂性
  • 使用纹理压缩
  • 优化绘制调用
  • 考虑 WebGL 的质量设置

另请参见

© 2025 realvirtual GmbH https://realvirtual.io - 版权所有。

realvirtual.io 中文文档 查看原文 →