图形学笔记（二）画一个三角形
创建完窗口，就可以开始画图形了，先画一个三角形练练手。
一、惯例，先上代码
#include <iostream>
//GLEW
#define GLEW_STATIC
#include <GL/glew.h>
//GLFW
#include <GLFW/glfw3.h>
//
#include "Shader.h"
const GLint WIDTH = 800, HEIGHT = 600; //新建窗口
/* //顶点调色器，所有顶点都是逆时针画的 const GLchar *vertexShaderSource = "#version 330 core\n" //版本型号 "layout(location = 0) in vec3 position;\n" //调色器位置参数信息，vector 向量，3 个信息，location = 0 表示进 1 个参数，= 1 表示进 2 个参数 "void main()\n" "{\n" "gl_Position = vec4(position.x, position.y, position.z, 1.0f);\n" //四位，齐次坐标器（增加一维，达到矩阵移动目的） "}"; //边缘调色器 const GLchar *fragmentShaderSource = "#version 330 core\n" "out vec4 color;\n" //四个参数 "void main()\n" "{\n" "color = vec4(1.0f, 0.5f, 0.2f, 0.7f);\n" //用 = 进行赋值 "}"; */
int main()
{
glfwInit();
glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE); //用的是新版的 OpenGL 3.3
glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE); // must for Mac
glfwWindowHint(GLFW_RESIZABLE, GL_FALSE); //改为 GL_TRUE，改变窗口，纵横比会变
GLFWwindow *window = glfwCreateWindow(WIDTH, HEIGHT, "Learn OpenGL B16xxxxxx", nullptr,
nullptr); //窗口名字改成自己的学号
if (nullptr == window)
{
std::cout << "Failed to create GLFW window" << std::endl;
glfwTerminate();
return -1;
}
// next two lines are for mac retina display
int screenWidth, screenHeight;
glfwGetFramebufferSize(window, &screenWidth, &screenHeight); //获取窗口大小
glfwMakeContextCurrent(window); //可以新建很多 window
glewExperimental = GL_TRUE;
if (GLEW_OK != glewInit())
{
std::cout << "Failed to initialise GLEW" << std::endl;
return -1;
}
glViewport(0, 0, screenWidth, screenHeight); //从（0,0）开始画点，直到 WIDTH 和 HEIGHT
//vs 是顶点调色器，frag 是边缘调色器
Shader ourShader = Shader("core.vs", "core.frag"); //文件相对路径
//now the verte information comes below
GLfloat vertices[] = {
//position
-0.5f, -0.5f, 0.0f,
0.5f, -0.5f, 0.0f,
0.0f, 0.5f, 0.0f,
};
//the date should be transfered to the memory on the Graphics Card,传到显存
GLuint VAO, VBO; //VAO:Vertex Array Object VBO:Vertex Buffer Object传数据
glGenVertexArrays(1, &VAO); //创建 VAO
glGenBuffers(1, &VBO);
glBindVertexArray(VAO); //设当前直线
glBindBuffer(GL_ARRAY_BUFFER, VBO); //VAO 和 VBO 成对出现
// transfer the data：传数据
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW); //静态访问，几乎不修改
//set the attribute
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE,
3 * sizeof(GLfloat), (GLvoid *)0); //0:对应调色器里 location 的值；3:对应 vec3 三个量；GL_FLOAT:浮点型；GL_FALSE:；3*sizeof(GLfloat):对应 Buffer 里传的数据；(GLvoid*)0:从第 0 个位置开始
glEnableVertexAttribArray(0);
//glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE,
//6 * sizeof(GLfloat), (GLvoid *)(3 * sizeof(GLfloat))); //1:对应调色器里 color 的值；3:对应 vec3 三个量；GL_FLOAT:浮点型；GL_FALSE:；6*sizeof(GLfloat):每次跨越 6 个；(GLvoid*) (3 * sizeof(GLfloat)):从第 0 个位置开始
//glEnableVertexAttribArray(1);
glBindBuffer(GL_ARRAY_BUFFER, 0);
glBindVertexArray(0);
//画图
while (!glfwWindowShouldClose(window))
{
glfwPollEvents(); //把所有事件系统都取过来：键盘/鼠标等操作
glClearColor(0.2f, 0.3f, 0.3f, 1.0f); //窗口背景颜色，RGB，最后一个是透明度
glClear(GL_COLOR_BUFFER_BIT);
//Bind the shader
//glUseProgram(shaderProgram); //使用调色器,不注释
ourShader.Use();
//Draw the triangle
glBindVertexArray(VAO); //使用 VAO，直接绑定
glDrawArrays(GL_TRIANGLES, 0, 3); //画三角形，从第 0 个数据开始画，到最后一个数据（第 3 个）结束
glBindVertexArray(0);
glfwSwapBuffers(window); //调用双面进行画，显示一个，另一个在画，画面更流畅
}
glDeleteVertexArrays(1, &VAO);
glDeleteBuffers(1, &VBO);
glfwTerminate();
return 0;
}
不出意外，会出现下面这个图形。
如果没出现，不要着急。你少了几个文件。
在 main.cpp 文件所在的地方，新建下面几个文件。
- Shader.h
#pragma once
//#ifndef shader_hpp
//#define shader_hpp
//#endif /* shader_hpp */
#include<string>
#include<fstream> //可以打开文件
#include<sstream>
#include<iostream>
#include<GL/glew.h>
class Shader {
GLuint vertex, fragment;
public:
GLuint Program;
Shader(const GLchar * vertexPath, const GLchar * fragmentPath)
{
std::string vertexCode;
std::string fragmentCode;
std::ifstream vShaderFile;
std::ifstream fShaderFile;
vShaderFile.exceptions(std::ifstream::badbit);
fShaderFile.exceptions(std::ifstream::badbit);
try {
vShaderFile.open(vertexPath);
fShaderFile.open(fragmentPath);
std::stringstream vShaderStream, fShaderStream;
vShaderStream << vShaderFile.rdbuf();
fShaderStream << fShaderFile.rdbuf();
//文件关闭顺序，先 v 再 f
vShaderFile.close();
fShaderFile.close();
vertexCode = vShaderStream.str();
fragmentCode = fShaderStream.str();
}
catch (std::ifstream::failure a) {
std::cout <<
"ERROR::SHADER::FILE_NOT_SUCCESSFULLY_READ"
<< std::endl;
}
//类型转换
const GLchar *vShaderCode = vertexCode.c_str();
const GLchar *fShaderCode = fragmentCode.c_str();
//import and compile the shader
vertex = glCreateShader(GL_VERTEX_SHADER); //不用重新定义
glShaderSource(vertex, 1, &vShaderCode, NULL);
glCompileShader(vertex); //编译
GLint success;
GLchar infoLog[512];
glGetShaderiv(vertex, GL_COMPILE_STATUS, &success); //编译是否完成的位置
if (!success) {
glGetShaderInfoLog(vertex, 512, NULL, infoLog);
std::cout <<
"ERROR::SHADER::VERTEX::COMPILATION_FAILED\n"
<< infoLog << std::endl;
}
//边缘调色器
fragment = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragment, 1, &fShaderCode, NULL);
glCompileShader(fragment); //编译
glGetShaderiv(fragment, GL_COMPILE_STATUS, &success); //编译是否完成的位置
if (!success) {
glGetShaderInfoLog(fragment, 512, NULL, infoLog);
std::cout <<
"ERROR::SHADER::FRAGMENT::COMPILATION_FAILED\n"
<< infoLog << std::endl;
}
//create the program and link the program
this->Program = glCreateProgram(); //创建着色器程序
glAttachShader(this->Program, vertex);
glAttachShader(this->Program, fragment);
glLinkProgram(this->Program); //链接
glValidateProgram(this->Program); //可省略
glGetProgramiv(this->Program, GL_LINK_STATUS, &success);
if (!success) {
glGetProgramInfoLog(this->Program, 512, NULL, infoLog); //获取链接情况
std::cout <<
"ERROR::SHADER::PROGRAM::LINKING_FAILED\n" <<
infoLog << std::endl;
}
}
~Shader() {
glDetachShader(this->Program, vertex);
glDetachShader(this->Program, fragment);
glDeleteShader(vertex);
glDeleteShader(fragment);
glDeleteProgram(this->Program);
}
void Use() {
glUseProgram(this->Program);
}
};
- core1.vs
#version 330 core
layout(location = 0) in vec3 position;
layout(location = 1) in vec3 color;
out vec3 ourColor;
void main(){
gl_Position = vec4(position.x, position.y, position.z, 1.0f);
ourColor = color;
};
- core1.frag
#version 330 core
in vec3 ourColor;
out vec4 color;
void main(){
color = vec4(ourColor, 0.7f);
};
有了这三个文件，应该就可以成功运行了。
二、讲解
引入 Shader.h 头文件。
#include "Shader.h"
初始化 GLEW。
glewExperimental = GL_TRUE;
if (GLEW_OK != glewInit())
{
std::cout << "Failed to initialise GLEW" << std::endl;
return -1;
}
调用 glViewport 函数。
//调用 glViewport 函数来设置窗口维度
glViewport(0, 0, screenWidth, screenHeight); //从（0,0）开始画点，直到 WIDTH 和 HEIGHT
传入顶点着色器和片段着色器。
//vs 是顶点调色器，frag 是边缘调色器
Shader ourShader = Shader("core.vs", "core.frag"); //文件相对路径
顶点坐标。
GLfloat vertices[] = {
//position
-0.5f, -0.5f, 0.0f,
0.5f, -0.5f, 0.0f,
0.0f, 0.5f, 0.0f,
};
创建 VAO 、 VBO，并进行绑定。
//the date should be transfered to the memory on the Graphics Card,传到显存
GLuint VAO, VBO; //VAO:Vertex Array Object VBO:Vertex Buffer Object传数据
glGenVertexArrays(1, &VAO); //创建 VAO, 顶点数组对象
glGenBuffers(1, &VBO); //创建 VBO, 顶点缓冲对象
glBindVertexArray(VAO); //绑定VAO
glBindBuffer(GL_ARRAY_BUFFER, VBO); //把新创建的缓冲绑定到 GL_ARRAY_BUFFER 目标上
// transfer the data：传数据
//第一个参数是目标缓冲的类型：顶点缓冲对象当前绑定到 GL_ARRAY_BUFFER 目标上。
//第二个参数指定传输数据的大小 (以字节为单位)；用一个简单的sizeof计算出顶点数据大小就行。
//第三个参数是我们希望发送的实际数据。
//第四个参数指定了我们希望显卡如何管理给定的数据。
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW); //静态访问，几乎不修改
//set the attribute
//设置顶点属性指针,设置顶点属性指针
//第一个参数指定我们要配置的顶点属性。location 的值。
//第二个参数指定顶点属性的大小。
//第三个参数指定数据的类型，这里是 GL_FLOAT。
//第四个参数：是否希望数据被标准化，即所有数据都会被映射到 0 到 1 之间。
//第五个参数叫做步长，即连续的顶点属性组之间的间隔。
//最后一个参数：位置数据在缓冲中起始位置的偏移量。
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE,
3 * sizeof(GLfloat), (GLvoid *)0); //0:对应调色器里 location 的值；3:对应 vec3 三个量；GL_FLOAT:浮点型；GL_FALSE:；3*sizeof(GLfloat):对应 Buffer 里传的数据；(GLvoid*)0:从第 0 个位置开始
glEnableVertexAttribArray(0);
//glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE,
//6 * sizeof(GLfloat), (GLvoid *)(3 * sizeof(GLfloat))); //1:对应调色器里 color 的值；3:对应 vec3 三个量；GL_FLOAT:浮点型；GL_FALSE:；6*sizeof(GLfloat):每次跨越 6 个；(GLvoid*) (3 * sizeof(GLfloat)):从第 0 个位置开始
//glEnableVertexAttribArray(1);
解绑。
glBindBuffer(GL_ARRAY_BUFFER, 0); //解绑 VBO
glBindVertexArray(0); //解绑 VAO
画图。
//画图
while (!glfwWindowShouldClose(window))
{
glfwPollEvents(); //把所有事件系统都取过来：键盘/鼠标等操作
glClearColor(0.2f, 0.3f, 0.3f, 1.0f); //设置清空屏幕所用的颜色：RGB，最后一个是透明度
glClear(GL_COLOR_BUFFER_BIT); //使用清空屏幕所用的颜色
//Bind the shader，激活着色器
//glUseProgram(shaderProgram); //使用调色器,不注释
ourShader.Use();
//Draw the triangle
glBindVertexArray(VAO); //使用 VAO，直接绑定
glDrawArrays(GL_TRIANGLES, 0, 3); //画三角形，从第 0 个数据开始画，到最后一个数据（第 3 个）结束，一共画 3 个顶点
glBindVertexArray(0); //解绑 VAO
glfwSwapBuffers(window); //调用双面进行画，显示一个，另一个在画，画面更流畅
}
销毁。
glDeleteVertexArrays(1, &VAO); //销毁 VAO
glDeleteBuffers(1, &VBO); //销毁 VBO
三、致谢
版权声明：本文为博主原创文章，如有错误，恳请大家在评论区指出，在下不胜感激～如要转载注明出处即可～
腾讯公司福利 465人发布
