OpenGL学习笔记一
文章目录
- OpenGL学习笔记一
- 一、渲染管线
- 二、归一化设备坐标(Normalized Device Coordinate)
- 三、顶点着色器中的向量
- 四、绘制三角形
参考官方网站 Hello Triangle
本笔记旨在提炼关键内容,同时结合自己的理解和翻译更好地掌握opengl的内容
一、渲染管线
图形渲染管线
(Graphics Pipeline,大多译为管线,实际上指的是一堆原始图形数据途经一个输送管道,期间经过各种变化处理最终出现在屏幕的过程)的划分大致如下:
其中各个部分职能如下:
顶点着色器
(Vertex Shader) 主要作用是把3D坐标变换为另一种3D坐标
同时对坐标进行一定的变换。图元装配
(Primitive Assembly)以顶点着色器的输出作为输入,装配基本的图元(三角形等等)。几何着色器
(Geometry Shader)产生新的图元用来都在新的几何形状。光栅化
(Rasterization Stage)把图元映射为像素,生成供片段着色器着色的片段,片段着色器运行之前会裁掉(Cliapping)看不到的部分用来提高渲染效率。片段着色器
(Fragment Shader)计算像素的最终颜色,也是所有的OpenGL高级效果产生的地方,它会使用3D场景中的数据(光照,阴影,光的颜色啥的)计算最终的像素值。Alpha测试与混合
(Blending),Alpha为透明度,这个透明度用来做透视除法(Respective Division)。
一个渲染管线最小也要有两个部分:顶点着色器和片段着色器。顶点着色器用来构造最基本的点,片段着色器用来直接输出像素,中间的涉及到顶点变化的部分可以直接忽略,可以没有3D场景,光照等信息。
二、归一化设备坐标(Normalized Device Coordinate)
归一化设备坐标
(Normalized Device Coordinate) 这里官方的翻译我觉得不太行,Normalized翻译成归一化好理解的多,这个坐标指的是OpenGL的坐标输入必须在[-1.0f, +1.0f]
之间,例如以下三个点:
float vertices[] = {
-0.5f, -0.5f, 0.0f,
0.5f, -0.5f, 0.0f,
0.0f, 0.5f, 0.0f
};
三、顶点着色器中的向量
GLSL中的向量有四维rgbw,w用于透视除法;
rgbw都是float
类型的数据,一个float 4 字节,所以顶点着色器中一个顶点需要12个字节,顶点数据之间没有冗余,紧密排列(Tightly Packed),值与值之间没有空隙。这种排列方式如果你使用c语言多的话读到这里一定会会心一笑,这不就是c语言中常常使用的void*
还有buffer
惯用的套路嘛, 事实上也 确实如此,我阅读到后面opengl的语法中关于int *
的使用还有buffer
的处理的时候就发现其中c语言的内存处理思想在opengl数据处理这方面发挥了很大的作用。
四、绘制三角形
这部分的代码还有课后习题中的代码我一并放出来,注释详尽,具体请看注释:
核心函数main函数,其中提供了绘制三角形,绘制矩形(drawSquare()
),绘制两个独立的三角形(drawTwoTriangles()
),创建不同的shader程序来绘制两个不同颜色的三角形(drawTwoTrianglesWithDifferentColor()
)的函数。
#include <iostream>
#include <glad/glad.h>
#include <GLFW/glfw3.h>
#pragma comment(lib,"glfw3.lib")
using namespace std;
float vertices[];
void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow* window);
unsigned int creatShaderProc();
void drawTriangle(); //基本的三角形绘制
void drawSquare(); //绘制一个矩形
void drawTwoTriangles(); //绘制两个三角形
unsigned int creatShaderProcOrange(); //创建橘色的Shader程序
void drawTwoTrianglesWithDifferentColor(); //绘制两个不同颜色的三角形
int main()
{
glfwInit();
glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3); //设置glfw最高版本
glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);//设置glfw最低版本
glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE); //设置为核心模式
//glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE);
//创建窗口
GLFWwindow* window = glfwCreateWindow(600, 600, "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); //当前窗口的回调函数,用以变化窗口大小
//初始化glad,方便glfs函数调用
if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
{
std::cout << "Failed to initialize GLAD" << std::endl;
return -1;
}
glViewport(0, 0, 200, 300); //设置显示区位置大小
//渲染循环
while (!glfwWindowShouldClose(window))
{
processInput(window); //检测输入并做相应处理
//渲染指令
//清空屏幕
glClearColor(0.1f, 0.1f, 0.1f, 1.0f); //状态设置函数:设置清空后的屏幕颜色,此时为深蓝绿色
glClear(GL_COLOR_BUFFER_BIT); //状态使用函数:只清空颜色缓冲,其他缓冲位参数有GL_DEPTH_BUFFER_BIT和GL_STENCIL_BUFFER_BIT
//drawSquare(); //正常的两个三角形拼接
//drawTwoTriangles(); //两个单独的三角形
drawTwoTrianglesWithDifferentColor(); //两个颜色不同的三角形
glfwSwapBuffers(window); //交换颜色缓冲,并显示到窗口
glfwPollEvents(); //检查触发事件,更新窗口状态,并调用对应回调函数
}
glfwTerminate(); //释放/删除分配的资源
return 0;
}
//改变窗口大小时的回调函数
void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{
glViewport(0, 0, width, height);
}
//检测输入,是否有按键发生
void processInput(GLFWwindow* window)
{
if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS) //用户没有ESC按下,返回GLFW_RELEASE
glfwSetWindowShouldClose(window, true);
}
//创建着色器程序,创建多个着色器并链接他们
unsigned int creatShaderProc()
{
//创建顶点着色器,顶点着色器源码
//GLSL语言 GLSL330对应opengl3.3版本 核心模式
//多行字符串 R"(...)"中”和(不能有间隔
//layout位置 in :输入 vec3:三维向量 apos:变量名
const char ShaderSource[] = R"(
#version 330 core
layout(location = 0) in vec3 aPos;
void main()
{
gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);
}
)";
const GLchar* vertexShaderSource = (GLchar*)&ShaderSource; //glShaderSource函数指定着色器源码时要是用这个类型的数据
//编译顶点着色器
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\n" << infoLog << std::endl;
}
///
//创建片段着色器
const char fragSource[] = R"(
#version 330 core
out vec4 FragColor;
void main()
{
FragColor = vec4(1.0f, 0.2f, 0.2f, 1.0f);
}
)";
const GLchar* fragShaderSource = (GLchar*)fragSource;
unsigned int fragmentShader;
fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader, 1, &fragShaderSource, NULL);
glCompileShader(fragmentShader);
///
//链接着色器
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);
cout << "shader link to program failed!" << infoLog << endl;
}
return shaderProgram;
}
///渲染一个三角形,采用VAO顶点数组对象
void drawTriangle()
{
//顶点三维坐标
float vertices[] = {
-0.5f, -0.5f, 0.0f,
0.5f, -0.5f, 0.0f,
0.0f, 0.5f, 0.0f
};
unsigned int VBO;
glGenBuffers(1, &VBO); //1:要生成缓冲对象的数量,VBO:用来存储缓冲对象的数组
//1.复制顶点数组到缓冲区供opengl使用
// glBindBuffer(GL_ARRAY_BUFFER, VBO);
// 可同时绑定多个不同类型的缓冲
// 将数据复制到当前绑定缓冲的内存中,并指定显卡管理缓存的形式,STATIC,DYNAMIC,STREAM
// glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
/*2.设置顶点属性指针
对于glVertexAttribPointer函数,参数依次表示:location值,顶点属性大小(维度),
数据类型,是否标准化(映射到0或-1 到1 之间),步长(连续顶点属性组之间的间隔大小),
位置数据距缓冲开始位置的偏移量
*/
// 从当前绑定的GL_ARRAY_BUFFER中VBO中获取数据,顶点属性0现在会链接到他的顶点数据
// glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
// glEnableVertexAttribArray(0); //以顶点属性值为参数,启用顶点属性,顶点属性默认是禁用的
//3.使用着色器程序
// glUseProgram(shaderProgram); //激活程序对象
// glDeleteShader(vertexShader); //已经用不到着色器对象了,删除之
// glDeleteShader(fragmentShader);
// 3. 绘制物体
//someOpenGLFunctionThatDrawsOurTriangle();
/*用VAO顶点数组对象保存顶点属性指针配置
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);*/
unsigned int VAO;
glGenVertexArrays(1, &VAO);
//1.绑定VAO
glBindVertexArray(VAO);
//2.绑定VBO并读取到缓冲区,并指定显卡管理缓存的方式
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
//3.设置顶点属性指针
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);
//...
//4.绘制物体
unsigned int shaderProgram = creatShaderProc();
glUseProgram(shaderProgram);
glBindVertexArray(VAO);
glDrawArrays(GL_TRIANGLES, 0, 3); //GL_TRIANGLE:要绘制的图元类型 0:顶点数组的起始索引,3:要绘制的顶点个数
}
//渲染一个矩形,采用EBO索引缓冲
void drawSquare()
{
//引入索引缓冲
float vertices[] = { //顶点数据
0.5f, 0.5f, 0.0f, // 右上角
0.5f, -0.5f, 0.0f, // 右下角
-0.5f, -0.5f, 0.0f, // 左下角
-0.5f, 0.5f, 0.0f // 左上角
};
unsigned int indices[] = { //索引数据 注意索引从0开始!
0, 2, 3, // 第一个三角形
0, 1, 2 // 第二个三角形
};
unsigned int VAO, VBO, EBO;
//绑定VAO,VBO,EBO VAO会存储VBO的调用,在VAO解绑前解绑VBO,否则存储就没了
glGenVertexArrays(1, &VAO);
glBindVertexArray(VAO);
glGenBuffers(1, &VBO);
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
glGenBuffers(1, &EBO);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
//设置顶点属性指针
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);
unsigned int shaderProgram = creatShaderProc();
//渲染循环
glUseProgram(shaderProgram);
glBindVertexArray(VAO);
glPolygonMode(GL_FRONT_AND_BACK, GL_LINE); //线框模式 polygon:多边形 GL_FRONT_AND_BACK:应用到图形的正面和背面 GL_LINE:用线条绘制
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
//glDrawArrays(GL_TRIANGLES, 0, 6); // set the count to 6 since we're drawing 6 vertices now (2 triangles); not 3!
glBindVertexArray(0);
}
void drawTwoTriangles() { //画两个顶点挨着的三角形
//引入索引缓冲
float vertices[] = { //顶点数据
// first triangle
-0.9f, -0.5f, 0.0f, // left
-0.0f, -0.5f, 0.0f, // right
-0.45f, 0.5f, 0.0f, // top
// second triangle
0.0f, -0.5f, 0.0f, // left
0.9f, -0.5f, 0.0f, // right
0.45f, 0.2f, 0.0f // top
};
unsigned int VAO, VBO;
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);
unsigned int shaderProgram = creatShaderProc();
//渲染循环
glUseProgram(shaderProgram);
glBindVertexArray(VAO);
//glPolygonMode(GL_FRONT_AND_BACK, GL_LINE); //线框模式 polygon:多边形 GL_FRONT_AND_BACK:应用到图形的正面和背面 GL_LINE:用线条绘制
//使用buffer绘制而不是element
glDrawArrays(GL_TRIANGLES, 0, 6); // set the count to 6 since we're drawing 6 vertices now (2 triangles); not 3!
glBindVertexArray(0);
}
//绘制不同颜色
const char* vertexShaderSource = "#version 330 core\n"
"layout (location = 0) in vec3 aPos;\n"
"void main()\n"
"{\n"
" gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);\n"
"}\0";
const char* fragmentShader1Source = "#version 330 core\n"
"out vec4 FragColor;\n"
"void main()\n"
"{\n"
" FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);\n"
"}\n\0";
const char* fragmentShader2Source = "#version 330 core\n"
"out vec4 FragColor;\n"
"void main()\n"
"{\n"
" FragColor = vec4(1.0f, 1.0f, 0.0f, 1.0f);\n"
"}\n\0";
//创建着色器程序,创建多个着色器并链接他们
unsigned int creatShaderProcOrange()
{
//创建顶点着色器,顶点着色器源码
//GLSL语言 GLSL330对应opengl3.3版本 核心模式
//多行字符串 R"(...)"中”和(不能有间隔
//layout位置 in :输入 vec3:三维向量 apos:变量名
const char ShaderSource[] = R"(
#version 330 core
layout(location = 0) in vec3 aPos;
void main()
{
gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);
}
)";
const GLchar* vertexShaderSource = (GLchar*)&ShaderSource; //glShaderSource函数指定着色器源码时要是用这个类型的数据
//编译顶点着色器
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\n" << infoLog << std::endl;
}
///
//创建片段着色器
const char fragSource[] = R"(
#version 330 core
out vec4 FragColor;
void main()
{
FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);
}
)";
const GLchar* fragShaderSource = (GLchar*)fragSource;
unsigned int fragmentShader;
fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader, 1, &fragShaderSource, NULL);
glCompileShader(fragmentShader);
///
//链接着色器
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);
cout << "shader link to program failed!" << infoLog << endl;
}
return shaderProgram;
}
void drawTwoTrianglesWithDifferentColor() { //画两个顶点挨着的三角形
//引入索引缓冲
float vertices0[] = { //顶点数据
// first triangle
-0.9f, -0.5f, 0.0f, // left
-0.0f, -0.5f, 0.0f, // right
-0.45f, 0.5f, 0.0f, // top
};
float vertices1[] = { //顶点数据
// second triangle
0.0f, -0.5f, 0.0f, // left
0.9f, -0.5f, 0.0f, // right
0.45f, 0.2f, 0.0f // top
};
unsigned int VAOs[2], VBOs[2];
glGenVertexArrays(2, VAOs);
glGenBuffers(2, VBOs);
glBindVertexArray(VAOs[0]);
glBindBuffer(GL_ARRAY_BUFFER, VBOs[0]);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices0), vertices0, GL_STATIC_DRAW);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0); // Vertex attributes stay the same
glEnableVertexAttribArray(0);
glBindVertexArray(VAOs[1]);
glBindBuffer(GL_ARRAY_BUFFER, VBOs[1]);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices1), vertices1, GL_STATIC_DRAW);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, (void*)0); // Vertex attributes stay the same
glEnableVertexAttribArray(0);
unsigned int shaderProgram = creatShaderProc();
unsigned int shaderProgramOrange = creatShaderProcOrange();
glUseProgram(shaderProgram);
glBindVertexArray(VAOs[0]);
glDrawArrays(GL_TRIANGLES, 0, 3);
glUseProgram(shaderProgramOrange);
glBindVertexArray(VAOs[1]);
glDrawArrays(GL_TRIANGLES, 0, 3);
}