从零开始OpenGLES之旅--shading language
来源:互联网 发布:淘宝专业版全屏海报 编辑:程序博客网 时间:2024/05/29 07:19
从零开始自己在ios上开发OpenGLES之旅,先了解opengles的基础原理,之后再加入GLKit来改进编程的效率,由浅入深一步步来。
Shading Language
PART1:
前言:(REFERENCE:http://blog.csdn.net/nogodoss/article/details/27531369)
Apple's OpenGL系列与“深入了解OpenGL”系列分开,意在想把一些基础性的东西能说明得更透彻。“深入了解OpenGL”系列主要讲述OpenGL基础性架构以及基于OpenGL的图形处理流水线和一些常用的绘图方法。“Apple's OpenGL”系列将讲解更现代化的OpenGL使用方式——利用目前现代GPU的可编程单元对OpenGL流水线的某些阶段以编程的方式进行实现。
OpenGL3.3以及更高版本将OpenGL本来与顶点着色器(Vertex Shader)和片断着色器(Fragment Shader)所对应的固定功能流水线部分的接口全都剔除掉了,取而代之的是这些着色器配置相关的接口。
OpenGL3.3又添加了几何着色器(Geometry Shader)。
目前最新的OpenGL4.1又添加了Tessellation(细分曲面),这里又有几个着色器被添加进去。
OpenGL在最近两年里发展迅猛,一下子就从3.3跳到了4.1。
我们目前所使用的OpenGL Shading Language的版本是1.20。
好。下面我们将切入正题。这里,我们将正式对着色器进行讲解。
顶点着色器取代的是OpenGL固定功能流水线中对每个顶点的变换阶段。这部分的操作包括:顶点变换(投影变换、视图模型变换)、法线变换与规格化、纹理坐标生成、纹理坐标变换、光照、颜色材质应用。
下面看一个简单的Vertex Shader的代码:
//
// Shader.vsh
// GLSLTest
//
// Created by Zenny Chen on 4/11/10.
// Copyright GreenGames Studio 2010. All rights reserved.
//
attributevec4position;
attributevec4color;
varying vec4 colorVarying;
uniform mat4 translate;
void main()
{
gl_Position = position * translate; //mat4(0.816, 0.433, 0.0, 0.0, -0.5, 0.616, 0.0, 0.0, 0.0, 0.0, -0.5, 0.0, 0.0, 0.0, -0.5, 1.0);
colorVarying = color;
}
最上面两个attribute变量的数据是从主机端输入。attribute在后期Shader Language版本中被废弃,取而代之的是in关键字。主机端通过以下接口把相关数据与vertex shader所对应的attribute变量进行绑定:
复制代码
void glBindAttribLocation( GLuint program,
GLuint index,
const GLchar * name);
program:你已经构建好的shader程序
index:自己定义的一个id,与下面的name进行绑定
name:指定顶点着色器中所要绑定的变量名
在我们的主机端程序中,与上述position变量进行绑定的代码为:
// attribute index
enum{
ATTRIB_VERTEX,
ATTRIB_COLOR,
NUM_ATTRIBUTES
};
glBindAttribLocation(program, ATTRIB_VERTEX, "position");
与color绑定的代码为:
glBindAttribLocation(program, ATTRIB_COLOR, "color");
这里要注意的是,顶点着色器是可以与主机端应用进行直接交互的。而片断着色器则不能与主机端程序进行直接交互。因此,我们可以把片断着色器所要用到的数据先通过顶点着色器输入进来,然后通过varying属性传给片断着色器(Fragment Shader)。注意,在以后版本中varying关键字也被废弃。取而代之的是在顶点着色器部分用out关键字,而在片断着色器中相应地使用in关键字。
因此,attribute不仅仅是指顶点属性,也可以是颜色属性或用户自定义的一些变量,而我们用主机端的数据与这些attribute变量绑定时,都用glBindAttribLocation这一个接口。
而我们通过以下接口把主机端的数据发送给Shader端:
复制代码
void glVertexAttribPointer( GLuint index,
GLint size,
GLenum type,
GLboolean normalized,
GLsizei stride,
const GLvoid * pointer);
index:我们刚才所指定的attribute变量所绑定的id。
size:指定每个元素有多少分量,可以是1,2,3,4
type:指定数据类型
normalized:指定定点数据是否被规格化
stride:相邻两个元素之间的跨度(字节数)
pointer:指向数组首地址
下面将给出示例代码:
首先定义顶点坐标和颜色值:
static const GLfloat squareVertices[] = {
-0.5f, -0.5f, 0.0f,
0.5f, -0.5f, 0.0f,
-0.5f, 0.5f, 0.0f,
0.5f, 0.5f, 0.0f
};
static const GLubyte squareColors[] = {
255, 255, 0, 255,
0, 255, 255, 255,
0, 0, 0, 0,
255, 0, 255, 255,
};
然后,下面就是分别传送顶点坐标数据和颜色数据:
// Update attribute values
glVertexAttribPointer(ATTRIB_VERTEX, 3, GL_FLOAT, 0, 0, squareVertices);
glEnableVertexAttribArray(ATTRIB_VERTEX);
glVertexAttribPointer(ATTRIB_COLOR, 4, GL_UNSIGNED_BYTE, 1, 0, squareColors);
glEnableVertexAttribArray(ATTRIB_COLOR);
下面附赠完整的工程。
OpenGL3_2.zip包是OS X Lion(10.7)下,对OpenGL 3.2 Core Profile的基本使用样例。
下面谈谈uniform变量。
uniform变量与attribute类似,都是通过主机端传递到shader,而且它们都不能在Shader端被修改。但是,attribute变量数据依赖于glDrawArray等绘制函数所提供的顶点个数,并且类型不能是矩阵类型,而uniform变量类型可以非常灵活,你甚至能通过uniform block定义自己的数据结构。并且uniform变量能够在Vertex Shader端与Fragment Shader端共享,这点,attribute则做不到。attribute只能把数据传给varying变量才能在Fragment Shader端使用。
要使用uniform变量,首先在主机端对shader中所用的uniform变量进行绑定,通过以下接口:
GLint glGetUniformLocation( GLuint program,
const GLchar * name);
这里,name就是uniform变量在shader中的标识符。
返回的是指定的uniform变量在shader中的索引,可以认为是一个id。
在本示例程序中,对我们定义的uniform mat4 translate;变量所绑定的代码如下:
复制代码
// uniform index
enum {
UNIFORM_TRANSLATE,
NUM_UNIFORMS
};
GLint uniforms[NUM_UNIFORMS];
// get uniform locations
uniforms[UNIFORM_TRANSLATE] = glGetUniformLocation(program, "translate");
我们然后可以通过glUniform接口把指定的数据传输到shader的uniform变量中。由于glUniform的变体非常多,这里就不一一列出,详细可参考OpenGL官网的Reference Page。
这里,将主机端的数据传递到shader的uniform的代码是:
复制代码
GLfloat transformMatrix[4 * 4] = {
1.0f, 0.0f, 0.0f, 0.0f,
0.0f, 1.0f, 0.0f, 0.0f,
0.0f, 0.0f, 1.0f, 0.0f,
0.0f, 0.0f, 0.0f, 1.0f
};
// Update uniform value
glUniformMatrix4fv(uniforms[UNIFORM_TRANSLATE], 1, GL_FALSE, transformMatrix);
另外要强调一点的是,glUniformMatrix4fv是默认将数组以列向量的形式存放在矩阵中的,即对于四个向量——(a, b, c, d);(e, f, g, h);(i, j, k, l);(m, n, o, p),存放在一个数组中,构成——{ a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p },那么通过调用glUniformMatrix4fv函数,并且第三个参数传递为GL_FALSE,那么获得的矩阵其实是:[a, e, i, m; b, f, j, n; c, g, k, o; d, h, l, p]。如果要将数组中的元素作为行向量传递到uniform的矩阵中,那么第三个形参transpose应该传给它GL_TRUE值。
上面要注意的是glVertexAttribPointer接口只指定attribute属性变量每个元素的长度和类型,但并没有指定元素个数。
元素个数都是通过glDrawArrays这样的绘制接口传递的。因此如果是自己自定义的attribute变量必须注意顶点个数,元素个数必须与顶点个数挂钩。
以上程序,我们是事先计算好变换矩阵,然后在顶点着色器中直接与顶点坐标值相乘。下面将提供实时计算坐标顶点的方法。
首先我们把vertex shader改成如下形式:
//
// Shader.vsh
// GLSLTest
//
// Created by Zenny Chen on 4/11/10.
// Copyright GreenGames Studio 2010. All rights reserved.
//
attribute vec4 position;
attribute vec4 color;
varying vec4 colorVarying;
uniform mat4 translate;
uniform mat4 projection;
uniform float degree;
mat4 rotation = mat4(
0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0
);
void main()
{
float radian = radians(degree);
//gl_Position = position * translate; //mat4(0.816, 0.433, 0.0, 0.0, -0.5, 0.616, 0.0, 0.0, 0.0, 0.0, -0.5, 0.0, 0.0, 0.0, -0.5, 1.0);
mat4 transMatrix = translate;
rotation[0][0] = cos(radian);
rotation[0][1] = -sin(radian);
rotation[1][0] = sin(radian);
rotation[1][1] = cos(radian);
transMatrix = rotation * transMatrix;
transMatrix = projection * transMatrix;
gl_Position = position * transMatrix;
colorVarying = color;
}
我们可以看到,这里增加了两个uniform变量,一个用于投影变换,一个用于输入角度。另外,这里又增加了一个shader普通的全局变量rotation,并且为其初始化。
在main()函数中,我们先将输入的角度换成弧度,然后按照模型视图变换-》投影变换这一次序构成变换矩阵。最后用顶点坐标与变换矩阵相乘,获得变换后的顶点坐标值,输出给内建的gl_Position变量,这个内建属性将会被传递给光栅化阶段进行使用。
而在代码中,我们需要为添加的uniform变量进行绑定:
// uniform index
enum {
UNIFORM_TRANSLATE,
UNIFORM_PROJECTION,
UNIFORM_DEGREE,
NUM_UNIFORMS
};
GLint uniforms[NUM_UNIFORMS];
在方法中,在- (BOOL) loadShaders原来的地方添加:
// get uniform locations
uniforms[UNIFORM_TRANSLATE] = glGetUniformLocation(program, "translate");
uniforms[UNIFORM_PROJECTION] = glGetUniformLocation(program, "projection");
uniforms[UNIFORM_DEGREE] = glGetUniformLocation(program, "degree");
然后,我们再添加一个定时器相应方法:
static GLfloat degree = 0.0f;
- (void)timerFireMethod:(NSTimer*)theTimer
{
degree += 1.0f;
if(degree >= 360.0f)
degree = 0.0f;
[self setNeedsDisplay:YES];
}
接着,在- (void)prepareOpenGL方法中绑定新的uniform变量:
#if 0
my_transform(transformMatrix);
// Update uniform value
glUniformMatrix4fv(uniforms[UNIFORM_TRANSLATE], 1, GL_FALSE, transformMatrix);
#else
GLfloat translation[4 * 4] = {
1.0f, 0.0f, 0.0f, 0.0f,
0.0f, 1.0f, 0.0f, 0.0f,
0.0f, 0.0f, 1.0f, 0.0f,
// x, y, z, w
0.0f, 0.0f, -2.0f, 1.0f
};
GLfloat projection[4 * 4] = {
1.0f, 0.0f, 0.0f, 0.0f,
0.0f, 1.0f, 0.0f, 0.0f,
0.0f, 0.0f, -0.5f, 0.0f,
0.0f, 0.0f, -1.5f, 1.0f
};
glUniformMatrix4fv(uniforms[UNIFORM_TRANSLATE], 1, GL_FALSE, translation);
glUniformMatrix4fv(uniforms[UNIFORM_PROJECTION], 1, GL_FALSE, projection);
#endif
由于角度是在每个单位时间内变化的,因此我们在- (void)drawRect:(NSRect)dirtyRect方法中修改degree变量:
- (void)drawRect:(NSRect)dirtyRect {
glClear(GL_COLOR_BUFFER_BIT);
glUniform1f(uniforms[UNIFORM_DEGREE], degree);
// Draw
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
glFlush();
}
于是,我们就能看到一个旋转的正方形。
最后把着色器的编程模型再强调一下。
Shader与OpenCL的编程模型类似,都是采用SPMD(Single Program Multiple Data,即单程序多数据)的方式执行的。也就是说同一个程序对多个数据进行操作。
就拿上面4楼的顶点着色器而言,一个Shader.vsh源代码中的程序main()对我们在主机端定义的正方形的每个顶点进行执行。我们看到一个attribute变量position,你可以认为你的GPU有足够多的核心,使得对每个传进来的position(即顶点坐标值)调用同一个main函数,并且并发执行。这样,每个attribute变量(以后版本是in变量)、varying变量(以后版本是out变量)还有我们自定义的全局数据rotation都是每个顶点私有的。你可以认为rotation变量为每个顶点的操作分配相应的空间并做相同的初始化。而只有uniform变量是所有顶点共享的,它们的值对于每个顶点而言都是相同的——因为在做顶点变换操作时,uniform变量不能被修改,而它只能在主机端,在调glDrawArray等绘制接口前被修改。
当然,对于某些GPU的实现而言可能会与上述描述的过程有些出入,但是概念上用SPMD来理解更方便些。
我们看到在默认情况下,顶点的着色模型是GL_SMOOTH。在OpenGL2.1中尚能用glShadeMode()来设定着色模式,但是在iOS的OpenGL ES2.0中就不能设了。这个时候,我们可以通过采用单色来填充多边形:
我们看到上述代码,将原来的颜色数组换成了单个颜色值(红色)。由于此颜色将作用于所有顶点,这样,我们就能看到一个红色的矩形了。
PART2:
(REFERENCE:http://www.cocoachina.com/bbs/read.php?tid-33995-page-1.html)
我们现在大部分人在使用OpenGL的时候用的是古老的OpenGL固定功能流水线接口。然后,现代的GPU,包括移动GPU都具有可编程特性,并且大部分都具有统一着色单元,使得OpenCL也能实现。
那么可编程的GPU能带给我们什么好处呢?我们可以利用可编程的着色器实现局部光照,绘制更复杂的图形,实现更炫的特效等等。下面我将利用一个最最简单的例子来给出如何在Mac OS X Snow Leopard上通过XCode来创建一个OpenGL Shader的工程。
在附件中,这个工程已经能很好地工作了。这里,我们会看到一个Shaders目录。这里,我们在项目中添加这个引用时不要把它关联到你的构建目标上,即构造器不需要对它进行解析。但是要在Target中添加“拷贝文件”。方法是:在你左侧的项目管理视图中找到Targets,然后点一下三角,再点一下你的目标名左侧的小三角,将会看到Copy Bundle Resource组,将你工程中刚才引用的两个shader文件拖到Resource组的名称上,测试会出现椭圆的高亮,然后松手。我们在构建整个项目时就会把这两个Shader文件作为资源拷贝到我们的应用的Bundle中了。
下面介绍一下OpenGL Shader的运行步骤:
第一步:创建程序。我们通过以下接口创建一个Shader程序:
GLuint glCreateProgram(
void
);
这个函数返回一个程序对象。
第二步:编译Shader。这里我们有两个shader,一个是vertex shader(顶点着色器);一个是fragment shader(片断着色器)。
我们使用自定义的- (BOOL) compileShader:(GLuint *)shader type:(GLenum)type file:(NSString *)file方法分别对顶点着色器和片断着色器进行编译。对于OpenGL着色器创建的基本步骤而言,我们要调用的OpenGL API的接口依次是:
GLuint glCreateShader(GLenum shaderType);
这个接口用于创建一个着色器。这里的参数shaderType是个枚举值,用于指定要创建哪种类型的着色器。GL_VERTEX_SHADER表示顶点着色器;GL_TESS_CONTROL_SHADER用于细分曲面的控制阶段(流水线级,OpenGL4.1);GL_TESS_EVALUATION_SHADER(OpenGL4.1)用于细分曲面的计算阶段;GL_GEOMETRY_SHADER用于几何着色器;GL_FRAGMENT_SHADER则用于片断处理器。这个函数的返回可看作为是一个着色器的句柄。
void
glShaderSource(GLuint shader,
GLsizei count,
const
GLchar ** string,
const
GLint * length);
这个接口用于指定着色器源代码。参数介绍:
shader:指定着色器句柄
count:用于指定第三个参数string中含有多少个const GLchar*的元素
string:源代码文本,以字符串指针的形式给出
length:分别指定string中每个子串的长度
如果length为NULL,那么OpenGL假定每个子串均以NIL('\0')结尾。
void
glCompileShader(GLuint shader);
这个接口用于编译着色器代码。
我们可以通过下列两个接口来获取编译是否成功,若不成功,则获得错误信息:
void
glGetShaderiv(GLuint shader,
GLenum pname,
GLint * params);
这个接口可以用于获得编译结果信息的长度。第二个参数,我们传入GL_INFO_LOG_LENGTH,那么长度值就会被写入params所指向的地址。
void
glGetShaderInfoLog(GLuint shader,
GLsizei maxLength,
GLsizei * length,
GLchar * infoLog);
这个接口用于获得具体到日志信息。
maxLength:用于指定你所提供的存放日志信息的缓存的最大长度
length:用于返回实际日志的长度
infoLog:写日志信息的缓存
这里对上面的着色器类型再补充说明一下,GL_GEOMETRY_SHADER,即几何着色器是从OpenGL 3.3开始才引入的,因此OpenGL2.1没有支持这个着色器特征。因此,我们目前只能使用顶点着色器和片断着色器。但是这两个着色器足以满足我们绝大多数的需求。而在OpenGL手册中也并不十分推荐几何着色器的使用。
另外,我们编译完着色器后必须调用glGetShaderiv接口。此时,pname要传GL_COMPILE_STATUS进去,以获得编译状态。如果得到的结果为0说明编译失败,否则为成功。
通过依次调用这些接口,我们就完成了对着色器的编译过程。
第三步:分别将顶点着色器和片断着色器关联到程序对象上:
void
glAttachShader( GLuint program,
GLuint shader);
program是我们先前创建好的程序对象;而shader则是我们创建并编译完之后的着色器对象。
第四步:绑定属性位置。
void
glBindAttribLocation( GLuint program,
GLuint index,
const
GLchar *name);
program:指定程序对象
index:指定要被绑定的通用顶点属性的索引
name:指定index所绑定的通用顶点属性变量名
glBindAttribLocation用于将程序中一个用户定义的属性变量与一个通用属性索引相关联。当所指定的程序对象变为当前状态的一部分时,通过通用顶点属性index提供的将会修改通过name所指定的用户自定义属性变量的值。
我们可以看一下我们这边的代码例子,以下是顶点着色器的代码:
attribute vec4 position;
attribute vec4 color;
varying vec4 colorVarying;
uniform
float
translate;
void
main()
{
gl_Position = position;
colorVarying = color;
}
我们可以看到,这边定义了两个属性变量,一个是position,一个是color。然后再看一下主机端上绑定这两个属性变量的代码:
// bind attribute locations
// this needs to be done prior to linking
glBindAttribLocation(program, ATTRIB_VERTEX,
"position"
);
glBindAttribLocation(program, ATTRIB_COLOR,
"color"
);
这里,ATTRIB_VERTEX和ATTRIB_COLOR是我们自定义的枚举值,分别是0和1。我们在后面将会看到如何通过glVertexAttribPointer将顶点数据和颜色数据分别传递给顶点着色器中的position和color。
第五步:连接程序。
在我们的代码中是用- (BOOL) linkProgram:(GLuint)prog这个方法来完成连接的。
而这个方法主要调用的接口是:
void
glLinkProgram(GLuint program);
调用完成后。我们可以通过使用以下接口对来获取连接信息:
void
glGetProgramiv( GLuint program,
GLenum pname,
GLint *params);
void
glGetProgramInfoLog( GLuint program,
GLsizei maxLength,
GLsizei *length,
GLchar *infoLog);
上面这两个接口的使用与着色器的日志获取的方法一样。
最后同样再调用一次glGetProgramiv,此时pname传递的是GL_LINK_STATUS来获取连接状态。如果返回为0表示失败,否则表示成功。
在程序运行中,我们可以根据当前的OpenGL状态来查询设备端的Shader程序是否有效:
void
glValidateProgram( GLuint program);
我们可以用与获得连接日志相同的方法来获取日志信息。
接着,我们可以获取着色器程序中uniform变量的位置:
GLint glGetUniformLocation( GLuint program,
const
GLchar * name);
其实我们这个代码非常简单,没有用到uniform变量。但是我们保留了一个,仅用于描述这个获取步骤,呵呵。
第六步:释放着色器对象。
当我们成功地把程序构建完之后,我们先前创建的着色器对象已经没有用了,此时我们通过以下接口释放着色器对象:
void
glDeleteShader(GLuint shader);
我们接下去就可以进行安装程序:
void
glUseProgram( GLuint program);
这个接口用于安装指定的程序作为当前绘制上下文的一部分。
- 从零开始OpenGLES之旅--shading language
- OpenGLES shading language 预处理
- OpenGL Shading Language 入门之 Hello World
- OpenGL Shading Language 4.4
- OpenGL Shading Language 汇总
- 绘制语言(Shading Language)
- shading language 和 CG 概述
- OpenGL ES Shading Language : array
- GLSL(OpenGL Shading Language) NOTES
- OpenGL Shading language学习总结
- OpenGL® Shading Language, Second Edition
- HLSL(High level shading language)
- 笔记:了解GLSL (OpenGL Shading Language)
- 纯Shading Language绘制HTML5时钟
- 纯Shading Language绘制飞机火焰效果
- Cg Shading Language 的内置函数表
- 着色语言 Shading Language(一)
- 着色语言 Shading Language(二)
- POI导出EXCEL经典实现
- HDU - 1754 I Hate It(max型线段树)
- 理解SVG transform坐标变换
- UVA 10200Prime Time(素数)
- ExtJS4 Ext.create弹出新窗口
- 从零开始OpenGLES之旅--shading language
- #include <vector>
- spring框架结构
- iOS获取系统相册中的图片
- 聚类小练习1
- JavaScript中var的重要性
- 51nod-最大子段和问题
- 可视化日历程序----Date时间类 Calendar日历类的应用
- css 文本图标对齐与定位二三事