OpenGL高级版本学习日志4:网格光照渲染实战

技术学习笔记 同时被 2 个专栏收录
24 篇文章 0 订阅
24 篇文章 4 订阅

1. 前言

在之前的两章内容,我们已经介绍了光照模型的使用以及三维模型的导入。接下来,我们希望利用这些内容,来编写一个简单的三维模型光照渲染程序,将光照效果施加在载入的三维模型上,如下图所示。左图为加入光照效果后的显示结果,可以看到三维模型的立体感更好。右图为没有光照的效果,可以看到失去了立体质感。那么接下来,我们就具体介绍下如何实现光照对模型的渲染。

2. 在shader中加入光照

我们首先介绍下顶点着色器的修改:

#version 330 core
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec3 aNormal;
layout (location = 2) in vec2 aTexCoords;
layout (location = 3) in vec3 aObjectColor;

out vec3 FragPos;
out vec3 Normal;
out vec2 TexCoords;
out vec3 ObjectColor;

uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;

void main()
{
    FragPos = vec3(model * vec4(aPos, 1.0));
    Normal = mat3(transpose(inverse(model))) * aNormal;  
    TexCoords = aTexCoords;
    ObjectColor = aObjectColor;   
    gl_Position = projection * view * model * vec4(aPos, 1.0);
}

相对上一章的内容,我们只是增加了颜色。在三维模型显示那一章,模型本身的颜色信息被纹理取代。这里,为了更加直观的看到光照渲染的信息,我们增加了颜色向量。在片段着色器,我们将用颜色替换纹理。

#version 330 core
out vec4 FragColor;

in vec3 Normal;  
in vec3 FragPos;  
in vec2 TexCoords;
in vec3 ObjectColor;

uniform vec3 lightPos; 
uniform vec3 viewPos; 
uniform vec3 lightColor;
uniform sampler2D texture_diffuse1;

void main()
{ 
    //ambient
    float ambientStrength = 0.3;
    vec3 ambient = ambientStrength * lightColor;
  	
    // diffuse 
    vec3 norm = normalize(Normal);
    vec3 lightDir = normalize(lightPos - FragPos);
    float diff = max(dot(norm, lightDir), 0.0);
    vec3 diffuse = diff * lightColor;
    
    // specular
    float specularStrength = 0.6;
    vec3 viewDir = normalize(viewPos - FragPos);
    vec3 reflectDir = reflect(-lightDir, norm);  
    float spec = pow(max(dot(viewDir, reflectDir), 0.0), 64);
    vec3 specular = specularStrength * spec * lightColor;
  
    vec3 lightCombination= (ambient + diffuse + specular) * ObjectColor;

    FragColor = vec4(lightCombination, 1.0);    
    //FragColor = texture(texture_diffuse1, TexCoords);

}

可以看到的是,我们在片段着色器中加入了光照模型,并最终得到每一点的颜色信息。为了方便起见,这里我们注释掉了纹理信息。

基于该片段着色器,我们渲染了几副图形学论文经常会用到的色差图,如下图所示。注:色差图基于测地距离计算获得。

如果我们将上述代码中最后的颜色赋值,叠加上纹理效果,那么最终我们就得到了带有纹理与光照组合的渲染,如下图所示。左图为加了光照的结果,右图为没有光照的结果。

 

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值