计算机图形学(OPENGL):IBL-环境光

本文同时发布在我的个人博客上：https://dragon_boy.gitee.io

  IBL，image based lighting，即基于图片的光照，是将周围的环境作为一个大的发光体来进行间接的光照，通常使用立方体贴图技术进行计算。
  IBL算法使用周围的环境进行光照，它的输入可以被考虑为一种精度较高的环境光照，或者更为自然的模拟-全局光照。使用IBL的PBR流程的物体会得到更为真实的效果。
  在讲解IBL前，先给出反射方程：


  在之前说过，我们主要的目的是处理包含在半球内的所有入射光，进行积分运算。在之前的PBR例子中，我们只考虑了有限的光源，所以可以很简单地通过遍历所有光源进行积分运算，但这次针对周围的环境进行光照计算，这些可能并不方便积分的计算，这也给我们带来了两个计算积分的要求：

  • 我们需要某种方式来方便我们根据所给定的{\omega}_i获得场景的辐射率。
  • 处理积分要快速且实时。
      现在第一个要求我们已经提过了，可以使用立方体贴图技术来完成，我们可以将立方体贴图的每个纹素都当成一个单独的发光源，通过不同的{\omega}_i我们采样这立方体贴图，这样就可以得到每个不同方向的场景的辐射率。
      根据{\omega}_i获得场景的辐射率就像这样：
vec3 radiance = texture(_cubemapEnvironment, w_i).rgb;

  但处理积分我们需要多个方向的采样值，不过这也意味着每个片段都需要大量的调用这些采样值，计算的开销是巨大的。我们可以提前进行大量的计算来让积分的计算更有效率一些，为此我们需要深入了解一下反射方程：


  根据积分的特性，我们可以将其分成漫反射和高光两部分：

  这一章我们只需要关注漫反射部分。lambert模型公式和折射比率作为常量，我们可以将其提出来放在外面：

  我们可以假设点在环境贴图的中心，那么我们这个积分的值只取决于。通过这些知识点，我们可以通过卷积提前计算一个新的立方体贴图，贴图中存储的是每个采样方向的漫反射积分结果。
  卷积对数据集中的每个输入进行一些计算，同时也考虑到了数据集中的其它输入，数据集可以是场景的辐射率或环境贴图。因此，当采样某一方向的立方体贴图时，其它的采样值也被考虑到计算当中。
  为了卷积计算出一张环境贴图，我们对每个输出方向采样方向的积分进行处理，通过半球内的离散地进行大量的采样，并平均所有的辐射率，而这个半球的朝向是输出采样方向：

  这个提前计算出的立方体贴图，对每个存储一个积分结果，可以看作是提前计算了场景的所有非直接漫反射光沿着照射到一个表面。这个立方体贴图常被称为反照贴图。
  比如下面的立方体贴图和根据它计算的反照贴图：

PBR和HDR

  由于PBR是基于物理模拟真实的效果，所以说HDR是必须要考虑在内的。如果不考虑环境贴图，HDR的效果可以很简单的实现，不过使用环境贴图的话，我们需要某种方式将HDR信息保存在一张环境贴图中。
  我们之前都是通过立方体贴图来实现环境贴图的，但它的数据存储范围在[0.0,1.0]之间，即LDR，所以这种存储方式的值不适合作为PBR的输入值。

hdr文件格式

  看名字就知道这是专门存储适合HDR范围数据的图片格式。这种格式使用的是每通道8bit存储颜色，并且使用alpha通道作为指数。下面是一张HDR格式图片的示意：



  可以看到，这种图片格式的图片和立方体贴图不一样，它是由一张球形图片投影到一个平面上形成的，这样的话，我们就可以将环境存储在一张单独的名为等矩形贴图的贴图中。

导入hdr

  这里可以很简单地使用stb_image.h导入，像下面这样：

#include "stb_image.h"
[...]

stbi_set_flip_vertically_on_load(true);
int width, height, nrComponents;
float *data = stbi_loadf("newport_loft.hdr", &width, &height, &nrComponents, 0);
unsigned int hdrTexture;
if (data)
{
    glGenTextures(1, &hdrTexture);
    glBindTexture(GL_TEXTURE_2D, hdrTexture);
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB16F, width, height, 0, GL_RGB, GL_FLOAT, data); 

    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

    stbi_image_free(data);
}
else
{
    std::cout << "Failed to load HDR image." << std::endl;
}

将等矩形贴图转化为立方体贴图

  虽然可以直接使用等距形贴图进行计算，但相比使用立方体贴图，开销较大，因此我们将等矩形贴图转化为立方体贴图进行计算。
  为了进行转换，我们需要渲染一个单位立方体，接着将等矩形贴图从立方体内部投影到6个面上。顶点着色器很简单：

#version 330 core
layout (location = 0) in vec3 aPos;

out vec3 localPos;

uniform mat4 projection;
uniform mat4 view;

void main()
{
    localPos = aPos;  
    gl_Position =  projection * view * vec4(localPos, 1.0);
}

  在片元着色器中，我们通过立方体的位置进行插值运算获得片段的采样方向，接着使用这个方向向量，在进行一些三角变换后，用来采样等矩形贴图：

#version 330 core
out vec4 FragColor;
in vec3 localPos;

uniform sampler2D equirectangularMap;

const vec2 invAtan = vec2(0.1591, 0.3183);
vec2 SampleSphericalMap(vec3 v)
{
    vec2 uv = vec2(atan(v.z, v.x), asin(v.y));
    uv *= invAtan;
    uv += 0.5;
    return uv;
}

void main()
{       
    vec2 uv = SampleSphericalMap(normalize(localPos)); // make sure to normalize localPos
    vec3 color = texture(equirectangularMap, uv).rgb;
    
    FragColor = vec4(color, 1.0);
}

  接着我们需要渲染同一个立方体六次，每次通过一个面的方向渲染，我们将渲染结果存储在一个帧缓冲中：

unsigned int captureFBO, captureRBO;
glGenFramebuffers(1, &captureFBO);
glGenRenderbuffers(1, &captureRBO);

glBindFramebuffer(GL_FRAMEBUFFER, captureFBO);
glBindRenderbuffer(GL_RENDERBUFFER, captureRBO);
glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT24, 512, 512);
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_RENDERBUFFER, captureRBO);

  同样，为每个面创建一个纹理来存储渲染结果：

unsigned int envCubemap;
glGenTextures(1, &envCubemap);
glBindTexture(GL_TEXTURE_CUBE_MAP, envCubemap);
for (unsigned int i = 0; i < 6; ++i)
{
    // note that we store each face with 16 bit floating point values
    glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, GL_RGB16F, 
                 512, 512, 0, GL_RGB, GL_FLOAT, nullptr);
}
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_R, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

  接着我们通过设置6个不同的视图矩阵渲染6次立方体：

glm::mat4 captureProjection = glm::perspective(glm::radians(90.0f), 1.0f, 0.1f, 10.0f);
glm::mat4 captureViews[] = 
{
   glm::lookAt(glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3( 1.0f,  0.0f,  0.0f), glm::vec3(0.0f, -1.0f,  0.0f)),
   glm::lookAt(glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3(-1.0f,  0.0f,  0.0f), glm::vec3(0.0f, -1.0f,  0.0f)),
   glm::lookAt(glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3( 0.0f,  1.0f,  0.0f), glm::vec3(0.0f,  0.0f,  1.0f)),
   glm::lookAt(glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3( 0.0f, -1.0f,  0.0f), glm::vec3(0.0f,  0.0f, -1.0f)),
   glm::lookAt(glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3( 0.0f,  0.0f,  1.0f), glm::vec3(0.0f, -1.0f,  0.0f)),
   glm::lookAt(glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3( 0.0f,  0.0f, -1.0f), glm::vec3(0.0f, -1.0f,  0.0f))
};

// convert HDR equirectangular environment map to cubemap equivalent
equirectangularToCubemapShader.use();
equirectangularToCubemapShader.setInt("equirectangularMap", 0);
equirectangularToCubemapShader.setMat4("projection", captureProjection);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, hdrTexture);

glViewport(0, 0, 512, 512); // don't forget to configure the viewport to the capture dimensions.
glBindFramebuffer(GL_FRAMEBUFFER, captureFBO);
for (unsigned int i = 0; i < 6; ++i)
{
    equirectangularToCubemapShader.setMat4("view", captureViews[i]);
    glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, 
                           GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, envCubemap, 0);
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    renderCube(); // renders a 1x1 cube
}
glBindFramebuffer(GL_FRAMEBUFFER, 0);

  现在encCubemap中存储的就是转换过后的立方体贴图。我们用一个天空盒来测试一下。
  顶点着色器如下：

#version 330 core
layout (location = 0) in vec3 aPos;

uniform mat4 projection;
uniform mat4 view;

out vec3 localPos;

void main()
{
    localPos = aPos;

    mat4 rotView = mat4(mat3(view)); // remove translation from the view matrix
    vec4 clipPos = projection * rotView * vec4(localPos, 1.0);

    gl_Position = clipPos.xyww;
}

  记得修改深度测试选项：

glDepthFunc(GL_LEQUAL);

  片元着色器如下（记得将HDR范围色调映射到LDR，同时将结果进行伽马校正）：

#version 330 core
out vec4 FragColor;

in vec3 localPos;
  
uniform samplerCube environmentMap;
  
void main()
{
    vec3 envColor = texture(environmentMap, localPos).rgb;
    
    envColor = envColor / (envColor + vec3(1.0));
    envColor = pow(envColor, vec3(1.0/2.2)); 
  
    FragColor = vec4(envColor, 1.0);
}

  渲染结果如下：



  这里我们只是测试了环境贴图，接下来将其用来进行光照计算

立方体贴图卷积

  就像上面介绍过的，我们需要将环境贴图中心半球\Omega内的所有{\omega}_i的辐射率卷积运算到朝向，即法线N。


  接下来我们尝试通过上面转化好的立方体贴图生成反照贴图。片元着色器：

#version 330 core
out vec4 FragColor;
in vec3 localPos;

uniform samplerCube environmentMap;

const float PI = 3.14159265359;

void main()
{       
    // 采样方向等于半球的朝向
    vec3 normal = normalize(localPos);
  
    vec3 irradiance = vec3(0.0);
  
    [...] // 卷积运算
  
    FragColor = vec4(irradiance, 1.0);

  目前存在许多方式进行对环境贴图进行卷积运算，这里我们将根据半球朝向生成一定数量的采样方向向量，最后将结果平均。
  反射方程的积分运算的立体角d\omega并不方便计算，这里我们使用替代的球形坐标\theta和\phi。


  我们使用极坐标方位角绕着半球竖直圆环(到)进行采样，使用倾角绕着水平圆环采样(到)，这样，积分式可以改为：

  我们通过黎曼和将上述积分改为有限的连续和：

  我们离散的采样球形值，由于球的特性，倾角越大，采样范围越小，为了补偿这一变化，我们可以通过缩放区域。
  上述积分操作用代码表示如下：

vec3 irradiance = vec3(0.0);  

vec3 up    = vec3(0.0, 1.0, 0.0);
vec3 right = cross(up, normal);
up         = cross(normal, right);

float sampleDelta = 0.025;
float nrSamples = 0.0; 
for(float phi = 0.0; phi < 2.0 * PI; phi += sampleDelta)
{
    for(float theta = 0.0; theta < 0.5 * PI; theta += sampleDelta)
    {
        // 将球形坐标转为笛卡尔坐标(切线空间)
        vec3 tangentSample = vec3(sin(theta) * cos(phi),  sin(theta) * sin(phi), cos(theta));
        // 切线空间转换到世界空间
        vec3 sampleVec = tangentSample.x * right + tangentSample.y * up + tangentSample.z * N; 

        irradiance += texture(environmentMap, sampleVec).rgb * cos(theta) * sin(theta);
        nrSamples++;
    }
}
irradiance = PI * irradiance * (1.0 / float(nrSamples));

  操作没啥好说的，下面创建一个立方体贴图来进行纹理映射：

unsigned int irradianceMap;
glGenTextures(1, &irradianceMap);
glBindTexture(GL_TEXTURE_CUBE_MAP, irradianceMap);
for (unsigned int i = 0; i < 6; ++i)
{
    glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, GL_RGB16F, 32, 32, 0, 
                 GL_RGB, GL_FLOAT, nullptr);
}
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_R, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

  注意，由于反照贴图中存储的都是平均过的结果，所以没有很丰富的细节，使用32*32分辨率足够了。接着，我们修改帧缓冲的分辨率：

glBindFramebuffer(GL_FRAMEBUFFER, captureFBO);
glBindRenderbuffer(GL_RENDERBUFFER, captureRBO);
glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT24, 32, 32);

  最后，设置渲染代码：

irradianceShader.use();
irradianceShader.setInt("environmentMap", 0);
irradianceShader.setMat4("projection", captureProjection);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_CUBE_MAP, envCubemap);

glViewport(0, 0, 32, 32); // don't forget to configure the viewport to the capture dimensions.
glBindFramebuffer(GL_FRAMEBUFFER, captureFBO);
for (unsigned int i = 0; i < 6; ++i)
{
    irradianceShader.setMat4("view", captureViews[i]);
    glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, 
                           GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, irradianceMap, 0);
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    renderCube();
}
glBindFramebuffer(GL_FRAMEBUFFER, 0);

  结果如下：



  渲染结果像是模糊版的环境贴图。

PBR和非直接辐照光照

  我们接下来使用渲染好的反照贴图进行非直接的环境光计算。

uniform samplerCube irradianceMap;

  由于从反照贴图采样的颜色同时包含漫反射和高光部分，我们需要用菲涅尔等式计算的比率将其分离开：

vec3 kS = fresnelSchlick(max(dot(N, V), 0.0), F0);
vec3 kD = 1.0 - kS;
vec3 irradiance = texture(irradianceMap, N).rgb;
vec3 diffuse    = irradiance * albedo;
vec3 ambient    = (kD * diffuse) * ao;

  由于环境光方向来自于朝向法线半球内的所有方向，所以说没有一个特定的中间向量来决定菲涅尔等式的结果，所以我们将法线和观察方向点乘来模拟菲涅尔的效果。但之前的微表面模型构建中，我们使用了微表面的中间向量，通过表面的粗糙度影响，并将其作为输入用在菲涅尔的计算中，但这次我们不考虑粗糙度，也就意味着，表面的反射率肯定是偏高的，不过我们所期望的是反射部分相对低一些，非直接光照的菲涅尔效果应该是这样的，在粗糙度较高的非金属表面甚至会失去高光：



  我们可以将粗糙度加入菲涅尔的运算来改善这一问题：

vec3 fresnelSchlickRoughness(float cosTheta, vec3 F0, float roughness)
{
    return F0 + (max(vec3(1.0 - roughness), F0) - F0) * pow(1.0 - cosTheta, 5.0);
}

  最后计算环境光代码为：

vec3 kS = fresnelSchlickRoughness(max(dot(N, V), 0.0), F0, roughness); 
vec3 kD = 1.0 - kS;
vec3 irradiance = texture(irradianceMap, N).rgb;
vec3 diffuse    = irradiance * albedo;
vec3 ambient    = (kD * diffuse) * ao;

  渲染结果应该如下：


  很明显缺少高光部分，这个我们在下一章节讲解。
  最后，贴出原文地址供参考：https://learnopengl.com/PBR/IBL/Diffuse-irradiance

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,923评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,154评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,775评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,960评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,976评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,972评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,893评论 3赞 416
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,709评论 0赞 271
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,159评论 1赞 308
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,400评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,552评论 1赞 346
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,265评论 5赞 341
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,876评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,528评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,701评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,552评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,451评论 2赞 352