如何在 WebGL2 中实现伽玛校正工作流程？

Question

我在将 sRGB 纹理与 WebGL2 结合使用时遇到问题。我正在尝试加载纹理并将其显示为全屏四边形，但图像显示不正确（太暗。）

纹理加载代码如下。

const texture0 = await (() => {
    const image = new Image()
    const promise = new Promise(resolve => image.onload = () => {
        const texture = gl.createTexture()
        gl.bindTexture(gl.TEXTURE_2D, texture)
        gl.texStorage2D(gl.TEXTURE_2D, 1, gl.SRGB8_ALPHA8, 256, 256)
        gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 256, 256, gl.RGBA, gl.UNSIGNED_BYTE, image) 
        resolve(texture)
    })
    image.src = "./images/texture.png"
    return promise
})()

我想这可能与帧缓冲区的编码有关，但我没有看到与glEnable(GL_FRAMEBUFFER_SRGB)WebGL 中的等效项。

Answer 1

好吧，回答我自己的问题。似乎EXT_sRGB添加了一个帧缓冲区附件参数 ，FRAMEBUFFER_ATTACHMENT_COLOR_ENCODING_EXT它允许您查看帧缓冲区是否会执行线性到 sRGB 转换。WebGL2 默认包含此功能。但是，目前无法指定默认帧缓冲区是线性还是 sRGB。对于 Chrome v67，默认帧缓冲区似乎是线性的，因此您必须在片段着色器中手动执行转换。

OpenGL ES 3.0 中有一个扩展EXT_sRGB_write_control，它允许您使用glEnable(GL_FRAMEBUFFER_SRGB_EXT). 然而，目前 WebGL 中尚不支持此功能。