HazelEngine 学习记录 - Vertex Buffer Layouts

最新推荐文章于 2024-09-28 20:34:52 发布
最新推荐文章于 2024-09-28 20:34:52 发布
阅读量171 收藏 1
点赞数
分类专栏： HazelEngine 学习记录 文章标签： 学习 c++
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/miyazono_/article/details/127278203
版权

Vertex Buffer Layouts

本节主要是完成 VertexBuffer Layouts 的抽象，

关于 Buffer Layout ，实际上就是指明了顶点缓冲区中数据的布局方式，例如我在一个顶点缓冲区中存放的数据是这样的：

对于每个顶点，前 3 个浮点数存放的是顶点的 Position，之后 4 个浮点数是该顶点的颜色，在之后 3 个浮点数是 Normal，之后两个浮点数是纹理坐标，也就是说，每个顶点我们的数据是 12 个浮点数，那么要如何让 GPU 知道我们的数据是怎么排布的呢？这就要用到 glEnableVertexAttribArray 和 glVertexAttribPointer 来对我们的数据布局进行描述

先观察这两个函数：

		glEnableVertexAttribArray(0);
		glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (const void*)0);
  • 第一个参数指定我们要配置的顶点属性在布局中处于什么位置，例如第一个部分存储的是顶点位置，那么0对应的就是顶点位置的布局。在顶点着色器中使用layout(location = 0)定义了position顶点属性的位置
  • 第二个参数指定顶点某个属性的大小。如果该属性由三个浮点数组成，那么就是3。
  • 第三个参数指定数据的类型，这里是GL_FLOAT。
  • 下个参数定义我们是否希望数据被归一化(Normalize)。如果我们设置为GL_TRUE，所有数据都会被映射到0（对于有符号型signed数据是-1）到1之间。我们把它设置为GL_FALSE。
  • 第五个参数叫做步长(Stride)，它告诉我们在连续的顶点属性组之间的间隔。由于下个组位置数据在3个float之后，我们把步长设置为3 * sizeof(float)。要注意的是由于我们知道这个数组是紧密排列的（在两个顶点属性之间没有空隙）我们也可以设置为0来让OpenGL决定具体步长是多少（只有当数值是紧密排列时才可用）。可以理解为每一个顶点的所有属性所占的长度。
  • 最后一个参数的类型是void*，数据指针，代表的是这个顶点属性的偏移量，第一个定点属性的偏移量是 0 ，之后每一个属性依次向后偏移。

用一个更具体的例子来解释这两个函数：

	Application::Application()
	{
		HZ_CORE_ASSERT(!s_Instance, "Application already exists!");
		s_Instance = this;
 
		m_Window = std::unique_ptr<Window>(Window::Create());
		m_Window->SetEventCallback(BIND_EVENT_FN(OnEvent));
 
		m_ImGuiLayer = new ImGuiLayer();
		PushOverLay(m_ImGuiLayer);
 
		float vertices[3 * 7] = {									//一共有 3 个顶点，每个顶点两个属性，七个浮点值组成
			-0.5f,-0.5f,0.0f,	1.0f,0.0f,0.0f,1.0f,	//前三个 float 代表顶点位置，之后四个代表顶点对应颜色
			 0.5f,-0.5f,0.0f,	0.0f,1.0f,0.0f,1.0f,
			 0.0f, 0.5f,0.0f,	0.0f,0.0f,1.0f,1.0f,
 
		};
		unsigned int indices[3] = { 0,1,2 };
 
		glGenVertexArrays(1, &m_VertexArray);
		glBindVertexArray(m_VertexArray);
		m_VertexBuffer.reset(VertexBuffer::Create(vertices, sizeof(vertices)));
		m_IndexBuffer.reset(IndexBuffer::Create(indices, 3));
 
 
		glEnableVertexAttribArray(0);			// 0 代表的是顶点位置
		glEnableVertexAttribArray(1);			// 1 代表的是顶点颜色
 
		glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 7 * sizeof(float), nullptr);
		glVertexAttribPointer(1, 4, GL_FLOAT, GL_FALSE, 7 * sizeof(float), (void*)12);
 
 
		const std::string vertexSrc = R"(
				#version 330 core
				
				layout(location = 0) in vec3 a_Position;
				layout(location = 1) in vec4 a_Color;
				out vec3 v_Position;
				out vec4 v_Color;
				void main()
				{
					v_Position = a_Position;
					v_Color = a_Color;
					gl_Position = vec4(a_Position,1.0);
				}
				)";
		const std::string fragmentSrc = R"(
				#version 330 core
				
				layout(location = 0) out vec4 color;
				layout(location = 1) out vec4 color1;
				in vec3 v_Position;
				in vec4 v_Color;
				
				void main()
				{
					color = v_Color;//vec4(v_Position*0.5+0.5, 1.0);
				}
				)";
		
		m_Shader.reset(new Shader(vertexSrc, fragmentSrc));
	}

之后就可以进行其他部分了：

首先定义 BufferElement 也就是顶点属性：

struct BufferElement
	{
		std::string Name;				
		ShaderDataType Type;
		uint32_t Size;
		uint32_t Offset;
		bool Normalized;

		BufferElement() = default;
		BufferElement(ShaderDataType type, const std::string& name, bool normalized = false)
			: Type(type), Name(name), Size(ShaderDataTypeSize(type)), Offset(0), Normalized(normalized)
		{
		}

		uint32_t GetComponentCount() const
		{
			switch(Type)
			{
				case ShaderDataType::Float:		return 1;
				case ShaderDataType::Float2:	return 2;
				case ShaderDataType::Float3:	return 3;
				case ShaderDataType::Float4:	return 4;
				case ShaderDataType::Mat3:		return 3 * 3;
				case ShaderDataType::Mat4:		return 4 * 4;
				case ShaderDataType::Int:			return 1;
				case ShaderDataType::Int2:		return 2;
				case ShaderDataType::Int3:		return 3;
				case ShaderDataType::Int4:		return 4;
				case ShaderDataType::Bool:		return 1;
			}
			HZ_CORE_ASSERT(false, "Unknown ShaderDataType!");
			return 0;
		}
	};

之后定义属性的数据类型以及大小：

enum class ShaderDataType
	{
		None = 0, Float, Float2, Float3, Float4, Mat3, Mat4, Int, Int2, Int3, Int4, Bool
	};
static uint32_t ShaderDataTypeSize(ShaderDataType type)
	{
		switch (type)
		{
		case ShaderDataType::Float:		return 4;
		case ShaderDataType::Float2:	return 4 * 2;
		case ShaderDataType::Float3:	return 4 * 3;
		case ShaderDataType::Float4:	return 4 * 4;
		case ShaderDataType::Mat3:		return 4 * 3 * 3;
		case ShaderDataType::Mat4:		return 4 * 4 * 4;
		case ShaderDataType::Int:			return 4;
		case ShaderDataType::Int2:		return 4 * 2;
		case ShaderDataType::Int3:		return 4 * 3;
		case ShaderDataType::Int4:		return 4 * 4;
		case ShaderDataType::Bool:		return 1;
		}
		HZ_CORE_ASSERT(false, "Unknown ShaderDataType!");
		return 0;
	}

然后就可以定义 VertexBuffer Layout 了

	class BufferLayout
	{
	public:

		BufferLayout() {}
		BufferLayout(const std::initializer_list<BufferElement>& elements)
		: m_Elements(elements)
		{
			CalculateOffsetAndStride();
		}

		inline uint32_t GetStride() const { return m_Stride; }
		inline const std::vector<BufferElement>& GetElements() const { return m_Elements; }

		std::vector<BufferElement>::const_iterator begin() const { return m_Elements.begin(); }
		std::vector<BufferElement>::const_iterator end() const { return m_Elements.end(); }
	private:
		void CalculateOffsetAndStride()
		{
			uint32_t offset = 0;
			m_Stride = 0;
			for (auto& element : m_Elements)
			{
				element.Offset = offset;		//初始化每个element的 offset 并计算总步长
				offset += element.Size;
				m_Stride += element.Size;
			}
		}
	private:
		std::vector<BufferElement> m_Elements;  //	存放每一个顶点属性对应一个 Element
		uint32_t m_Stride = 0;									//步长，代表一个顶点的所有数据的长度
	};

在 Layout 中使用的是 const_iterator，是因为 GetLayout 的返回值是 const Vector 因此迭代器也要用 const 类型。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mdJwaJVy-1665542651148)(/Users/liangjie/Library/Application Support/typora-user-images/image-20221011160531916.png)]

在 Application.cpp 中，添加 layout 并使用

static GLenum ShaderDataTypeToOpenGLBaseType(ShaderDataType type)
	{
		switch (type)
		{
		case Hazel::ShaderDataType::Float:		return GL_FLOAT;
		case Hazel::ShaderDataType::Float2:		return GL_FLOAT;
		case Hazel::ShaderDataType::Float3:		return GL_FLOAT;
		case Hazel::ShaderDataType::Float4:		return GL_FLOAT;
		case Hazel::ShaderDataType::Mat3:		return GL_FLOAT;
		case Hazel::ShaderDataType::Mat4:		return GL_FLOAT;
		case Hazel::ShaderDataType::Int:		return GL_INT;
		case Hazel::ShaderDataType::Int2:		return GL_INT;
		case Hazel::ShaderDataType::Int3:		return GL_INT;
		case Hazel::ShaderDataType::Int4:		return GL_INT;
		case Hazel::ShaderDataType::Bool:		return GL_BOOL;
		}

		HZ_CORE_ASSERT(false, "Unknown ShaderDataType!");
		return 0;
	}



Application(){
  ...
    glGenVertexArrays(1, &m_VertexArray);
		glBindVertexArray(m_VertexArray);

		float vertices[3 * 7] = {
			-0.5f, -0.5f, 0.0f, 0.8f, 0.2f, 0.8f, 1.0f,
			 0.5f, -0.5f, 0.0f, 0.2f, 0.3f, 0.8f, 1.0f,
			 0.0f,  0.5f, 0.0f, 0.3f, 0.8f, 0.0f, 1.0f
		};
		
		m_VertexBuffer.reset(VertexBuffer::Create(vertices, sizeof(vertices)));

		{
			BufferLayout layout = {
				{ ShaderDataType::Float3, "a_Position", false},
				{ ShaderDataType::Float4, "a_Color", false}
			};

			m_VertexBuffer->SetLayout(layout);
		}

		uint32_t index = 0;
		const auto& layout = m_VertexBuffer->GetLayout();
		for (const auto& element : layout)
		{
			glEnableVertexAttribArray(index);
			glVertexAttribPointer(index, 
				element.GetComponentCount(),
				ShaderDataTypeToOpenGLBaseType(element.Type),
				element.Normalized ? GL_TRUE : GL_FALSE,
				layout.GetStride(),
				(const void*)element.Offset);
			index++;
		}
}

运行结果：

在这里插入图片描述

miyazono_
关注
专栏目录
HazelEngine 学习记录 - Transforms
miyazono_的博客
10-18 109
实现 Transform
buffer-layout:Node.js 支持在 JavaScript 值和缓冲区之间进行转换
08-03
缓冲区布局 buffer-layout 是一个用纯 JavaScript 实现的实用模块，支持 JavaScript 值和缓冲区之间的转换。 它可以通过并在 MIT 许可下发布。 为这些类型的数据提供了布局支持： 长度为 1 到 6 个字节的有符号和无符号整数值，采用小端或大端格式； 有符号和无符号 64 位整数值解码为整数； Float 和 double 值（也是 little-endian 或 big-endian）； 任意布局的实例序列，具有恒定或依赖于数据的长度； 具有包含任意布局的命名字段的结构； 变体布局的联合，其中数据类型记录在前缀值、另一个布局元素中或从外部提供； 8、16、24 或 32 位无符号整数中的位字段，从最低或最高有效位开始编号； 以 NUL 结尾的 C 字符串； 固定或可变长度的原始数据块。 安装 开发和测试使用 Node.js 完成，支
Haxel Engine learning 16 -- Vertex Buffer Layouts
DXT的博客
07-22 293
Cherno 视频：https://www.youtube.com/watch?v=jIJFM_pi6gQ&list=PLlrATfBNZ98dC-V-N3m0Go4deliWHPFwT&index=31 完整代码：https://github.com/DXT00/Hazel_study/tree/e129b773d1feb24e44b73bd4967471d886dcf025 ...
DirectX的Vertex Buffer顶点缓冲的理解和应用 Shader必知必会
架构设计
10-26 347
故名思义Vertex Buffer就是存放顶点的缓冲。相当于一个内存区，指明了这些几何图形的顶点的位置。 一般简单的几何图形，如正方形，手动地可以定义这些顶点，定义好顶点之后，就需要如下这样来设置好，才能开始画图，而这正是DirectX里面最难理解的问题之一，和OpenGL也一样，同样需要这样设置的，OpenGL SuperBibl 第五版中居然把这个问题放到了差不多最后一个章节去介绍，可想而知...
Vulkan学习（十一）: Descriptor Layout And Buffer & Descriptor Pool And Sets
jiamada的博客
06-09 559
目录Descriptor Layout And BufferDescriptor Set LayoutUniform bufferUpdating uniform dataDescriptor pool and setsDescriptor poolDescriptor setUsing descriptor sets Descriptor Layout And Buffer Descriptor Set Layout   descriptor是着色器自由访问缓冲区和图像等资源的一种方式。 描述符的使用由三
spacemacs的buffer分类方法（利用Perspectives和layout功能）
学而不思则罔，思而不学则殆
05-01 2453
我是怎样使用spacemacs的 spacemacs的layout操作 个人推荐的操作流程举例 网上的一篇文章虽说是针对spacemacs，但是emacs也是类似的（不过要装插件，使之支持layout）。本文，重点其实是讲的如何使用“Perspectives”（spacemacs默认有一个菜单“Perspectives”，可见其很重要）。个人理解“Perspectives”可以极其方便的分组/分类文
HazelEngine 学习记录 - Vertex Arrays
miyazono_的博客
10-13 344
VertexArray 抽象
social-vertex：开源的社交网络服务器
02-03
【social-vertex：开源的社交网络服务器】 Social-Vertex 是一个开源项目，旨在构建一个功能丰富的社交网络服务器。它利用先进的技术栈来提供高效、可扩展的社交平台服务。在这个项目中，开发者选择了 ES4X 和 ...
Facet-Vertex-FFNN
05-27
该存储库用于使用Facet-Vertex关联对Deep ReLU神经网络进行可达性分析。 注意：建议使用64GB RAM生成所有结果。 检查环境 软件 Ubunu 18.04 Python 3.6 Matlab 2019b for plotting Figure 4 in the paper 硬件 ...
data-vertex
03-31
git clone https://github.com/proxima-one/data-vertex.git 设置 需要设置数据顶点，以使数据库配置，解析器和架构与指定顶点的要求匹配。 这是通过Proxima CLI自动完成的。 跑步 在运行数据顶点之前，它必须具有...
OpenGLES demo - 10. DrawElements, Vertex Buffer和Index Buffer
07-14
在OpenGLES编程中，`drawElements`、`Vertex Buffer`和`Index Buffer`是三个非常重要的概念，它们是高效渲染3D图形的关键技术。在这个OpenGLES入门课程的第10章中，我们将深入探讨这三个主题，了解它们的工作原理...
OpenGL 6.ImGui
sinat_34014668的博客
10-07 1381
ImGui的使用
【OpenGL】Shader个人学习笔记（5）利用 VertexArray对多个Buffer进行绑定
qq_34878429的博客
06-23 1216
之前已经学习了单个shader的buffer和layout绑定，如果需要对多个vertex buffer进行绑定，则需要声明一个类的容器。 unsigned int ibo; // index buffer object GLCall(glGenBuffers(1, &ibo)); GLCall(glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, ibo)); GLCall(glBufferData(GL_ELEMENT_ARRAY_BUFFER, 6 * sizeof(
OpenGL中的顶点缓冲区(Vertex Buffer)
klscer的博客
02-23 4044
Vertex buffer即顶点缓冲区。从字面意思来看，这个词就是指储存是顶点数据的缓冲区，本质还是一个缓冲区（buffer），是占一定字节的内存。就像在C++中我们用声明并赋值一个int类型，在内存中开辟4个字节空间来储存数据，这是在CPU上进行的。而Vertex buffer是OpenGL在GPU中开辟空间储存数据。当我们运行程序绘制图形时，显卡会从缓存（buffer）中读取顶点数据，进行绘制。 今天我们来看一下如何用OpenGL来创建顶点缓存区（vertex buffer）。我个人感觉这个过程和编程
OpenGl 4.抽象代码
sinat_34014668的博客
09-24 270
对之前写的代码进行抽象
Spring Boot 学习和使用
cesske的博客
09-24 1079
Spring Boot是一款开源的Java Web应用框架，旨在简化Spring应用的初始搭建以及开发过程。Spring Boot通过整合Spring技术栈中的诸多关键组件，为开发者提供了一种快速、简便的Spring应用开发方式。它遵循“约定优于配置”的原则，通过自动配置、起步依赖和内置的Servlet容器，极大地简化了传统Spring应用的配置和部署过程。Spring Boot通过其自动化配置、起步依赖、内嵌服务器等特性，极大地简化了Spring应用的开发和部署过程。
Go基础学习08-并发安全型类型-通道（chan）深入研究
最新发布
FLJS_T的博客
09-28 597
在前面学习中了解到对于单值变量，如：int、string；多值变量，如：map存在多协程对资源竞争的并发问题，为了解决并发性通常需要引入sync.Mutex解决。>对于通道的基本声明方式有三种：声明并初始化带缓冲的通道（ch1）；声明并初始化一个不带缓冲的通道（ch2）；仅仅声明一个通道（ch3） >什么是通道：==一个通道相当于一个先进先出（FIFO）的队列。也就是说，通道中的各个元素值都是严格地按照发送的顺序排列的，先被发送通道的元素值一定会先被接收。Select和for循环实现对channel的多次选
大模型输入参数学习
AI智能，无处不在
09-25 336
top_p和top_k：用于控制生成文本的多样性和连贯性。较小的值会使生成的文本更连贯但缺乏多样性，较大的值会使生成的文本更随机和多样。：用于控制生成文本的随机性。较高的值增加随机性，较低的值增加确定性。：用于控制生成文本的长度。
vertexBuffer.getBufferData
05-31
在WebGL中，vertexBuffer是一个缓冲区对象，用于存储顶点数据。如果要获取vertexBuffer中的数据，可以使用以下步骤： 1. 绑定vertexBuffer：使用gl.bindBuffer函数将vertexBuffer绑定到当前上下文中。 2. 创建一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值