Debugging and troubleshooting WebGL builds
WebGL 网络

WebGL 图形

WebGL is an API for rendering graphics in web browsers, which is based on the functionality of the OpenGL ES graphics library. WebGL 1.0 roughly matches OpenGL ES 2.0 functionality, and WebGL 2.0 roughly matches OpenGL ES 3.0 functionality.

Camera Clear

The default WebGL behaviour is to clear the drawing buffer after each frame. This means on Unity WebGL, the content of the frame buffer clears regardless of the Camera.clearFlags setting. However, you can change this behaviour at instantiation time. To do this, set webglContextAttributes.preserveDrawingBuffer to true in your WebGL template:

UnityLoader.instantiate("unityContainer", "%UNITY_WEBGL_BUILD_URL%", {
    Module: {
        "webglContextAttributes": {"preserveDrawingBuffer": true},
    }
});

延迟渲染

如果 WebGL2.0 可用,Unity WebGL 仅支持延迟渲染路径。在 WebGL1.0 上,Unity WebGL 运行时将回退到前向渲染

全局光照

Unity WebGL 仅支持烘焙 GI。WebGL 当前不支持实时 GI。此外,仅支持非方向光照贴图。

线性渲染

Unity WebGL only supports linear color space rendering with WebGL 2.0. Linear color space rendering doesn’t have fallback support for WebGL 1.0. To build a WebGL player using linear color space rendering, you need to remove WebGL 1.0 API in the Player settings, open the Other Settings panel, disable the Automatic Graphics API setting.

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

MovieTexture

WebGL 不支持使用 MovieTexture 类来播放视频。但是,您可以使用 HTML5 视频元素有效地在 WebGL 内容中回放视频。请下载此 Asset Store 资源包查看此操作方法的示例。

WebGL 着色器代码限制

The WebGL 1.0 specification imposes some limitations on GLSLS shader code, which are more restrictive than many OpenGL ES 2.0 implementations. This is mostly relevant when you write your own shaders.

具体而言,WebGL 限制了哪些值可用于索引数组或矩阵:WebGL 仅允许使用常量表达式、循环索引或组合的方式进行动态索引。唯一的例外是顶点着色器中的 uniform 访问,这种情况可使用任何表达式进行索引。

此外,在控制结构方面也有限制。允许的唯一循环类型是计算 for 循环,在这种情况下,初始化函数 (initializer) 将变量初始化为常量,更新 (update) 向变量添加常量或从变量中减去常量,而延续测试 (continuation test) 会将变量与常量进行比较。不允许使用不符合这些条件的 for 循环以及 while 循环。

字体渲染

与所有 Unity 平台一样,Unity WebGL 支持动态字体渲染。但是,无法访问用户机器上安装的字体,因此所使用的任何字体都必须包含在项目文件夹中(包括国际字符的任何后备字体或者是字体的粗体/斜体版本),并设置为后备字体名称

抗锯齿

WebGL supports anti-aliasing on most (but not on all) combinations of browsers and GPUs. To use it, anti-aliasing must be enabled in the default Quality setting for the WebGL platform.

请注意,在 WebGL1.0 上有几个限制:

  • Switching Quality settings at runtime will not enable or disable anti-aliasing. It has to be set up in the default Quality setting loaded at player start up.

  • 不同的多重采样级别(2x、4x 等)在 WebGL 中没有任何影响,开启或关闭都可以。

  • 应用于摄像机的任何后期处理效果都会禁用内置的抗锯齿功能。

  • HDR is not compatible with anti-aliasing so make sure the Allow HDR camera option is disabled.

WebGL2.0 没有这样的限制。

反射探针

WebGL 支持反射探针,但由于 WebGL 规范中存在有关渲染到特定 Mipmap 的限制,因此不支持平滑实时反射探针(因此实时反射探针将始终产生锐利的反射,这种情况下可能看起来分辨率非常低)。若要支持平滑实时反射探针,必须使用 WebGL 2.0。

WebGL 2.0 支持

Unity includes support for the WebGL 2.0 API, which brings OpenGL ES 3.0-level rendering capabilities to the web.

By default, Unity WebGL builds support both WebGL 1.0 and WebGL 2.0 APIs, This can be configured in the WebGL Player settings under the Other Settings panel by disabling the Automatic Graphics API property.

浏览器支持 WebGL 2.0 时,内容可获得以下方面的优势:标准着色器提供的更高质量、GPU 实例化支持、方向光照贴图支持、着色器代码中的索引和循环不受限制以及更出色的性能。

You can use SystemInfo.graphicsDeviceType at run time to determine whether the Unity instance is rendering with OpenGLES3 (WebGL2.0) or OpenGLES2 (WebGL1.0).


  • 2018–10–26 Page amended with limited editorial review

  • 2017.2 中添加了适用于 WebGL 2.0 的线性渲染 NewIn20172

Debugging and troubleshooting WebGL builds
WebGL 网络