opengl-第二章：无shader的2D绘制

最新推荐文章于 2022-07-15 21:33:12 发布
最新推荐文章于 2022-07-15 21:33:12 发布
阅读量1.4k 收藏 6
点赞数
分类专栏： opengl 文章标签： opengl c++
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37080133/article/details/118584821
版权

opengl-第二章：无shader的2D绘制

绘制教程

1.opengl的绘制策略

推荐阅读：https://learnopengl.com/Getting-started/Hello-Triangle
也称：graphics pipeline
在这里插入图片描述
在opengl里面，将整个绘制流程当做是一个状态机，你可以理解为显卡本身是一个黑板，当我们向里面填顶点数据时，可以通过着色器控制顶点数据去显示。
而当我们填写顶点数据的方法则通常是

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

这个时候，数据其实已经写入到显卡里面。而渲染流水线，不过就是对缓存里面的数据进行操作，然后通过显卡提供的指令集最终让显示屏里面的液晶亮起来。

2.本教程基本思路

  1. 本教程不涉及顶点着色器和片元着色器，仅涉及绘制命令
  2. 本教程的基本思路
1. 在CPU里面创建数据(VBO和VAO)，并拷贝到GPU
2. 绘制窗口
3. 调用绘制命令绘制三角面

3.顶点数据VBO和VAO

1. 顶点数据包括位置，点的绘制索引

VertexBufferObject(VBO)

1.顶点最重要的属性就是位置属性(x,y,z).所以，这也是VBO最重要的属性。
我们可以定义一个最基本的VBO

		float vertices[] = {
		-0.5f, -0.5f, 0.0f, // left  
		 0.5f, -0.5f, 0.0f, // right 
		 0.0f,  0.5f, 0.0f  ,// top
		 0.5f,  0.5f, 0.0f
	};

在这里插入图片描述
注意，现在数据还是在cpu里面，接下来我们要拷贝到gpu的缓存里面

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

那么，仅通过VBO的数据，我们是否能够绘制三角面呢？答案是不能，这是因为opengl
的内核需要Vertex Array Object对象去进行绘制。
或者你可以理解为，Opengl的绘制指令是通过控制VAO来进行的。
那么，这个时候，你大致可以理解为VAO本身是对VBO的引用。

Vertex Array Object(VAO)

生成VAO可以直接通过以下代码

	unsigned int VAO;
	glGenVertexArrays(1, &VAO);
	glBindVertexArray(VAO);

这个时候是否可以直接使用triangle进行绘制了呢？答案是不行的，事实上，对于顶点
数据本身来说，它既可以包含位置信息，也可以包含颜色信息，甚至还能包含其他信
息，比如以下两个VBO

	float vertices[] = {
		-0.5f, -0.5f, 0.0f, // left  
		 0.5f, -0.5f, 0.0f, // right 
	};
		float vertices[] = {
		//pos              //color          //texccord
		-0.5f, -0.5f, 0.0f, 0.5,0.5,0.5,0.0,0.5,
		 0.5f, -0.5f, 0.0f, 0.3,0.2,0.6,0.1,0.3
	};

第一个VBO仅仅包括位置，但是第二个VBO包括了位置，颜色，和纹理分布，显然的我	
们需要通过命令将其进行分开,这个过程叫做“修饰顶点属性”
修饰(设定)顶点属性(状态)
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);

1. 这串代码其实很容易理解，就是对VBO的数据进行修饰。我们看到的任意一个VBO都是
一维的数组，那么问题来了，我们从哪个地方进行绘制呢？那么第一个参数就是绘制的
起始位置，定义为0.
2. 新的问题，我们的顶点属性数据量不一样，我们人是知道的，但是机器却不知道，所
以，我们需要让机器知道，所以我们定义了3用于表示顶点属性的数据量
3. 另外一个问题，我们希望一个顶点的数据的大小，因为除了浮点数，我们还可以选择
整形数据，短整型数据，所以我们可以定义GL_Float
4. 第四个参数略微有些复杂，现在只需要理解对浮点数类型，将它指派为FL_FALSE就可以了
5. 另外一个重要的问题，我们输入的数据终究是一个一维的，那么怎么切成一个一个的
vertex则需要在这里定义一个gap了，如果我们定义一个vertex数据包括位置，颜色，纹	
理一共七个浮点数，那么这个参数就会变成7 * sizeof(float)
6. 这个参数略微复杂，在这个版本的教程里面我们不会涉及，默认为void* 0
使用顶点属性
在前面的介绍里面，我们定义了一个顶点的数据模型，那么新的问题来了，如果我希望某
些属性可以使用而某些属性不可以使用要怎么做呢？显然gl肯定不会忘记提供一个这样的
API

glEnableVertexAttribArray(0);//让第0个属性可以使用
glDisableVertexAttribArray(0);//让第0个属性不可以使用

其实在原文里面，我们可以发现，在更加复杂的情况下的一个使用

在这里插入图片描述

清除缓存

防止内存泄露，需要将buffer给清理掉

glDeleteBuffers(1, &VBO);

4. 绘制窗口

定义窗口

#include <glad/glad.h>
#include <GLFW/glfw3.h>
#include <time.h>
#include <iostream>
using namespace std;

void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{
	glViewport(0, 0, width, height);
}
// settings
const unsigned int SCR_WIDTH = 800;
const unsigned int SCR_HEIGHT = 600;
clock_t lastTimes;
GLFWwindow* window ;
int init() {
	lastTimes = clock();
	window = nullptr;
	glfwInit();
	glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
	glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
	glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
	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;
	}
}

void draw() {

}
void run() {
	while (!glfwWindowShouldClose(window))
	{
		clock_t now =  clock();
		draw();
		cout << "loop gap = " << now - lastTimes << endl;
		lastTimes = now;
		glfwSwapBuffers(window);
		glfwPollEvents();
	}
}
void shutDown() {
	glfwTerminate();
}
int main()
{
	init();
	run();
	shutDown();
	return 0;
}


注意，我们的绘制函数将会在draw里面进行调用

5.调用绘制命令绘制三角

给一个背景色

没有着色器的三角默认是黑色的，所以你总得给一个背景色
设定状态
glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
使用状态
glClear(GL_COLOR_BUFFER_BIT);

值得注意的是，当使用GL_COLOR_BUFFER_BIT时，会直接将当前的帧缓存刷成glClearColor指定的缓存，另外还可以有以下的几种类型，当然，在本教程中并不考虑

#define GL_DEPTH_BUFFER_BIT 0x00000100
#define GL_STENCIL_BUFFER_BIT 0x00000400
#define GL_COLOR_BUFFER_BIT 0x00004000

这个时候我们可以直接draw出一个带墨绿色的窗口

void draw() {
	glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
	glClear(GL_COLOR_BUFFER_BIT);
}

在这里插入图片描述

剩下的代码

void draw() {
	glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
	glClear(GL_COLOR_BUFFER_BIT);
	//添加数据
	float vertices[] = {
    	-0.5f, -0.5f, 0.0f, // left  
    	 0.5f, -0.5f, 0.0f, // right 
    	 0.0f,  0.5f, 0.0f  ,// top
    	 0.5f,0.5f,0.0f
    };
    
    unsigned int VBO;
    glGenBuffers(1, &VBO);
    glBindBuffer(GL_ARRAY_BUFFER, VBO);
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
    
    unsigned int VAO;
    glGenVertexArrays(1, &VAO);
    glBindVertexArray(VAO);
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
    glEnableVertexAttribArray(0);

	//调用几何着色器命令

	glDrawArrays(GL_TRIANGLES, 0, 3);//绘制0,1,2连城的三角
	
	//glDrawArrays(GL_TRIANGLES, 1, 4);//绘制1,2,3连城的三角

}

测试结果

在这里插入图片描述

6.完整的代码

#include <glad/glad.h>
#include <GLFW/glfw3.h>
#include <time.h>
#include <iostream>
using namespace std;

void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{
	glViewport(0, 0, width, height);
}
// settings
const unsigned int SCR_WIDTH = 800;
const unsigned int SCR_HEIGHT = 600;
clock_t lastTimes;
GLFWwindow* window ;
int init() {
	lastTimes = clock();
	window = nullptr;
	glfwInit();
	glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
	glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
	glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
	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;
	}
}

void draw() {
	glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
	glClear(GL_COLOR_BUFFER_BIT);
	//添加数据
	float vertices[] = {
    	-0.5f, -0.5f, 0.0f, // left  
    	 0.5f, -0.5f, 0.0f, // right 
    	 0.0f,  0.5f, 0.0f  ,// top
    	 0.5f,0.5f,0.0f
    };
    
    unsigned int VBO;
    glGenBuffers(1, &VBO);
    glBindBuffer(GL_ARRAY_BUFFER, VBO);
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
    
    unsigned int VAO;
    glGenVertexArrays(1, &VAO);
    glBindVertexArray(VAO);
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
    glEnableVertexAttribArray(0);

	//调用几何着色器命令

	glDrawArrays(GL_TRIANGLES, 0, 3);//绘制0,1,2连城的三角
	
	//glDrawArrays(GL_TRIANGLES, 1, 4);//绘制1,2,3连城的三角
}
void run() {
	while (!glfwWindowShouldClose(window))
	{
		clock_t now =  clock();
		draw();
		cout << "loop gap = " << now - lastTimes << endl;
		lastTimes = now;
		glfwSwapBuffers(window);
		glfwPollEvents();
	}
}
void shutDown() {
	glfwTerminate();
}
int main()
{
	init();
	run();
	shutDown();
	return 0;
}
卜若
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
OpenGL与3D开发-绘制2D图形
麦兜响当当的博客
08-28 1108
绘制2D图形 文章目录绘制2D图形1、OpenGL ES在Android中涉及的关键类1.1、GLSurfaceView1.2、GLSurfaceView.Renderer 接口1.3、 GL api 调用 1、OpenGL ES在Android中涉及的关键类 Android框架中有两个基础类，可让我们使用OpenGL ES API创建和操作图形：GLSurfaceView和 GLSurfaceView.Renderer。 1.1、GLSurfaceView GLSurfaceView从Android 1.
OpenGL初级入门视频教程(2018)
12-01
OpenGL入门课程主要带领完全没有OpenGL基础的同学，入门OpenGL世界，课程内容包括OpenGL萌谷手册、搭建OpenGL绘图框架、图元绘制、矩阵操作、3D模型绘制、光照的封装、键盘鼠标事件、向量等。
opengl 2d绘图
05-28
此资源，采用qtcreator opengl技术，显示2d的图片，可以修改利用opengl显示多张图片
opengl 2D绘图
weixin_30275415的博客
12-06 735
对齐像素字节函数glPixelStorei (GL_UNPACK_ALIGNMENT, 1)对载入的纹理的画质和色彩有什么影响吗？ 对画面色彩没有影响,glPixelStorei (GL_UNPACK_ALIGNMENT, 1)控制的是所读取的图像数据的行对齐方式. 默认4字节对齐,即一个行的图像数据字节数必须是4的整数倍. 即对RGB 3字节象素而言,若一行10个象素,30个字节...
OpenGL 学习笔记（二）： 2D图形的绘制
Sirius小狼的博客
09-15 3545
2D图形绘制代码 百度网盘链接：https://pan.baidu.com/s/1jpILJ9PTPIMZMylH86_gew 提取码：i6wc 博主会尽量讲的详细，以最简单的说法描述整个基本过程，不过具体还是要读者自行去体会，博主所给代码已经重构过一遍，读者可以按照这个框架去改改参数，体会整个过程。（PS：该篇博客的文件及教程依然免费提供给读者） 一、项目导入 1...
Drawer2D 0.1——简单的opengl2D绘图引擎
01-22
Drawer2D是一个简单的2D绘图引擎，从函数名就可以看出函数的功能。 （不含代码） （正在开发中） 函数说明 initWindow 窗口初始化 setColor 设置颜色 （图形） 绘制实心、空心的图形（实心有S后缀） 绘制完成后，记得flush() clear 清屏
OpenGL-Shader封装
11-11
OpenGL是一种用于渲染2D、3D图像的跨语言、跨平台的应用程序编程接口（API），而Shader是OpenGL中处理图形渲染的关键组件。 在OpenGL中，Shader主要分为两种类型：顶点着色器（Vertex Shader）和片段着色器...
android opengl-es 2.0 java 实现绘制三角形
最新发布
01-23
在Android平台上，OpenGL ES 2.0是广泛使用的图形API，用于实现高性能的2D和3D图形渲染。本教程将详细介绍如何使用Java在Android上通过OpenGL ES 2.0来绘制一个基本的三角形。 首先，要使用OpenGL ES，我们需要在...
Linear-Gradient-Shader:线性渐变着色器 (GLSLC++Cinder)
06-30
C++是一种强大的编程语言，而Cinder是一个开源的创意编码库，它为C++开发者提供了方便的2D和3D图形处理工具。 GLSL是OpenGL的一部分，用于编写顶点和片段着色器，这些着色器是在GPU上运行的程序，可以自定义图形...
OpenGL-Programming:使用OpenGL完成的实验
03-31
OpenGL是一个跨语言、跨平台的图形库，用于渲染2D、3D矢量图形。在这个实验中，我们将探讨OpenGL的一些核心概念和功能，以及如何利用C++进行编程。 1. **OpenGL基本概念** - **上下文(Context)**：OpenGL的运行...
OpenGL实现的2D多边形绘制工具
11-10
程序使用说明请参照readme.txt。 该工具可以添加到别的工程之中，直接引入头文件即可。 适合计算机图形学熟悉OpenGL2D绘图使用。
opengl二维绘图类及示例教程
07-28
本人自己改写的基于OPENGL的二维绘图类，只要包含类对应的2DDRAW，头文件及CPP文件就可以，绘图接口很简单实用，里面写了一个很简单的例子,教大家怎么用那些接口往对大家有用!!
基于OpenGL编写一个简易的2D渲染框架-04
05-04
基于OpenGL编写一个简易的2D渲染框架-04
OpenGL绘制简单地图
12-01
使用OpenGL绘制简单的地图 https://blog.csdn.net/ME__WE/article/details/84675155
OpenGL-NaturalEngine.rar
12-26
在OpenGL-NaturalEngine中，OpenGL被用来绘制复杂的3D场景，包括山体、云层和水面。 2. **glfw**: GLFW是一个开源库，它提供了一个简单的API来创建窗口、处理输入和管理上下文。在OpenGL-NaturalEngine中，glfw被...
LearnOpenGL从入门到入魔(2)：绘制2D图形
老蒋也疯狂
12-21 4776
总目录 LearnOpenGL从入门到入魔(1)：什么是OpenGL？ LearnOpenGL从入门到入魔(2)：如何使用OpenGL？ LearnOpenGL从入门到入魔(3)：着色器语言和坐标系统 LearnOpenGL从入门到入魔(4)：光照(光照基础，材质) LearnOpenGL从入门到入魔(5)：光照(光照贴图，投光物) 1. OpenGL基本概念 1.1 图像渲染管线  在OpenGL中，任何事物都在3D空间中，而屏幕和窗口却是2D像素数组，这导致OpenGL的大部分工作都是关于把3D坐标转变
opengl2D
hkzck的博客
12-10 129
opengl2D ///////////////////////////////////////////////////////////////////// 总结：c语言文件读写fscanf，格式化读行 fscanf（文件对象，没行格式样式，存放地址1，存放地址2，...n） void glTranslatef (GLfloat x, GLfloaty, GLfloa...
OpenGL（五）——创建二维图形
ifeng12358的博客
10-18 2939
OpenGL（二）——创建二维图形 一、创建一个项目，创建项目的方法可以参考前两篇文章： Win10+VS2010+OpenGL配置 OpenGL（一）——创建一个四边形 二、创建好项目后，编写二维图形所需的代码： #include <GLTools.h> #include <stdio.h&gt...
OPENGL学习（三）GLUT二维图像绘制
qq_21043585的博客
07-15 2820
将图像变成了图中(x,y,z)分别对应范围(0-1,0-1,0-1)区间。手动设置了使用RGB绘制、窗口位置及窗口大小。并且在init函数中加入了。增加了鼠标左键点击事件mouse，点击时会改变图像亮度并输出点击位置。在改变窗口时会调用的函数。默认的reshape函数会直接拉伸图形。就是将颜色设置为红色。然后你在三个不同位置点了三个点。最基础的程序，画了个三角形，请确保理解这个程序，就是保存提交给画面。然后你就得到了结果。我们希望图像不被拉伸，而是保持原有大小。使用定时器的一段动画，图像亮度随时间变化。..
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值