WebGL 2.0 最大图像纹理单元和最大组合纹理单元有什么区别?

What is the Difference Between WebGL 2.0 Max Image Texture Units and Max Combined Texture Units?

我目前正在开发一个 GLSL 着色器,它使用大量纹理文件将多个材质叠加在一起,每个图层都被一个 alpha 混合图像单独遮盖。该效果应该模仿带有背衬、中间网眼和顶部第三个网眼的织物。在处理此问题时,我很快 运行 限制了我的着色器中的纹理单元。作为解决方案,我将开始将纹理组合到 RGB 通道中以获得更多可供着色器使用的纹理,并考虑将多个漫反射图像或其他图像组合到单个图像中。但与此同时,我的问题是:

WebGL 2.0 会提供更多的纹理单元吗,还是受显卡本身的限制?就像一个常识性问题一样,最大组合纹理单元数是我在 WebGL 上下文中可以拥有的纹理单元总数吗?这与最大纹理单位有何不同?我只是想了解这里的局限性。以下是 Browserleaks for WebGL 在我的 Macbook Pro 上的结果。

Will WebGL 2.0 offer more texture units, or is this something limited by the graphics card itself?

这是硬件限制。

is the Max Combined Texture Unit number the total number of texture units I can have on a WebGL context?

是的。

How is that different from Max Texture Units?

GL_MAX_TEXTURE_IMAGE_UNITS 仅将 应用于片段着色器访问的纹理。 GL_MAX_COMBINED_TEXTURE_IMAGE_UNITS 指定可以在 所有 着色器阶段访问的纹理总数。

WebGL 1.0 不允许非 FS 阶段访问纹理。 WebGL 2.0 允许多个阶段访问纹理。

MAX_COMBINED_TEXTURE_IMAGE_UNITS是存在的纹理单元总数。

MAX_TEXTURE_IMAGE_UNITS 是您可以在片段着色器中使用的纹理单元总数

MAX_VERTEX_TEXTURE_IMAGE_UNITS 是您可以在顶点着色器中使用的纹理单元总数

您通过调用 gl.getParameter

来查询这些值

function main(webglVersion) {
  const gl = document.createElement('canvas').getContext(webglVersion);
  if (!gl) {
    return console.log('no', webglVersion);
  }
  console.log(webglVersion);
  console.log(
    'MAX_COMBINED_TEXTURE_IMAGE_UNITS',
    gl.getParameter(gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS));
  console.log(
    'MAX_TEXTURE_IMAGE_UNITS',
    gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS));
  console.log(
    'MAX_VERTEX_TEXTURE_IMAGE_UNITS',
    gl.getParameter(gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS));
}
main('webgl');
main('webgl2');

假设您得到了这些结果

MAX_COMBINED_TEXTURE_IMAGE_UNITS 20
MAX_TEXTURE_IMAGE_UNITS 8
MAX_VERTEX_TEXTURE_IMAGE_UNITS 16

这意味着您最多可以在顶点着色器中使用 8 个,在片段着色器中最多使用 16 个,但总共不能使用超过 20 个。

Will WebGL 2.0 offer more texture units, or is this something limited by the graphics card itself?

WebGL 2.0 要求的最低要求高于 WebGL1 的最低要求。通常在同一个 GPU 上,它们很可能提供相同的数字,但有些 GPU 支持 WebGL1,但不支持 WebGL2

WebGL 与 WebGL2 的最低保证值

                                   WebGL1  WebGL2
MAX_COMBINED_TEXTURE_IMAGE_UNITS     8       32
MAX_TEXTURE_IMAGE_UNITS              8       16
MAX_VERTEX_TEXTURE_IMAGE_UNITS       0       16

请注意,MAX_VERTEX_TEXTURE_IMAGE_UNITS 在 WebGL1 中的最小值为 0。这意味着在顶点着色器中使用纹理是 WebGL1 上的可选功能。还好most devices support at least 4