WebGL学习之HDR与Bloom

时间 2019-11-08

标签 webgl 学习 hdr bloom 繁體版

原文原文链接

什么是HDR

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

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

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

浮点帧缓冲

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

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

建立浮点帧缓冲，咱们只须要改变颜色缓冲的内部格式参数就好了（注意 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)。app

最简单的色调映射算法是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色调映射的应用，咱们再也不会在场景明亮的地方损失细节。固然，这个算法是倾向明亮的区域的，暗的区域会不那么精细也不那么有区分度。

另外一个色调映射应用是曝光(Exposure)参数的使用。HDR图片包含在不一样曝光等级的细节。若是咱们有一个场景要展示日夜交替，咱们固然会在白天使用低曝光，在夜间使用高曝光，就像人眼调节方式同样。有了这个曝光参数，咱们能够去设置能够同时在白天和夜晚不一样光照条件工做的光照参数，咱们只须要调整曝光参数就好了。

一个简单的曝光色调映射算法会像这样：

uniform float exposure;

void main() {             
    const float gamma = 2.2;
    vec3 hdrColor = texture(hdrBuffer, TexCoords).rgb;
    // 曝光色调映射
    vec3 mapped = vec3(1.0) - exp(-hdrColor * exposure);
    // Gamma校订 
    mapped = pow(mapped, vec3(1.0 / gamma));
    color = vec4(mapped, 1.0);
}  
复制代码

什么是Bloom

Bloom 泛光 (或者眩光)，是用来模拟光源那种发光或发热的技术。区分明亮光源的方式是使它们发出光芒，光源的光芒向四周发散，这样观察者就会产生光源或亮区的确是强光区。Bloom使咱们感受到一个明亮的物体真的有种明亮的感受。而Bloom和HDR的结合使用能很是完美地展现光源效果。

泛光的品质很大程度上取决于所用的模糊过滤器的质量和类型。下面这几步就是泛光后处理特效的过程，它总结了实现泛光所需的步骤。

提取亮色

首先咱们要从渲染出来的场景中提取两张图片。能够渲染场景两次，每次使用一个不一样的不一样的着色器渲染到不一样的帧缓冲中，但可使用一个叫作MRT（Multiple Render Targets多渲染目标）的小技巧，有了它咱们可以在一个单独渲染处理中提取两个图片。在片元着色器的输出前，咱们指定一个布局location标识符，这样咱们即可控制一个片元着色器写入到哪一个颜色缓冲：

layout (location = 0) out vec4 FragColor;
layout (location = 1) out vec4 BrightColor;
复制代码

使用多个片元着色器输出的必要条件是，有多个颜色缓冲附加到了当前绑定的帧缓冲对象上。直到如今，咱们一直使用着 gl.COLOR_ATTACHMENT0，但经过使用 gl.COLOR_ATTACHMENT1，能够获得一个附加了两个颜色缓冲的帧缓冲对象。

但首先咱们仍是将建立帧缓冲的功能进行封装：

function createFramebuffer(gl,opt,width,height){  
    const fb = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
    const framebufferInfo = {
        framebuffer: fb,
        textures: []
    };
    const texs = opt.texs || 1;//颜色缓冲数量
    const depth = !!opt.depth;

    // SECTION 建立纹理
    for(let i=0;i< texs;i++){
        const tex = initTexture(gl,opt, width, height);
        framebufferInfo.textures.push(tex);
        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i, gl.TEXTURE_2D, tex, 0);
    }

    // SECTION 建立用于保存深度的渲染缓冲区
    if(depth) {
        const depthBuffer = gl.createRenderbuffer();
        gl.bindRenderbuffer(gl.RENDERBUFFER, depthBuffer);
        gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, width, height);
        gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthBuffer);   
    }
    // 检查帧缓冲区对象
    const e = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
    if (gl.FRAMEBUFFER_COMPLETE !== e) {
        throw new Error('Frame buffer object is incomplete: ' + e.toString());
    }
    // 解绑帧缓冲区对象
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    gl.bindTexture(gl.TEXTURE_2D, null);
    if(depth) gl.bindRenderbuffer(gl.RENDERBUFFER, null);
    return framebufferInfo;
}
复制代码

接着调用上面的函数建立包含两个颜色附件和一个深度附件的帧缓冲区。

//场景帧缓存(2颜色附件 包含正常颜色 和 hdr高光颜色，1深度附件)
const fbo = createFramebuffer(gl,{informat:gl.RGBA16F, type:gl.FLOAT, texs:2, depth:true});
复制代码

在渲染的时候还须要显式告知WebGL咱们正在经过gl.drawBuffers渲染到多个颜色缓冲，不然WebGL只会渲染到帧缓冲的第一个颜色附件，而忽略全部其余的。

//采样到2个颜色附件
gl.drawBuffers([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1]);
复制代码

当渲染到这个帧缓冲的时候，一个着色器使用一个布局location修饰符，而后把不一样颜色值渲染到相应的颜色缓冲。这样就省去了为提取高光区域的额外渲染步骤。

#version 300 es
precision highp float; 
layout (location = 0) out vec4 FragColor;
layout (location = 1) out vec4 BrightColor;
//...

void main() { 
    vec3 normal = normalize(vNormal);
    vec3 viewDirection = normalize(u_viewPosition - vposition);
		//...
		vec3 result = ambient + lighting;
  
    // 检查结果值是否高于某个门槛，若是高于就渲染到高光颜色缓存中
    float brightness = dot(result, vec3(0.2126, 0.7152, 0.0722));
    if(brightness > 1.0){
        BrightColor = vec4(result, 1.0);
    } else {
        BrightColor = vec4(0.0, 0.0, 0.0, 1.0);
    }
    FragColor = vec4(result, 1.0);
}
复制代码

这里先正常计算光照，将其传递给第一个片元着色器的输出变量FragColor。而后咱们使用当前储存在FragColor的东西来决定它的亮度是否超过了必定阈限。咱们经过恰当地将其转为灰度的方式计算一个fragment的亮度，若是它超过了必定阈限，咱们就把颜色输出到第二个颜色缓冲，那里保存着全部亮部。

这也说明了为何泛光在HDR基础上可以运行得很好。由于HDR中，咱们能够将颜色值指定超过1.0这个默认的范围，咱们可以获得对一个图像中的亮度的更好的控制权。没有HDR咱们必须将阈限设置为小于1.0的数，虽然可行，可是亮部很容易变得不少，这就致使光晕效果太重。

有了一个提取出的亮区图像，咱们如今就要把这个图像进行模糊处理。

高斯模糊

要实现高斯模糊过滤须要一个二维四方形做为权重，从这个二维高斯曲线方程中去获取它。然而这个过程有个问题，就是很快会消耗极大的性能。以一个32×32的模糊kernel为例，咱们必须对每一个fragment从一个纹理中采样1024次！

幸运的是，高斯方程有个很是巧妙的特性，它容许咱们把二维方程分解为两个更小的方程：一个描述水平权重，另外一个描述垂直权重。咱们首先用水平权重在整个纹理上进行水平模糊，而后在经改变的纹理上进行垂直模糊。利用这个特性，结果是同样的，可是能够节省难以置信的性能，由于咱们如今只需作32+32次采样，再也不是1024了！这叫作两步高斯模糊。

这意味着咱们若是对一个图像进行模糊处理，至少须要两步，最好使用帧缓冲对象作这件事。具体来讲，咱们将实现像乒乓球同样的帧缓冲来实现高斯模糊。意思是使用一对帧缓冲，咱们把另外一个帧缓冲的颜色缓冲放进当前的帧缓冲的颜色缓冲中，使用不一样的着色效果渲染指定的次数。基本上就是不断地切换帧缓冲和纹理去绘制。这样咱们先在场景纹理的第一个缓冲中进行模糊，而后在把第一个帧缓冲的颜色缓冲放进第二个帧缓冲进行模糊，接着将第二个帧缓冲的颜色缓冲放进第一个，循环往复。

在咱们研究帧缓冲以前，先来实现高斯模糊的片元着色器：

#version 300 es
precision highp float;
uniform sampler2D image;
uniform bool horizontal;
in vec2 texcoord;
out vec4 FragColor;
const float weight[5] = float[](0.2270270270, 0.1945945946, 0.1216216216, 0.0540540541, 0.0162162162);

void main() {
    vec2 tex_offset = vec2(1.0 / float(textureSize(image, 0)));//每一个像素的尺寸
    vec3 result = texture(image, texcoord).rgb * weight[0];
    if (horizontal) {
        for (int i = 0; i < 5; ++i) {
            result += texture(image, texcoord + vec2(tex_offset.x * float(i), 0.0)).rgb * weight[i];
            result += texture(image, texcoord - vec2(tex_offset.x * float(i), 0.0)).rgb * weight[i];
        }
    } else {
        for (int i = 0; i < 5; ++i) {
            result += texture(image, texcoord + vec2(0.0, tex_offset.y * float(i))).rgb * weight[i];
            result += texture(image, texcoord - vec2(0.0, tex_offset.y * float(i))).rgb * weight[i];
        }
    }
    FragColor = vec4 (result, 1.0);
}
复制代码

这里使用一个比较小的高斯权重作例子，每次咱们用它来指定当前fragment的水平或垂直样本的特定权重。你会发现咱们基本上是将模糊过滤器根据咱们在uniform变量horizontal设置的值分割为一个水平和一个垂直部分。经过用1.0除以纹理的大小（从textureSize获得一个vec2）获得一个纹理像素的实际大小，以此做为偏移距离的根据。

接着为图像的模糊处理建立两个基本的帧缓冲，每一个只有一个颜色缓冲纹理，调用上面封装好的createFramebuffer函数便可。

//2乒乓帧缓存(都只包含1颜色附件)
const hFbo = createFramebuffer(gl,{informat:gl.RGBA16F, type:gl.FLOAT});
const vFbo = createFramebuffer(gl,{informat:gl.RGBA16F, type:gl.FLOAT});
复制代码

获得一个HDR纹理后，咱们用提取出来的亮区纹理填充一个帧缓冲，而后对其模糊处理6次（3次垂直3次水平）：

/** * 乒乓帧缓存 */
gl.useProgram(pProgram.program);
for(let i=0; i < 6; i++){
    bindFramebufferInfo(gl, i%2 ? hFbo:vFbo);
    setBuffersAndAttributes(gl, pProgram, pVao);
    setUniforms(pProgram,{
        horizontal: i%2? true:false,
        image: i == 0 ? fbo.textures[1]: i%2 ? vFbo.textures[0]: hFbo.textures[0], //第1次两个乒乓帧缓存都为空，所以第一次要将灯光纹理传入
    });
    drawBufferInfo(gl, pVao);
}
复制代码

每次循环根据渲染的是水平仍是垂直来绑定两个缓冲其中之一，而将另外一个绑定为纹理进行模糊。第一次迭代，由于两个颜色缓冲都是空的因此咱们随意绑定一个去进行模糊处理。重复这个步骤6次，亮区图像就进行一个重复3次的高斯模糊了。这样咱们能够对任意图像进行任意次模糊处理；高斯模糊循环次数越多，模糊的强度越大。

把两个纹理混合

有了场景的HDR纹理和模糊处理的亮区纹理，只需把它们结合起来就能实现泛光或称光晕效果了。最终的片元着色器要把两个纹理混合：

#version 300 es
precision highp float;
in vec2 texcoord;
uniform sampler2D image;
uniform sampler2D imageBlur;
uniform bool bloom;
out vec4 FragColor;
const float exposure = 1.0;
const float gamma = 2.2;

void main() {   
    vec3 hdrColor = texture(image, texcoord).rgb;
    vec3 bloomColor = texture(imageBlur, texcoord).rgb;
    if (bloom)
        hdrColor += bloomColor;     //添加融合
    
    //色调映射
    // vec3 result = hdrColor / (hdrColor + vec3(1.0));
    vec3 result = vec3 (1.0) - exp(-hdrColor * exposure);
    //进行gamma校订
    result = pow(result, vec3 (1.0 / gamma));
    FragColor = vec4(result, 1.0);
}
复制代码

注意要在应用色调映射以前添加泛光效果。这样添加的亮区的泛光，也会柔和转换为LDR，光照效果相对会更好。把两个纹理结合之后，场景亮区便有了合适的光晕特效：

这里只用了一个相对简单的高斯模糊过滤器，它在每一个方向上只有5个样本。经过沿着更大的半径或重复更屡次数的模糊，进行采样咱们就能够提高模糊的效果。由于模糊的质量与泛光效果的质量正相关，提高模糊效果就可以提高泛光效果。

后记

这个HDR + Bloom的是目前为止渲染流程最复杂的一个特效了，使用了3个着色器program和3个帧缓冲区，绘制的时候要不断切换program 和帧缓冲区。目前有个问题是，从帧缓冲渲染到正常缓冲后场景的锯齿感挺严重的，后续还得深刻学习下抗锯齿(anti-aliasing)。

参考资料:

HDR

泛光