LearnOpenGL学习（光照 -- 颜色，基础光照，材质，光照贴图）

server/2024/12/4 16:48:05/

光照 

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 corelayout(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 coreout 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 toplastX = 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 corelayout (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 corein vec3 Normal;
in vec3 FragPos;out vec4 FragColor;uniform vec3 objectColor;
uniform vec3 lightColor;
uniform vec3 lightPos;void main()
{//ambientfloat ambientStrength = 0.1;vec3 ambient = ambientStrength * lightColor;//diffusevec3 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 corelayout (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 corein 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()
{//ambientvec3 ambient = light.ambient * vec3(texture(material.diffuse, TexCoords));//diffusevec3 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


http://www.ppmy.cn/server/147326.html

相关文章

Spark常问面试题---项目总结

Spark常问面试题---项目总结

一、数据清洗&#xff0c;你都清洗什么&#xff1f;或者说 ETL 你是怎么做的&#xff1f; 我在这个项目主要清洗的式日志数据&#xff0c;日志数据传过来的json格式 去除掉无用的字段&#xff0c;过滤掉json格式不正确的脏数据 过滤清洗掉日志中缺少关键字段的数据&#xff…
阅读更多...
三十：在 Web 中什么样的响应才会被缓存？

三十：在 Web 中什么样的响应才会被缓存？

Web 缓存是提升网站性能、减少服务器负载、降低延迟并提高用户体验的关键技术之一。为了确保缓存机制能够有效工作，开发者需要了解哪些响应会被缓存以及如何配置这些响应。本文将探讨 Web 中哪些响应会被缓存，以及缓存控制的基本原理。 1. 缓存概念简述 在 Web 中，缓存是将…
阅读更多...
三维地形图计算软件(四)-用PYQT5+vtk画任意多面体示例

三维地形图计算软件(四)-用PYQT5+vtk画任意多面体示例

现已完成三维地形图三角网的三维显示和用多线程计算平基土石方功能&#xff0c;正在准备进入将用于计算出的全部三棱柱&#xff08;锥&#xff09;实体也能以三维方式显示出来&#xff0c;并可以选中三维实体和查看他们的属性&#xff0c;现将如何在已知几个点的情况下画出任意…
阅读更多...
跟着官方文档快速入门RAGAS

跟着官方文档快速入门RAGAS

官网: Ragas Ragas&#xff08;Retrieval-Augmented Generation, RAG&#xff09;是一个基于简单手写提示的评估框架&#xff0c;通过这些提示全自动地衡量答案的准确性、 相关性和上下文相关性。这种评估方法不需要访问人工注释的数据集或参考答案&#xff0c;使得评估过程更…
阅读更多...
我谈冈萨雷斯对频域滤波的误解——快速卷积与频域滤波之间的关系

我谈冈萨雷斯对频域滤波的误解——快速卷积与频域滤波之间的关系

在Rafael Gonzalez和Richard Woods所著的《数字图像处理》中&#xff0c;Gonzalez对频域滤波是有误解的&#xff0c;在频域设计滤波器不是非得图像和滤波器的尺寸相同&#xff0c;不是非得在频域通过乘积实现。相反&#xff0c;FIR滤波器设计都是构造空域脉冲响应。一般的原则是…
阅读更多...
el-table 纵向 横向 多级表头

el-table 纵向 横向 多级表头

<el-table :data"tableData" class"diaTable":span-method"handleSpanMethod"border:header-cell-style"{background:#292929,color:#fff}"><!-- 纵向表头 --><el-table-column label"纵向表头" width"…
阅读更多...
【docker】docker compose多容器部署

【docker】docker compose多容器部署

Docker Compose 的详细讲解与实际应用 什么是 Docker Compose&#xff1f; Docker Compose 是一个工具&#xff0c;用于定义和运行多容器 Docker 应用。 通过一个 docker-compose.yml 文件&#xff0c;可以同时启动多个服务&#xff0c;简化多容器管理。 Docker Compose 的核心…
阅读更多...
echarts地图立体效果,echarts地图点击事件,echarts地图自定义自定义tooltip

echarts地图立体效果,echarts地图点击事件,echarts地图自定义自定义tooltip

一.地图立体效果 方法1:两层地图叠加 实现原理:geo数组中放入两个地图对象,通过修改zlevel属性以及top,left,right,bottom形成视觉差 配置项参考如下代码: geo: [{zlevel: 2,top: 96,map: map,itemStyle: {color: #091A51ee,opacity: 1,borderWidth: 2,borderColor: #16BAFA…
阅读更多...
最新文章

Copyright @ 2022~2023