WebGL学习之HDR与Bloom

最新推荐文章于 2023-09-12 11:45:53 发布

程序员爽爽

最新推荐文章于 2023-09-12 11:45:53 发布

阅读量720

点赞数

CC 4.0 BY-SA版权

分类专栏： python 文章标签：程序员互联网 python

本文链接：https://blog.youkuaiyun.com/weixin_45084321/article/details/90453618

本文介绍了WebGL中的HDR技术，包括浮点帧缓冲和色调映射的概念及应用，展示了如何通过Reinhard色调映射和曝光参数增强图像细节。同时，详细讲解了Bloom效果的实现，包括提取亮色、高斯模糊和最终的纹理混合，呈现光源的发光效果。文章以实际示例和代码解释了整个流程，并指出在实际应用中可能遇到的锯齿问题和解决思路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是HDR

HDR (High Dynamic Range，高动态范围)，在摄影领域，指的是可以提供更多的动态范围和图像细节的一种技术手段。简单讲就是将不同曝光拍摄出的最佳细节的LDR (低动态范围) 图像合成后，就叫HDR，它能同时反映出场景最暗和最亮部分的细节。为什么需要多张图片？因为目前的单反相机的宽容度还是有限的，一张照片不能反映出高动态场景的所有细节。一张图片拍摄就必须要在暗光和高光之间做出取舍，只能亮部暗部两者取其一。但是通过HDR合成多张图片，却能达到我们想要的效果。

那么在WebGL中，HDR具体指的是什么。它指的是让我们能用超过1.0的数据表示颜色值。到目前为止，我们用的都是LDR（低动态范围），所有的颜色值都被限制在了 [0,1] 范围。在现实当中，太阳，灯光这类光源它们的颜色值肯定是远远超出1.0的范围的。

本节实现的效果请看 hdr & bloom

浮点帧缓冲

当帧缓冲使用标准化的定点格式(像gl.RGB)为其颜色缓冲的内部格式，WebGL会在将这些值存入帧缓冲前自动将其约束到0.0到1.0之间。这一操作对大部分帧缓冲格式都是成立的，除了专门用来存放被拓展范围值的浮点格式。

WebGL扩大颜色值范围的方法就是：把颜色的格式设置成16位浮点数或者32位浮点数，即把帧缓冲的颜色缓冲的内部格式设定成 gl.RGB16F, gl.RGBA16F, gl.RGB32F 或者 gl.RGBA32F，这些帧缓冲被叫做浮点帧缓冲(Floating Point Framebuffer)，浮点帧缓冲可以存储超过0.0到1.0范围的浮点值，所以非常适合HDR渲染。

创建浮点帧缓冲，我们只需要改变颜色缓冲的内部格式参数就行了（注意 gl.FLOAT参数)：

gl.bindTexture(gl.TEXTURE_2D, colorBuffer);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB16F, SCR_WIDTH, SCR_HEIGHT, 0, gl.RGB, gl.FLOAT, NULL);

帧缓冲默认一个颜色分量只占用8位(bits)。当使用一个使用32位每颜色分量时(使用gl.RGB32F 或者 gl.RGBA32F)，我们需要四倍的内存来存储这些颜色。所以除非你需要一个非常高的精确度，32位不是必须的，使用 gl.RGB16F就足够了。

色调映射

色调映射(Tone Mapping)是一个损失很小的转换浮点颜色值至我们所需的LDR[0.0, 1.0]范围内的过程，通常会伴有特定的风格的色平衡(Stylistic Color Balance)。

最简单的色调映射算法是Reinhard色调映射，它涉及到分散整个HDR颜色值到LDR颜色值上，所有的值都有对应。Reinhard色调映射算法平均地将所有亮度值分散到LDR上。将Reinhard色调映射应用到之前的片段着色器上，并且加上一个Gamma校正过滤：

void main()
{             
    const float gamma = 2.2;
    vec3 hdrColor = texture(hdrBuffer, TexCoords).rgb;
    // Reinhard色调映射
    vec3 mapped = hdrColor / (hdrColor + vec3(1.0));
    // Gamma校正
    mapped = pow(mapped, vec3(1.0 / gamma));
    color = vec4(mapped, 1.0);
}

有了Reinhard色调映射的应用，我们不再会在场景明亮的地方损失细节。当