Learn OpenGL (八):颜色
當我們在OpenGL中創建一個光源時,我們希望給光源一個顏色。在上一段中我們有一個白色的太陽,所以我們也將光源設置為白色。當我們把光源的顏色與物體的顏色值相乘,所得到的就是這個物體所反射的顏色(也就是我們所感知到的顏色)。
創建一個光照場景
在接下來的教程中,我們將會廣泛地使用顏色來模擬現實世界中的光照效果,創造出一些有趣的視覺效果。由于我們現在將會使用光源了,我們希望將它們顯示為可見的物體,并在場景中至少加入一個物體來測試模擬光照的效果。
首先我們需要一個物體來作為被投光(Cast the light)的對象,我們將使用前面教程中的那個著名的立方體箱子。我們還需要一個物體來代表光源在3D場景中的位置。簡單起見,我們依然使用一個立方體來代表光源(我們已擁有立方體的頂點數據是吧?)。
填一個頂點緩沖對象(VBO),設定一下頂點屬性指針和其它一些亂七八糟的東西現在對你來說應該很容易了,所以我們就不再贅述那些步驟了。如果你仍然覺得這很困難,我建議你復習之前的教程,并且在繼續學習之前先把練習過一遍。
我們首先需要一個頂點著色器來繪制箱子。與之前的頂點著色器相比,容器的頂點位置是保持不變的(雖然這一次我們不需要紋理坐標了),因此頂點著色器中沒有新的代碼。我們將會使用之前教程頂點著色器的精簡版:
#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);
}
記得更新你的頂點數據和屬性指針使其與新的頂點著色器保持一致(當然你可以繼續留著紋理數據和屬性指針。在這一節中我們將不會用到它們,但有一個全新的開始也不是什么壞主意)。
因為我們還要創建一個表示燈(光源)的立方體,所以我們還要為這個燈創建一個專門的VAO。當然我們也可以讓這個燈和其它物體使用同一個VAO,簡單地對它的model(模型)矩陣做一些變換就好了,然而接下來的教程中我們會頻繁地對頂點數據和屬性指針做出修改,我們并不想讓這些修改影響到燈(我們只關心燈的頂點位置),因此我們有必要為燈創建一個新的VAO。
unsigned int lightVAO;
glGenVertexArrays(1, &lightVAO);
glBindVertexArray(lightVAO);
// 只需要綁定VBO不用再次設置VBO的數據,因為箱子的VBO數據中已經包含了正確的立方體頂點數據
glBindBuffer(GL_ARRAY_BUFFER, VBO);
// 設置燈立方體的頂點屬性(對我們的燈來說僅僅只有位置數據)
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);
這段代碼對你來說應該非常直觀。現在我們已經創建了表示燈和被照物體箱子,我們只需要再定義一個片段著色器就行了:
#version 330 core
out vec4 FragColor;uniform vec3 objectColor;
uniform vec3 lightColor;void main()
{FragColor = vec4(lightColor * objectColor, 1.0);
}
這個片段著色器從uniform變量中接受物體的顏色和光源的顏色。正如本節一開始所討論的那樣,我們將光源的顏色和物體(反射的)顏色相乘。這個著色器理解起來應該很容易。我們把物體的顏色設置為之前提到的珊瑚紅色,并把光源設置為白色。
// 在此之前不要忘記首先 use 對應的著色器程序(來設定uniform)
lightingShader.use();
lightingShader.setVec3("objectColor", 1.0f, 0.5f, 0.31f);
lightingShader.setVec3("lightColor", 1.0f, 1.0f, 1.0f);
要注意的是,當我們修改頂點或者片段著色器后,燈的位置或顏色也會隨之改變,這并不是我們想要的效果。我們不希望燈的顏色在接下來的教程中因光照計算的結果而受到影響,而是希望它能夠與其它的計算分離。我們希望燈一直保持明亮,不受其它顏色變化的影響(這樣它才更像是一個真實的光源)。
為了實現這個目標,我們需要為燈的繪制創建另外的一套著色器,從而能保證它能夠在其它光照著色器發生改變的時候不受影響。頂點著色器與我們當前的頂點著色器是一樣的,所以你可以直接把現在的頂點著色器用在燈上。燈的片段著色器給燈定義了一個不變的常量白色,保證了燈的顏色一直是亮的:
#version 330 core
out vec4 FragColor;void main()
{FragColor = vec4(1.0); // 將向量的四個分量全部設置為1.0
}
當我們想要繪制我們的物體的時候,我們需要使用剛剛定義的光照著色器來繪制箱子(或者可能是其它的物體)。當我們想要繪制燈的時候,我們會使用燈的著色器。在之后的教程里我們會逐步更新這個光照著色器,從而能夠慢慢地實現更真實的效果。
使用這個燈立方體的主要目的是為了讓我們知道光源在場景中的具體位置。我們通常在場景中定義一個光源的位置,但這只是一個位置,它并沒有視覺意義。為了顯示真正的燈,我們將表示光源的立方體繪制在與光源相同的位置。我們將使用我們為它新建的片段著色器來繪制它,讓它一直處于白色的狀態,不受場景中的光照影響。
我們聲明一個全局vec3變量來表示光源在場景的世界空間坐標中的位置:
glm::vec3 lightPos(1.2f, 1.0f, 2.0f);
然后我們把燈位移到這里,然后將它縮小一點,讓它不那么明顯:
model = glm::mat4();
model = glm::translate(model, lightPos);
model = glm::scale(model, glm::vec3(0.2f));
繪制燈立方體的代碼應該與下面的類似:
lampShader.use();
// 設置模型、視圖和投影矩陣uniform
...
// 繪制燈立方體對象
glBindVertexArray(lightVAO);
glDrawArrays(GL_TRIANGLES, 0, 36);
請把上述的所有代碼片段放在你程序中合適的位置,這樣我們就能有一個干凈的光照實驗場地了。如果一切順利,運行效果將會如下圖所示:
#include <glad/glad.h>
#include <GLFW/glfw3.h>
#include <glm/glm.hpp>
#include <glm/gtc/matrix_transform.hpp>
#include <glm/gtc/type_ptr.hpp>
#include <learnopengl/filesystem.h>
#include <learnopengl/shader_m.h>
#include <learnopengl/camera.h>
#include <iostream>// settings
const unsigned int SCR_WIDTH = 800;
const unsigned int SCR_HEIGHT = 600;// camera
Camera camera(glm::vec3(0.0f, 0.0f, 3.0f));
float lastX = SCR_WIDTH / 2.0f;
float lastY = SCR_HEIGHT / 2.0f;
bool firstMouse = true;// timing
float deltaTime = 0.0f;
float lastFrame = 0.0f;// lighting
glm::vec3 lightPos(1.2f, 1.0f, 2.0f);// process all input: query GLFW whether relevant keys are pressed/released this frame and react accordingly
void processInput(GLFWwindow *window)
{if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)glfwSetWindowShouldClose(window, true);if (glfwGetKey(window, GLFW_KEY_W) == GLFW_PRESS)camera.ProcessKeyboard(FORWARD, deltaTime);if (glfwGetKey(window, GLFW_KEY_S) == GLFW_PRESS)camera.ProcessKeyboard(BACKWARD, deltaTime);if (glfwGetKey(window, GLFW_KEY_A) == GLFW_PRESS)camera.ProcessKeyboard(LEFT, deltaTime);if (glfwGetKey(window, GLFW_KEY_D) == GLFW_PRESS)camera.ProcessKeyboard(RIGHT, deltaTime);
}// glfw: whenever the window size changed (by OS or user resize) this callback function executes
void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{// make sure the viewport matches the new window dimensions; note that width and // height will be significantly larger than specified on retina displays.glViewport(0, 0, width, height);
}// glfw: whenever the mouse moves, this callback is called
void mouse_callback(GLFWwindow* window, double xpos, double ypos)
{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);
}// glfw: whenever the mouse scroll wheel scrolls, this callback is called
void scroll_callback(GLFWwindow* window, double xoffset, double yoffset)
{camera.ProcessMouseScroll(yoffset);
}int main()
{// glfw: initialize and configureglfwInit();glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);// glfw window creationGLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "LearnOpenGL", NULL, NULL);glfwMakeContextCurrent(window);glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);glfwSetCursorPosCallback(window, mouse_callback);glfwSetScrollCallback(window, scroll_callback);// tell GLFW to capture our mouseglfwSetInputMode(window, GLFW_CURSOR, GLFW_CURSOR_DISABLED);// glad: load all OpenGL function pointersif (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress)){std::cout << "Failed to initialize GLAD" << std::endl;return -1;}// configure global opengl stateglEnable(GL_DEPTH_TEST);// build and compile our shader zprogramShader lightingShader("1.colors.vs", "1.colors.fs");Shader lampShader("1.lamp.vs", "1.lamp.fs");// set up vertex data (and buffer(s)) and configure vertex attributesfloat 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, };// first, configure the cube's VAO (and VBO)unsigned int VBO, cubeVAO;glGenVertexArrays(1, &cubeVAO);glGenBuffers(1, &VBO);glBindBuffer(GL_ARRAY_BUFFER, VBO); glBindVertexArray(cubeVAO);glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);// position attributeglVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);glEnableVertexAttribArray(0);// second, configure the light's VAO (VBO stays the same; the vertices are the same for the light object which is also a 3D cube)unsigned int lightVAO;glGenVertexArrays(1, &lightVAO);glBindVertexArray(lightVAO);// we only need to bind to the VBO (to link it with glVertexAttribPointer), no need to fill it; the VBO's data already contains all we need (it's already bound, but we do it again for educational purposes)glBindBuffer(GL_ARRAY_BUFFER, VBO);glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);glEnableVertexAttribArray(0);// render loopwhile (!glfwWindowShouldClose(window)){// per-frame time logicfloat currentFrame = glfwGetTime();deltaTime = currentFrame - lastFrame;lastFrame = currentFrame;// inputprocessInput(window);// renderglClearColor(0.1f, 0.1f, 0.1f, 1.0f);glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);// be sure to activate shader when setting uniforms/drawing objectslightingShader.use();lightingShader.setVec3("objectColor", 1.0f, 0.5f, 0.31f);lightingShader.setVec3("lightColor", 1.0f, 1.0f, 1.0f);//setVec3其實在shader中/*void setVec3(const std::string &name, float x, float y, float z) const{glUniform3f(glGetUniformLocation(ID, name.c_str()), x, y, z);}*/// view/projection transformationsglm::mat4 projection = glm::perspective(glm::radians(camera.Zoom), (float)SCR_WIDTH / (float)SCR_HEIGHT, 0.1f, 100.0f);glm::mat4 view = camera.GetViewMatrix();lightingShader.setMat4("projection", projection);lightingShader.setMat4("view", view);// world transformationglm::mat4 model;lightingShader.setMat4("model", model);// render the cubeglBindVertexArray(cubeVAO);glDrawArrays(GL_TRIANGLES, 0, 36);// also draw the lamp objectlampShader.use();lampShader.setMat4("projection", projection);lampShader.setMat4("view", view);model = glm::mat4();model = glm::translate(model, lightPos);model = glm::scale(model, glm::vec3(0.2f)); // a smaller cubelampShader.setMat4("model", model);glBindVertexArray(lightVAO);glDrawArrays(GL_TRIANGLES, 0, 36);// glfw: swap buffers and poll IO events (keys pressed/released, mouse moved etc.)glfwSwapBuffers(window);glfwPollEvents();}// optional: de-allocate all resources once they've outlived their purpose:glDeleteVertexArrays(1, &cubeVAO);glDeleteVertexArrays(1, &lightVAO);glDeleteBuffers(1, &VBO);// glfw: terminate, clearing all previously allocated GLFW resources.glfwTerminate();return 0;
}
?
總結
以上是生活随笔為你收集整理的Learn OpenGL (八):颜色的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Learn OpenGL (七):摄像机
- 下一篇: Learn OpenGL (九):基础光