编译链接自定义的着色器(shader)流程
参考: https://juejin.im/post/6855609807816196103
ios纹理翻转策略
1. 旋转矩阵翻转图形,不翻转纹理
- 顶点着色器程序
attribute vec4 position;
attribute vec2 textCoordinate;
uniform mat4 rotateMatrix;
uniform mat4 scaleMatrix;
varying lowp vec2 varyTextCoord;
void main(){
varyTextCoord = textCoordinate;
vec4 vPos = position;
gl_Position = vPos * rotateMatrix * scaleMatrix;
}
- 设置旋转矩阵
//glLinkProgram之后获取shaderv.vsh中的uniform属性:rotateMatrix
GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
GLuint scale = glGetUniformLocation(self.myPrograme, "scaleMatrix");
float radians = 180 * 3.14159f / 180.0f;
float s = sin(radians);
float c = cos(radians);
GLfloat zRotation[16] = {
c, -s, 0, 0,
s, c, 0, 0,
0, 0, 1.0, 0,
0.0, 0, 0, 1.0
};
GLfloat scaleMartix[16] = {
-1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1,
};
glUniformMatrix4fv(rotate, 1, GL_FALSE, (GLfloat *)&zRotation[0]);
glUniformMatrix4fv(scale, 1, GL_FALSE, (GLfloat *)&scaleMartix[0]);
2. 解压图片时,将图片源文件翻转
CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
size_t width = CGImageGetWidth(spriteImage);
size_t height = CGImageGetHeight(spriteImage);
GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
CGRect rect = CGRectMake(0, 0, width, height);
CGContextDrawImage(spriteContext, CGRectMake(0, 0, width, height), spriteImage);
//沿着x、y平移
CGContextTranslateCTM(spriteContext, rect.origin.x, rect.origin.y);
//沿着y平移
CGContextTranslateCTM(spriteContext, 0, rect.size.height);
//y轴翻转
CGContextScaleCTM(spriteContext, 1.0, -1.0);
//沿着x、y平移
CGContextTranslateCTM(spriteContext, -rect.origin.x, -rect.origin.y);
CGContextDrawImage(spriteContext, rect, spriteImage);
CGContextRelease(spriteContext);
glBindTexture(GL_TEXTURE_2D, 0);
3. 修改片元着色器,纹理坐标
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
void main()
{
gl_FragColor = texture2D(colorMap, vec2(varyTextCoord.x,1.0-varyTextCoord.y));
}
4. 修改顶点着色器,纹理坐标
attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
void main()
{
varyTextCoord = vec2(textCoordinate.x,1.0-textCoordinate.y);
gl_Position = position;
}
5. 直接从纹理坐标数据映射修改
- 原顶点数据数组
GLfloat attrArr[] =
{
0.5f, -0.5f, -1.0f, 1.0f, 0.0f,
-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,
};
- 修改后的顶点数组
GLfloat attrArr[] =
{
0.5f, -0.5f, -1.0f, 1.0f, 1.0f,
-0.5f, 0.5f, -1.0f, 0.0f, 0.0f,
-0.5f, -0.5f, -1.0f, 0.0f, 1.0f,
0.5f, 0.5f, -1.0f, 1.0f, 0.0f,
-0.5f, 0.5f, -1.0f, 0.0f, 0.0f,
0.5f, -0.5f, -1.0f, 1.0f, 1.0f,
};
6. 直接翻转顶点着色器中的顶点
在翻转顶点时,就不是直接对Y值用1去减,因为顶点的取值范围是[-1 1] ,所以我们直接加上负号做翻转即可
attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
void main(){
varyTextCoord = textCoordinate;
gl_Position = vec4(position.x, -position.y, position.z, 1);
}