> For the complete documentation index, see [llms.txt](https://docs.convai.com/api-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.convai.com/api-docs/zh/cha-jian-yu-ji-cheng/unity-plugin/building-for-supported-platforms/building-for-webgl.md).

# 为 WebGL 构建

## 描述

Convai 的 Unity WebGL SDK 旨在补充我们 Unity Asset Store 版本的独立应用功能。借助这个专用 SDK，您可以构建并部署利用 Convai 高级对话管线的交互式 WebGL 应用程序。请参阅下面的说明，或查看我们的 [*最新教程视频*](https://youtu.be/2F2_tjtu-lY?feature=shared) 在 YouTube 上。

{% embed url="<https://youtu.be/2F2_tjtu-lY?feature=shared>" %}

## 入门指南

### 下载 SDK 和演示

{% hint style="info" %}
[**在此下载 Convai Unity SDK 的 WebGL 版本。**](https://github.com/Conv-AI/Convai-Unity-WebGL-SDK/releases)
{% endhint %}

{% hint style="info" %}
[**在此下载完整的 WebGL 演示。**](https://github.com/Conv-AI/Unity-WebGL-Demo-Game)
{% endhint %}

{% hint style="info" %}
[**在此于 itch.io 上试用演示。**](https://convai.itch.io/webgl-demo)
{% endhint %}

### 先决条件

{% hint style="warning" %}
请在继续之前确保您的计算机已安装 Git。\
[**在此下载 Git。**](https://git-scm.com/downloads)
{% endhint %}

### 导入和设置说明

请按照以下位置中的导入和设置说明操作 [导入与设置（夜间版）](/api-docs/zh/cha-jian-yu-ji-cheng/unity-plugin/import-and-setup.md) 和 [设置 Unity 插件](/api-docs/zh/cha-jian-yu-ji-cheng/unity-plugin/setting-up-unity-plugin.md).

### WebGL 与 Unity 编辑器不兼容

尝试在 Unity 编辑器中运行场景时，您可能会遇到以下错误：

{% code overflow="wrap" %}

```
WebGL SDK 无法在 Unity 编辑器中运行。请在 WebGL 中构建并运行。
```

{% endcode %}

出现此错误是因为 WebGL SDK 不能直接在 Unity 编辑器中测试。要测试您的 WebGL 应用程序，您必须创建开发构建。

## 切换到 WebGL

现在，您的 Unity 设置已完成，让我们来设置 WebGL

前往 `文件` → `构建设置`，然后：

1. 点击 `WebGL`.
2. 勾选 `开发构建` 复选框。
3. 选择 `切换平台。`

耐心点，还记得吗？这个切换需要一点时间。

平台切换到 WebGL 后，点击 `玩家设置`。有趣的部分从这里开始：

<figure><img src="/files/472a9159a0c8a86936333f9d82d0bf9e0b702e37" alt=""><figcaption></figcaption></figure>

### 配置玩家设置

平台转换完成后，

1. 打开文件`玩家设置`.
2. 前往页面`WebGL 设置`.
3. 在以下项下：`分辨率和显示` 选项卡中，选择`Convai PWA 模板`.

<figure><img src="/files/5db45671ec0e8151df27684605316c50d7963ff9" alt=""><figcaption></figcaption></figure>

## 导入角色并构建场景

重新加载完成后，检查设置是否已更改。然后，关闭所有打开的菜单并按照以下步骤操作：

<figure><img src="https://cdn.videotap.com/6608/screenshots/RM98hWOigrswo0Uksw8F-202.29.png" alt=""><figcaption></figcaption></figure>

1. 双击 `Convai 文件夹` 然后进入 scenes。
2. 打开 `Convey Demo WebGL` 场景。
3. 前往 Convai 的网站，获取您的 API 密钥，并通过以下方式将其重新输入到 Unity 中： `Convai` → `Convai 设置`.
4. 现在，再次前往 Convai 的网站，获取您最喜欢的角色 ID，并将其粘贴到 `Convai` → `角色导入器`.

记住，Unity 编辑器不允许我们直接测试 WebGL。不过别担心，还有一个 `构建并运行` 选项：

<figure><img src="https://cdn.videotap.com/6608/screenshots/suKZ4w5jIDskFWyBqyO1-261.69.png" alt=""><figcaption></figcaption></figure>

1. 返回 `文件` → `构建设置`.
2. 点击 `添加已打开场景` 然后 `构建并运行`.

为构建输出选择一个文件夹，如有需要可新建一个，并将其命名为“WebGL”。

<figure><img src="https://cdn.videotap.com/6608/screenshots/z5kMvyZPsvD8V5dvudCN-274.6.png" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
第一次构建可能需要一些时间。\
对于后续的构建和运行，请使用 Unity 快捷键 Ctrl + B。
{% endhint %}

第一次构建耗时最长，所以可以稍微伸展一下——但别走太远。不久后，您就会见到我们的演示角色 Amelia，或者您带入数字绿洲的任何其他角色。只需授予麦克风权限，就可以开始了！

## 与您的 Convai AI NPC 互动

现在，魔法时刻到了。按住“T”与您精心培养的角色聊天。或者点击文本框输入问题。至于细节控——按 F10 打开设置面板，您可以在那里按自己的喜好更改姓名和界面样式。

<figure><img src="https://cdn.videotap.com/6608/screenshots/hnaNRdZthU6yzX7gmIvw-318.59.png" alt=""><figcaption></figcaption></figure>

感到很有成就感？您应该如此！您现在已经在浏览器中成功运行了 WebGL 构建。好奇的开发者还可以更进一步，从 GitHub 下载项目文件，供所有想要一探幕后的人使用。

{% hint style="info" %}
当您准备好正式构建时，只需在发布前在构建设置中取消勾选“开发构建”字段
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.convai.com/api-docs/zh/cha-jian-yu-ji-cheng/unity-plugin/building-for-supported-platforms/building-for-webgl.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.