• 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

向 3D 世界迈出一小步

Linux 开心洋葱 2971次浏览 0个评论

前言

OpenGL 的学习资料很多,一个是比较著名的 OpenGL 红宝书《OpenGL 编程指南》,可以在这里 http://opengl-redbook.com/ 下载该书配套的源代码;另一个是网络上的在线教程LearnOpenGL。所以,我这里就不再啰啰嗦嗦地介绍 OpenGL 的基础知识和计算机图形学的基础知识了,主要是简单阐述一些我自己的理解,以及写一些能跑起来、能看到效果的体验性的小程序。

通过前一篇阐述,可以看到在 Linux 系统中学习 OpenGL 是多么的方便。使用 GLEW 和 GLFW 库,使用一行简单的 g++ 编译命令,第一个简单的 OpenGL 程序就跑起来了。而上面提到的参考资料,都有让初学者头痛的地方,比如红宝书,它用到了比较少见的 gl3w 库,还用到了 cmake 系统,即使下载了它的源代码,程序也跑不起来。网络教程LearnOpenGL使用的是 GLAD,反正我没有使用成功过。最终,还是 GLEW 和 GLFW 搭配是最顺手的。

前一篇的最后,我们跑起来了一个空的 OpenGL 程序,里面没有渲染任何内容。在这一篇中,我们将向 3D 世界迈出一小步,了解 OpenGL 渲染管线的基本知识,并绘制一些简单的 3D 内容。

我所理解的简单的 3D 图形学知识

要想描述一个 3D 世界,最简单的办法就是描述一些顶点的坐标,(当然还有其它的办法,比如通过数学公式描述的曲线曲面之类的,所以我说描述顶点坐标是最简单的办法。),然后由顶点连接成三角形,再由三角形连接成面,最后,计算机再把这些数据处理成屏幕上像素的颜色,显示成我们看到的图像。

而 OpenGL 通过渲染管线完成这个操作,渲染管线由许多个阶段组成,首先,OpenGL 把我们传递给它的顶点进行坐标变换,把 3D 的坐标对应成屏幕上的点,然后,把这些顶点组装成三角形,然后,对这些三角形内部的像素进行插值,生成片元,最后,对这些片元进行计算,以生成在屏幕上显示的图像。很显然,渲染管线需要使用 GPU 进行加速。

GPU 是典型的众人拾柴火焰高的并行计算架构,它可以同时对成千上万的顶点进行计算,也可以同时对成千上万的片元进行计算。我的这台 XPS 9570,使用的显卡是 GTX 1050Ti,它有 768 个 CUDA 核心,我准备等有钱了再上一个 RTX 3060 显卡的笔记本,据说有 3840 个 CUDA 核心,性能可以一下子提升 5 倍, _。让这些核心运行什么样的任务,是由我们指定的,也就是说,我们要写一些小程序,然后把这些小程序传递给 GPU 核心执行,这些小程序就叫做 Shader。在 OpenGL 的渲染管线中,每一个阶段都对应一个 Shader。

通过上面的描述,我们的工作流程呼之欲出。要想使用 OpenGL 渲染一点有用的东西,我们需要做下面这些工作:1.准备一些顶点数据;2.写一些 Shader 程序,并组装成渲染管线;3.把顶点数据传递给 Shader,让 Shader 处理。

特别需要注意的还有两点:1. 顶点数据可以不仅仅只是坐标,还可以包含法线呀、颜色值呀、纹理坐标呀等数据,还可以包含其它任何我们自定义的数据;2. Shader 是并行执行的,每个 Shader 处理一个顶点的数据,不同的顶点其传入的数据是不同的,可以认为这些数据是逐顶点变量,但是,也可以给所有的 Shader 传递一些统一的值,这些值在所有的 Shader 中是相同的,称之为 Uniform 变量。

这些数据,通过一系列不同的 OpenGL 函数传递给 Shader。

下面开始实战。

准备顶点数据

顶点数据怎么来,这是一个问题。我们可以直接手写三个顶点坐标,在屏幕上渲染一个三角形,同样的方法,也可以手写八个顶点坐标及其颜色值渲染一个颜色立方体。对于一些更复杂的几何图形,比如球体、甜甜圈这样的几何体,只要会一点简单的三角函数,我们自己也可以生成出来。另外,对于一些复杂的、经典的模型,也可以找到它们的出处。比如红宝书中就有一个 armadillo 神兽的 3D 模型,可以在红宝书源代码的github仓库中找到,只不过是作者自创的 vbm 格式,需要自己动手扒一下。再比如 freeglut 中经典的茶壶模型,也可以在freeglut的github仓库中找到,只不过它使用的是贝塞尔曲面的描述方式,这个技术含量就高了那么一点点了。

对于顶点数据的每一个分量(如坐标分量、法向量分量、纹理坐标分量、颜色分量等),我们都可以使用 GLM 库中的vec2、vec3、vec4格式表示,然后组织成 struct,再然后组织成 vector,这是很自然的事情。如果使用到顶点索引,则需要再准备一个索引数组的 vector。再然后,就是 OpenGL 的那一套 API 了,创建 VAO、VBO,如果有索引,再创建 EBO,然后绑定对象,创建 Buffer,绑定 Buffer,向 Buffer 中存入数据,最后使用 DrawArrays() 进行渲染,如果使用到了顶点索引,则使用 DrawElements() 进行渲染。

在这里,我先创建一个 Mesh 类用来对以上流程进行一个封装,并创建 Mesh 类的几个子类,分别生成平面、球体、甜甜圈这几种基本图形,每个顶点具有坐标、法向量、纹理坐标(只有1组纹理坐标)。我把这些结构和类都放到一个文件 mesh.hpp 中,内容如下:

#ifndef __MESH_H__
#define __MESH_H__

#include <glm/glm.hpp>
#include <glm/gtc/matrix_transform.hpp>
#include <vector>
#include <string>
#include <GL/glew.h>

struct Vertex{
    glm::vec4 position;
    glm::vec3 normal;
    glm::vec2 texCoord;
};

class Mesh{
    protected:
        std::vector<Vertex> vertices;
        std::vector<GLuint> indices;

        GLuint VAO, VBO, EBO;
               
    public:
        void generateMesh(int iSlices);

        void setup(){
            glCreateVertexArrays(1, &VAO);
            glBindVertexArray(VAO);
            glCreateBuffers(1, &VBO);
            glBindBuffer(GL_ARRAY_BUFFER, VBO);
            glNamedBufferStorage(VBO, sizeof(Vertex)*vertices.size(), &vertices[0], 0);
            glGenBuffers(1, &EBO);
            glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
            glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(float)*indices.size(), &indices[0], GL_STATIC_DRAW);
            glVertexAttribPointer(0, 4, GL_FLOAT, GL_FALSE, sizeof(Vertex), (void*)0);
            glEnableVertexAttribArray(0);
            glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), (void*)offsetof(Vertex, normal));
            glEnableVertexAttribArray(1);
            glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, sizeof(Vertex), (void*)offsetof(Vertex, texCoord));
            glEnableVertexAttribArray(2);
        }

        void render(){
            glBindVertexArray(VAO);
            glDrawElements(GL_TRIANGLES, indices.size(), GL_UNSIGNED_INT, 0);
        }

};

class Plane: public Mesh{
    public:
        void generateMesh(int iSlices){
            int n = iSlices + 1;
            float s = 2.0f/(float)iSlices;
            Vertex temp_vertex;
            for(int i=0; i<n; i++){
                for(int j=0; j<n; j++){
                    temp_vertex.position = glm::vec4(s*j - 1.0f, s*i - 1.0f, 0.0f, 1.0f);
                    temp_vertex.normal = glm::vec3(0.0f, 0.0f, 1.0f);
                    temp_vertex.texCoord = glm::vec2(1.0f/(float)iSlices * j, 1.0f/(float)iSlices * i);
                    vertices.push_back(temp_vertex);
                }
            }
            
            for(int i=0; i<iSlices; i++){
                for(int j=0; j<iSlices; j++){
                    indices.push_back(i*n + j);
                    indices.push_back((i+1)*n + j+1);
                    indices.push_back((i+1)*n + j);

                    indices.push_back(i*n + j);
                    indices.push_back(i*n + j + 1);
                    indices.push_back((i+1)*n + j+1);
                }
            }
        }
};

class Sphere: public Mesh{
    public:
        void generateMesh(int iSlices){
            int m = iSlices/2 + 1;
            int n = iSlices+1;
            float s = 360.0f/(float)iSlices;
            glm::vec4 up(0.0f, 1.0f, 0.0f, 1.0f);
            glm::mat4 I(1.0f);
            glm::vec3 X(1.0f, 0.0f, 0.0f);
            glm::vec3 Y(0.0f, 1.0f, 0.0f);
            glm::vec3 Z(0.0f, 0.0f, 1.0f);
            Vertex temp_vertex;
            for(int i=0; i<m; i++){
                for(int j=0; j<n; j++){
                    temp_vertex.position = glm::rotate(I, glm::radians(s*j), Y) * glm::rotate(I, glm::radians(s*i), Z) * up;
                    temp_vertex.normal = temp_vertex.position;
                    temp_vertex.texCoord = glm::vec2(1.0f/(float)(n-1) * j, 1.0f/(float)(m-1) * i);
                    vertices.push_back(temp_vertex);
                }
            }
            
            for(int i=0; i<m-1; i++){
                for(int j=0; j<n-1; j++){
                    indices.push_back(i*n + j);
                    indices.push_back((i+1)*n + j);
                    indices.push_back((i+1)*n + j+1);

                    indices.push_back(i*n + j);
                    indices.push_back((i+1)*n + j+1);
                    indices.push_back(i*n + j + 1);                   
                }
            }
        }
};

class Torus: public Mesh{
    public:
        void generateMesh(int iSlices){
            int n = iSlices + 1;
            float s = -360.0f/(float)iSlices;
            glm::vec4 top(0.0f, 0.2f, 0.0f, 1.0f);
            glm::vec4 normal_up(0.0f, 1.0f, 0.0f, 1.0f);
            glm::mat4 I(1.0f);
            glm::vec3 X(1.0f, 0.0f, 0.0f);
            glm::vec3 Y(0.0f, 1.0f, 0.0f);
            glm::vec3 Z(0.0f, 0.0f, 1.0f);
            Vertex temp_vertex;
            for(int i=0; i<n; i++){
                for(int j=0; j<n; j++){
                    temp_vertex.position = glm::rotate(I, glm::radians(s*j), Z) 
                                            * glm::translate(I, glm::vec3(0.0f, 0.8f, 0.0f))
                                            * glm::rotate(I, glm::radians(s*i), X) 
                                            * top;
                    temp_vertex.normal = glm::rotate(I, glm::radians(s*j), Z) 
                                            * glm::rotate(I, glm::radians(s*i), X) 
                                            * normal_up;
                    temp_vertex.texCoord = glm::vec2(1.0f/(float)iSlices * j * 4, 1.0f/(float)iSlices * i);
                    vertices.push_back(temp_vertex);
                }

            }
            for(int i=0; i<iSlices; i++){
                for(int j=0; j<iSlices; j++){
                    indices.push_back(i*n + j);
                    indices.push_back((i+1)*n + j+1);
                    indices.push_back((i+1)*n + j);

                    indices.push_back(i*n + j);
                    indices.push_back(i*n + j + 1);
                    indices.push_back((i+1)*n + j+1);
                }
            }
        }
};

#endif

编译和连接 Shader

在 OpenGL 中编译和连接 Shader 的流程是固定的,也就是那几个 API,详细的知识我就不赘述了,基本所有的教材都有,对于简单的程序来说,一个 Vertex Shader 和一个 Fragment Shader 就可以了,至于几何着色器、细分着色器这样的高级知识,等用到的时候再说。关于着色器的编译连接,我也写了一个 Shader 类对它进行了封装,放到了文件 shader.hpp 中,如下:

#ifndef __SHADER_HPP__
#define __SHADER_HPP__

#include <string>
#include <iostream>
#include <fstream>
#include <sstream>
#include <GL/glew.h>
#include <glm/glm.hpp>
#include <glm/gtc/type_ptr.hpp>

struct ShaderInfo{
        GLenum type;
        std::string filename;
        GLuint shader_id;
};

class Shader{
    private:
        GLuint program_id;
    public:
        Shader(){
            program_id = 0;
        }
        
        Shader(ShaderInfo* shaders){
            if(shaders == nullptr){
                program_id = 0;
                return;
            }

            program_id = glCreateProgram();

            ShaderInfo* entry = shaders;
            //加载并编译Shader
            while(entry->type != GL_NONE){
                GLuint shader_id = glCreateShader(entry->type);
                entry->shader_id = shader_id;

                std::ifstream fs(entry->filename);
                std::string content((std::istreambuf_iterator<char>(fs)), std::istreambuf_iterator<char>());
                               
                if(content.empty()){ //只要有一个Shader文件打不开,就删掉之前创建的所有Shader
                    std::cerr << "Unable to open file '" << entry->filename << "'" << std::endl;
                    for ( entry = shaders; entry->type != GL_NONE; ++entry ) {
                        glDeleteShader( entry->shader_id );
                        entry->shader_id = 0;
                    }
                    return;
                }
                const GLchar* source = content.c_str();
                glShaderSource( shader_id, 1, &source, NULL );

                glCompileShader( shader_id );

                GLint compiled;
                glGetShaderiv( shader_id, GL_COMPILE_STATUS, &compiled );
                if ( !compiled ) {//如果Shader编译失败,输出失败原因,便于调试
                    GLsizei len;
                    glGetShaderiv( shader_id, GL_INFO_LOG_LENGTH, &len );

                    GLchar* log = new GLchar[len+1];
                    glGetShaderInfoLog( shader_id, len, &len, log );
                    std::cerr << entry->filename << "," << "Shader compilation failed: " << log << std::endl;
                    delete [] log;

                    //编译失败,也要删除前面创建的所有Shader
                    for ( entry = shaders; entry->type != GL_NONE; ++entry ) {
                        glDeleteShader( entry->shader_id );
                        entry->shader_id = 0;
                    }

                    return ;
                }

                glAttachShader( program_id, shader_id );
        
                ++entry;
                
            }
            
            //进入连接阶段
            glLinkProgram( program_id );

            GLint linked;
            glGetProgramiv( program_id, GL_LINK_STATUS, &linked );
            if ( !linked ) {//如果连接失败,则输出调试信息,同样删除之前创建的所有Shader
                GLsizei len;
                glGetProgramiv( program_id, GL_INFO_LOG_LENGTH, &len );

                GLchar* log = new GLchar[len+1];
                glGetProgramInfoLog( program_id, len, &len, log );
                std::cerr << "Shader linking failed: " << log << std::endl;
                delete [] log;

                for ( entry = shaders; entry->type != GL_NONE; ++entry ) {
                    glDeleteShader( entry->shader_id );
                    entry->shader_id = 0;
                }
        
                return;
            }
            
        }

        GLuint getId(){
            return program_id;
        }
        
        void setCurrent(){
            glUseProgram(program_id);
        }

        void setModelMatrix(glm::mat4 model_matrix){
            glUniformMatrix4fv(glGetUniformLocation(program_id, "model_matrix"), 1, GL_FALSE, glm::value_ptr(model_matrix));
        }

        void setViewMatrix(glm::mat4 view_matrix){
            glUniformMatrix4fv(glGetUniformLocation(program_id, "view_matrix"), 1, GL_FALSE, glm::value_ptr(view_matrix));
        }

        void setProjectionMatrix(glm::mat4 projection_matrix){
            glUniformMatrix4fv(glGetUniformLocation(program_id, "projection_matrix"), 1, GL_FALSE, glm::value_ptr(projection_matrix));
        }
};

#endif

该 Shader 类还提供了一些向 Shader 中传递 Uniform 变量的方法,最常见的 Uniform 变量就是模型矩阵、视图矩阵和投影矩阵。

主程序

主程序文件为 SphereWorld.cpp,在该文件中,创建一个 App 类的字类,并在 init 方法中创建一个平面、一个球体、一个甜甜圈,并使用模型矩阵分别将它们进行平移、缩放和旋转,以放到场景中的适当位置,另外,使用视图矩阵将 Camera 放到适当的位置,最后,创建合适的透视投影矩阵,就可以看到非常逼真的三维图像了。在创建和使用这些矩阵的时候,GLM 为我们提供了非常大的方便。目前还没有涉及到光照和纹理,故将 OpenGL 设置为线框模式,这样看起来更加立体。程序代码如下:

#include "../include/app.hpp"
#include "../include/shader.hpp"
#include "../include/mesh.hpp"
#include <glm/glm.hpp>
#include <glm/gtc/matrix_transform.hpp>

class MyApp : public App {
    private:
        const GLfloat clearColor[4] = {0.2f, 0.3f, 0.3f, 1.0f};
        Plane plane;
        Sphere sphere;
        Torus torus;
        Shader* shaderSphereWorld;

    public:
        void init(){
            
            ShaderInfo shaders[] = {
                {GL_VERTEX_SHADER, "sphereworld.vert"},
                {GL_FRAGMENT_SHADER, "sphereworld.frag"},
                {GL_NONE, ""}
            };
            shaderSphereWorld = new Shader(shaders);
            plane.generateMesh(20);
            plane.setup();

            sphere.generateMesh(60);
            sphere.setup();

            torus.generateMesh(60);
            torus.setup();
            
            glEnable(GL_DEPTH_TEST);
            glDepthFunc(GL_LEQUAL);

            glPolygonMode( GL_FRONT_AND_BACK, GL_LINE );
        }

        void display(){
            glClearBufferfv(GL_COLOR, 0, clearColor);
            glClear(GL_DEPTH_BUFFER_BIT);

            glm::mat4 I(1.0f);
            glm::vec3 X(1.0f, 0.0f, 0.0f);
            glm::vec3 Y(0.0f, 1.0f, 0.0f);
            glm::vec3 Z(0.0f, 0.0f, 1.0f);
            float t = (float)glfwGetTime();

            glm::mat4 view_matrix = glm::translate(I, glm::vec3(0.0f, 0.0f, -5.0f))
                                        * glm::rotate(I, t, Y);

            glm::mat4 projection_matrix = glm::perspective(glm::radians(45.0f), aspect, 1.0f, 100.0f);

            glm::mat4 plane_model_matrix = glm::translate(I, glm::vec3(0.0f, -1.0f, 0.0f)) 
                                        * glm::rotate(I, glm::radians(-90.0f), X)
                                        * glm::scale(I, glm::vec3(50.0f, 50.0f, 50.0f));
            
            shaderSphereWorld->setModelMatrix(plane_model_matrix);
            shaderSphereWorld->setViewMatrix(view_matrix);
            shaderSphereWorld->setProjectionMatrix(projection_matrix);
            shaderSphereWorld->setCurrent();
            plane.render();

            glm::mat4 sphere_model_matrix = glm::translate(I, glm::vec3(1.0f, 0.3f, 0.0f))
                                                * glm::scale(I, glm::vec3(0.8f, 0.8f, 0.8f));
            shaderSphereWorld->setModelMatrix(sphere_model_matrix);
            sphere.render();

            glm::mat4 torus_model_matrix = glm::translate(I, glm::vec3(-1.0f, 0.3f, 0.0f))
                                                * glm::rotate(I, glm::radians(90.0f), Y)
                                                * glm::scale(I, glm::vec3(1.3f, 1.3f, 1.3f));
            shaderSphereWorld->setModelMatrix(torus_model_matrix);
            torus.render();
        }

        ~MyApp(){
            if(shaderSphereWorld != NULL){
                delete shaderSphereWorld;
            }
        }

};


DECLARE_MAIN(MyApp)

我们暂时还没有实现在场景中漫游的功能,所以只能让它自己旋转,以便于我们全方位地观察。在这里,是通过 glfwGetTime() 获取程序运行的时间,并根据时间值来生成视图矩阵来实现这个功能的。

编写 Shader 程序

这里的 Shader 程序是 sphereworld.vert 和 sphereworld.frag,前者是顶点着色器程序,后者是片元着色器程序。都很简单。

sphereworld.vert 文件的内容如下:

#version 460

uniform mat4 model_matrix;
uniform mat4 projection_matrix;
uniform mat4 view_matrix;

layout (location = 0) in vec4 vPosition;
layout (location = 1) in vec3 vNormal;
layout (location = 1) in vec2 vTexCoord;

out vec4 fColor;
out vec3 fNormal;
out vec2 fTexCoord;
out vec4 fPosition;

void main(void)
{
    mat4 MV_matrix = view_matrix * model_matrix;
    gl_Position = projection_matrix * view_matrix * model_matrix * vPosition;
    fPosition =  MV_matrix * vPosition;
    fNormal = normalize(transpose(inverse(mat3(MV_matrix))) * vNormal);
    fTexCoord = vTexCoord;
    fColor = vec4(1.0f, 1.0f, 1.0f, 1.0f);
}

sphereworld.frag 文件内容如下:

#version 460

layout (location = 0) out vec4 color;

in vec4 fColor;
in vec3 fNormal;
in vec2 fTexCoord;
in vec4 fPosition;

void main(void)
{
    color = fColor;
}

最终效果

编译,运行,就可以看到最终的效果了。如下图:
向 3D 世界迈出一小步

我使用的是 Visual Studio Code。从截图中可以看到我所有文件的组织情况。好了,今天就到这里。

版权申明

该随笔由京山游侠在2021年02月07日发布于博客园,引用请注明出处,转载或出版请联系博主。QQ邮箱:1841079@qq.com


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明向 3D 世界迈出一小步
喜欢 (0)

您必须 登录 才能发表评论!

加载中……