5、OpenGL初探之OpenGL渲染基础(OpenGL图元/固定管线下的着色器)

初识OpenGL的开发者需要先要学会固定管线的渲染流程和思路,为之后学习可编程管线以及编写GLSL着色器程序打好基础,固定管线和可编程管线的区别只在于着色器程序的区别,其他的业务逻辑基本一致,好了,解释完了,开始上干货概念部分

1、OpenGL固定管线下的多种存储着色器介绍
2、OpenGL图元
3、OpenGL点/线/三角形
4、OpenGL工具类GLBatch的使用

一、OpenGL固定管线的存储着色器介绍


固定管线下,我们需要使用到一个类GLShaderManager(着色器管理者),下面我们来学习一下GLShaderManager的初始化

//定义全局变量
GLShaderManager shaderManager;

//在OpenGL环境配置完成后开始初始化
shaderManager.InitializeStockShaders();

介绍完GLShaderManager初始化之后,我们来学习一下固定管线下的存储着色器,使用固定管线下的存储着色器的时候,你不需要知道哪些工作是顶点着色器来完成,哪些工作是由片元着色器完成,该使用哪个通道进行传值,你只需要学会使用对应的API把需要的入参传入进去就行了,剩下的交给它,它已经封装好了这些功能。

先说明一下,在OpenGL里面我们使用任何固定管线,都是使用这一个函数,不同的着色器类型,仅仅是对应着色器的参数不相同而已

shaderManager.UseStockShader(<#GLT_STOCK_SHADER nShaderID, ...#>)

接下来我们开始着色器的学习:

1、单元着色器

使用场景:绘制默认OpenGL坐标系(-1,1)下的图形,图形的所有片段都会以一种颜色填充

API函数:

GLShaderManager::UserStockShader(GLT_SHADER_IDENTITY,GLfloat vColor[4]);

参数1:存储着色器种类-单元着色器GLT_SHADER_IDENTITY
参数2:一维颜色数组,下标分别对应RGBA

2、平面着色器

使用场景:在绘制图形时,可以应用变换,例如仿射变换(投影/模型)变化

API函数:

GLShaderManager::UserStockShader(GLT_SHADER_FLAT,GLfloat mvp[16],GLfloat vColor[4]);

参数1:存储着色器种类-平面着色器GLT_SHADER_FLAT
参数2:允许变化的4*4矩阵
参数3:一维颜色数组,下标分别对应RGBA

3、上色着色器

使用场景:在绘制图形时,可以应用变化(仿射变换,例如投影/模型变化)颜色将会平滑的插入到顶点之间称为平滑着色.

API函数:

GLShaderManager::UserStockShader(GLT_SHADER_SHADED,GLfloat mvp[16]);

参数1:存储着色器种类-上色着色器GLT_SHADER_SHADED
参数2:允许变化的4*4矩阵

4、默认光源着色器

使用场景:在绘制图形时,可以应用变化(仿射变换,例如投影/模型变化)这种着色器会使绘制的图形产生阴影和光照效果(平行光)。

API函数:

GLShaderManager::UserStockShader(GLT_SHADER_DEFAULT_LIGHT,GLfloat mvMatrix[16],GLfloat pMatrix[16],GLfloat vColor[4]);

参数1:存储着色器种类-默认光源着色器GLT_SHADER_DEFAULT_LIGHT
参数2:模型4*4矩阵
参数3:投影4*4矩阵
参数4:颜色值(注意:绘制这个图形的颜色,不是光的颜色)

5、点光源着色器

使用场景:在绘制图形时,可以应用变化(仿射变换,例如投影/模型变化)这种着色器会使绘制的图形产生阴影和光照效果(平行光)。它与默认光源着色器非常类似,区别只是光源的位置可能是特定的。

API函数:

GLShaderManager::UserStockShader(GLT_SHADER_POINT_LIGHT_DIEF,GLfloat mvMatrix[16],GLfloat pMatrix[16],GLfloat vLightPos[3],GLfloat vColor[4]);

参数1:存储着色器种类-点光源着色器GLT_SHADER_POINT_LIGHT_DIEF
参数2:模型4*4矩阵
参数3:投影4*4矩阵
参数4:点光源的位置(x,y,z)因为光源不需要w(奇次坐标,通俗称缩放因子)
参数5:漫反射颜色值

6、纹理替换矩阵着色器

使用场景:在绘制图形时,可以应用变化(投影/模型变化)这种着色器通过给定的模型视图投影矩阵.使用纹理单元来进行颜色填充,其中每一个像素点的颜色值是从纹理中获取.

API函数:

GLShaderManager::UserStockShader(GLT_SHADER_TEXTURE_REPLACE,GLfloat mvMatrix[16],GLint nTextureUnit);

参数1:存储着色器种类-纹理替换矩阵着色器GLT_SHADER_TEXTURE_REPLACE
参数2:模型4*4矩阵
参数3:纹理单元

7、纹理调整着色器

使用场景:在绘制图形时,可以应用变化(投影/模型变化)这种着色器通过给定的模型视图投影矩阵.着色器将一个基本色乘以一个取自纹理单元nTextureUnit的纹理,将颜色与纹理进行颜色混合后才填充到片段中.

API函数:

GLShaderManager::UserStockShader(GLT_SHADER_TEXTURE_MODULATE,GLfloat mvMatrix[16],GLfloat vColor[4],GLint nTextureUnit);

参数1:存储着色器种类-纹理调整着色器GLT_SHADER_TEXTURE_MODULATE
参数2:模型4*4矩阵
参数3:颜色值
参数4:纹理单元

8、纹理光源着色器

使用场景:在绘制图形时,可以应用变化(投影/模型变化)这种着色器通过给定的模型视图投影矩阵.着色器将一个纹理通过漫反射照明计算进行调整(相乘).

API函数:

GLShaderManager::UserStockShader(GLT_SHADER_TEXTURE_POINT_LIGHT_DIEF,G Lfloat mvMatrix[16],GLfloat pMatrix[16],GLfloat vLightPos[3],GLfloat vBaseColor[4],GLint nTextureUnit);

参数1:存储着色器种类-纹理光源着色器GLT_SHADER_TEXTURE_POINT_LIGHT_DIEF
参数2:模型4*4矩阵
参数3:投影4*4矩阵
参数4:点光源的位置
参数5:颜色值(几何图形的基本色)
参数6:纹理单元

二、OpenGL基本图元


OpenGL常用的7种基本图元及图元描述分别如下表

OpenGL7种图元.png

其中最受欢迎的是三角形GL_TRIANGLES,因为三角形理论上是可以绘制任何图形的。

下面是这6种的示例图(备注:GL_POINTS点的就不画了)

OpenGL图元图示.png

三、OpenGL点/线/三角形及三角形的环绕方式


1、最简单也是最常用的方法glPointSize

glPointSize(<#GLfloat size#>);

参数1:表示点的大小

例如:
glPointSize(4.0f);

2、设置点的大小范围和点与点之间的间隔,获取点大小范围和最小步长

GLfloat sizes[2] = {2.0f, 8.0f};
GLfloat step = 1.0f;
    
glGetFloatv(GL_POINT_SIZE_RANGE, sizes);
glGetFloatv(GL_POINT_SIZE_GRANULARITY, &step);

3、通过使用程序点大小模式来设置点的大小,这种模式下允许我们通过编程在顶点着色器或者几何着色器中设置点的大小。着色器内建变量gl_PointSize,并且可以在着色器源码中直接写.

glEnable(GL_PROGRAM_POINT_SIZE);

gl_PointSize = 5.0

4、设置线段宽度

glLineWidth(<#GLfloat width#>)

参数1:线段宽度

例如:
glLineWidth(3.f);

5、对于OpenGL光栅化最受欢迎的就是三角形,3个顶点就能构成一个三角形,三角形的类型(形状)取决于3个顶点的连接方式和顶点坐标,例如并不是所有的三角形都是正三角形,三角形的连接方式是GL_TRIANGLES,可以参考图元那张图中的GL_TRIANGLES

6、三角形的环绕方式

参考上面OpenGL图元那张图中的GL_TRIANGLES

在绘制第一个三⻆角形时,线条是按照从A0->A1->A2->A0连接起来的,形成一个闭合三角形。 三角形A0A1A2这个是沿着顶点逆时针方向,而三角形A3A4A5这个三角形是颜色顶点顺时针方向的。这种顺序与方向结合来指定顶点的⽅式称为环绕。

默认情况下,OpenGL认为具有逆时针方向环绕的多边形为正面.这就意味着三角形A0A1A2是正面,而三角形A3A4A5这个是反面.

7、三角形带及三角形带的优点

对于很多表面或者形状而言,我们会需要绘制几个相连的三角形. 这时我们可以使用GL_TRIANGLE_STRIP 图元绘制⼀串串相连的三角形,从而节省大量的时间.如上面OpenGL图元图片中的GL_TRIANGLE_STRIP

三角形带的优点:

三角形带的优点:

1、用前3个顶点指定第1个三角形之后,对于接下来的每一个三角形,只需要再指定1个顶点。需要绘制⼤量的三角形时,采用这种⽅法可以节省大量的程序代码和数据存储空间

2、提供运算性能和节省带宽。更少的顶点意味着数据从内存传输到图形卡的速度更快,并且顶点着色器需要处理的次数也更少了。

8、三角形扇

对于很多表⾯或者形状而言,我们会需要绘制几个相连的三⻆形. 这时我们可以使⽤GL_TRIANGLE_FAN 图元绘制⼀组围绕⼀个中心点相连的三角形,如上面OpenGL图元图片中的GL_TRIANGLE_FAN

四、OpenGL工具类GLBatch的常用API的使用


GLBatch 俗称批次类,是在GLTools中包含的一个简单的容器类.常用的API如下:

1、设置图元,顶点数和纹理坐标(纹理坐标可选)

void GLBatch::Begain(GLeunm primitive,GLuint nVerts,GLuint nTexttureUnints = 0);

参数1:图元
参数2:顶点数
参数3:一组或者两组纹理坐标(可选参数)

2、复制顶点数据(一个由3分量x,y,z顶点组成的一维数组)

void GLBatch::CopyVerterxData3f(GLfloat *vVerts);

参数1:3分量顶点数组,代表(x,y,z)

3、复制表面法线数据

void GLBatch::CopyNormalDataf(GLfloat *vNorms);

参数1:法线

4、复制颜色数据

void GLBatch::CopyColorData4f(GLfloat *vColors);

参数1:RGBA颜色值数组

5、复制纹理坐标数据

void GLBatch::CopyTexCoordData2f(GLFloat *vTextCoords, GLuint uiTextureLayer);

6、结束数据复制

void GLBatch::End(void);

7、绘制图形

void GLBatch::Draw(void);

下一节,我们会使用固定存储着色器做一下多种图元组合实现,今天就到这里啦~

溪浣双鲤的技术摸爬滚打之路

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,738评论 5 472
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,377评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,774评论 0 333
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,032评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,015评论 5 361
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,239评论 1 278
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,724评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,374评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,508评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,410评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,457评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,132评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,733评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,804评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,022评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,515评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,116评论 2 341

推荐阅读更多精彩内容