绵阳市网站建设公司,十堰网站建设weitian,东莞网络推广网站,龙岩上杭县前言#xff1a; 本人是工作后才接触到的OpenGL#xff0c;大学找工作的时候其实比较着急#xff0c;就想着尽快有个着落。工作后才发现自己的兴趣点。同时也能感觉到自己当前的工作有一点温水煮青蛙的意思#xff0c;很担心自己往后能力跟不上年龄的增长。因此想在工作之余…前言 本人是工作后才接触到的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 QFilestruct 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);QListVnode Vlist;QListVnormal Vnlist;QListVtexture Vtlist;QListgldata glist;QListint idlist;
};
code 1-1
// objloader.cpp
#include objloader.h
#include qdebug.h
#include iostream
#include fstream
#include QFilebool 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 i1;istrlist.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(id1);idlist.append(id2);idlist.append(id);idlist.append(id2);idlist.append(id3);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 i0;iglist.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 i0;iidlist.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、顶点着色器 顶点着色器对输入的每一个模型顶点做同样的处理流程具体处理流程将由开发者编程实现现一般为一个用GLSLOpenGL Shading Language语言编写的txt文件。code 3-1是一段顶点着色器的代码作用是将传入的模型坐标变换到摄像机的裁剪空间并设置模型的颜色和纹理并输出给片元着色器。语法和c语言类似下面介绍代码中的几个关键字 #version 330 core指定GLSL的版本和配置。在这个例子中表示使用OpenGL 3.3版本的核心配置。 layout (location i) 这是GLSL接收外部变量的方式之一其中vec3表示该变量的类型即3维向量xyz。后面的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);
// 加载VBOdata是模型数据顶点坐标、法线坐标、纹理坐标的大数据流
glGenBuffers(1, VBO);
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, datalen, data, GL_STATIC_DRAW);
// 加载EBOiddata表示绘制模型各个三角形面时每个三角形顶点坐标的索引顶点坐标来源与上面的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
