0

如果我已将数据渲染到 R32F 纹理（2^18 (~250,000) 纹素）并且我想计算这些值的总和，是否可以通过要求 gpu 生成 mipmap 来做到这一点？

（想法是最小的mipmap级别将有一个包含所有原始纹素平均值的纹素）

我将使用哪些 mipmap 设置（钳位等）来生成正确的平均值？

我对 webgl 体操不太擅长，并且希望了解如何将 1 到 2^18 的数字渲染到 R32F 纹理中，然后在该纹理上产生总和。

对于这个数量的纹素，这种方法会比尝试将纹素传输回 cpu 并在 javascript 中执行求和更快吗？

谢谢！

4

1 回答 1

3

没有定义用于生成 mipmap 的算法的设置。钳位设置、过滤器设置无效。您只能设置一个gl.hint关于是否更喜欢质量而不是性能的提示，但驾驶员甚至没有义务关注该标志。此外，每个驱动程序都是不同的。生成 mipmap 的结果是用于指纹 WebGL 的差异之一。

在任何情况下，如果您不关心使用的算法并且只想读取生成 mipmap 的结果，那么您只需将最后一个 mip 附加到帧缓冲区并在调用gl.generateMipmap.

您可能不会将 1 到 2^18 的所有数字都渲染到纹理中，但这并不难。您只需绘制一个 512x512 的四边形。片段着色器可能看起来像这样

#version 300 es
precision highp float;
out vec4 fragColor;
void main() {
  float i = 1. + gl_FragCoord.x + gl_FragCoord.y * 512.0;
  fragColor = vec4(i, 0, 0, 0);
}

当然，512.0如果您想与其他尺寸一起工作，您可以将其作为制服传递。

渲染到浮点纹理是 WebGL2 的可选功能。台式机支持它，但截至 2018 年，大多数移动设备不支持。同样，能够过滤浮点纹理也是一项可选功能，截至 2018 年，大多数移动设备通常也不支持该功能，但在桌面设备上提供。

function main() {
  const gl = document.createElement("canvas").getContext("webgl2");
  if (!gl) {
    alert("need webgl2");
    return;
  }
  {
    const ext = gl.getExtension("EXT_color_buffer_float");
    if (!ext) {
      alert("can not render to floating point textures");
      return;
    }
  }
  {
    const ext = gl.getExtension("OES_texture_float_linear");
    if (!ext) {
       alert("can not filter floating point textures");
       return;
    }
  }
  
  // create a framebuffer and attach an R32F 512x512 texture
  const numbersFBI = twgl.createFramebufferInfo(gl, [
    { internalFormat: gl.R32F, minMag: gl.NEAREST },
  ], 512, 512);
  
  const vs = `
  #version 300 es
  in vec4 position;
  void main() {
    gl_Position = position;
  }
  `;
  const fillFS = `
  #version 300 es
  precision highp float;
  out vec4 fragColor;
  void main() {
    float i = 1. + gl_FragCoord.x + gl_FragCoord.y * 512.0;
    fragColor = vec4(i, 0, 0, 0);
  }
  `
  
  // creates a buffer with a single quad that goes from -1 to +1 in the XY plane
  // calls gl.createBuffer, gl.bindBuffer, gl.bufferData
  const quadBufferInfo = twgl.primitives.createXYQuadBufferInfo(gl);
  
  const fillProgramInfo = twgl.createProgramInfo(gl, [vs, fillFS]);
  gl.useProgram(fillProgramInfo.program);

  // calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
  twgl.setBuffersAndAttributes(gl, fillProgramInfo, quadBufferInfo);
  
  // tell webgl to render to our texture 512x512 texture
  // calls gl.bindBuffer and gl.viewport
  twgl.bindFramebufferInfo(gl, numbersFBI);
  
  // draw 2 triangles (6 vertices)
  gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
  
  // compute the last mip level
  const miplevel = Math.log2(512);

  // get the texture twgl created above
  const texture = numbersFBI.attachments[0];

  // create a framebuffer with the last mip from
  // the texture
  const readFBI = twgl.createFramebufferInfo(gl, [
    { attachment: texture, level: miplevel },
  ]);
  
  gl.bindTexture(gl.TEXTURE_2D, texture);

  // try each hint to see if there is a difference      
  ['DONT_CARE', 'NICEST', 'FASTEST'].forEach((hint) => {
    gl.hint(gl.GENERATE_MIPMAP_HINT, gl[hint]);
    gl.generateMipmap(gl.TEXTURE_2D);

    // read the result.
    const result = new Float32Array(4);
    gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.FLOAT, result);

    log('mip generation hint:', hint);
    log('average:', result[0]);
    log('average * count:', result[0] * 512 * 512);
    log(' ');
  });
  
  function log(...args) {
    const elem = document.createElement('pre');
    elem.textContent = [...args].join(' ');
    document.body.appendChild(elem);
  }
}
main();
pre {margin: 0}
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>

注意我使用了 twgl.js来减少代码的冗长。如果您不知道如何制作帧缓冲区和附加纹理或如何设置缓冲区和属性、编译着色器和设置制服，那么您的问题太宽泛了，我建议您阅读一些教程。

让我指出如何不能保证这种方法比其他方法更快。首先取决于司机。驱动程序可能会在软件中执行此操作（尽管不太可能）。

一个明显的加速是使用 RGBAF32 并让代码一次执行 4 个值，然后在最后读取所有 4 个通道（R、G、B、A）并将它们相加。

此外，由于您只关心最后一个 1x1 像素 mip，因此您要求代码渲染比更直接的方法更多的像素。真的你只需要渲染 1 个像素，结果。但是对于这个 2^18 值的示例，即 512x512 纹理，这意味着 256x526、128x128、64x64、32x32、16x16、8x8、4x4 和 2x2 mip 都被分配和计算，这可以说是浪费的时间。事实上，规范说所有 mip 都是从第一个 mip 生成的。当然，驱动程序可以自由地走捷径，并且很可能从 mip N-1 生成 mip N，因为结果会相似，但这不是规范的定义方式。但是，即使从前一个 mip 生成 87380 个值，您也并不关心。

我只是猜测在更大的卡盘中生成比 2x2 更快。同时还有纹理缓存，如果我理解正确，它们通常会缓存纹理的矩形部分，以便从 mip 读取 4 个值很快。当你有一个纹理缓存未命中时，它真的会影响你的性能。所以，如果你的块太大，你可能会有很多缓存未命中。您基本上必须进行测试，并且每个 GPU 可能会显示出不同的性能特征。

另一个加速是考虑使用多个绘图缓冲区，然后您可以在每个片段着色器迭代中写入 16 到 32 个值，而不仅仅是 4 个。

于 2018-06-25T00:50:14.920 回答