当前位置: 首页 > news >正文

OpenGL-ES 学习(14) ----顶点指定和基本图元的绘制

目录

      • 本节概述
      • 顶点的指定
        • 常量顶点属性和顶点数组
        • 顶点数组
        • 顶点属性的定义
        • Shader 中声明顶点属性变量
        • 顶点属性的绑定
      • 基本图元绘制
        • 基本图元
        • 三角形
        • 直线
        • 绘制图元的API

本节概述

绘制图形的第一步就是指定顶点坐标,可以每个顶点指定,也可以是用于所有顶点的常量,或者直接用顶点数组指定,OpenGL-ES 标准实现必须支持最少 16 个顶点属性;
顶点着色器处理图元顶点之后进入图元装配阶段,在这个阶段执行裁剪,透视分割和视口变换,往后会进入光栅化阶段;
光栅化是指将图元转换为一组二维片段的过程,这些片段最后会由FragmentShader 处理

顶点的指定

常量顶点属性和顶点数组

常量顶点属性对一个图元的所有顶点都相同,所以对图元的所有顶点都只需要指定一个值,可以用下面的函数指定:

顶点指定函数说明
glVertexAttrib1f加载顶点 (x,0.0,0.0,1.0)
glVertexAttrib2f加载顶点 (x,y,0.0,1.0)
glVertexAttrib3f加载顶点 (x,y,z,1.0)
glVertexAttrib4f加载顶点 (x,y,z,w)
glVertexAttrib1fv加载顶点 (x,0.0,0.0,1.0)
glVertexAttrib2fv加载顶点 (x,y,0.0,1.0)
glVertexAttrib3fv加载顶点 (x,y,z,1.0)
glVertexAttrib4fv加载顶点 (x,y,z,w)

常量顶点属性提供标量/向量等价的功能

顶点数组

顶点数组指定每个顶点的属性,是保存在应用程序地址空间的缓冲区,使用下面的函数指定

函数说明
glVertexAttribPointer指定顶点数组
glVertexAttribIPointer指定顶点数组

glVertexAttribPointer (GLuint index, GLint size, GLenum type, GLboolean normalized, GLsize stride, const void *pointer)

  • GLuint index 指定通用顶点属性索引,从0到 最大支持索引数 -1
  • GLint size 所指定的分类数量 有效值 1~4
  • GLenum type 数据格式
  • GLboolean normalized 表示非浮点类型在转换为浮点数时是否应该规范化
  • GLsize stride 表示两个顶点之间的位移,如果stride 为 0,表示按照顺序存储
  • const void *pointer 顶点数据缓冲区的指针

重点关注的是

  • GLuint index : 和Shader 中的指定的 layout 一致
  • void *pointer : 指向顶点的指针
顶点属性的定义

定义顶点属性的坐标并且关联到一个属性索引上,
对应的代码:

GLfloat color[4] = { 1.0f, 0.0f, 0.0f, 1.0f };
// 3 vertices, with (x,y,z) per-vertex
GLfloat vertexPos[3 * 3] = {0.0f,  0.5f, 0.0f, // v0-0.5f, -0.5f, 0.0f, // v10.5f, -0.5f, 0.0f  // v2
};
glViewport ( 0, 0, esContext->width, esContext->height );
glClear ( GL_COLOR_BUFFER_BIT );
glUseProgram ( userData->programObject );//注意下面的顶点定义方式
glVertexAttribPointer ( 0, 3, GL_FLOAT, GL_FALSE, 0, vertexPos );
glEnableVertexAttribArray ( 0 );
//常量的顶点属性,表示每个顶点的 color 都是上面定义的
glVertexAttrib4fv ( 1, color );glDrawArrays ( GL_TRIANGLES, 0, 3 );
glDisableVertexAttribArray ( 0 );
Shader 中声明顶点属性变量

VertexShader 中,使用 in 限定符声明为顶点属性,顶点属性变量也可以包含一个布局限定符,提供属性索引,示例如下:
layout(location = 0) in vec4 a_position
layout(location = 1) in vec2 a_texcoord
layout(location = 2) in vec3 a_normal

属性变量不能声明为数组或者结构,在 Vertex Shader 中定义的顶点属性是只读变量,不能修改
OpenGL-ES3.0 实现支持 GL_MAX_VERTEX_ATTRIBS 四分量向量顶点属性,声明为标量,二分量,三分量, 的顶点属性都会被当做一个四分量向量属性计算;
与编译器进行自动打包的统一变量和 Vertex Shader Input/outout 不同,属性不进行打包
查询当前活动顶点的数量的函数:
glGetActiveAttrib

顶点属性的绑定

通过通用属性索引的方法映射到 Vertex Shader 中声明的对应属性变量;这种映射使对应的顶点数据可以读入Vertex Shader 中正确的属性变量;
可以使用下面三种方法将通用顶点属性映射到Vertex Shader 中:

  • 索引在 Vertex Shader 源码中用 layout 指定
  • OpenGL-ES 3.0 将通用顶点属性索引绑定到属性名称
  • 应用程序可以将顶点属性索引绑定到属性名称

第一种方法最简单,但是某些时候,第二,三种方法更合适,使用下面的函数实现:
glBindAttribLocation (GLuint program, GLuint index, const GLchar 、*name);
直接将索引绑定到 Vertex Shader 的属性变量上

基本图元绘制

基本图元

OpenGL-ES 可以绘制三角形、直线、点这个三种基本图元

三角形

三角形的主要类型有 GL_TRIANGLESGL_TRIANGLES_STRIPGL_TRIANGLE_FAN

三角形.png

GL_TRIANGLES 绘制一系列单独三角形,总共绘制 n/3 个三角形
GL_TRIANGLES_STRIP 绘制一系列相互连接的三角形,总共绘制 n-2 个三角形
GL_TRIANGLES_FAN 总共绘制 n-2 个三角形

直线

直线图元类型有 GL_LINESGL_LINES_STRIPGL_LINES_LOOP
线段.png

GL_LINES:绘制一系列类不相连的线段,总共绘制n/2条线段
GL_LINES_STRIP:绘制一系列相连的线段,总共绘制n-1条线段
GL_LINES_LOOP:和GL_LINES_STRIP类型总共绘制n条线段

绘制图元的API

OpenGL ES 中绘制基本图元共有5个API

OpenGL-ES API说明
glDrawArrays常用
glDrawElements常用
glDrawRangeElements常用
glDrawArraysInstancedNA
glDrawElementsInstancedNA

void glDrawArrays( GLenum mode, GLint first, GLsizei count);
mode: 要绘制的图元类型
first:顶点数组中的顶点数组索引(顶点位置数组的偏移量)
count: 指定要绘制的顶点数量,如果选择 GL_TRIANGLES,那么顺次每三个顶点构成一个三角形

注意第二个值 fist,表示在顶点数组中的位置
draweelements.png

void glDrawElements( GLenum mode, GLsizei count, GLenum type,const void * indices);

void glDrawRangeElements(GLenum mode,GLuint start,GLuint end,GLsizei count,GLenum type, const void * indices)

mode: 要绘制的图元类型
start:顶点数组中的最小数组索引(仅glDrawRangeElements)
end:顶点数组中的最大数组索引(仅glDrawRangeElements)
count: 要绘制的顶点数量,如果如果选择GL_TRIANGLES,那么顺次每三个顶点构成一个三角形
type: 指定 indices(下面一个参数)中保存的元素索引类型,有效值为:

  • GL_UNSIGNED_BYTE
  • GL_UNSIGNED_SHORT
  • GL_UNSIGNED_INT
    indices: 指向一段存储区,缓存在顶点数组中顶点的偏移
    比如下面
GLfloat vVertices[] = { -0.5f,  0.5f, 0.0f,  // Position 00.0f,  0.0f,        // TexCoord 0 -0.5f, -0.5f, 0.0f,  // Position 10.0f,  1.0f,        // TexCoord 10.5f, -0.5f, 0.0f,  // Position 21.0f,  1.0f,        // TexCoord 20.5f,  0.5f, 0.0f,  // Position 31.0f,  0.0f         // TexCoord 3
};
GLushort indices[] = { 0, 1, 2, 0, 2, 3 };
glDrawElements(GL_TRIANGLES, 3, GL_UNSIGNED_SHORT, indices);

这里的 indices 就分辨表示上面 vVertices 顶点,顶点0,1,2构成一个三角形,顶点0,2,3构成一个三角形

static void Draw(ESContext *esContext)
{UserData *userData = esContext->userData;//R G B AGLfloat color[4] = { 1.0f, 1.0f, 0.0f, 1.0f };// 3 vertices, with (x,y,z) per-vertex//绘制一个六边形 共六个顶点GLfloat vertexPos[6*3*3] ={1.0f,  0.0f, 0.0f, 0.5f,  1.0f, 0.0f,0.0f,  0.0f, 0.0f,-0.5f,  1.0f, 0.0f,0.5f,  1.0f, 0.0f,0.0f,  0.0f, 0.0f,-0.5f,  1.0f, 0.0f,-1.0f,  0.0f, 0.0f,0.0f,  0.0f, 0.0f,-1.0f,  0.0f, 0.0f,-0.5f,  -1.0f, 0.0f,0.0f,  0.0f, 0.0f,-0.5f,  -1.0f, 0.0f,0.5f,  -1.0f, 0.0f,0.0f,  0.0f, 0.0f,0.5f,  -1.0f, 0.0f,1.0f,  0.0f, 0.0f,0.0f,  0.0f, 0.0f,};glViewport(0, 0, esContext->width, esContext->height);glClear(GL_COLOR_BUFFER_BIT);glUseProgram(userData->programObject);glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, vertexPos);glEnableVertexAttribArray(0);glVertexAttrib4fv(1, color);for (int i = 0; i < 3 * 2; i++) {glDrawArrays(GL_TRIANGLES, i*3, 3);}//作用和上面的循环是一致的/*glDrawArrays(GL_TRIANGLES, 0, 3*6);*/glDisableVertexAttribArray(0);
}

相关文章:

  • 小米MiMo:7B模型逆袭AI大模型战场的技术密码
  • 【QNX+Android虚拟化方案】137 - msm-5.4 Kernel U盘 插入中断、枚举、匹配完整流程详解
  • 探秘数据结构:构建高效算法的灵魂密码
  • 【Android】四大组件之ContentProvider
  • POI从入门到上手(三)-轻松完成EasyExcel使用,完成Excel导入导出.
  • Node.js心得笔记
  • 数据库基本概念:数据库的定义、特点、分类、组成、作用
  • llamafactory-cli webui启动报错TypeError: argument of type ‘bool‘ is not iterable
  • Python10天冲刺-函数进行详细的性能分析
  • ES6-Set-Map对象小记
  • KDD 2025 | (8月轮)时间序列(Time Series)论文总结
  • PostgreSQL安装部署
  • 使用HunyuanVideo搭建文本生视频大模型
  • 【2025五一数学建模竞赛B题】 矿山数据处理问题|建模过程+完整代码论文全解全析
  • qemu(4) -- qemu-system-arm使用
  • 从股指到期指,哪些因素影响基差?
  • Selenium3自动化测试,Python3测试开发教程视频测试用例设计
  • 学习与规划的融合Dyna-Q:python从零实现
  • 【Github仓库】Learn-Vim随笔
  • Redis ⑧-RESP | 渐进式遍历 | 数据库管理
  • 魔都眼|买买买,老铺黄金新店开业被挤爆:有人排队5小时
  • 澎湃读报丨解放日报8个版聚焦:牢记嘱托,砥砺奋进
  • 解放日报:“北斗七星”列阵,AI群星闪耀
  • 新型算法助力听障人士听得更清晰
  • 零食连锁鸣鸣很忙递表港交所:去年营收393亿元,门店超1.4万家,净利润率2.1%
  • 东风着陆场近日气象条件满足神舟十九号安全返回要求