glsl - 如何在 WebGL 中输出大于 1 的片段值

Question

假设我正在渲染 2 个样本，它们将组合成一个图像。第一个样本包含超出可显示像素范围的值(在本例中，大于 1)。但是当减去第 2 个样本时，它确实落在范围内。

在组合样本之前，我将样本存储在帧缓冲区纹理中。

我希望能够存储大于 1 的值，但这些值被限制为 1。GLSL 片段着色器可以输出这样的值吗？纹理可以存储它们吗？如果没有，我还能如何存储它们？

根据 this page ，有可能:

rendering to screen requires the outputs to be of a displayable format, which is not always the case in a multipass pipeline. Sometimes the textures produced by a pass need to have a floating point format which does not translate directly to colors

但根据规范，纹理 float 被限制在 [0,1] 范围内。

Answer 1

最简单的方法是使用浮点纹理。

var gl = someCanvasElement.getContext("experimental-webgl");
var ext = gl.getExtension("OES_texture_float");
if (!ext) {
    alert("no OES_texture_float");
    return;
}

现在您可以使用浮点纹理创建和渲染。接下来要做的是看看您是否可以渲染到浮点纹理。

var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.FLOAT, null);
gl.texParameteri(gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_MAG_FILTER, gl.NEAREST);

var fb = gl.createFramebuffer();
gl.bindFrameBuffer(gl.FRAMEBUFFER, fb);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);

var status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
if (status != gl.FRAMEBUFFER_COMPLETE) {
  alert("can not render to floating point textures");
  return;
}

使用 OES_texture_float 时不会限制 float

如果设备不支持渲染到浮点纹理，那么您必须像 gil 建议的那样以其他方式对结果进行编码

WebGL2

注意:在 WebGL2 中，浮点纹理始终可用。另一方面，如果您想过滤浮点纹理，您仍然需要检查并启用 OES_texture_float_linear。同样在 WebGL2 中，您需要启用 EXT_color_buffer_float 以呈现为浮点纹理(并且您仍然需要调用 gl.checkFramebufferStatus，因为它取决于驱动程序哪些附件组合是支持的)。此外，还有 EXT_float_blend 用于在渲染到浮点纹理时是否可以启用混合。