目录
- 光照与材质
- 光照贴图
- 漫反射贴图
- 采样镜面光贴图
GitHub主页:https://github.com/sdpyy
OpenGL学习仓库:https://github.com/sdpyy1/CppLearn/tree/main/OpenGLtree/main/OpenGL):https://github.com/sdpyy1/CppLearn/tree/main/OpenGL
光照与材质
在现实世界里,每个物体会对光产生不同的反应。比如,钢制物体看起来通常会比陶土花瓶更闪闪发光,一个木头箱子也不会与一个钢制箱子反射同样程度的光。有些物体反射光的时候不会有太多的散射(Scatter),因而产生较小的高光点,而有些物体则会散射很多,产生一个有着更大半径的高光点。如果我们想要在OpenGL中模拟多种类型的物体,我们必须针对每种表面定义不同的材质(Material)属性。
当描述一个表面时,我们可以分别为三个光照分量定义一个材质颜色(Material Color):环境光照(Ambient Lighting)、漫反射光照(Diffuse Lighting)和镜面光照(Specular Lighting),再添加一个反光度(Shininess)分量。将这个结构体写入片段着色器,简单理解就是把物体颜色分成了三部分,然后在三种光照计算中分别使用,最后直接将光照相加即可
#version 330 core
out vec4 FragColor;
// 材质结构体
struct Material {
vec3 ambient;
vec3 diffuse;
vec3 specular;
float shininess;
};
// 法线
in vec3 Normal;
// 像素对应空间位置
in vec3 FragPos;
// 光照位置
uniform vec3 lightPos;
// 光照颜色
uniform vec3 lightColor;
// 摄像机位置
uniform vec3 viewPos;
// 材质
uniform Material material;
void main()
{
// 环境光
vec3 ambient = lightColor * material.ambient;
// 漫反射
vec3 norm = normalize(Normal);
vec3 lightDir = normalize(lightPos - FragPos);
float diff = max(dot(norm,lightDir),0.0);
vec3 diffuse = lightColor * (diff * material.diffuse);
// 高光反射
vec3 viewDir = normalize(viewPos - FragPos);
vec3 reflectDir = reflect(-lightDir, norm);
float spec = pow(max(dot(viewDir, reflectDir), 0.0), 32);
vec3 specular = (spec * material.specular) * lightColor;
// 综合
vec3 result = ambient + diffuse + specular;
FragColor = vec4(result, 1.0);
}
对于结构体的uniform,赋值方法比较简单
lightingShader.setVec3("material.ambient", 1.0f, 0.5f, 0.31f);
lightingShader.setVec3("material.diffuse", 1.0f, 0.5f, 0.31f);
lightingShader.setVec3("material.specular", 0.5f, 0.5f, 0.5f);
lightingShader.setFloat("material.shininess", 32.0f);
这个物体太亮了。物体过亮的原因是环境光、漫反射和镜面光这三个颜色对任何一个光源都全力反射。同样,我们可以对光源的环境光、漫反射和镜面光属性进行分别设置。这样设置可以对被光照物体的比如环境光强度统一设置
struct Light {
vec3 position;
vec3 ambient;
vec3 diffuse;
vec3 specular;
};
uniform Light light;
这样设置光照
cubeShader.setVec3("light.ambient", 0.2f, 0.2f, 0.2f);
cubeShader.setVec3("light.diffuse", 0.5f, 0.5f, 0.5f); // 将光照调暗了一些以搭配场景
cubeShader.setVec3("light.specular", 1.0f, 1.0f, 1.0f);
cubeShader.setVec3("light.position", lightPos);
下面可以做一些有趣的处理,让光源的ambientColor和diffuseColor随时间变化
glm::vec3 lightColor;
lightColor.x = sin(glfwGetTime() * 2.0f);
lightColor.y = sin(glfwGetTime() * 0.7f);
lightColor.z = sin(glfwGetTime() * 1.3f);
glm::vec3 diffuseColor = lightColor * glm::vec3(0.5f); // 降低影响
glm::vec3 ambientColor = diffuseColor * glm::vec3(0.2f); // 很低的影响
cubeShader.setVec3("light.ambient", ambientColor);
cubeShader.setVec3("light.diffuse", diffuseColor);
光照贴图
在上一节中,我们将整个物体的材质定义为一个整体,但现实世界中的物体通常并不只包含有一种材质,而是由多种材质所组成。想想一辆汽车:它的外壳非常有光泽,车窗会部分反射周围的环境,轮胎不会那么有光泽,所以它没有镜面高光,轮毂非常闪亮(如果你洗车了的话)。汽车同样会有漫反射和环境光颜色,它们在整个物体上也不会是一样的,汽车有着许多种不同的环境光/漫反射颜色。总之,这样的物体在不同的部件上都有不同的材质属性。
漫反射贴图
我们希望通过某种方式对物体的每个片段单独设置漫反射颜色。用纹理就能实现。其实都是使用一张覆盖物体的图像,让我们能够逐片段索引其独立的颜色值。在光照场景中,它通常叫做一个漫反射贴图(Diffuse Map)。这也就解释了为什么把纹理作为漫反射系数。
将Material的漫反射项改为采样器,通过UV坐标采样漫反射贴图,这里还移除了环境光,因为因为环境光颜色在几乎所有情况下都等于漫反射颜色
struct Material {
sampler2D diffuse;
vec3 specular;
float shininess;
};
之后就是常规的把采样器设置好,就可以了。提供一个加载纹理的方法
// 加载材质返回纹理ID
GLuint loadTexture(char const * path)
{
GLuint textureID;
glGenTextures(1, &textureID);
int width, height, nrComponents;
unsigned char *data = stbi_load(path, &width, &height, &nrComponents, 0);
if (data)
{
GLenum format;
if (nrComponents == 1)
format = GL_RED;
else if (nrComponents == 3)
format = GL_RGB;
else if (nrComponents == 4)
format = GL_RGBA;
glBindTexture(GL_TEXTURE_2D, textureID);
glTexImage2D(GL_TEXTURE_2D, 0, format, width, height, 0, format, GL_UNSIGNED_BYTE, data);
glGenerateMipmap(GL_TEXTURE_2D);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
stbi_image_free(data);
}
else
{
std::cout << "Texture failed to load at path: " << path << std::endl;
stbi_image_free(data);
}
return textureID;
}
采样镜面光贴图
虽然纹理颜色上了,但是木头和铁边的高光应该是不一样的,所以高光的系数也需要一张贴图来定义,来保证不同的位置高光系数是不一样的,下图就表示边上才有颜色,中间对高光的贡献小
同样,把高光颜色也设置为采样器
struct Material {
sampler2D diffuse;
sampler2D specular;
float shininess;
};
最终就只有铁边反射