glsl - WebGL 2.0 最大图像纹理单位和最大组合纹理单位之间有什么区别？

Question

我目前正在开发一个 GLSL 着色器，该着色器使用大量纹理文件将多种 Material 叠加在一起，这些 Material 由每层的 alpha 混合图像单独屏蔽。该效果应该模仿带有背衬、中间网格和顶部第三个网格的织物。在处理此问题时，我很快就遇到了着色器中纹理单元的限制。作为解决方案，我将开始将纹理组合到 RGB channel 中，以获得更多可供着色器使用的纹理，并考虑将多个漫反射图像或其他图像组合到单个图像中。但与此同时，我的问题是:

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

Answer 1

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

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