你如何在 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
})()

我想这可能与帧缓冲区的编码有关，但我确实在 WebGL 中看到了 glEnable(GL_FRAMEBUFFER_SRGB) 的等价物。

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 中不可用。

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

How do you implement a gamma correct workflow in WebGL2?

webgl2