OpenGL基礎19：法向量與漫反射

一、法向量

法向量：垂直於當前點所在面的向量

無論是漫反射光照還是鏡面光照，我們都需要知道當前反射點的法向量

單純的對於一個頂點來講，它肯定是沒有法向量的，所以我們需要考慮這個頂點與其周圍的頂點（他們可以構成唯一的一個面，即頂點所在的面），並可以通過叉乘來獲取法向量，當然對於一個不能再簡單的正方體，我們也可以直接將每個頂點的法向量數據加入頂點數據中，也就是類似於離線+存儲方法：

GLfloat vertices[] = 
{
    -0.5f, -0.5f, -0.5f,  0.0f,  0.0f, -1.0f,
     0.5f, -0.5f, -0.5f,  0.0f,  0.0f, -1.0f,
     0.5f,  0.5f, -0.5f,  0.0f,  0.0f, -1.0f,
     0.5f,  0.5f, -0.5f,  0.0f,  0.0f, -1.0f,
    -0.5f,  0.5f, -0.5f,  0.0f,  0.0f, -1.0f,
    -0.5f, -0.5f, -0.5f,  0.0f,  0.0f, -1.0f,

    -0.5f, -0.5f,  0.5f,  0.0f,  0.0f,  1.0f,
     0.5f, -0.5f,  0.5f,  0.0f,  0.0f,  1.0f,
     0.5f,  0.5f,  0.5f,  0.0f,  0.0f,  1.0f,
     0.5f,  0.5f,  0.5f,  0.0f,  0.0f,  1.0f,
    -0.5f,  0.5f,  0.5f,  0.0f,  0.0f,  1.0f,
    -0.5f, -0.5f,  0.5f,  0.0f,  0.0f,  1.0f,

    -0.5f,  0.5f,  0.5f, -1.0f,  0.0f,  0.0f,
    -0.5f,  0.5f, -0.5f, -1.0f,  0.0f,  0.0f,
    -0.5f, -0.5f, -0.5f, -1.0f,  0.0f,  0.0f,
    -0.5f, -0.5f, -0.5f, -1.0f,  0.0f,  0.0f,
    -0.5f, -0.5f,  0.5f, -1.0f,  0.0f,  0.0f,
    -0.5f,  0.5f,  0.5f, -1.0f,  0.0f,  0.0f,

     0.5f,  0.5f,  0.5f,  1.0f,  0.0f,  0.0f,
     0.5f,  0.5f, -0.5f,  1.0f,  0.0f,  0.0f,
     0.5f, -0.5f, -0.5f,  1.0f,  0.0f,  0.0f,
     0.5f, -0.5f, -0.5f,  1.0f,  0.0f,  0.0f,
     0.5f, -0.5f,  0.5f,  1.0f,  0.0f,  0.0f,
     0.5f,  0.5f,  0.5f,  1.0f,  0.0f,  0.0f,

    -0.5f, -0.5f, -0.5f,  0.0f, -1.0f,  0.0f,
     0.5f, -0.5f, -0.5f,  0.0f, -1.0f,  0.0f,
     0.5f, -0.5f,  0.5f,  0.0f, -1.0f,  0.0f,
     0.5f, -0.5f,  0.5f,  0.0f, -1.0f,  0.0f,
    -0.5f, -0.5f,  0.5f,  0.0f, -1.0f,  0.0f,
    -0.5f, -0.5f, -0.5f,  0.0f, -1.0f,  0.0f,

    -0.5f,  0.5f, -0.5f,  0.0f,  1.0f,  0.0f,
     0.5f,  0.5f, -0.5f,  0.0f,  1.0f,  0.0f,
     0.5f,  0.5f,  0.5f,  0.0f,  1.0f,  0.0f,
     0.5f,  0.5f,  0.5f,  0.0f,  1.0f,  0.0f,
    -0.5f,  0.5f,  0.5f,  0.0f,  1.0f,  0.0f,
    -0.5f,  0.5f, -0.5f,  0.0f,  1.0f,  0.0f
};
//……
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (GLvoid*)0);
glEnableVertexAttribArray(0);
glVertexAttribPointer(2, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (GLvoid*)(3 * sizeof(GLfloat)));
glEnableVertexAttribArray(2);
//……

之後將其傳入頂點着色器中，頂點着色器當然要修改

不過。。物體的頂點我們進行了模型變換、視角變換和投影變換，那麼對應的法向量需要進行這些變換嘛？

視角變換和投影變換肯定不用，我們唯一需要的就是模型變換，而對於模型變換，又有縮放、位移和旋轉

要知道，法向量只表示方向，這樣的話位移矩陣對於法向量就沒有意義，其次法向量只有3維，而上面的變換矩陣都是齊次矩陣，因此，我們需要給法向量加一維w，並將其設置爲0，此時位移轉換矩陣對於這個法向量正好也是無效的，並且完全不影響縮放和旋轉的計算

我看了很多博客說把模型矩陣左上角的3×3矩陣從模型矩陣中移除也可以，這很明顯是不對的！~~但就是不知道怎麼那麼巧要錯一起錯還錯的完全一樣~~，這不重要，我好奇去查了下對應的英文原文，確定是移除第4行第4列的位移部分以只選取左上角的3x3，而並非移除左上角3x3，這顯然是兩個完全不同的意思

除此之外，如果模型矩陣進行了不等比縮放，那麼最後得到的法向量就可能不再垂直於物體表面了，如下：

因此，我們還需要找到另一個矩陣，滿足法向量與其相乘後與模型變換後的物體表面仍垂直，其中顯然可以由模型矩陣轉換而成

對應上圖，設爲法向量，爲物體表面向量，它們在對應轉換後爲 $N^{\prime}$ 和 $T^{\prime}$

我們目的就是找到一個滿足 $(G N) \cdot(M T) = N^{\prime} \cdot T^{\prime}=0$

因爲①點積可以轉換爲向量積；②矩陣轉置的性質，可以得出： $(G N) \cdot(M T)=(G N)^{T}(M T) =N^{T} G^{T} M T$

又由於 $N^{T} T = 0$ 且 $N^{T} G^{T} M T = 0$ ，那麼我們就可以推測出： $G^{T} M = E$

完美：得到 $G=\left(M^{-1}\right)^{T}$

這也是爲什麼如果模型沒有進行不等比縮放，只進行了旋轉和等比縮放，那麼法向量與矩陣相乘也是OK的，因爲此時的必然是正交矩陣，即滿足 $M^{-1} = M$

問題都解決了，頂點着色器修改如下：

inverse(M)：求出對應的逆矩陣
transpose(M)：求出對應的轉置矩陣

#version 330 core
layout (location = 0) in vec3 position;
layout (location = 1) in vec2 texture;
layout (location = 2) in vec3 normal;
out vec2 texIn;
out vec3 normalIn;
uniform mat4 model;             //模型矩陣
uniform mat4 view;              //觀察矩陣
uniform mat4 projection;        //投影矩陣
void main()
{
    gl_Position = projection * view * model * vec4(position, 1.0);
    //texIn = vec2(texture.x, 1.0f - texture.y);
    normalIn = mat3(transpose(inverse(model))) * normal;
}

二、漫反射光照

瞭解了法向量後，實現漫反射光照就簡單了很多

目的也很簡單，求出下圖中的 $\Theta$ 角，這個角度越小則亮度越大

爲了算出光的方向，我們需要知道光源的位置，並將其傳入片段着色器：

GLint lightPosLoc = glGetUniformLocation(shaderObj.Program, "lightPos");
glUniform3f(lightPosLoc, lightPos.x, lightPos.y, lightPos.z);

然後把片段的位置也傳入片段着色器（從頂點着色器中傳入）：

//……
out vec3 normalIn;
out vec3 FragPosIn;
void main()
{
    gl_Position = projection * view * model * vec4(position, 1.0);
    FragPosIn = vec3(model * vec4(position, 1.0f));
    normalIn = mat3(transpose(inverse(model))) * normal;
}

這樣片段着色器中我們想要的變量就都有了，接下來通過光源位置和片段位置得到光照入射向量

注意到 $\mathbf{a} \bullet b=\|a\| b \| \cos \theta$ ，所以我們若要在後面得到 $cos \theta$ ，就必須確保和都是單位長度

vec3 norm = normalize(normalIn);
vec3 lightDir = normalize(lightPos - FragPosIn);

通過對 norm 和 lightDir 向量進行點乘，求出夾角 $cos \theta$ ，它就代表着當前片段的實際的散射影響，得到的結果值再乘以光的顏色，得到散射因子，兩個向量之間的角度越大，散射因子就會越小

float diff = max(dot(norm, lightDir), 0.0);
vec3 diffuse = diff * lightColor;

混合並輸出片段的顏色，搞定！

vec3 result = (ambient + diffuse) * objectColor;
color = vec4(result, 1.0f);

如果代碼完全正確的話，可以得到這樣的結果：

最終代碼如下：

光源的着色器、攝像機類和着色器類都在之前的文章中能找到

物體着色器部分：

#version 330 core
layout (location = 0) in vec3 position;
layout (location = 1) in vec2 texture;
layout (location = 2) in vec3 normal;
out vec2 texIn;
out vec3 normalIn;
out vec3 FragPosIn;
uniform mat4 model;             //模型矩陣
uniform mat4 view;              //觀察矩陣
uniform mat4 projection;        //投影矩陣
void main()
{
    gl_Position = projection * view * model * vec4(position, 1.0);
    //texIn = vec2(texture.x, 1.0f - texture.y);
    FragPosIn = vec3(model * vec4(position, 1.0f));
    normalIn = mat3(transpose(inverse(model))) * normal;
}

////////////////////////////////////////////////////////////////////////

#version 330 core
out vec4 color;
uniform vec3 lightPos;
uniform vec3 objectColor;
uniform vec3 lightColor;
in vec3 FragPosIn;
in vec2 texIn;
in vec3 normalIn;
uniform sampler2D texOutA;
void main()
{
    float ambientStrength = 0.1f;
    vec3 ambient = ambientStrength * lightColor;
    vec3 norm = normalize(normalIn);
    vec3 lightDir = normalize(lightPos - FragPosIn);
    float diff = max(dot(norm, lightDir), 0.0f);
    vec3 diffuse = diff * lightColor;
    vec3 result = (ambient + diffuse) * objectColor;
    color = vec4(result, 1.0f);
}

main.cpp：

#include<iostream>
#include<opengl/glew.h>
#define GLEW_STATIC
#include<GLFW/glfw3.h>
#include"Camera.h"
#include<glm/glm.hpp>
#include<glm/gtc/matrix_transform.hpp>
#include<glm/gtc/type_ptr.hpp>
#include"Shader.h"
#include<opengl/freeglut.h>
#include<SOIL.h>

bool keys[1024];
Camera camera;
GLfloat lastX, lastY;
bool firstMouse = true;
void key_callback(GLFWwindow* window, int key, int scancode, int action, int mode);
void scroll_callback(GLFWwindow* window, double xoffset, double yoffset);
void mouse_callback(GLFWwindow* window, double xpos, double ypos);
void cameraMove();
glm::vec3 lightPos(1.2f, 1.0f, 2.0f);
const GLuint WIDTH = 800, HEIGHT = 600;

int main()
{
    glfwInit();
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
    glfwWindowHint(GLFW_RESIZABLE, GL_FALSE);

    GLFWwindow* window = glfwCreateWindow(WIDTH, HEIGHT, "LearnOpenGL", nullptr, nullptr);
    glfwMakeContextCurrent(window);
    glfwSetKeyCallback(window, key_callback);
    glfwSetCursorPosCallback(window, mouse_callback);
    glfwSetScrollCallback(window, scroll_callback);

    glfwSetInputMode(window, GLFW_CURSOR, GLFW_CURSOR_DISABLED);
    glewExperimental = GL_TRUE;
    glewInit();

    int width, height;
    glfwGetFramebufferSize(window, &width, &height);
    glViewport(0, 0, width, height);

    Shader shaderObj("ObjVShader.txt", "ObjFShader.txt");
    Shader shaderLight("LightVShader.txt", "LightFShader.txt");

    GLfloat vertices[] = 
    {
        -0.5f, -0.5f, -0.5f,  0.0f,  0.0f, -1.0f,
         0.5f, -0.5f, -0.5f,  0.0f,  0.0f, -1.0f,
         0.5f,  0.5f, -0.5f,  0.0f,  0.0f, -1.0f,
         0.5f,  0.5f, -0.5f,  0.0f,  0.0f, -1.0f,
        -0.5f,  0.5f, -0.5f,  0.0f,  0.0f, -1.0f,
        -0.5f, -0.5f, -0.5f,  0.0f,  0.0f, -1.0f,

        -0.5f, -0.5f,  0.5f,  0.0f,  0.0f,  1.0f,
         0.5f, -0.5f,  0.5f,  0.0f,  0.0f,  1.0f,
         0.5f,  0.5f,  0.5f,  0.0f,  0.0f,  1.0f,
         0.5f,  0.5f,  0.5f,  0.0f,  0.0f,  1.0f,
        -0.5f,  0.5f,  0.5f,  0.0f,  0.0f,  1.0f,
        -0.5f, -0.5f,  0.5f,  0.0f,  0.0f,  1.0f,

        -0.5f,  0.5f,  0.5f, -1.0f,  0.0f,  0.0f,
        -0.5f,  0.5f, -0.5f, -1.0f,  0.0f,  0.0f,
        -0.5f, -0.5f, -0.5f, -1.0f,  0.0f,  0.0f,
        -0.5f, -0.5f, -0.5f, -1.0f,  0.0f,  0.0f,
        -0.5f, -0.5f,  0.5f, -1.0f,  0.0f,  0.0f,
        -0.5f,  0.5f,  0.5f, -1.0f,  0.0f,  0.0f,

         0.5f,  0.5f,  0.5f,  1.0f,  0.0f,  0.0f,
         0.5f,  0.5f, -0.5f,  1.0f,  0.0f,  0.0f,
         0.5f, -0.5f, -0.5f,  1.0f,  0.0f,  0.0f,
         0.5f, -0.5f, -0.5f,  1.0f,  0.0f,  0.0f,
         0.5f, -0.5f,  0.5f,  1.0f,  0.0f,  0.0f,
         0.5f,  0.5f,  0.5f,  1.0f,  0.0f,  0.0f,

        -0.5f, -0.5f, -0.5f,  0.0f, -1.0f,  0.0f,
         0.5f, -0.5f, -0.5f,  0.0f, -1.0f,  0.0f,
         0.5f, -0.5f,  0.5f,  0.0f, -1.0f,  0.0f,
         0.5f, -0.5f,  0.5f,  0.0f, -1.0f,  0.0f,
        -0.5f, -0.5f,  0.5f,  0.0f, -1.0f,  0.0f,
        -0.5f, -0.5f, -0.5f,  0.0f, -1.0f,  0.0f,

        -0.5f,  0.5f, -0.5f,  0.0f,  1.0f,  0.0f,
         0.5f,  0.5f, -0.5f,  0.0f,  1.0f,  0.0f,
         0.5f,  0.5f,  0.5f,  0.0f,  1.0f,  0.0f,
         0.5f,  0.5f,  0.5f,  0.0f,  1.0f,  0.0f,
        -0.5f,  0.5f,  0.5f,  0.0f,  1.0f,  0.0f,
        -0.5f,  0.5f, -0.5f,  0.0f,  1.0f,  0.0f
    };
    GLuint VBO, VAO, texture;
    glGenVertexArrays(1, &VAO);
    glGenBuffers(1, &VBO);
    glGenTextures(1, &texture);

    glBindVertexArray(VAO);
    glBindBuffer(GL_ARRAY_BUFFER, VBO);
    glBindTexture(GL_TEXTURE_2D, texture);

    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (GLvoid*)0);
    glEnableVertexAttribArray(0);
    glVertexAttribPointer(2, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (GLvoid*)(3 * sizeof(GLfloat)));
    glEnableVertexAttribArray(2);
    /*glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(GLfloat), (GLvoid*)(3 * sizeof(GLfloat)));
    glEnableVertexAttribArray(1);

    int picWidth, picHeight;
    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);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    unsigned char* image = SOIL_load_image("Texture/wood.jpg", &picWidth, &picHeight, 0, SOIL_LOAD_RGB);
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, picWidth, picHeight, 0, GL_RGB, GL_UNSIGNED_BYTE, image);
    glGenerateMipmap(GL_TEXTURE_2D);
    SOIL_free_image_data(image);
    glBindTexture(GL_TEXTURE_2D, 0);*/

    GLuint lightVAO;
    glGenVertexArrays(1, &lightVAO);
    glBindVertexArray(lightVAO);
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (GLvoid*)0);
    //VBO數據已經綁定且我們就用之前的頂點數據，所以無需再管理VBO
    glEnableVertexAttribArray(0);

    glBindBuffer(GL_ARRAY_BUFFER, 0);
    glBindVertexArray(0);

    glEnable(GL_DEPTH_TEST);
    while (!glfwWindowShouldClose(window))
    {
        glfwPollEvents();
        glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
        glClear(GL_COLOR_BUFFER_BIT);
        glClear(GL_DEPTH_BUFFER_BIT);
        cameraMove();

        //glBindTexture(GL_TEXTURE_2D, texture);
        shaderObj.Use();
        GLint objectColorLoc = glGetUniformLocation(shaderObj.Program, "objectColor");
        GLint lightColorLoc = glGetUniformLocation(shaderObj.Program, "lightColor");
        GLint lightPosLoc = glGetUniformLocation(shaderObj.Program, "lightPos");
        glUniform3f(lightPosLoc, lightPos.x, lightPos.y, lightPos.z);
        glUniform3f(objectColorLoc, 1.0f, 0.5f, 0.31f);     //物體反射顏色
        glUniform3f(lightColorLoc, 1.0f, 1.0f, 1.0f);       //光源：默認爲白色
        glm::mat4 model = glm::mat4(1.0f);
        glm::mat4 view = glm::mat4(1.0f);
        glm::mat4 projection = glm::mat4(1.0f);
        model = glm::rotate(model, glm::radians(57.0f), glm::vec3(-0.5f, 1.0f, 0.0f));
        view = camera.GetViewMatrix();
        projection = glm::perspective(glm::radians(camera.Zoom), (GLfloat)WIDTH / (GLfloat)HEIGHT, 0.1f, 100.0f);
        GLint modelLoc = glGetUniformLocation(shaderObj.Program, "model");
        GLint viewLoc = glGetUniformLocation(shaderObj.Program, "view");
        GLint projLoc = glGetUniformLocation(shaderObj.Program, "projection");
        glUniformMatrix4fv(modelLoc, 1, GL_FALSE, glm::value_ptr(model));
        glUniformMatrix4fv(viewLoc, 1, GL_FALSE, glm::value_ptr(view));
        glUniformMatrix4fv(projLoc, 1, GL_FALSE, glm::value_ptr(projection));

        glBindVertexArray(VAO);
        glDrawArrays(GL_TRIANGLES, 0, 36);

        //glBindTexture(GL_TEXTURE_2D, 0);
        shaderLight.Use();
        model = glm::translate(glm::mat4(1.0f), lightPos);
        model = glm::scale(model, glm::vec3(0.2f));
        modelLoc = glGetUniformLocation(shaderLight.Program, "model");
        viewLoc = glGetUniformLocation(shaderLight.Program, "view");
        projLoc = glGetUniformLocation(shaderLight.Program, "projection");
        glUniformMatrix4fv(modelLoc, 1, GL_FALSE, glm::value_ptr(model));
        glUniformMatrix4fv(viewLoc, 1, GL_FALSE, glm::value_ptr(view));
        glUniformMatrix4fv(projLoc, 1, GL_FALSE, glm::value_ptr(projection));

        glBindVertexArray(lightVAO);
        glDrawArrays(GL_TRIANGLES, 0, 36);

        glBindVertexArray(0);
        glfwSwapBuffers(window);
    }
    glDeleteVertexArrays(1, &VAO);
    glDeleteBuffers(1, &VBO);
    glfwTerminate();
    return 0;
}


GLfloat deltaTime = 0.0f;
GLfloat lastFrame = 0.0f;
void cameraMove()
{
    GLfloat currentFrame = glfwGetTime();
    deltaTime = currentFrame - lastFrame;
    lastFrame = currentFrame;

    GLfloat cameraSpeed = 1.0f * deltaTime;
    if (keys[GLFW_KEY_W])
        camera.ProcessKeyboard(Camera_Movement(FORWARD), deltaTime);
    if (keys[GLFW_KEY_S])
        camera.ProcessKeyboard(Camera_Movement(BACKWARD), deltaTime);
    if (keys[GLFW_KEY_A])
        camera.ProcessKeyboard(Camera_Movement(LEFT), deltaTime);
    if (keys[GLFW_KEY_D])
        camera.ProcessKeyboard(Camera_Movement(RIGHT), deltaTime);
}

void key_callback(GLFWwindow* window, int key, int scancode, int action, int mode)
{
    if (key == GLFW_KEY_ESCAPE && action == GLFW_PRESS)
        glfwSetWindowShouldClose(window, GL_TRUE);
    if (action == GLFW_PRESS)           //如果當前是按下操作
        keys[key] = true;
    else if (action == GLFW_RELEASE)            //鬆開鍵盤
        keys[key] = false;
}

void scroll_callback(GLFWwindow* window, double xoffset, double yoffset)
{
    camera.ProcessMouseScroll(yoffset);
}

void mouse_callback(GLFWwindow* window, double xpos, double ypos)
{
    if (firstMouse)
    {
        lastX = xpos;
        lastY = ypos;
        firstMouse = false;
    }
    GLfloat xoffset = xpos - lastX;
    GLfloat yoffset = lastY - ypos;
    lastX = xpos;
    lastY = ypos;
    
    GLfloat sensitivity = 0.05;
    xoffset *= sensitivity;
    yoffset *= sensitivity;
    
    camera.ProcessMouseMovement(xoffset, yoffset);
}

OpenGL基礎19：法向量與漫反射

一、法向量

二、漫反射光照

公司剛入職了一名 Java 中級開發，短短 4 行代碼居然湊齊了 3 個 bug！我哭了~~

公衆號5月C#/.NET熱文一覽

git 下載大陸鏡像地址

OpenGL基礎28：模型

LuaForUnity9：uLua的一個簡單實例

LuaForUnity7：Lua“類與對象”

C#基礎14：泛型

OpenGL基礎27：網格

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結