图形学笔记(二)画一个三角形

创建完窗口,就可以开始画图形了,先画一个三角形练练手。

一、惯例,先上代码

#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

三、致谢

你好,三角形

从 0 开始的 OpenGL 学习(二)- 渲染三角形

版权声明:本文为博主原创文章,如有错误,恳请大家在评论区指出,在下不胜感激~如要转载注明出处即可~

©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页