# Web 图形

> How to use the Web Graphics API.

[WebGL](https://www.khronos.org/webgl/) 是一种用于在 Web 浏览器中渲染图形的 API，基于 OpenGL ES 图形库的功能。WebGL 2.0 与 OpenGL ES 3.0 功能大致匹配。

## 摄像机清除##camera-clear

默认情况下，Unity Web 会在每帧后清除绘制缓冲区，这意味着无论 [Camera.clearFlags](https://docs.unity3d.com/ScriptReference/Camera-clearFlags.html) 设置如何，都会清除帧缓冲区的内容。但是，可以在实例化时更改此行为。为此，请在 Web 模板的 `index.html` 文件中将 `webglContextAttributes.preserveDrawingBuffer` 设置为 `true`。

**注意**：如果设置任何 [WebGL 上下文属性](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/getContextAttributes)，还必须添加一行来保留**功率首选项 (Power Preference)** [播放器设置](/engine/6000.0/manual/platform-specific/webgl/develop/class-player-settings-web-gl.md#Publishing)。

```
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) => {
```

## 全局光照##global-illumination

Unity Web 仅支持[烘焙 GI](/engine/6000.0/manual/lighting-overview/lighting-get-started/lighting-in-unity.md#globalIllumination)。Web 中目前不支持实时全局光照。此外，Unity Web 仅支持非方向光照贴图。

## 线性渲染##linear-rendering

某些 Web 浏览器不支持 [sRGB DXT 纹理压缩](/engine/6000.0/manual/class-texture-importer-override.md)。因此在使用线性渲染时会降低渲染性能的质量，原因是所有 DXT 纹理都要在运行时解压缩。

## 视频剪辑导入器##video-clip-importer

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

## Web 着色器代码限制##web-shader-code-restrictions

[WebGL 2.0 规范](https://www.khronos.org/registry/webgl/specs/2.0/)对 GLSLS 着色器代码施加了一些限制。当您编写自己的着色器时，受此影响最大。以下是一些限制：

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

\*\*注意：\*\*由于 Web 中的可用内存有限，请避免包含不必要的着色器变体，以免导致不必要的内存使用。因此，建议熟悉[着色器变体](/engine/6000.0/manual/materials-and-shaders/shaders/shader-troubleshooting/shader-reducing/shader-variants/shader-variants.md)和[着色器剥离](/engine/6000.0/manual/materials-and-shaders/shaders/shader-troubleshooting/shader-reducing/shader-variants/shader-variant-stripping.md)，并特别注意确保不会将具有太多变体的着色器（例如 Unity 的[标准着色器](/engine/6000.0/manual/materials-and-shaders/shaders/shader-built-in-birp/birp/shader-standard-shader/shader.md)）添加到[图形设置 (Graphics Settings)](/engine/6000.0/manual/unity-editor/editor-features/comp-manager-group/class-graphics-settings.md) 中的[始终包含的着色器 (Always-included Shaders)](/engine/6000.0/manual/unity-editor/editor-features/comp-manager-group/class-graphics-settings.md#Always) 部分。

## 字体渲染##font-rendering

与其他 Unity 平台相似，Unity Web 支持动态字体渲染。但是，因为它无法访问用户机器上安装的字体，如果您要使用任何字体，请务必将其包含在项目文件夹中（包括国际字符的任何回退字体或者是字体的粗体/斜体版本），并[设置为回退字体名称](/engine/6000.0/manual/working-in-unity/uitoolkits/uielements/uie-work-with-text/uie-fallback-font.md)。

## 抗锯齿##anti-aliasing

WebGL 对于大多数（但不是全部）浏览器和 GPU 组合均支持抗锯齿功能。要使用抗锯齿功能，必须在 Web 平台的默认[质量 (Quality)](/engine/6000.0/manual/unity-editor/editor-features/comp-manager-group/class-quality-settings.md) 设置中启用该功能。

## 反射探针##reflection-probes

Unity Web 支持所有反射探针。

## WebGL 2.0 支持##webgl-2.0-support

Unity 包含对 [WebGL 2.0 API](https://www.khronos.org/registry/webgl/specs/latest/2.0/) 的支持，因此为 Web 带来了 OpenGL ES 3.0 级的渲染功能。默认情况下，Unity Web 构建支持 WebGL 2.0 API。

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

* 标准着色器中的内容具有高质量。
* 支持 [GPU 实例化](/engine/6000.0/manual/rendering-and-post-processing/graphics-performance-profiling/reduce-draw-calls/gpuinstancing/gpuinstancing.md)和方向光照贴图。
* 着色器代码中的索引和循环没有限制。
* 性能更优。

### 其他资源：##additional-resources:

* [反射探针](/engine/6000.0/manual/lighting-overview/reflections/class-reflection-probe.md)
* [构建 Web 应用程序](/engine/6000.0/manual/platform-specific/webgl/building-distribution/building.md)
* [Web 播放器设置](/engine/6000.0/manual/platform-specific/webgl/develop/class-player-settings-web-gl.md)

***