OpenGL ES学习 - 着色器

GLSL
前一篇主要是学习OpenGL的基本使用以及完成我们的Hello Triangle项目。在里面我们配置了顶点和片段着色器,对于Hello Triangle项目来说这两个着色器完全够用。但如果需要处理更为复杂的绘制,显然这两个基本着色器是远远不行的,所以这篇文章主要更深入着色器程序,对着色器程序进行更完善的配置。
前面我们已经说过在Xcode中如何编写着色器源码了,在新建空文件的时候我们保存的后缀为.glsl。没错,着色器是使用一种叫GLSL的类C语言完成的。GLSL是为图形计算量身定制的,它包含一些针对向量和矩阵操作的有用特性。这是前面使用到的顶点着色器源码

attribute vec4 Position;
void main(void) {
gl_Position = Position;
}

第一行定义输入变量也叫顶点属性,这是一个4分量的向量Position。其实我们能声明的顶点属性是有上限的,它一般由硬件来决定。OpenGL确保至少有16个包含4分量的顶点属性可用。可以使用glGetIntegerv来输出上限数:

 int numAttributs;
 glGetIntegerv(GL_MAX_VERTEX_ATTRIBS, &numAttributs);
 NSLog(@"----numAttributs:%d",numAttributs);

这里输出的是----numAttributs:16,表明能声明的顶点属性上限为16个,大部分情况下是够用了。

数据类型
和其他编程语言一样,GLSL有数据类型可以来指定变量的种类,GLSL中包含C等其它语言大部分的默认基础数据类型:Int、float、double、uint和bool,GLSL也有两种容器类型,分别是向量(Vector)和矩阵(Matrix)。

向量(Vector)
GLSL中的向量是一个可以包含有1、2、3或者4个分量的容器,分量的类型可以是前面默认基础类型的任意一个。它们可以是下面的形式(n代表分量的数量):

vecn 包含n个float分量的默认向量
bvecn 包含n个bool分量的默认向量
ivecn 包含n个int分量的默认向量
uvecn 包含n个unsigned int分量的默认向量
dvecn 包含n个double分量的默认向量

大多数时候我们使用vecn,因为float足够满足大多数要求了。
一个向量的分量可以通过vec.x这种方式获取,这里x是指这个向量的第一个分量。你可以分别使用.x、.y、.z和.w来获取它们的第1、2、3、4个分量。GLSL也允许你对颜色使用rgba,或是对纹理坐标使用stpq访问相同的分量。 向量这一数据类型也允许一些有趣而灵活的分量选择方式,叫做重组:

vec1 pos1;
vec2 pos2 = pos1.xx  // 可以使用pos1的x分量重组一个vec2的pos2
vec4 pos3 = pos2.xyxy // 使用pos2的x和y分量重组一个4分量的pos3

你可以使用上面4个字母任意组合来创建一个和原来向量一样长的(同类型)新向量,只要原来向量有那些分量即可;然而,你不允许在一个vec2向量中去获取.z元素,例如上面的pos2里面的没有z元素的。

除了上面的重组,我们还可以这样操作:

vec2 pos4 = vec2(0.5,0.5);
vec3 pos5 = vec3(pos4,1.0);
vec4 pos6 = vec4(pos5.xyz,1.0);

//向量是一种灵活的数据类型,我们可以把用在各种输入和输出上。

Uniform

 precision mediump float;
 void main(void) {
 gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
 }

在前面的程序中,我们是在片段着色器中定义的最终输出颜色为vec4(1.0, 0.0, 0.0, 1.0)。这里就有个问题,如果我们想从应用程序中直接给片段着色器设置颜色该怎么做。
OpenGL显然早已解决了这个问题。在OpenGL中存在一种从CPU中的应用向GPU中的着色器发送数据的方式,但凡定义在着色器程序中的属性前面加上Uniform修饰,这个属性就是一个全局常量,可以存储着色器所需要的各种数据。另外uniform 的空间被顶点着色器和片段着色器分享。也就是说顶点着色器和片段着色器被链接到一起进入项目,它们分享同样的uniform。因此一个在顶点着色器中声明的uniform,相当于在片段着色器中也声明过了。当应用程序装载uniform 时,它的值在顶点着色器和片段着色器都可用。在链接阶段,链接器将分配常量在项目里的实际地址,那个地址是被应用程序使用和加载的标识。

下面我们在片段着色器中声明一个uniform属性,并在着色器主函数中设置最终输出颜色为定义好的uniform:

precision mediump float;
uniform vec4 color;
void main(void) {
gl_FragColor = color;
}

//现在这个uniform现在还是空的;我们还没有给它添加任何数据,这里需要注意如果你声明了一个uniform却在GLSL代码中没用过,
编译器会静默移除这个变量,导致最后编译出的版本中并不会包含它,这可能导致几个非常麻烦的错误

现在我们需要在应用中找到这个uniform所在的位置然后对其进行更新:

// 获取uniform的位置值,如果glGetUniformLocation返回-1就代表没有找到这个位置值。
  int vertexColorLoc = glGetUniformLocation(programHandle, "color");
 
  glUseProgram(programHandle);
 
 // 然后我们可以通过glUniform4f函数设置uniform值。
 glUniform4f(vertexColorLoc, 0.5f, 1.0f, 0.5f, 1.0f);

这里有一点需要注意,查询uniform地址不要求之前使用过着色器程序,但是更新一个uniform之前你必须先使用程序(调用glUseProgram),因为它是在当前激活的着色器程序中设置uniform的,所以在设置uniform之前我们还需要调用glUseProgram函数激活着色器程序
这样运行的话我们就可以看到颜色不一样的图形了。

多个属性
在前面的教程中,我们了解了如何填充VBO、配置顶点属性指针以及如何把它们都储存到一个VAO里。这次,我们同样打算把颜色数据加进顶点数据中。我们将把颜色数据添加为3个float值至vertices数组。我们将把三角形的三个角分别指定为红色、绿色和蓝色:

const GLfloat vertices[] = {
   //位置                 // 颜色
  0.5f, -0.5f, 0.0f,  1.0f,0.0f,0.0f // 右上角
 -0.5f, -0.5f, 0.0f,  0.0f,1.0f,0.0f // 右下角
  0.0f,  0.5f, 0.0f , 0.0f,0.0f,1.0f // 左下角
 };

定义好顶点数组,我们还需要修改一下顶点着色器源码,由于新增了颜色值,所以在顶点着色器中我们需要定义一个输入属性来接受顶点数组中传进来的颜色数据。并且还需要定义一个输出属性,用来传递颜色值给片段着色器。所以现在的顶点着色器源码如下:

attribute vec4 Position; 
attribute vec4 color;

varying vec4 aColor; // 向片段着色器输出一个颜色

void main(void) {
    gl_Position = Position;
    aColor = color; // aColor设置为我们从顶点数据那里得到的输入颜色
}

再看下片段着色器:

precision mediump float;

varying lowp vec4 aColor; // 接受顶点着色器输出的颜色

void main(void) {
    
    gl_FragColor = aColor; // 设置最终颜色为接受的颜色
}

配置完顶点着色器和片段着色器,接下来需要重新设置顶点数据格式了,因为我们添加了另一个顶点属性,并且更新了VBO的内存,更新后的VBO内存中的数据现在看起来像这样:

相比较只有顶点坐标属性的时候,VBO内存中的每个顶点数据中新增了颜色值,知道了现在的数据布局,我们就可以使用glVertexAttribPointer函数更新顶点格式:

// 位置属性
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6*sizeof(float), 0);
glEnableVertexAttribArray(0);

// 颜色属性
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6*sizeof(float), (void*)(3 * sizeof(float)));
glEnableVertexAttribArray(1);

这里需要注意的是第四个参数:由于我们现在有了两个顶点属性,所以不得不重新计算连续顶点属性之间的偏移量,为获得数据队列中下一个属性值(比如位置向量的下个x分量)我们必须向右移动6个float,其中3个是位置值,另外3个是颜色值。这使我们的步长值为6乘以float的字节数(=24字节)。

最后一个参数是指定第一个组件在数组的第一个顶点属性中的偏移量,上图可以看出位置顶点属性在前,所以它的偏移量是0。颜色属性紧随位置数据之后,所以偏移量就是3 * sizeof(float),用字节来计算就是12字节。设置好之后运行程序应该是下图这样:

这个图片可能不是你所期望的那种,因为我们只提供了3个颜色,而不是我们现在看到的大调色板。这是在片段着色器中进行的所谓片段插值(Fragment Interpolation)的结果。当渲染一个三角形时,光栅化(Rasterization)阶段通常会造成比原指定顶点更多的片段。光栅会根据每个片段在三角形形状上所处相对位置决定这些片段的位置。

基于这些位置,它会插值(Interpolate)所有片段着色器的输入变量。比如说,我们有一个线段,上面的端点是绿色的,下面的端点是蓝色的。如果一个片段着色器在线段的70%的位置运行,它的颜色输入属性就会是一个绿色和蓝色的线性结合;更精确地说就是30%蓝 + 70%绿。
这正是在这个三角形中发生了什么。我们有3个顶点,和相应的3个颜色,从这个三角形的像素来看它可能包含50000左右的片段,片段着色器为这些像素进行插值颜色。如果你仔细看这些颜色就应该能明白了:红首先变成到紫再变为蓝色。片段插值会被应用到片段着色器的所有输入属性上。

参考《OpenGL ES 3.0编程指南》

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