LearnOpenGL学习(光照 -- 颜色,基础光照,材质,光照贴图)
光照
glm::vec3 lightColor(0.0f, 1.0f, 0.0f);
glm::vec3 toyColor(1.0f, 0.5f, 0.31f);
glm::vec3 result = lightColor * toyColor; // = (0.0f, 0.5f, 0.0f);
说明:当我们把光源的颜色与物体的颜色值相乘,所得到的就是这个物体所反射的颜色。
创建一个光照场景
#shader vertex
#version 330 core
layout(location = 0) in vec3 aPos;
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;
void main()
{
gl_Position = projection * view * model * vec4(aPos, 1.0);
};
#shader fragment
#version 330 core
out vec4 FragColor;
uniform vec3 objectColor;
uniform vec3 lightColor;
void main()
{
FragColor = vec4(lightColor * objectColor, 1.0);
};
很简单,只需要计算一个光照
摄像机从正方体正中心看过去显示一个正方形,我还以为写错了,查了半天错,头都秃了。。。。
#include "TestLightColor.h"
#include "Render.h"
#include "imgui/imgui.h"
#include <glm/ext/matrix_clip_space.hpp>
#include <glm/ext/matrix_transform.hpp>
#include <GLFW/glfw3.h>
namespace test {
void TestLightColor_scroll_callback(GLFWwindow* window, double xoffset, double yoffset);
void TestLightColor_mouse_callback(GLFWwindow* window, double xposIn, double yposIn);
TestLightColor::TestLightColor() : camera(glm::vec3(0.0f,0.0f,6.0f)) {
float vertices[] = {
-0.5f, -0.5f, -0.5f,
0.5f, -0.5f, -0.5f,
0.5f, 0.5f, -0.5f,
0.5f, 0.5f, -0.5f,
-0.5f, 0.5f, -0.5f,
-0.5f, -0.5f, -0.5f,
-0.5f, -0.5f, 0.5f,
0.5f, -0.5f, 0.5f,
0.5f, 0.5f, 0.5f,
0.5f, 0.5f, 0.5f,
-0.5f, 0.5f, 0.5f,
-0.5f, -0.5f, 0.5f,
-0.5f, 0.5f, 0.5f,
-0.5f, 0.5f, -0.5f,
-0.5f, -0.5f, -0.5f,
-0.5f, -0.5f, -0.5f,
-0.5f, -0.5f, 0.5f,
-0.5f, 0.5f, 0.5f,
0.5f, 0.5f, 0.5f,
0.5f, 0.5f, -0.5f,
0.5f, -0.5f, -0.5f,
0.5f, -0.5f, -0.5f,
0.5f, -0.5f, 0.5f,
0.5f, 0.5f, 0.5f,
-0.5f, -0.5f, -0.5f,
0.5f, -0.5f, -0.5f,
0.5f, -0.5f, 0.5f,
0.5f, -0.5f, 0.5f,
-0.5f, -0.5f, 0.5f,
-0.5f, -0.5f, -0.5f,
-0.5f, 0.5f, -0.5f,
0.5f, 0.5f, -0.5f,
0.5f, 0.5f, 0.5f,
0.5f, 0.5f, 0.5f,
-0.5f, 0.5f, 0.5f,
-0.5f, 0.5f, -0.5f,
};
unsigned int indices[] = {
0,1,2,
3,4,5,
6,7,8,
9,10,11,
12,13,14,
15,16,17,
18,19,20,
21,22,23,
24,25,26,
27,28,29,
30,31,32,
33,34,35
};
GLCall(glEnable(GL_BLEND));
GLCall(glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA));
m_VAO = std::make_unique<VertexArray>();
m_VertexBuffer = std::make_unique<VertexBuffer>(vertices, sizeof(vertices));
VertexBufferLayout layout;
layout.Push<float>(3);
m_VAO->AddBuffer(*m_VertexBuffer, layout);
m_IndexBuffer = std::make_unique<IndexBuffer>(indices, 36);
m_ColorShader = std::make_unique<Shader>("res/shaders/LightColor.shader");
m_CubeShader = std::make_unique<Shader>("res/shaders/LightCube.shader");
m_ColorShader->Bind();
m_CubeShader->Bind();
}
TestLightColor::~TestLightColor() {
}
void TestLightColor::OnStart(GLFWwindow* window) {
glEnable(GL_DEPTH_TEST);
m_Window = window;
glfwSetWindowUserPointer(m_Window, reinterpret_cast<void*>(this));
glfwSetCursorPosCallback(m_Window, test::TestLightColor_mouse_callback);
glfwSetScrollCallback(m_Window, test::TestLightColor_scroll_callback);
glfwSetInputMode(window, GLFW_CURSOR, GLFW_CURSOR_DISABLED);
}
void TestLightColor::OnUpdate(float delteTime) {
}
void TestLightColor::OnRender() {
processInput(m_Window);
float currentFrame = static_cast<float>(glfwGetTime());
deltaTime = currentFrame - lastFrame;
lastFrame = currentFrame;
constexpr Render render;
//processInput(m_Window);
GLCall(glClearColor(0.0f, 0.0f, 0.0f, 1.0f));
GLCall(glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT));
GLCall(m_ColorShader->Bind());
//GLCall(m_ColorShader->SetUniform3f("objectColor", 1.0f, 0.5f, 0.31f));
//GLCall(m_ColorShader->SetUniform3f("lightColor", 1.0f, 1.0f, 1.0f));
//glm::mat4 projection = glm::mat4(1.0f);
glm::mat4 projection = glm::perspective(glm::radians(camera.Zoom),
(float)test::SCR_WIDTH / (float)test::SCR_HEIGHT, 0.1f, 100.0f);
glm::mat4 view = camera.GetViewMatrix();
GLCall(m_ColorShader->SetUniformMat4f("projection", projection));
GLCall(m_ColorShader->SetUniformMat4f("view", view));
glm::mat4 model = glm::mat4(1.0f);
GLCall(m_ColorShader->SetUniformMat4f("model", model));
GLCall(m_VAO->Bind());
GLCall(render.Draw(*m_VAO, *m_IndexBuffer, *m_ColorShader));
GLCall(m_VAO->Bind());
GLCall(m_CubeShader->Bind());
GLCall(m_CubeShader->SetUniformMat4f("projection", projection));
GLCall(m_CubeShader->SetUniformMat4f("view", view));
model = glm::mat4(1.0f);
model = glm::translate(model, lightPos);
model = glm::scale(model, glm::vec3(2.0f));
m_CubeShader->SetUniformMat4f("model", model);
GLCall(render.Draw(*m_VAO, *m_IndexBuffer, *m_CubeShader));
}
void TestLightColor::OnImGuiRender() {
}
void TestLightColor::mouse_callback(GLFWwindow* window, double xposIn, double yposIn) {
float xpos = static_cast<float>(xposIn);
float ypos = static_cast<float>(yposIn);
if (firstMouse)
{
lastX = xpos;
lastY = ypos;
firstMouse = false;
}
float xoffset = xpos - lastX;
float yoffset = lastY - ypos; // reversed since y-coordinates go from bottom to top
lastX = xpos;
lastY = ypos;
camera.ProcessMouseMovement(xoffset, yoffset);
}
void TestLightColor::scroll_callback(GLFWwindow* window, double xoffset, double yoffset) {
camera.ProcessMouseScroll(static_cast<float>(yoffset));
}
void TestLightColor_mouse_callback(GLFWwindow* window, double xposIn, double yposIn) {
TestLightColor* light = reinterpret_cast<TestLightColor*>(glfwGetWindowUserPointer(window));
light->mouse_callback(window, xposIn, yposIn);
}
void TestLightColor_scroll_callback(GLFWwindow* window, double xoffset, double yoffset) {
TestLightColor* light = reinterpret_cast<TestLightColor*>(glfwGetWindowUserPointer(window));
light->mouse_callback(window, xoffset, yoffset);
}
}
基础光照
- 环境光照(Ambient Lighting):即使在黑暗的情况下,世界上通常也仍然有一些光亮(月亮、远处的光),所以物体几乎永远不会是完全黑暗的。为了模拟这个,我们会使用一个环境光照常量,它永远会给物体一些颜色。
- 漫反射光照(Diffuse Lighting):模拟光源对物体的方向性影响(Directional Impact)。它是风氏光照模型中视觉上最显著的分量。物体的某一部分越是正对着光源,它就会越亮。
- 镜面光照(Specular Lighting):模拟有光泽物体上面出现的亮点。镜面光照的颜色相比于物体的颜色会更倾向于光的颜色。
环境光照
void main()
{
float ambientStrength = 0.1;
vec3 ambient = ambientStrength * lightColor;
vec3 result = ambient * objectColor;
FragColor = vec4(result, 1.0);
}
漫反射光照
为了(只)得到两个向量夹角的余弦值,我们使用的是单位向量(长度为1的向量),所以我们需要确保所有的向量都是标准化的,否则点乘返回的就不仅仅是余弦值了
法向量
#version 330 core
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec3 aNormal;
...
修改橙色方块的着色器:(增加了漫反射)
#shader vertex
#version 330 core
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec3 aNormal;
out vec3 Normal;
out vec3 FragPos;
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;
void main()
{
FragPos = vec3(model * vec4(aPos, 1.0));
Normal = aNormal;
gl_Position = projection * view * model * vec4(aPos, 1.0);
};
#shader fragment
#version 330 core
in vec3 Normal;
in vec3 FragPos;
out vec4 FragColor;
uniform vec3 objectColor;
uniform vec3 lightColor;
uniform vec3 lightPos;
void main()
{
//ambient
float ambientStrength = 0.1;
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;
vec3 result = (ambient + diffuse)* objectColor;
FragColor = vec4(result, 1.0);
};
在顶点着色器中,我们可以使用inverse和transpose函数自己生成这个法线矩阵,这两个函数对所有类型矩阵都有效。注意我们还要把被处理过的矩阵强制转换为3×3矩阵,来保证它失去了位移属性以及能够乘以vec3
的法向量。
Normal = mat3(transpose(inverse(model))) * aNormal;
镜面光照
//specular
float specularStrength = 0.5f;
vec3 viewDir = normalize(viewPos - FragPos);
vec3 reflectDir = reflect(-lightDir, norm);
float spec = pow(max(dot(viewDir, reflectDir), 0.0), 32);
vec3 specular = specularStrength * spec * lightColor;
在顶点着色器中实现的风氏光照模型叫做Gouraud着色(Gouraud Shading),而不是风氏着色(Phong Shading)。记住,由于插值,这种光照看起来有点逊色。风氏着色能产生更平滑的光照效果。
材质
#version 330 core
struct Material {
vec3 ambient;
vec3 diffuse;
vec3 specular;
float shininess;
};
uniform Material material;
在片段着色器中,我们创建一个结构体(Struct)来储存物体的材质属性。我们也可以把它们储存为独立的uniform值,但是作为一个结构体来储存会更有条理一些
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), material.shininess);
vec3 specular = lightColor * (spec * material.specular);
vec3 result = ambient + diffuse + specular;
FragColor = vec4(result, 1.0);
}
忘写分号。。。
光的属性
物体过亮的原因是环境光、漫反射和镜面光这三个颜色对任何一个光源都全力反射。
如果我们假设 lightcolor 是 1.0,那么代码会是这样的:
vec3 ambient = vec3(1.0) * material.ambient;
vec3 diffuse = vec3(1.0) * (diff * material.diffuse);
vec3 specular = vec3(1.0) * (spec * material.specular);
所以物体的每个材质属性对每一个光照分量都返回了最大的强度。
为光照属性创建类似材质结构体的东西:
struct Light {
vec3 position;
vec3 ambient;
vec3 diffuse;
vec3 specular;
};
uniform Light light;
vec3 ambient = light.ambient * material.ambient;
vec3 diffuse = light.diffuse * (diff * material.diffuse);
vec3 specular = light.specular * (spec * material.specular);
调节各种类型的光的强度
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); // 很低的影响
GLCall(m_ColorShader->Bind());
GLCall(m_ColorShader->SetUniform3f("light.ambient", ambientColor));
GLCall(m_ColorShader->SetUniform3f("light.diffuse", diffuseColor));
改变光源的环境光和漫反射颜色,让其随着时间变化
光照贴图
漫反射贴图
注意 sampler2D 是所谓的不透明类型(Opaque Type),也就是说我们不能将它实例化,只能通过uniform来定义它。如果我们使用除uniform以外的方法(比如函数的参数)实例化这个结构体,GLSL会抛出一些奇怪的错误。这同样也适用于任何封装了不透明类型的结构体。
使用贴图
#shader vertex
#version 330 core
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec3 aNormal;
layout (location = 2) in vec2 aTexCoords;
out vec3 Normal;
out vec3 FragPos;
out vec2 TexCoords;
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;
void main()
{
FragPos = vec3(model * vec4(aPos, 1.0));
Normal = aNormal;
TexCoords = aTexCoords;
gl_Position = projection * view * model * vec4(aPos, 1.0);
};
#shader fragment
#version 330 core
in vec3 Normal;
in vec3 FragPos;
struct Light {
vec3 position;
vec3 ambient;
vec3 diffuse;
vec3 specular;
};
struct Material {
sampler2D diffuse;
vec3 specular;
float shininess;
};
in vec2 TexCoords;
out vec4 FragColor;
uniform Light light;
uniform Material material;
uniform vec3 lightPos;
uniform vec3 viewPos;
void main()
{
//ambient
vec3 ambient = light.ambient * vec3(texture(material.diffuse, TexCoords));
//diffuse
vec3 norm = normalize(Normal);
vec3 lightDir = normalize(lightPos - FragPos);
float diff = max(dot(norm, lightDir), 0.0);
vec3 diffuse = light.diffuse * diff * vec3(texture(material.diffuse, TexCoords));
//specular
vec3 viewDir = normalize(viewPos - FragPos);
vec3 reflectDir = reflect(-lightDir, norm);
float spec = pow(max(dot(viewDir, reflectDir), 0.0), material.shininess);
vec3 specular = light.specular * (spec * material.specular);
vec3 result = ambient + diffuse + specular;
FragColor = vec4(result, 1.0);
};
镜面光贴图
链接:container2_specular.png (500×500)
我们想要让物体的某些部分以不同的强度显示镜面高光。我们可以使用一个专门用于镜面高光的纹理贴图。这也就意味着我们需要生成一个黑白的(如果你想得话也可以是彩色的)纹理,来定义物体每部分的镜面光强度。
镜面光贴图上的每个像素都可以由一个颜色向量来表示,一个像素越「白」,乘积就会越大,物体的镜面光分量就会越亮。
采样镜面光贴图
//cpp
lightingShader.setInt("material.specular", 1);
...
glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_2D, specularMap);
//shader
struct Material {
sampler2D diffuse;
sampler2D specular;
float shininess;
};
vec3 ambient = light.ambient * vec3(texture(material.diffuse, TexCoords));
vec3 diffuse = light.diffuse * diff * vec3(texture(material.diffuse, TexCoords));
vec3 specular = light.specular * spec * vec3(texture(material.specular, TexCoords));
FragColor = vec4(ambient + diffuse + specular, 1.0);
通过使用镜面光贴图我们可以对物体设置大量的细节,比如物体的哪些部分需要有闪闪发光的属性,我们甚至可以设置它们对应的强度。镜面光贴图能够在漫反射贴图之上给予我们更高一层的控制。
参考:颜色 - LearnOpenGL CN
基础光照 - LearnOpenGL CN