Web 图形

How to use the Web Graphics API.

阅读时间5 分钟

最后更新于 1 个月前

WebGL 是一种用于在 Web 浏览器中渲染图形的 API，基于 OpenGL ES 图形库的功能。WebGL 2.0 与 OpenGL ES 3.0 功能大致匹配。

摄像机清除

默认情况下，Unity Web 会在每帧后清除绘制缓冲区，这意味着无论 Camera.clearFlags 设置如何，都会清除帧缓冲区的内容。但是，可以在实例化时更改此行为。为此，请在 Web 模板的

index.html

文件中将

webglContextAttributes.preserveDrawingBuffer

设置为

true

。

注意：如果设置任何 WebGL 上下文属性，还必须添加一行来保留功率首选项 (Power Preference) 播放器设置。


script.onload = () => {  config['webglContextAttributes'] = {    preserveDrawingBuffer: true, //Add this line to preserve the Camera.clearFlags setting    powerPreference: {{{ WEBGL_POWER_PREFERENCE }}} //Add this line to preserve the Power Preference Player setting  };  createUnityInstance(canvas, config, (progress) => {

全局光照

Unity Web 仅支持烘焙 GI。Web 中目前不支持实时全局光照。此外，Unity Web 仅支持非方向光照贴图。

线性渲染

某些 Web 浏览器不支持 sRGB DXT 纹理压缩。因此在使用线性渲染时会降低渲染性能的质量，原因是所有 DXT 纹理都要在运行时解压缩。

视频剪辑导入器

不能使用

VideoClipImporter

将视频剪辑导入 Unity 项目，因为这可能会增加初始资产数据下载大小并阻止网络串流。对于视频播放，使用 VideoPlayer 组件中的 URL 选项并将资产放置在 StreamingAssets/目录中，从而使用浏览器的内置网络串流。

Web 着色器代码限制

WebGL 2.0 规范对 GLSLS 着色器代码施加了一些限制。当您编写自己的着色器时，受此影响最大。以下是一些限制：

精度限定词：WebGL 2.0 要求您在着色器中指定所有变量的精度。您可以使用
```
highp
```
、
```
mediump
```
或
```
lowp
```
指定变量的精度。如果未指定精度，着色器将使用默认精度，即
```
mediump
```
。还可以使用
```
precision
```
指定变量块的精度。

**注意：**由于 Web 中的可用内存有限，请避免包含不必要的着色器变体，以免导致不必要的内存使用。因此，建议熟悉着色器变体和着色器剥离，并特别注意确保不会将具有太多变体的着色器（例如 Unity 的标准着色器）添加到图形设置 (Graphics Settings) 中的始终包含的着色器 (Always-included Shaders) 部分。

字体渲染

与其他 Unity 平台相似，Unity Web 支持动态字体渲染。但是，因为它无法访问用户机器上安装的字体，如果您要使用任何字体，请务必将其包含在项目文件夹中（包括国际字符的任何回退字体或者是字体的粗体/斜体版本），并设置为回退字体名称。

抗锯齿

WebGL 对于大多数（但不是全部）浏览器和 GPU 组合均支持抗锯齿功能。要使用抗锯齿功能，必须在 Web 平台的默认质量 (Quality) 设置中启用该功能。

反射探针

Unity Web 支持所有反射探针。

WebGL 2.0 支持

Unity 包含对 WebGL 2.0 API 的支持，因此为 Web 带来了 OpenGL ES 3.0 级的渲染功能。默认情况下，Unity Web 构建支持 WebGL 2.0 API。

支持 WebGL 2.0 的浏览器具有以下优点：

标准着色器中的内容具有高质量。
支持 GPU 实例化和方向光照贴图。
着色器代码中的索引和循环没有限制。
性能更优。

Unity Engine

User Manual

Script Reference