Question

我无法在WebGL2中使用sRGB纹理。我正在尝试加载纹理并将其显示为全屏四边形，但是图像显示不正确（太暗。）

纹理加载代码如下。

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中实现伽玛正确的工作流程？

1 个答案: