教程
OpenGLES入门教程1-Tutorial01-GLKit
这次的是shader编译链接、glsl入门和简单图形变换。
OpenGL ES系列教程在这里。
OpenGL ES系列教程的代码地址 - 你的star和fork是我的源动力，你的意见能让我走得更远。
效果展示
核心思路
不采用GLKBaseEffect，编译链接自定义的着色器（shader），用简单的glsl语言来实现顶点和片元着色器，并对图片用简单的图形变换。
具体细节
1、shader编译
- c语言编译流程：预编译、编译、汇编、链接
- glsl的编译过程类似c语言，主要有glCompileShader、glAttachShader、glLinkProgram三步；
- (GLuint)loadShaders:(NSString *)vert frag:(NSString *)frag {
GLuint verShader, fragShader;
GLint program = glCreateProgram();
//编译
[self compileShader:&verShader type:GL_VERTEX_SHADER file:vert];
[self compileShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];
glAttachShader(program, verShader);
glAttachShader(program, fragShader);
//释放不需要的shader
glDeleteShader(verShader);
glDeleteShader(fragShader);
return program;
}
- (void)compileShader:(GLuint *)shader type:(GLenum)type file:(NSString *)file {
//读取字符串
NSString* content = [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];
const GLchar* source = (GLchar *)[content UTF8String];
*shader = glCreateShader(type);
glShaderSource(*shader, 1, &source, NULL);
glCompileShader(*shader);
}
2、glsl入门
glsl是OpenGL的着色器语言，有c基础可以很快上手，注意以下几点：
- 着色器有顶点着色器和片元着色器两种；参考下图，顶点着色器在第一个，片元着色器在最后一个；注意，在顶点着色器中处理顶点，片元着色器处理像素点颜色，那么对于一条线段，顶点着色器只会处理俩个顶点的坐标、颜色等信息，线段上的点会由插值生成。
- 如下，是一个顶点着色器。出现了attribute、uniform、varying这类修饰符，遇到这些可以看 这里 ，有详细的概念介绍。
需要注意的是，glsl是严格的类型匹配，int和float进行运算会出错。
顶点着色器的目标是输出顶点，所以gl_Position必须赋值
attribute vec4 position;
attribute vec2 textCoordinate;
uniform mat4 rotateMatrix;
varying lowp vec2 varyTextCoord;
void main()
{
varyTextCoord = textCoordinate;
vec4 vPos = position;
vPos = vPos * rotateMatrix;
gl_Position = vPos;
}
- 如下，这是一个片元着色器。注意，在片元着色器，数字变量都要有类似lowp的精度描述。
片元着色器的目标是输出像素颜色，gl_FragColor必须赋值
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
void main()
{
gl_FragColor = texture2D(colorMap, varyTextCoord);
}
这里有一个详细的博客，讲得很好。
3、简单图形变换
几何变换有比例、旋转、平移、对称、错切，这里我们介绍简单的旋转变换。
先给出结论：对于一个图形进行旋转变换，相当于对每个顶点乘以一个旋转变换矩阵。矩阵如下：
旋转矩阵.png
对于顶点的变换，我们可以放在OC代码里面来实现，把顶点变换完成后，把顶点输入到OpenGLES；也可以在glsl代码实现，把顶点变换交给gpu来完成。这里我们采用的是后者。
如下：
GLuint rotate = glGetUniformLocation(self.myProgram, "rotateMatrix");
float radians = 10 * 3.14159f / 180.0f;
float s = sin(radians);
float c = cos(radians);
//z轴旋转矩阵
GLfloat zRotation[16] = { //
c, -s, 0, 0.2, //
s, c, 0, 0,//
0, 0, 1.0, 0,//
0.0, 0, 0, 1.0//
};
//设置旋转矩阵
glUniformMatrix4fv(rotate, 1, GL_FALSE, (GLfloat *)&zRotation[0]);
细心的开发者会发现，这里的z轴旋转矩阵和上面给出来的旋转矩阵并不一致。
究其原因就是OpenGLES是列主序矩阵，对于一个一维数组表示的二维矩阵，会先填满每一列（a[0][0]、a[1][0]、a[2][0]、a[3][0]）。
把矩阵赋值给glsl对应的变量，然后就可以在glsl里面计算出旋转后的矩阵。
思考题
- 1、为什么熊猫的反的？要如何解决？
- 2、在这个样例中，顶点着色器调用次数和片元着色器调用次数哪个多？
- 3、glsl里面的变量可以通过glUniform进行赋值，那么是否可以在编译成功后或者链接成功后直接进行赋值？
总结
这一篇的内容作为教程2难度有点大，特别是shader和glsl语言容易让人兴趣直接降到谷底，如果觉得难，可以暂时不用管glsl语言。
待熟悉GLKBaseEffect后，再回来学习glsl也不迟。
代码点我
思考题答案
1、纹理坐标系的(0, 0)在左下角；
2、片元着色器。顶点着色器调用次数与顶点数量有关，片元着色器调用与像素多少有关系。
3、一个一致变量在一个图元的绘制过程中是不会改变的，所以其值不能在glBegin/glEnd中设置。一致变量适合描述在一个图元中、一帧中甚至一个场景中都不变的值。一致变量在顶点shader和片断shader中都是只读的。首先你需要获得变量在内存中的位置，这个信息只有在连接程序之后才可获得。
网友评论
我看教程1上面的代码：
GLKView* view = (GLKView *)self.view;
self.mContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
view.context = self.mContext;
这是否意味着此时ViewController使用的是默认的view呢？
[self destoryRenderAndFrameBuffer];
望作者能解疑：纹理初始化后是如何和着色器关联起来的？
纹理初始化、绑定默认是在GL_TEXTURE0单元中进行的，本来我以为是在可以通过一致变量
glActiveTexture(GL_TEXTURE0); //切换成 GL_TEXTURE0
glUniform1i(rotate, GL_TEXTURE2) //切换成 GL_TEXTURE2
来控制着色器操作哪一个纹理单元，理想状态为不显示图像，但发现依然会显示。
（但glActiveTexture设置为GL_TEXTURE1就不会显示了，这也是个问题....）
拜托作者解疑，感谢
GLfloat zRotation[16] = { //
c, -s, 0, 0.2, //
s, c, 0, 0,//
0, 0, 1.0, 0,//
0.0, 0, 0, 1.0//
};
为啥围绕z轴是这样写的
坐标不在gl默认的摄像机范围内
GLfloat attrArr[] =
{
0.5f, -0.5f, 0.0f, 1.0f, 1.0f, //右下
-0.5f, 0.5f, 0.0f, 0.0f, 0.0f, // 左上
-0.5f, -0.5f, 0.0f, 0.0f, 1.0f, // 左下
0.5f, 0.5f, 0.0f, 1.0f, 0.0f, // 右上
-0.5f, 0.5f, 0.0f, 0.0f, 0.0f, // 左上
0.5f, -0.5f, 0.0f, 1.0f, 1.0f, // 右下
};
float y = 1.0;
float z = 0;
//前三个是顶点坐标， 后面两个是纹理坐标
GLfloat attrArr[] =
{
x, -y, z, 1.0f, 0.0f,
-x, y, z, 0.0f, 1.0f,
-x, -y, z, 0.0f, 0.0f,
x, y, z, 1.0f, 1.0f,
-x, y, z, 0.0f, 1.0f,
x, -y, z, 1.0f, 0.0f,
};
GLKMatrix4 mvpMatrix;
GLKMatrix4 glscale = GLKMatrix4MakeScale(0.2, 0.2, 1);
GLKMatrix4 rotationZ = GLKMatrix4MakeRotation(GLKMathDegreesToRadians(180), 0, 0, 1);
GLKMatrix4 rotationY = GLKMatrix4MakeRotation(GLKMathDegreesToRadians(180), 0, 1, 0);
GLKMatrix4 translation = GLKMatrix4MakeTranslation(0.5f, 0.5f, 0);
mvpMatrix = GLKMatrix4Multiply(rotationZ,glscale);
mvpMatrix = GLKMatrix4Multiply(rotationY,mvpMatrix);
mvpMatrix = GLKMatrix4Multiply(translation,mvpMatrix);
glUniformMatrix4fv(mvpMatrixPosition, 1, GL_FALSE, mvpMatrix.m);
attribute vec4 position;
attribute vec2 textCoordinate;
uniform mat4 MVPMatrix;
varying lowp vec2 varyTextCoord;
void main()
{
varyTextCoord = textCoordinate;
vec4 vPos = position;
vPos = MVPMatrix * vPos ;
gl_Position = vPos;
}
把你的程序修改了，
为啥第三个数字是-1.0f？改成0效果一样，改成-1.1就看不到熊猫了
-0.5f, 0.5f, -1.0f, 0.0f, 1.0f,
-0.5f, -0.5f, -1.0f, 0.0f, 0.0f,
0.5f, 0.5f, -1.0f, 1.0f, 1.0f,
-0.5f, 0.5f, -1.0f, 0.0f, 1.0f,
0.5f, -0.5f, -1.0f, 1.0f, 0.0f,
我觉得你这个应该要注释下，因为新手很难理解为什么坐标需要这么写，有重复的地方，为了节省index
attribute vec2 textCoordinate;
uniform mat4 rotateMatrix;
varying lowp vec2 varyTextCoord;
void main()
{
varyTextCoord = textCoordinate;
vec4 vPos = position;
vPos = vPos * rotateMatrix;
gl_Position = vPos;
}
函数里只用到了position rotateMatrix 为什么还要vec4 vPos = position varyTextCoord = textCoordinate不理解 为什么 二维等于四维
varyTextCoord = textCoordinate（二维=二维）
没有二维等于思维吧？！
https://github.com/loyinglin/LearnOpenGLES/blob/master/Tutorial02-shader入门/LearnOpenGLES/LearnView.m#L215
這裡產出是self.myColorFrameBuffer，但是在Bind時卻是self.myColorRenderBuffer?
而且似乎不管改成哪個對於結果都沒影響?
謝謝。
感谢指正。
self.myColorFrameBuffer = buffer;
// 设置为当前 framebuffer
glBindFramebuffer(GL_FRAMEBUFFER, self.myColorRenderBuffer);
第一行指派給myColor-FRAME-Buffer
但是下一行bind的時候，bind的是 myColor-RENDER-buffer
整個.m的其他地方也沒有用到myColor-FRAME-Buffer
所以是否筆誤了?
首先你需要获得变量在内存中的位置，这个信息只有在连接程序之后才可获得。
3.应该不可以吧，glsl跟c语言差不多。不是面向对象？？