OpenGL 自学总结

前言:

        本人是工作后才接触到的OpenGL,大学找工作的时候其实比较着急,就想着尽快有个着落。工作后才发现自己的兴趣点。同时也能感觉到自己当前的工作有一点温水煮青蛙的意思,很担心自己往后能力跟不上年龄的增长。因此想在工作之余多学学自己感兴趣的东西,并记录下来。

        本文计划按照模型数据,渲染流水线,顶点着色器,光栅化,片元着色器,其他具体知识点的顺序来梳理自己这段时间自学的内容。

正文:

1、模型数据

        什么是模型数据,从本人目前学习的情况来理解,模型就是一组顶点数据的集合,注意,这里的顶点的数据不仅仅是顶点坐标,还包括纹理坐标,法线向量等等。其实每一项顶点数据都可以看作是广义的纹理,可能是二维的(如纹理坐标),也可能是三维的(如RGB颜色)。

        代码实验使用的是obj格式的模型文件,其格式可以参考本章下文连接,还是比较好理解的。本人目前只解析了obj文件中的“v”(模型顶点坐标)、“vt”(模型纹理坐标)、“vn”(模型顶点法线坐标)。输入是模型文件目录;输出按照OpenGL的格式,为一段float类型的数据流,逻辑上按行划分,每行为一组顶点数据(顶点坐标,法线数据,纹理坐标)。代码如code 1-1、code 1-2所示:

// objloader.h
#ifndef OBJLOADER_H
#define OBJLOADER_H
#include <QString>
#include "qdebug.h"
#include <iostream>
#include <fstream>
#include <QFile>

struct Vnode {
    float x, y, z;
};
struct Vnormal {
    float x, y, z;
};
struct Vtexture {
    float x, y;
};
struct gldata {
    float vx, vy, vz;
    float vnx, vny, vnz;
    float vtx, vty;
};

class objloader
{
public:
    bool ReadOBJFile(QString &fileName);
    bool GetOBJData(float** data, int* dataLen, int** iddata, int* idlen);
    QList<Vnode> Vlist;
    QList<Vnormal> Vnlist;
    QList<Vtexture> Vtlist;
    QList<gldata> glist;
    QList<int> idlist;
};

code 1-1

// objloader.cpp
#include "objloader.h"
#include "qdebug.h"
#include <iostream>
#include <fstream>
#include <QFile>

bool objloader::ReadOBJFile(QString &fileName)
{
    QFile file(fileName);
    if(!file.open(QIODevice::ReadOnly|QIODevice::Text)){
        qDebug()<<"文件打开失败";
    }
    Vlist.clear();
    Vnlist.clear();
    Vtlist.clear();
    glist.clear();
    idlist.clear();
    int id = 0;
    while(!file.atEnd()) {
        QByteArray line = file.readLine();
        QString str(line);
        str = str.trimmed();
        if (str.length() < 2) {
            continue;
        }
        if (str[0] == 'v'){
            if (str[1] == 't'){ //纹理
                QStringList strlist = str.split(" ");
                Vtexture tmp;
                tmp.x = strlist[1].toFloat();
                tmp.y = strlist[2].toFloat();
                Vtlist.append(tmp);
            } else if (str[1] == 'n') { //法线
                QStringList strlist = str.split(" ");
                Vnormal tmp;
                tmp.x = strlist[1].toFloat();
                tmp.y = strlist[2].toFloat();
                tmp.z = strlist[3].toFloat();
                Vnlist.append(tmp);
            } else {
                QStringList strlist = str.split(" ");
                Vnode tmp;
                tmp.x = strlist[2].toFloat();
                tmp.y = strlist[3].toFloat();
                tmp.z = strlist[4].toFloat();
                Vlist.append(tmp);
            }
        } else if (str[0] == 'f') {
            QStringList strlist = str.split(" ");
            for (int i=1;i<strlist.size();i++) {
                QStringList info = strlist[i].split("/");
                if (info.size() < 3) {
                    qDebug()<<"f decode fail";
                    return false;
                }
                gldata node;
                if (info[0].toInt()-1 >= Vlist.size() ||
                    info[2].toInt()-1 >= Vnlist.size() ||
                    info[1].toInt()-1 >= Vtlist.size()) {
                    qDebug()<<"f overflow";
                    return false;
                }
                node.vx = Vlist.at(info[0].toInt()-1).x;
                node.vy = Vlist.at(info[0].toInt()-1).y;
                node.vz = Vlist.at(info[0].toInt()-1).z;
                node.vnx = Vnlist.at(info[2].toInt()-1).x;
                node.vny = Vnlist.at(info[2].toInt()-1).y;
                node.vnz = Vnlist.at(info[2].toInt()-1).z;
                node.vtx = Vtlist.at(info[1].toInt()-1).x;
                node.vty = Vtlist.at(info[1].toInt()-1).y;
                glist.append(node);
            }
            // push绘制点的下标 123和134,目的是确保绘制方向一致(顺时针)
            idlist.append(id);
            idlist.append(id+1);
            idlist.append(id+2);
            idlist.append(id);
            idlist.append(id+2);
            idlist.append(id+3);
            id = id + 4;
        } else if (str[0] == 'o') {
            qDebug()<<"o 解析失败";
        }
    }
    return true;
}
bool objloader::GetOBJData(float** data, int* dataLen, int** iddata, int* idlen)
{
    *dataLen = (sizeof(gldata)*(glist.size()));
    *data = (float*)malloc(*dataLen);
    *idlen = (sizeof(int)*(idlist.size()));
    *iddata = (int*)malloc(*idlen);
    for (int i=0;i<glist.size();i++) {
        if ((int)(i*sizeof(gldata)) >= *dataLen) {
            qDebug() << "GetOBJData out of mem";
        }
        memcpy((*data) + (i*(sizeof(gldata)/sizeof(float))), &glist.at(i), sizeof(gldata));
    }
    for (int i=0;i<idlist.size();i++) {
        memcpy((*iddata)+i, &idlist.at(i), sizeof(int));
    }
    return true;
}

code 1-2

        相关学习:

        3D文件格式之OBJ文件格式

2、渲染流水线

        模型数据加载进内存中后,计算机只有一堆点的数据,如何绘制出模型的“形”呢?这就需要利用OpenGL的渲染流水线了。一般来说,一个渲染流程会分为三个阶段:应用阶段、几何阶段、光栅化阶段。图2-1是这三个阶段的联系。应用阶段是开发者工作的阶段,开发者需准备好要渲染的各种几何信息(包括模型数据、渲染状态、着色器等),即渲染图元;几何阶段通常在GPU上进行,负责处理应用阶段输入的渲染图元,一般是逐点或者逐多边形地操作(例如对每个顶点做光照处理)。最终几何阶段会将模型的顶点数据变换到屏幕空间中,并交给光栅器处理;光栅化阶段会将几何阶段传递下来的数据进行采样,产生屏幕上的像素,渲染出最终的图像。这一阶段也是在GPU进行的。

图2-1

        整个渲染过程中,先是由CPU将数据加载进显存中,并设置渲染状态(例如使用哪些着色器),最后调用渲染命令。之后的工作都在GPU里进行。GPU内部的工作流程如图2-2所示,其中绿色表示该阶段可编程,黄色表示该阶段可配置不可编程,蓝色表示该节点开发者无法控制。实线表示该着色器必须由开发者编程实现,虚线表示该着色器是可选的。本文目前只涉及顶点着色器以及片元着色器。

图2-2

3、顶点着色器

        顶点着色器对输入的每一个模型顶点做同样的处理流程,具体处理流程将由开发者编程实现现,一般为一个用GLSL(OpenGL Shading Language)语言编写的txt文件。code 3-1是一段顶点着色器的代码,作用是将传入的模型坐标变换到摄像机的裁剪空间,并设置模型的颜色和纹理并输出给片元着色器。语法和c语言类似,下面介绍代码中的几个关键字:

        #version 330 core,指定GLSL的版本和配置。在这个例子中,表示使用OpenGL 3.3版本的核心配置。

        layout (location = i) ,这是GLSL接收外部变量的方式之一,其中vec3表示该变量的类型,即3维向量(x,y,z)。后面的aPos则是变量名。外部代码通过code 3-2的方式传入变量,本文用于加载章节1输出的模型数据(顶点坐标、法线坐标、纹理坐标的大数据流)。

        out,指定顶点着色器的输出变量,后面跟着变量类型、变量名。顶点着色器的输出将成为片元着色器的输入。

        uniform,这是GLSL接受外部变量的另一种方式。mat4表示变量类型,是一个4*4的矩阵,model为变量名。本例子用于传入3个变换矩阵(MVP矩阵),外部代码通过code 3-3的方式传入变量。

#version 330 core
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec3 rPos;
layout (location = 2) in vec2 texCoord;
out vec3 normal;
out vec2 TexCoord;
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;
void main()
{
   gl_Position = projection*view*model*vec4(aPos.x, aPos.y, aPos.z, 1.0f);
   normal= rPos;
   TexCoord = texCoord;
}

code 3-1

// 加载VAO
glGenVertexArrays(1, &VAO);
glBindVertexArray(VAO);
// 加载VBO,data是模型数据(顶点坐标、法线坐标、纹理坐标的大数据流)
glGenBuffers(1, &VBO);
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, datalen, data, GL_STATIC_DRAW);
// 加载EBO,iddata表示绘制模型各个三角形面时,每个三角形顶点坐标的索引,顶点坐标来源与上面的data
glGenBuffers(1, &EBO);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, idlen, iddata, GL_STATIC_DRAW);

/* glVertexAttribPointer说明:
 * 每个顶点属性从一个VBO管理的内存中获得它的数据
 * 具体是从哪个VBO(程序中可以有多个VBO)获取则是通过在调用glVertexAttribPointer时绑定到GL_ARRAY_BUFFER的VBO决定的
 */
// 绑定顶点
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(GLfloat), (GLvoid*)0);
glEnableVertexAttribArray(0);

// 绑定法线
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(GLfloat), (GLvoid*)(3 * sizeof(GLfloat)));
glEnableVertexAttribArray(1);

// 绑定纹理坐标
glVertexAttribPointer(2, 2, GL_FLOAT,GL_FALSE, 8 * sizeof(GLfloat), (GLvoid*)(6 * sizeof(GLfloat)));
glEnableVertexAttribArray(2);

/*
void glVertexAttribPointer(GLuint index, GLint size, GLenum type, GLboolean normalized, GLsizei stride, const GLvoid *pointer)
其中:
index:指定要修改的顶点属性的索引,与顶点着色器中的location对应。
size:指定数据的大小,例如顶点坐标是3维(3个数据),纹理是2维(2个数据)
type:指定每个组件的数据类型,可以是GL_BYTE、GL_UNSIGNED_BYTE、GL_SHORT、GL_UNSIGNED_SHORT、GL_INT、GL_UNSIGNED_INT、GL_FLOAT或GL_DOUBLE。
normalized:指定是否应该将非浮点值映射到范围[0,1](如果为GL_TRUE)或[-1,1](如果为GL_FALSE)。
stride:在模型数据流中,两个指定数据之间的步长,本文中每个模型顶点数据由(顶点坐标,法线坐标,纹理坐标)构成,所以每个子数据之间的步长为8个float。
pointer:指定指向第一个顶点属性的指针。如果缓冲区对象绑定到GL_ARRAY_BUFFER,则pointer被解释为首份数据的偏移量;否则,它被解释为指针。
*/
/*
glEnableVertexAttribArray用于激活指定索引的顶点属性数组,使其可以被顶点着色器使用。可以理解为指定一块内存存放中间数据。一般情况下,OpenGL确保至少有16个包含4分量的顶点属性可用。
*/

 code 3-2

/*
*void glUniformMatrix4fv (GLint location, GLsizei count, GLboolean transpose, const GLfloat * value)
*location : uniform的位置
*count : 矩阵个数,一般为1
*transpose : 矩阵是列优先矩阵(GL_FALSE)还是行优先矩阵(GL_TRUE)
*value : 指向由count个元素的数组的指针,一般为矩阵的首地址指针
*/
GLint modelLoc = glGetUniformLocation(shaderProgram, "model");
glUniformMatrix4fv(modelLoc, 1, GL_FALSE, model.constData());
modelLoc = glGetUniformLocation(shaderProgram, "view");
glUniformMatrix4fv(modelLoc, 1, GL_FALSE, view.constData());
modelLoc = glGetUniformLocation(shaderProgram, "projection");
glUniformMatrix4fv(modelLoc, 1, GL_FALSE, projection.constData());

 code 3-3

        相关学习:

        顶点着色器与片元着色器 内置变量

4、光栅化

        这部分由OpenGL自身实现,开发者无法控制,但我认为也需要了解其中的过程。光栅化是将内存中的模型(由若干个顶点组成)投影到屏幕空间,并采样到一个一个像素上的过程。之前说过一个模型在内存中表示为若干个顶点,每三个顶点能够组成一个三角形面,称作一个“图元”。光栅化的操作目标就是模型面上的各个图元。每个图元有哪三个顶点组成是之前加载EBO时确定好的。

        为什么一个图元是三角形呢?原因有:1、三角形是最基础的多边形,所有的多边形都可以打碎成多个三角形的组合;2、光栅化还有一个很重要的一步——插值,即把顶点的一些属性(坐标、颜色、法线等)通过一定的策略附加到三角形内部的“像素”上,这个过程是线性。因此,只有三角形能够完成插值(4个点不一定在同一个平面,像法线、坐标这样的属性无法通过线性插值给到内部“像素”)。

5、片元着色器

        经过光栅化后,一个图元内部就有了若干“像素”(也可以叫片元),而片元着色器就是遍历这些“像素”做统一的处理。一般也是一个用GLSL语言编写的txt文件。code 5-1是一段片元着色器的代码,作用是输出当前片元的纹理值,法线暂时没用到(法线一般用于计算光照)。下面介绍下几个关键字:

        in,接收顶点着色器的输出,后面跟着分别是数据类型和数据名。

        out,片元着色器的输出,一般是颜色数据(RGBA)。

        uniform sampler2D ourTexture,这是GLSL供纹理对象使用的内建数据类型,叫做采样器(Sampler),它以纹理类型作为后缀,比如sampler2D、sampler3D。该变量能够获取到之前加载的的纹理数据,和输入的纹理坐标TexCoord结合使用就能够得出纹理值(颜色)。纹理的加载方式如code 5-2所示。

#version 330 core
in vec3 normal;
in vec2 TexCoord;
out vec4 Fcolor;

uniform sampler2D ourTexture;

void main()
{
    Fcolor = texture(ourTexture, TexCoord);
}

code 5-1

// 加载纹理
QImage img;
img.load("D:\IDE\QTProject\opgl\a.png");
// 改变编码格式,不然颜色对不上
img = img.convertToFormat(QImage::Format_RGB888);
int width = img.width();
int height = img.height();
glGenTextures(1, &texture);
glBindTexture(GL_TEXTURE_2D, texture);
// 为当前绑定的纹理对象设置环绕、过滤方式
// 加载并生成纹理
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, img.bits());
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glGenerateMipmap(GL_TEXTURE_2D);


// 绘制时需要加上
glBindTexture(GL_TEXTURE_2D, texture);

code 5-2

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>