顶点属性
概述
指定顶点属性数据的方式：
- 常量顶点属性
- 顶点数组方式
- 顶点缓冲区对象方式（图形内存中分配）
- 顶点数组方式（简化顶点缓冲区对象的使用流程）
- 映射缓冲区对象（将顶点缓冲区对象映射到用户空间中，再加载数据，而不是使用glBufferData来加载数据）
1. 指定顶点属性数据的方式
1. 常量顶点属性
常量顶点属性对于所有元素都相同，一个图元的所有顶点只需指定一个值；
// index表示哪个属性，一般0为位置，1为纹理。。。 x,y,z为对应的值
glVertexAttrib3f(GLuint index, GLfloat x, GLfloat y, GLfloat z)
2. 顶点数组
// index为第几个属性，属性有顶点的位置为0/纹理为1/法线为3；size为一个顶点所有数据的个数，这里XYZ为3个；
// 注意：index 0和位置对应，这种对应关系是在顶点着色器中指定的
// type为顶点描述数据的类型，这里为FLOAT；normalized为是否需要显卡把数据归一化到-1到+1区间，这里不需要为FALSE
// stride连续顶点属性之间的偏移量，0表示他们为紧密排列在一起的。pointer为顶点数组
void glVertexAttribPointer (GLuint index, GLint size, GLenum type, GLboolean normalized, GLsizei stride, const void *pointer);
stride和pointer的用法：
（1）位置(xyz)法线(xyz)纹理0(st)纹理1(st)存储到一个数组的时候
1. 设置位置时
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, (3+3+2+2)*sizeof(float), p);
2. 设置法线时
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, (3+3+2+2)*sizeof(float), p + 3);
3. 设置纹理0时
glVertexAttribPointer(2, 3, GL_FLOAT, GL_FALSE, (3+3+2+2)*sizeof(float), p + 6);
4. 设置纹理1时
glVertexAttribPointer(3, 3, GL_FLOAT, GL_FALSE, (3+3+2+2)*sizeof(float), p + 8);
所以：stride就是同一个属性下，下一个位置数据的offset；p就是不同属性下，下一个属性数据的offset
3. 常量顶点属性和顶点数组之间的选择
// 启用顶点属性数组；如果禁用，则使用常量顶点属性；默认是使用常量顶点属性
glEnableVertexAttribArray(GLuint index)
void glDisableVertexAttribArray (GLuint index)
4. 源码解析
int Init(MYESContext *myesContext)
{
myUserData *userData = (myUserData *)myesContext->userData;
char vShaderStr[] =
"#version 300 es \n"
"layout(location = 0) in vec4 a_position; \n" // 位置属性
"layout(location = 1) in vec4 a_color; \n" // 颜色属性
"out vec4 v_color; \n" // 输出颜色
"void main() \n"
"{ \n"
" v_color = a_color; \n"
" gl_Position = a_position; \n"
"} \n";
char fShaderStr[] =
"#version 300 es \n"
"precision mediump float; \n"
"in vec4 v_color; \n" // 同名，输入颜色
"out vec4 o_fragColor; \n"
"void main() \n"
"{ \n"
" o_fragColor = v_color; \n"
"} \n";
GLuint programObject;
programObject = myesLoadProgram(vShaderStr, fShaderStr);
if (programObject == 0) {
return GL_FALSE;
}
userData->programObject = programObject;
glClearColor(1.0f, 1.0f, 1.0f, 0.0f);
return GL_TRUE;
}
void Draw(MYESContext *myesContext)
{
myUserData *userData = (myUserData *)myesContext->userData;
GLfloat color[4] = {0.0f, 1.0f, 0.0f, 1.0f};
GLfloat vVertices[3 * 3] = {
0.0f, 0.5f, 0.0f,
-0.5f, -0.5f, 0.0f,
0.5f, -0.5f, 0.0f
};
glViewport(0, 0, myesContext->width, myesContext->height);
glClear(GL_COLOR_BUFFER_BIT);
glUseProgram(userData->programObject);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, vVertices); // 指定顶点数组属性
glEnableVertexAttribArray(0); // 启动0层的顶点数组属性
glVertexAttrib4fv(1, color); // 指定常量顶点属性，一个图元的所有顶点只需指定一个值；
glDrawArrays(GL_TRIANGLES, 0, 3);
glDisableVertexAttribArray(0);
}
2. 顶点缓冲区对象
1. 作用
顶点数组指定的顶点数据都是保存在客户内存中，每次要使用这些数据，都要从客户内存复制到图形内存；
顶点缓冲区对象可以直接在高性能的图形内存中分配和缓存顶点数据，并从这个内存进行渲染，从而避免了复制，提高了性能。
2. 统一变量的用法
// 作用：应用程序给顶点着色器或者片段着色器传入只读值
// 1. 定义uniform变量
char vShaderStr[] =
"#version 300 es \n"
"layout(location = 0) in vec4 a_position; \n"
"layout(location = 1) in vec4 a_color; \n"
"uniform float u_offset; \n"
"out vec4 v_color; \n"
"void main() \n"
"{ \n"
" v_color = a_color; \n"
" gl_Position = a_position; \n"
" gl_Position.x += u_offset; \n" // 平移了
"} \n";
// 2. 获取统一变量的Id号
userData->offsetLoc = glGetUniformLocation(programObject, "u_offset");
// 3. draw之前进行传值操作
glUniform1f(userData->offsetLoc, 0.0f);
3. 顶点缓冲区对象的用法
// void glGenBuffers(GLsizei n,GLuint * buffers);
// n：要生成的缓冲对象的数量；buffers：存储缓冲对象名称的数组，存储它的ID号；
// 注意：给buffer传0，是说明不使用顶点缓冲区对象
glGenBuffers(2, userData->vboIds);
// void glBindBuffer(GLenum target,GLuint buffer);
// target：缓冲区对象类型；buffer：缓冲对象ID号；经过这个函数之后，缓冲对象 -> 顶点缓冲类型；相当于(void) -> (int)
glBindBuffer(GL_ARRAY_BUFFER, userData->vboIds[0]);
// void glBufferData (GLenum target, GLsizeiptr size, const void *data, GLenum usage);
// 给缓冲区对象分配内存，并且把数据复制到缓冲区中
glBufferData(GL_ARRAY_BUFFER, vtxStride*numVertices,
vtxBuf, GL_STATIC_DRAW);
// 为什么需要GL_ELEMENT_ARRAY_BUFFER类型？ -- 指定顶点数据
// 可以用来指定顶点：比如对于顶点数据{{0, 0, 0}, {1, 0, 0}, {1, 1, 0}, {0, 1, 0}}
// 在同一个数组的情况下，使用{0, 1, 2}来指定0/1/2顶点数据；或者使用{0, 2, 3}来指定0/2/3顶点数据
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, userData->vboIds[1]);
glBufferData(GL_ELEMENT_ARRAY_BUFFER,
sizeof(GLushort) * numIndices,
indices, GL_STATIC_DRAW);
源码解析
//
// Created by jetson on 2021/3/28.
//
#include "esUtil.h"
typedef struct
{
GLuint programObject;
GLuint vboIds[2];
GLuint offsetLoc;
} myUserData;
#define VERTEX_POS_SIZE 3 // X Y Z
#define VERTEX_COLOR_SIZE 4 // R G B A
#define VERTEX_POS_INDEX 0
#define VERTEX_COLOR_INDEX 1
int Init(MYESContext *myesContext)
{
myUserData *userData = (myUserData *)myesContext->userData;
char vShaderStr[] =
"#version 300 es \n"
"layout(location = 0) in vec4 a_position; \n"
"layout(location = 1) in vec4 a_color; \n"
"uniform float u_offset; \n" // 1. 定义uniform变量
"out vec4 v_color; \n"
"void main() \n"
"{ \n"
" v_color = a_color; \n"
" gl_Position = a_position; \n"
" gl_Position.x += u_offset; \n" // 平移了
"} \n";
char fShaderStr[] =
"#version 300 es \n"
"precision mediump float; \n"
"in vec4 v_color; \n"
"out vec4 o_fragColor; \n"
"void main() \n"
"{ \n"
" o_fragColor = v_color; \n"
"} \n";
GLuint programObject;
programObject = myesLoadProgram(vShaderStr, fShaderStr);
userData->offsetLoc = glGetUniformLocation(programObject, "u_offset"); // 2. 获取统一变量的Id号
if (programObject == 0) {
return GL_FALSE;
}
userData->programObject = programObject;
userData->vboIds[0] = 0;
userData->vboIds[1] = 0;
glClearColor(1.0f, 1.0f, 1.0f, 0.0f);
return GL_TRUE;
}
void DrawPrimitiveWithoutVBOs(GLfloat *vertices,
GLint vtxStride, GLint numIndices, GLushort* indices)
{
GLfloat *vtxBuf = vertices;
glBindBuffer(GL_ARRAY_BUFFER, 0);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);
glEnableVertexAttribArray(VERTEX_POS_INDEX);
glEnableVertexAttribArray(VERTEX_COLOR_INDEX);
glVertexAttribPointer(VERTEX_POS_INDEX, VERTEX_POS_SIZE, GL_FLOAT, GL_FALSE, vtxStride, vtxBuf);
vtxBuf += VERTEX_POS_SIZE;
glVertexAttribPointer(VERTEX_COLOR_INDEX, VERTEX_COLOR_SIZE, GL_FLOAT,
GL_FALSE, vtxStride, vtxBuf);
glDrawElements(GL_TRIANGLES, numIndices, GL_UNSIGNED_SHORT, indices);
glDisableVertexAttribArray(VERTEX_POS_INDEX);
glDisableVertexAttribArray(VERTEX_COLOR_INDEX);
}
void DrawPrimitiveWithVBOs(MYESContext *myesContext, GLint numVertices, GLfloat *vtxBuf,
GLint vtxStride, GLint numIndices, GLushort *indices)
{
myUserData *userData = (myUserData *)myesContext->userData;
GLuint offset = 0;
if (userData->vboIds[0] == 0 && userData->vboIds[1] == 0) {
glGenBuffers(2, userData->vboIds);
glBindBuffer(GL_ARRAY_BUFFER, userData->vboIds[0]);
glBufferData(GL_ARRAY_BUFFER, vtxStride*numVertices,
vtxBuf, GL_STATIC_DRAW);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, userData->vboIds[1]);
glBufferData(GL_ELEMENT_ARRAY_BUFFER,
sizeof(GLushort) * numIndices,
indices, GL_STATIC_DRAW);
}
glBindBuffer(GL_ARRAY_BUFFER, userData->vboIds[0]);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, userData->vboIds[1]);
glEnableVertexAttribArray(VERTEX_POS_INDEX);
glEnableVertexAttribArray(VERTEX_COLOR_INDEX);
// 这里offset设为0，是说明使用顶点缓冲区对象。
glVertexAttribPointer(VERTEX_POS_INDEX, VERTEX_POS_SIZE, GL_FLOAT,
GL_FALSE, vtxStride, (const void *)offset);
offset += VERTEX_POS_SIZE * sizeof(GLfloat);
glVertexAttribPointer(VERTEX_COLOR_INDEX, VERTEX_COLOR_SIZE,
GL_FLOAT, GL_FALSE, vtxStride, (const void *)offset);
// void glDrawElements (GLenum mode, GLsizei count, GLenum type, const void *indices);
// indices为0表明使用顶点缓冲区对象
glDrawElements(GL_TRIANGLES, numIndices, GL_UNSIGNED_SHORT, 0);
glDisableVertexAttribArray(VERTEX_POS_INDEX);
glDisableVertexAttribArray(VERTEX_COLOR_INDEX);
glBindBuffer(GL_ARRAY_BUFFER, 0);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);
}
void Draw(MYESContext *myesContext)
{
myUserData *userData = (myUserData *)myesContext->userData;
GLfloat vVertices[3 * (VERTEX_POS_SIZE + VERTEX_COLOR_SIZE)] = {
-0.5f, 0.5f, 0.0f, // v0
1.0f, 0.0f, 0.0f, 1.0f, // c0
-1.0f, -0.5f, 0.0f, // v1
0.0f, 1.0f, 0.0f, 1.0f, // c1
0.0f, -0.5f, 0.0f, // v2
0.0f, 0.0f, 1.0f, 1.0f, // c2
};
GLushort indices[3] = {0, 1, 2};
glViewport(0, 0, myesContext->width, myesContext->height);
glClear(GL_COLOR_BUFFER_BIT);
glUseProgram(userData->programObject);
glUniform1f(userData->offsetLoc, 0.0f); // 3. draw之前进行传值操作
DrawPrimitiveWithoutVBOs(vVertices, sizeof(GLfloat)*(VERTEX_POS_SIZE+VERTEX_COLOR_SIZE),
3, indices);
glUniform1f(userData->offsetLoc, 1.0f);
DrawPrimitiveWithVBOs(myesContext, 3, vVertices,
sizeof(GLfloat)*(VERTEX_POS_SIZE+VERTEX_COLOR_SIZE),
3, indices);
}
3. 顶点数组对象
1. 顶点数组对象的用法
作用：顶点缓冲区对象的状态切换太麻烦了，glBindBuffer -> glEnableVertexAttribArray -> glVertexAttribPointer -> draw -> glDisableVertexAttribArray -> glBindBuffer等一系列的步骤；所以创建了个顶点数组对象来简化这些步骤：
只要：glBindVertexArray -> draw -> glBindVertexArray就可以了
2. 源码解析
int Init(MYESContext *myesContext)
{
myUserData *userData = (myUserData *)myesContext->userData;
char vShaderStr[] =
"#version 300 es \n"
"layout(location = 0) in vec4 a_position; \n"
"layout(location = 1) in vec4 a_color; \n"
"out vec4 v_color; \n"
"void main() \n"
"{ \n"
" v_color = a_color; \n"
" gl_Position = a_position; \n"
"} \n";
char fShaderStr[] =
"#version 300 es \n"
"precision mediump float; \n"
"in vec4 v_color; \n"
"out vec4 o_fragColor; \n"
"void main() \n"
"{ \n"
" o_fragColor = v_color; \n"
"} \n";
GLuint programObject;
GLfloat vertices[3 * ( VERTEX_POS_SIZE + VERTEX_COLOR_SIZE )] = {
0.0f, 0.5f, 0.0f, // v0
1.0f, 0.0f, 0.0f, 1.0f, // c0
-0.5f, -0.5f, 0.0f, // v1
0.0f, 1.0f, 0.0f, 1.0f, // c1
0.5f, -0.5f, 0.0f, // v2
0.0f, 0.0f, 1.0f, 1.0f, // c2
};
GLushort indices[3] = {0, 1, 2};
programObject = myesLoadProgram(vShaderStr, fShaderStr);
if (programObject == 0) {
return GL_FALSE;
}
userData->programObject = programObject;
glGenBuffers(2, userData->vbIds);
glBindBuffer(GL_ARRAY_BUFFER, userData->vbIds[0]);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, userData->vbIds[1]);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
// 1. 生成顶点数组对象
glGenVertexArrays(1, &userData->vaoId);
// 2. 绑定顶点数组对象
glBindVertexArray(userData->vaoId);
// 3. 中间为缓冲区对象的设置过程
glBindBuffer(GL_ARRAY_BUFFER, userData->vbIds[0]);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, userData->vbIds[1]);
glEnableVertexAttribArray(VERTEX_POS_INDX);
glEnableVertexAttribArray(VERTEX_COLOR_INDX);
glVertexAttribPointer(VERTEX_POS_INDX, VERTEX_POS_SIZE,
GL_FLOAT, GL_FALSE, VERTEX_STRIDE, (const void *) 0);
glVertexAttribPointer(VERTEX_COLOR_INDX, VERTEX_COLOR_SIZE, GL_FLOAT, GL_FALSE, VERTEX_STRIDE,
(const void *)(VERTEX_POS_SIZE*sizeof(GLfloat)));
glBindVertexArray(0);
glClearColor(1.0f, 1.0f, 1.0f, 0.0f);
return GL_TRUE;
}
void Draw(MYESContext *myesContext)
{
myUserData *userData = (myUserData *)myesContext->userData;
glViewport(0, 0, myesContext->width, myesContext->height);
glClear(GL_COLOR_BUFFER_BIT);
glUseProgram(userData->programObject);
// 4. 绑定顶点数组对象
glBindVertexArray(userData->vaoId);
glDrawElements(GL_TRIANGLES, 3, GL_UNSIGNED_SHORT, (const void *)0);
glBindVertexArray(0);
}
4. 映射缓冲区对象
1. 映射缓冲区对象的作用
作用：将缓冲区对象数据存储（图形内存中分配的）映射到应用程序的地址空间
而不使用glBufferData来加载数据
2. 源码解析
void DrawPrimitiveWithVBOsMapBuffers(MYESContext *myesContext,
GLint numVertices, GLfloat *vtxBuf, GLint vtxStride, GLint numIndices,
GLushort *indices)
{
myUserData *userData = (myUserData *)myesContext->userData;
GLuint offset = 0;
if (userData->vboIds[0] == 0 && userData->vboIds[1] == 0) {
GLfloat *vtxMappedBuf;
GLushort *idxMappedBuf;
glGenBuffers(2, userData->vboIds);
glBindBuffer(GL_ARRAY_BUFFER, userData->vboIds[0]);
// 注意：这里data设为NULL，说明不用glBufferData来加载数据，而只是用它来分配空间而已
glBufferData(GL_ARRAY_BUFFER, vtxStride*numVertices,
NULL, GL_STATIC_DRAW);
// 1. 生成mapbuffer
vtxMappedBuf = (GLfloat *) glMapBufferRange(GL_ARRAY_BUFFER, 0, vtxStride*numVertices,
GL_MAP_WRITE_BIT | GL_MAP_INVALIDATE_BUFFER_BIT);
if ( vtxMappedBuf == NULL )
{
esLogMessage ( "Error mapping vertex buffer object." );
return;
}
// 2. 通过mapBuffer的形式来加载数据到缓冲区对象中
memcpy(vtxMappedBuf, vtxBuf, vtxStride*numVertices);
// 3. 解除映射
if (glUnmapBuffer(GL_ARRAY_BUFFER) == GL_FALSE) {
esLogMessage("Error unmapping array buffer object.");
return;
}
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, userData->vboIds[1]);
glBufferData(GL_ELEMENT_ARRAY_BUFFER,
sizeof(GLushort) * numIndices,
NULL, GL_STATIC_DRAW);
idxMappedBuf = (GLushort *) glMapBufferRange(GL_ELEMENT_ARRAY_BUFFER, 0,
sizeof(GLushort)*numIndices, GL_MAP_WRITE_BIT | GL_MAP_INVALIDATE_BUFFER_BIT);
if (idxMappedBuf == NULL) {
esLogMessage("Error mapping element array buffer object.");
return;
}
memcpy(idxMappedBuf, indices, sizeof(GLushort)*numIndices);
if (glUnmapBuffer(GL_ELEMENT_ARRAY_BUFFER) == GL_FALSE) {
esLogMessage("Error unmapping element array buffer object");
return;
}
}
glBindBuffer(GL_ARRAY_BUFFER, userData->vboIds[0]);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, userData->vboIds[1]);
glEnableVertexAttribArray(VERTEX_POS_INDEX);
glEnableVertexAttribArray(VERTEX_COLOR_INDEX);
glVertexAttribPointer(VERTEX_POS_INDEX, VERTEX_POS_SIZE, GL_FLOAT,
GL_FALSE, vtxStride, (const void *)offset);
offset += VERTEX_POS_SIZE * sizeof(GLfloat);
glVertexAttribPointer(VERTEX_COLOR_INDEX, VERTEX_COLOR_SIZE,
GL_FLOAT, GL_FALSE, vtxStride, (const void *)offset);
glDrawElements(GL_TRIANGLES, numIndices, GL_UNSIGNED_SHORT, 0);
glDisableVertexAttribArray(VERTEX_POS_INDEX);
glDisableVertexAttribArray(VERTEX_COLOR_INDEX);
glBindBuffer(GL_ARRAY_BUFFER, 0);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);
}
void Draw(MYESContext *myesContext)
{
myUserData *userData = (myUserData *)myesContext->userData;
GLfloat vertices[3 * ( VERTEX_POS_SIZE + VERTEX_COLOR_SIZE )] = {
0.0f, 0.5f, 0.0f, // v0
1.0f, 0.0f, 0.0f, 1.0f, // c0
-0.5f, -0.5f, 0.0f, // v1
0.0f, 1.0f, 0.0f, 1.0f, // c1
0.5f, -0.5f, 0.0f, // v2
0.0f, 0.0f, 1.0f, 1.0f, // c2
};
GLushort indices[3] = { 0, 1, 2 };
glViewport(0, 0, myesContext->width, myesContext->height);
glClear(GL_COLOR_BUFFER_BIT);
glUseProgram(userData->programObject);
DrawPrimitiveWithVBOsMapBuffers(myesContext, 3, vertices,
sizeof(GLfloat)*(VERTEX_POS_SIZE+VERTEX_COLOR_SIZE),
3, indices);
}
参考
1. glGenBuffers与glBindBuffer理解
https://blog.csdn.net/qq_36383623/article/details/85123077
2. OpenGL - why is GL_ELEMENT_ARRAY_BUFFER for indices?
https://stackoverflow.com/questions/15094433/opengl-why-is-gl-element-array-buffer-for-indices
3. glVertexAttribPointer — define an array of generic vertex attribute data
https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/glVertexAttribPointer.xhtml
4. 高级数据
https://learnopengl-cn.readthedocs.io/zh/latest/04%20Advanced%20OpenGL/07%20Advanced%20Data/
