小白的OpenGL3.3自学之路(3)OpenGL3.3之如何绘制一个三角形

发布时间:2021-12-02 04:54:51

老规矩,先上代码

//顶点缓冲绘制三角形
#include
#include
#include

void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow* window);

const unsigned int SCR_WIDTH = 800;
const unsigned int SCR_HEIGHT = 600;

//顶点着色器
const char *vertexShaderSource = "#version 330 core
"
"layout (location = 0) in vec3 aPos;
"
"void main()
"
"{
"
" gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);
"
"}";
//const char *vertexShaderSource = "#version 330 core
"
//"layout (location = 0) in vec3 aPos;
"
//"out vec4 vertexColor;
"
//"void main()
"
//"{
"
//" gl_Position = vec4(aPos, 1.0);
"
//" vertexColor = vec4(0.5, 0.0, 0.0, 1.0);
"
//"}";
//片段着色器
const char *fragmentShaderSource = "#version 330 core
"
"out vec4 FragColor;
"
"void main()
"
"{
"
" FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);
"
"}
";
//const char *fragmentShaderSource = "#version 330 core
"
//"out vec4 FragColor;
"
//"in vec4 vertexColor;
"
//"void main()
"
//"{
"
//" FragColor = vertexColor;
"
//"}
";

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

GLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "LearnOpenGL", NULL, NULL);
if (window == NULL)
{
std::cout << "Failed to create GLFW window" << std::endl;
glfwTerminate();
return -1;
}
glfwMakeContextCurrent(window);
glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);

if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
{
std::cout << "Failed to initialize GLAD" << std::endl;
return -1;
}

//编译顶点着色器
unsigned int vertexShader;
vertexShader = glCreateShader(GL_VERTEX_SHADER);
glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
glCompileShader(vertexShader);
int success;
char infoLog[512];
glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &success);
if (!success)
{
glGetShaderInfoLog(vertexShader, 512, NULL, infoLog);
std::cout << "ERROR::SHADER::VERTEX::COMPILATION_FAILED
" << infoLog << std::endl;
}

//编译片段着色器
unsigned int fragmentShader;
fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
glCompileShader(fragmentShader);
glGetShaderiv(fragmentShader, GL_COMPILE_STATUS, &success);
if (!success)
{
glGetShaderInfoLog(fragmentShader, 512, NULL, infoLog);
std::cout << "ERROR::SHADER::VERTEX::COMPILATION_FAILED
" << infoLog << std::endl;
}

//着色器程序
unsigned int shaderProgram;
shaderProgram = glCreateProgram();
glAttachShader(shaderProgram, vertexShader);
glAttachShader(shaderProgram, fragmentShader);
glLinkProgram(shaderProgram);
glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success);
if (!success)
{
glGetProgramInfoLog(shaderProgram, 512, NULL, infoLog);
std::cout << "ERROR::SHADER::PROGRAM::LINKING_FAILED
" << infoLog << std::endl;
}
glDeleteShader(vertexShader);
glDeleteShader(fragmentShader);

//顶点输入
float vertices[] = {
-0.5f,-0.5f,0.0f,
0.5f,-0.5f,0.0f,
0.0f,0.5f,0.0f
};

//配置顶点属性
unsigned int VBO, VAO;
glGenVertexArrays(1, &VAO);
glBindVertexArray(VAO);
glGenBuffers(1, &VBO);
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);

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

while (!glfwWindowShouldClose(window))
{
processInput(window);

glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);

glUseProgram(shaderProgram);
glBindVertexArray(VAO);
glDrawArrays(GL_TRIANGLES, 0, 3);

glfwSwapBuffers(window);
glfwPollEvents();
}

glDeleteVertexArrays(1, &VAO);
glDeleteBuffers(1, &VBO);

glfwTerminate();
return 0;
}

void processInput(GLFWwindow* window)
{
if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
glfwSetWindowShouldClose(window, true);
}

void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{
glViewport(0, 0, width, height);
}

结果自然是可以出图的:


OpenGL之不得不谈的VAO,VBO

首先我们来谈一下VBO。什么是VBO呢?VBO全名Vertex Buffer Object。顶点缓冲对象。VBO是在显卡存储空间中开辟出的一块内存缓存区,用于存储顶点的各类属性信息,如顶点位置坐标,顶点法向量,顶点颜色数据,顶点纹理坐标等。在渲染时,可以直接从VBO中取出顶点的各类属性数据,由于VBO在显存而不是在内存中,不需要从CPU传输数据,处理效率更高。
所以可以认为VBO就是显存中的一个存储区域,可以保持大量的顶点属性信息,而且可以开辟很多个VBO,每个VBO在OpenGL中有它唯一标识ID。这个ID对应具体的VBO的显存地址,通过这个ID可以对特定的VBO内的数据进行存取操作。
比如说我们可以创建一个VBO来存储顶点数据(x,y,z),也可以用VBO存储顶点颜色,也可以用VBO存储纹理坐标值。说白了,VBO虽然叫顶点缓冲对象,但是它实际上干的是存储顶点数组数据的活,相反,VAO虽然全名叫顶点数组对象,但是它跟顶点数组半毛钱关系都没有。


那么这个VBO该怎么用呢?我们先来看一小段代码:


unsigned int VBO;
glGenBuffers(1,&VBO);
glBindBuffer(GL_ARRAY_BUFFER,VBO);
glBufferData(GL_ARRAY_BUFFER,sizeof(vertices),vertices,GL_STATIC_DRAW);

下面来解析这段代码。
unsigned int VBO 创建一个buffer
glGenBuffers(1,&VBO) 创建一个VBO缓冲对象的名字,相当于一个句柄(应用程序通过句柄访问相应对象的信息)
glBindBuffer(GL_ARRAY_BUFFER,VBO) 绑定缓冲对象,第一个参数决定了要绑定缓冲对象的 类型。顶点缓冲对象的缓冲类型是GL_ARRAY_BUFFER。索引缓冲对象的缓冲类型是GL_ELEMENT_ARRAY_BUFFER。
glBufferData(GL_ARRAY_BUFFER,sizeof(vertices),vertices,GL_STATIC_DRAW) 是为了把顶点数据传送到VBO。这个函数原型是void glBufferData(GLenum target, GLsizeiptr size, const GLvoid* data,GLenum usage)分配size个存储单位的OpenGL服务器内存,用于存储顶点数据或索引。第一个参数表示目标缓冲类型。这个参数与glBindBuffer中的第一个参数要保持一致。第二个参数表示需要分配的空间大小。第三个参数是我们希望发送的实际数据。第四个参数指定了数据使用模式。有三种模式可以选:GL_STATIC_DRAW,GL_DYNAMIC_DRAW,GL_STREAM_DRAW.
GL_STATIC_DRAW->数据只指定一次,但是可以多次作为绘图和图像指定函数的源数据
GL_DYNAMIC_DRAW->数据可以多次指定,并且可以多次作为绘图和图像指定函数的源数据
GL_STREAM_DRAW->数据只指定一次,并且最多只有几次作为绘图和图像指定函数的源数据


VBO之后就是VAO。那么什么是VAO呢?VAO全名Vertex Array Object,顶点数组对象。它跟顶点如何绘制息息相关,但是跟顶点数组半毛钱关系没有。那是VBO干的事。所以,它的定位应该是state_object(状态对象,记录存储状态信息),这里区别于VBO,VBO是buffer_object(缓冲对象)。VAO是一个保存了所有顶点数据属性的状态结合,它存储了顶点数据的格式以及顶点数据所需的VBO对象的引用。比如说数据在哪里->glBindBuffer函数这里。数据是以什么样的形式存储在GPU上面的->glVertexAttribPointer函数来告诉我们顶点位置在哪里,什么格式。顶点纹理坐标在哪里,什么格式等。是否启用顶点属性位置值,默认是关闭的。->glEnableVertexAttribArray(0);所以等要绘图时,要记得首先启用VAO。
那么VAO该怎么使用呢?我们来看这一段代码:


unsigned int VAO;
glGenVertexArrays(1,&VAO);
glBindVertexArray(VAO);
glVertexAttribPointer(0,3,GL_FLOAT,GL_FALSE,3*sizeof(float),(void*)0);
glEnableVertexAttribPointer(0);

下面来解析这一段代码。
unsigned int VBO 创建一个buffer
glGenVertexArrays(1,&VAO) 产生一个VAO对象的名字。
glBindVertexArray(VAO) 在一段代码中第一次使用时将VAO绑定到顶点数组对象,后续如果再用到这个函数,表示激活顶点数组对象。如果是glBindVertexArray(0)则是解除先前的绑定。
glVertexAttribPointer(0,3,GL_FLOAT,GL_FALSE,3*sizeof(float),(void*)0) 此函数第一个参数是指定我们要配置的顶点属性,后面我们会讲到,在顶点着色器里面有一句layout(location = 0),这句话定义了顶点属性的位置值(location)。把它的值设置为0,如果想把数据传到顶点位置属性中,那么我们把glVertexAttribPointer函数的第一个参数设置为0.同理,如果我们想把数据传到顶点颜色属性中,那么我们就把glVertexAttribPointer函数的第一个参数设置为1。再比如如果我们想把数据传到顶点纹理属性中,那么我们就把glVertexAttribPointer函数的第一个参数设置为2。如下面这些代码:


glBindBuffer(GL_ARRAY_BUFFER,vertexVBO);//绑定位置VBO
glVertexAttribPointer(0,3,GL_FLOAT,GL_FALSE,3*sizeof(float),(void*)0);//指定位置数据
glBindBuffer(GL_ARRAY_BUFFER,colorVBO);//绑定颜色VBO
glVertexAttribPointer(1,3,GL_FLOAT,GL_FALSE,3*sizeof(float),(void*)0);//指定颜色数据
glBindBuffer(GL_ARRAY_BUFFER,textureVBO);//绑定纹理VBO
glVertexAttribPointer(2,3,GL_FLOAT,GL_FALSE,3*sizeof(float),(void*)0);//指定纹理数据

第二个参数指定顶点属性的大小。顶点属性是一个vec3的向量,由三个float类型的值组成,所以大小是3。
第三个参数指定数据的类型,这里是GL_FLOAT(代表浮点型)。
第四个参数表示我们是否希望数据被标准化,如果设置为GL_TRUE,那么所有的数据都被映射到0到1之间。
第五个参数叫步长。如下图:

就是连续顶点属性组之间的间隔。就是从这个属性第二次出现的地方到整个数组0位置之间有多少字节。
最后一个参数的类型是void*,所以进行强制类型转换。这个参数表示位置数据在缓冲中起始位置的偏移量(offset)。


OpenGL之不得不谈的两个着色器
Vertex Shader 顶点着色器

顶点着色器把一个单独的顶点作为输入,顶点着色器的意义是把3D坐标转换为另一种3D坐标。并且允许我们对顶点属性进行一些基本处理。看了这些依旧云里雾里。那么直接上一段代码来解析一下:


#version 330 core
layout (location = 0) in vec3 aPos;

void main()
{
gl_Position = vec4(aPos.x,aPos.y,aPos.z,1.0);
}

首先要明确的是这段代码是用一种叫着色器语言GLSL写的。首先是确定opengl的版本。采用OpenGL3.3版本核心模式。使用in关键字,在顶点着色器中声明输入的顶点属性。要绘制一个三角形,现在我们只需要位置数据。所以1个顶点属性来描述位置就够了。因为要形容一个点的位置,x,y,z三个分量即可。所以创建一个vec3类型的输入变量aPos。至于前面的layout (location = 0)则设定了这个输入变量是关于顶点位置的。如果是location =1 则是关于顶点颜色的,如果是location =2则是关于顶点纹理坐标的。变量gl_Position是一个预定义的内建4分量向量,它包含顶点着色器要求的一个输出。
注意:以上只是用GLSL写的顶点着色器源码吧。写完之后我们还需要编译这个顶点着色器。代码如下:


unsigned int vertexShader;
vertexShader = glCreateShader(GL_VERSION_SHADER);
glShaderSource(vertexShader,1,&vertexShaderSource,NULL);
glCompileShader(vertexShader);
int success;
char infoLog[512];
glGetShaderiv(vertexShader,GL_COMPILE_STATUS,&success);
if(!success)
{
glGetShaderInfoLog(vertexShader,512,NULL,infoLog);
std::cout<<"ERROR::SHADER::VERTEX::COMPILATION_FAILED
"<}

glCreateShader函数用来创建一个着色器对象并声明着色器类型,是顶点着色器类型还是片段着色器类型。
glShaderSource函数是将字符数组(也就是着色器源码)绑定到对应的着色器对象上。
glCompileShader函数是编译对应的着色器对象。但是怎么判断编译成功了呢?就是定义一个整型变量success来表示是否成功编译,还定义了一个储存错误消息(如果有的话)的容器infoLog[512]。然后我们用glGetShaderiv检查是否编译成功。如果编译失败,我们会用glGetShaderInfoLog获取错误消息,然后打印它。


Fragment Shader 片段着色器

片段着色器通常做的是定义每个片段(像素)的颜色,但是在计算机图像学里面颜色通常被表示为有4个元素的数组:红色,绿色,蓝色和alpha(透明度)分量。这里颜色每个分量的强度都设置在0.0到1.0之间。那么这三种颜色分量的不同调配可以生成超过1600万种不同的颜色。也就是说想要形容一个颜色,我们需要一个vec4类型的向量。


#version 330 core
out vec4 FragColor;

void main()
{
FragColor=vec4(1.0f,0.5f,0.2f,1.0f);
}

代码就不详细说了,跟上面差不多,输出一个vec4类型的向量表示顶点颜色。out关键字声明输出变量。


编译片段着色器跟编译顶点着色器同理,只不过着色器类型从GL_VERTEX_SHADER改为GL_FRAGMENT_SHADER。代码如下:


unsigned int fragmentShader;
fragmentShader=glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader,1,&fragmentShaderSource,NULL);
glCompileShader(fragmentShader);
int success;
char infoLog[512];
glGetShaderiv(fragmentShader,GL_COMPILE_STATUS,&success);
if(!success)
{
glGetShaderInfoLog(fragmentShader,512,NULL,infoLog);
std::cout<<"ERROR::SHADER::VERTEX::COMPILATION_FAILED
"<}

就不过多的讲了。有函数不懂的可以看上面。都有。


剩下的就是把两个编译后的着色器合并并链接完成。最后生成一个着色器程序对象(Shader Profram Object)。


unsigned int shaderProgram;
shaderProgram=glCreateProgram();
glAttachShader(shaderProgram,vertexShader);
glAttachShader(shaderProgram,fragmentShader);
glLinkProgram(shaderProgram);
glGetProgramiv(shaderProgram,GL_LINK_STATUS,&success);
if(!success)
{
glGetProgramInfoLog(shaderProgram,512,NULL,infoLog);
std::cout<<"ERROR::SHADER::PROGRAM::LINKING_FAILED
"<}
glDeleteShader(vertexShader);
glDeleteShader(fragmentShader);

首先使用glCreateProgram函数创建一个着色器程序。然后用glAttachShader函数把之前编译的着色器附加到着色器程序。再用glLinkProgram函数来把顶点着色器,片段着色器跟程序对象链接为一个可执行程序。最后就是测试是否链接成功。成功以后就直接用glUseProgram函数来激活这个程序对象。另外,在把着色器对象链接到程序对象以后,记得删除着色器对象,我们不再需要它们了。使用glDeleteShader函数来删除。


数据的输入

想渲染一个三角形,就需要指定三个顶点,每个顶点都有一个3D位置x,y,z。我们会将它们以标准化设备坐标的形式(OpenGL的可见区域)定义为一个float数组。至于标准化设备坐标就是把x,y,z都限定在(-1,1)的范围内。


float vertices[] = {
-0.5f,-0.5f,0.0f,
0.5f,-0.5f,0.0f,
0.0f,0.5f,0.0f
};

绘图

绘图就是一个函数,glDrawArrays(enum mode,int first,size count)。这个函数第一个参数是表示绘制的类型,有三种取值:
1.GL_TRIANGLES:每三个顶点之间绘制三角形,之间不连接。
2.GL_TRIANGLE_FAN:以V0V1V2,V0V2V3,V0V3V4…的形式绘制三角形。
3.GL_TRIANGLE_STRIP:顺序在每三个顶点之间均绘制三角形。这个方法可以保证从相同的方向上所有三角形均被绘制。以V0V1V2,V1V2V3,V2V3V4,V3V4V5…的形式绘制三角形。
第二个参数定义从缓存中的哪一位开始绘制,一般定义为0。
第三个参数定义绘制的顶点数量。


最后就是结果了:


关于索引缓冲对象IBO下次再讲。推荐一波学*计算机视觉的群,群主是百度大牛,群内气氛活跃。高手辈出。群号是736854977。

相关文档

  • iphonex的屏幕长宽
  • 拼多多扫码功能在哪
  • 有关朋友心情唯美语录
  • 陈氏太极拳养生功的练功要素
  • 游星期九乐园
  • 关于聘用合同模板合集五篇
  • Win10系统预览版有什么新特性2017
  • 具有哪项特点反渗透膜是最好的
  • 高一读道德经读后感
  • 你对当前对华反倾销的认识
  • 2016年设备监理工程师《质量控制》冲刺试题及答案
  • 大长今主题曲 大长今主题曲是什么
  • wow霸气公会名字
  • 胃不舒服可以吃什么菜
  • 模型融合?? stacking详细讲解
  • 关于go并发的实例及理解
  • 情侣专用的情侣个性签名
  • java网络流操作
  • 做饭作文400字 炒土豆
  • 加州理工院长98任职演说
  • 新学期的计划500字_新学期新计划500字作文
  • 秀恩爱的说说 低调秀恩爱的文案
  • 宁夏大学共有多少个学院和专业
  • 2020年秋季病媒生物防制工作总结
  • 小学五年级学生数学的学法指导
  • 2014年高考英语书面表达必背词组500条(13)
  • 三国演义300字读后感10篇
  • android 主题 设置统一背景_Android Studio设置图片背景及主题设置
  • 任务调度??java.util.Timer
  • OracleOCP认证考试题库
  • 猜你喜欢

  • Qorvo 将成为射频解决方案领域的全新领导者
  • 高考复*文言文翻译PPT课件(精美版)15
  • 文华盛典(北京)投资有限公司(企业信用报告)- 天眼查
  • 随手借可以提前还款吗 随手借怎么还款
  • 有关桂花树的作文
  • 七年级英语下口头表达专练Unit7It’s rainingSectionA课件新版人教新目标版完美版
  • 2019最新部编版三年级语文上册 11 一块奶酪创新教案-精品
  • 给闺蜜的毕业赠言之初中篇
  • 20XX年法院办公室年终工作总结范文
  • 第6章 输入输出系统-选择题
  • 【优质课件】道德与教师职业道德培训课件(PPT 75页)
  • 人教版一年级语文下册生字表一二注音练*
  • 苏州萌豆信息科技有限公司(企业信用报告)- 天眼查
  • 凤毛麟角如何造句
  • 神经源性肺水肿ppt课件
  • 幻想的未来_初二作文
  • 兰州鸿达造纸有限责任公司企业信用报告-天眼查
  • 我是小馋猫
  • 延伸向大洋彼岸的情谊_高中作文
  • 高一班长竞选稿
  • 有关当前商业银行改革的战略探索
  • [小初高学*]重庆市大学城第一中学校高中数学培优补差练*4 理(无答案)
  • 【英语】河南省郑州市2018届高三第二次质量预测英语试卷
  • 职场口才:求职面试的5条口才秘笈.doc
  • 杭州电子科技大学数学分析2011--2015年考研真题/研究生入学考试试题
  • 比赛跑步的作文
  • 学校托幼机构传染病防治知识PPT课件
  • 2019清华大学药学院暑期夏令营申请表
  • 水果-蔬菜招标合同书
  • 洛谷OJ P1036 选数(深搜DFS)
  • 学校学生外出活动安全预案
  • 学生会宣传部工作个人总结
  • 质量检验员工作计划书(一)word版
  • Unit2 The Olympic Games-一轮复*基础考点课件(人教版必修2)
  • 浅谈高校青年教师教学能力的培训与提升
  • 我生日的那一天作文850字.docx
  • 小学六年级自传作文3篇
  • 奔跑吧企业年会晚会活动策划经典创意高端大气PPT模板
  • 2015年度商丘市银河纺织有限公司销售收入与资产数据报告
  • 雁荡山旅游可以看那些的景点?那个季节去好?
  • 关于学*的作文1000字:活到老,学到老
  • 高考数学一轮复* 第10章 概率 第1节 随机事件的概率课时分层训练 文 北师大版
  • 电脑版