2

我在使用带有 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) 的等价物。

4

1 回答 1

3

好的，回答我自己的问题。似乎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 中不可用。

于 2018-06-26T03:27:23.223 回答