OpenGL ES-13-案例08-6种图片动效滤镜

1,889 阅读11分钟

今天的案例,实现了静态图片添加动态效果:缩放、灵魂出窍、抖动、闪白、毛刺、幻觉。也是主要看着色器中的代码。因为今天要展示动态效果,于是在GLSL加载图片的代码中,添加了时间戳传入片元着色器中进行计算动态效果的周期。其他代码不再赘述,请参考《分屏滤镜》灰度&马赛克滤镜

一、效果图

二、着色器代码部分

1、正常效果

1.顶点着色器

attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;

void main (void) {
    gl_Position = Position;
    TextureCoordsVarying = TextureCoords;
}

2.片元着色器

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

void main (void) {
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    gl_FragColor = vec4(mask.rgb, 1.0);
}


2、缩放

最简单的实现方法:在顶点着色器中,随着时间的变化,让顶点坐标的x、y乘以对应时间的放大比例,来实现缩放效果。

我们只修改顶点着色器

attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;
//随着定时器的刷新方法不断增加的时间戳,一直在累加
uniform float Time;
//π
const float PI = 3.1415926;

void main (void) {
    
    //一次缩放效果的时长,0.6秒缩放一次
    float duration = 0.6;
    //最大缩放幅度,从1放大到1.3倍
    float maxAmplitude = 0.3;
    
   
    //表示传入的事件周期,即time的范围被控制在0.0~0.6,然后根据周期,计算当前这一秒在周期内的位置,来计算,这一秒图片的状态
    //mod(a, b),求模运算 等价于 a%b,GLSL中不支持%求模
    float time = mod(Time,duration);
    
    //amplitude表示振幅,也就是放大比例,引入PI的目的是为了使用sin函数,将amplitude的范围控制在1.0 ~ 1.3之间,并随着时间变化
    //这里可以不用取绝对值,因为角度的范围是【0,π】,不会出现负数的情况
    float amplitude = 1.0 + maxAmplitude * abs(sin(time * (PI / duration)));
    
    //将顶点坐标的x和y分别乘以一个放大比例,在纹理坐标不变的情况下,就达到了放大拉伸的效果
    //xy放大,zw保持不变
    gl_Position = vec4(Position.x * amplitude, Position.y * amplitude, Position.zw);
    
    TextureCoordsVarying = TextureCoords;
}


3、灵魂出窍

原理:两张图片叠加在一起,进行颜色混合,然后上层图片随着时间戳的变化,进行变放大、变减少透明度。

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

void main (void) {
    //周期
    float duration = 0.7;
    //最大透明度0.4
    float maxAlpha = 0.4;
    //最大放大1.8倍
    float maxScale = 1.8;
        
    //算出当前时间 在周期内的 占比。这一秒,应该是周期内第几秒展示的效果
    float progress = mod(Time, duration) / duration; // 0~1
    //当前秒的透明度,因为progress是【0 ~ 1】,1.0 - progress就是【1 ~ 0】,透明度范围就是【0.4 ~ 0】
    float alpha = maxAlpha * (1.0 - progress);
    //当前秒的放大比例
    float scale = 1.0 + (maxScale - 1.0) * progress;


    //算出某一个点,以中心点(0.5,0.5)为参照,经过放大比例后所在的新位置,就可以得到这个点新的纹理坐标
    float weakX = 0.5 + (TextureCoordsVarying.x - 0.5) / scale;
    float weakY = 0.5 + (TextureCoordsVarying.y - 0.5) / scale;
    vec2 weakTextureCoords = vec2(weakX, weakY);
    
    //上层图片的纹素
    vec4 weakMask = texture2D(Texture, weakTextureCoords);
    
    //底层图片的纹素
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    
    //混合
    gl_FragColor = mask * (1.0 - alpha) + weakMask * alpha;
}

4、抖动

原理:颜色偏移+微弱的放大。就是先将纹理放大,然后将放大后的纹理坐标的纹素进行颜色偏移

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

void main (void) {
    //周期
    float duration = 0.7;
    //最大放大到1.1倍
    float maxScale = 1.1;
    //颜色偏移步长
    float offset = 0.02;
    
    //当前这一秒的进度
    float progress = mod(Time, duration) / duration; // 0~1
    //当前这一秒的颜色偏移量,范围【0 ~ 0.02】
    vec2 offsetCoords = vec2(offset, offset) * progress;
    //当前这一秒的放大比例 【1 ~ 1.1】
    float scale = 1.0 + (maxScale - 1.0) * progress;
    
    //计算这一秒 每个像素点所在的新纹理坐标
    float weakX = 0.5 + (TextureCoordsVarying.x - 0.5) / scale;
    float weakY = 0.5 + (TextureCoordsVarying.y - 0.5) / scale;
    vec2 ScaleTextureCoords0 = vec2(weakX, weakY);
    //也可以这么写
    vec2 ScaleTextureCoords = vec2(0.5, 0.5) + (TextureCoordsVarying - vec2(0.5, 0.5)) / scale;
    
    //纹素
    vec4 mask = texture2D(Texture, ScaleTextureCoords);
    //颜色偏移的纹素
    vec4 maskR = texture2D(Texture, ScaleTextureCoords + offsetCoords);
    vec4 maskB = texture2D(Texture, ScaleTextureCoords - offsetCoords);
    //从3组颜色中分别获取RGBA的值
    gl_FragColor = vec4(maskR.r, mask.g, maskB.b, mask.a);
}

5、闪白

原理:两个图层混合,不过上层图片是一个纯白色的遮罩。随着时间的推移变淡。

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

const float PI = 3.1415926;

void main (void) {
    //一个周期的时长
    float duration = 0.6;
    //当前时间在周期内的某一秒
    float time = mod(Time, duration);
    //白色遮罩图层
    vec4 whiteMask = vec4(1.0, 1.0, 1.0, 1.0);
    //随着时间变化的振幅,【0 ~ 1】
    float amplitude = abs(sin(time * (PI / duration)));
    //纹理图层
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    //颜色混合
    gl_FragColor = mask * (1.0 - amplitude) + whiteMask * amplitude;
}


6、毛刺

原理:撕裂+微小的颜色偏移。 (撕裂就是X坐标上进行偏移)

先设定一个阈值(最大抖动的值),当前像素点的偏移值,如果小于这个阈值就进行颜色偏移。反之,就乘以一个缩小系数。这样最终效果就是:绝大部分都会进行微小的偏移,只有少量的行会进行较大偏移

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

const float PI = 3.1415926;

/*
 因为没有内置的随机函数,这里自定义一个随机数方法
 fract(x):返回x的小数部分
 返回:sin(n)*一个带小数点的极大值
 想要随机数算的比较低,乘的数就必须较大,噪声随机
 如果想得到【0,1】范围的小数值,可以将sin * 1
 */
float rand(float n) {
    return fract(sin(n) * 43758.5453123);
}

void main (void) {
    //设定一个阈值,意思是最大抖动的值
    float maxJitter = 0.06;
    //周期
    float duration = 0.3;
    //红色偏移值
    float colorROffset = 0.01;
    //蓝色偏移值
    float colorBOffset = -0.025;
    
    //设定当前秒,它的范围【0 ~ 0.6】 duration*2.0是为了设置一个值
    float time = mod(Time, duration * 2.0);
    //当前振幅 范围【1 ~ 1.3】
    float amplitude = max(sin(time * (PI / duration)), 0.0);
    
    //得到一个【-1 ~ 1】的随机值
    float jitter = rand(TextureCoordsVarying.y) * 2.0 - 1.0; // -1~1
    
    //判断是否需要撕裂
    // abs(jitter) 范围【0,1】
    // maxJitter * amplitude 范围【0, 0.06】
    //如果偏移值太大,就不是轻微撕裂效果了,会很夸张 类似画面故障了
    bool needOffset = abs(jitter) < maxJitter * amplitude;
    //拿到撕裂的x值
    float textureX = TextureCoordsVarying.x + (needOffset ? jitter : (jitter * amplitude * 0.006));
   
    //撕裂后的纹理坐标
    vec2 textureCoords = vec2(textureX, TextureCoordsVarying.y);
    
    //撕裂后的纹素
    vec4 mask = texture2D(Texture, textureCoords);
    //撕裂后  颜色偏移的纹素
    vec4 maskR = texture2D(Texture, textureCoords + vec2(colorROffset * amplitude, 0.0));
    vec4 maskB = texture2D(Texture, textureCoords + vec2(colorBOffset * amplitude, 0.0));
    
    //取3个纹素的随机RBGA
    gl_FragColor = vec4(maskR.r, mask.g, maskB.b, mask.a);
}


7、幻觉

这里其实结合了上面的知识,有的模拟器跑不起来,真机无压力。

原理:残影+颜色偏移

残影:每隔一个时间段,就会新建一个图层,这个图层以红色为主,然后随着时间的推移透明度降低。多个图层相互有距离地随着时间变化做圆周运动,从而形成残影效果。

颜色偏移:图片在移动的过程中是蓝色在前,红色在后,即在移动的过程中,每间隔一段时间,遗失了一部分红色通道的值在原来的位置,并且这部分红色通道的值,随着时间偏移,会逐渐恢复

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

const float PI = 3.1415926;
//周期,因为封装方法要用到,单拎出来
const float duration = 2.0;

/*
 转圈产生幻影的单个像素点的颜色值
 计算在当前秒当前像素的具体位置,也就是某个时刻图片的具体位置。
 */
vec4 getMask(float time, vec2 textureCoords, float padding) {
   
    //圆心坐标
    vec2 translation = vec2(sin(time * (PI * 2.0 / duration)),
                            cos(time * (PI * 2.0 / duration)));
    //新的纹理坐标 = 原始纹理坐标 + 偏移量 * 圆周坐标(新的图层与图层之间是有间距的,所以需要偏移)
    vec2 translationTextureCoords = textureCoords + padding * translation;
    //根据新的纹理坐标获取新图层的纹素
    vec4 mask = texture2D(Texture, translationTextureCoords);
    
    return mask;
}
/*
计算 某个时刻创建的层,在当前时刻的透明度
*/
float maskAlphaProgress(float currentTime, float hideTime, float startTime) {
    //mod(周期+持续时间-开始时间,周期)得到一个周期内的time
    float time = mod(duration + currentTime - startTime, duration);
    //如果小于0.9,返回time,反之,返回0.9
    return min(time, hideTime);
}

void main (void) {
    //周期内 当前的秒数  范围【0 ~ 2】
    float time = mod(Time, duration);
    //放大的倍数
    float scale = 1.2;
    //偏移量
    float padding = 0.5 * (1.0 - 1.0 / scale);
    
    //放大后的纹理坐标
    vec2 textureCoords = vec2(0.5, 0.5) + (TextureCoordsVarying - vec2(0.5, 0.5)) / scale;
    
    //多出来的图层隐藏的时间
    float hideTime = 0.9;
    //增加图层的时间间隔
    float timeGap = 0.2;
    
    //红色为主的幻影的R G B
    //注意:只保留了红色的透明的通道值,因为幻觉效果残留红色
    float maxAlphaR = 0.5; // max R
    float maxAlphaG = 0.05; // max G
    float maxAlphaB = 0.05; // max B
    
    //根据传入时间、纹理坐标、偏移量,获取新的图层的坐标
    vec4 mask = getMask(time, textureCoords, padding);
    
    //RGB :for循环中使用
    float alphaR = 1.0; // R
    float alphaG = 1.0; // G
    float alphaB = 1.0; // B
    //最终图层颜色:初始化
    vec4 resultMask = vec4(0, 0, 0, 0);
    
    
    //循环:每一层循环都会得到新的图层的颜色,即幻影颜色
    //一次循环只是计算一个像素点的纹素,需要在真机运行。模拟器会卡,主要是模拟器上是CPU模拟GPU的
    for (float f = 0.0; f < duration; f += timeGap) {
        float tmpTime = f;
        //获得幻影当前时间的颜色值
        vec4 tmpMask = getMask(tmpTime, textureCoords, padding);
        
        //某个时刻创建的层,在当前时刻的红绿蓝的透明度
        //临时的透明度 = 根据时间推移RGB的透明度发生变化
        //获得临时的红绿蓝透明度
        float tmpAlphaR = maxAlphaR - maxAlphaR * maskAlphaProgress(time, hideTime, tmpTime) / hideTime;
        float tmpAlphaG = maxAlphaG - maxAlphaG * maskAlphaProgress(time, hideTime, tmpTime) / hideTime;
        float tmpAlphaB = maxAlphaB - maxAlphaB * maskAlphaProgress(time, hideTime, tmpTime) / hideTime;
     
        //累计每一层临时RGB * RGB的临时透明度
        //结果 += 临时颜色 * 透明度,即刚产生的图层的颜色
        resultMask += vec4(tmpMask.r * tmpAlphaR,
                           tmpMask.g * tmpAlphaG,
                           tmpMask.b * tmpAlphaB,
                           1.0);
        
        //透明度递减
        alphaR -= tmpAlphaR;
        alphaG -= tmpAlphaG;
        alphaB -= tmpAlphaB;
    }
    
    //最终颜色 += 原始纹理的RGB * 透明度
    resultMask += vec4(mask.r * alphaR, mask.g * alphaG, mask.b * alphaB, 1.0);

    gl_FragColor = resultMask;
}



三、代码部分


 #import "ViewController.h"
 #import <GLKit/GLKit.h>
 #import "FilterBar.h"

 //之前也提到过,c语言结构体,存放顶点数据
typedef struct {
     GLKVector3 positionCoord; // (X, Y, Z)
     GLKVector2 textureCoord; // (U, V)
} SenceVertex;


@interface ViewController ()<FilterBarDelegate>
// 顶点数组
@property (nonatomic, assign) SenceVertex *vertices;
// 上下文
@property (nonatomic, strong) EAGLContext *context;
// 用于刷新屏幕的专属定时器(相比timer,它可以和屏幕刷新同频)
@property (nonatomic, strong) CADisplayLink *displayLink;
// 开始的时间戳
@property (nonatomic, assign) NSTimeInterval startTimeInterval;
// 着色器程序
@property (nonatomic, assign) GLuint program;
// 顶点缓冲区id
@property (nonatomic, assign) GLuint vertexBuffer;
// 纹理的id
@property (nonatomic, assign) GLuint textureID;

@end

@implementation ViewController

 //释放部分
 - (void)dealloc {
     //上下文释放
     if ([EAGLContext currentContext] == self.context) {
         [EAGLContext setCurrentContext:nil];
     }
     //顶点缓存区释放
     if (_vertexBuffer) {
         glDeleteBuffers(1, &_vertexBuffer);
         _vertexBuffer = 0;
     }
     //顶点数组释放
     if (_vertices) {
         free(_vertices);
         _vertices = nil;
     }
 }

 - (void)viewWillDisappear:(BOOL)animated {
     [super viewWillDisappear:animated];
     
     // 移除 displayLink
     if (self.displayLink) {
         [self.displayLink invalidate];
         self.displayLink = nil;
     }
 }

 - (void)viewDidLoad {
     [super viewDidLoad];
     
     self.view.backgroundColor = [UIColor blackColor];
     
     /*
      整体思路:
      和GLSL加载图片的流程一样
      不同分屏滤镜效果,主要是在着色器里去计算的
      这里加一个计时器的关键点在于,让屏幕保持一直刷新渲染,方便切换滤镜及时刷新。更多是用于有动效的滤镜
      */
     //1、创建底部切换bar
     [self setupFilterBar];
     
     //2、GLSL加载图片流程
     [self loaderImage];

     //3、启动定时器,刷新屏幕
     [self startRender];
 }

 #pragma mark - 1
 - (void)setupFilterBar {
     
     CGFloat filterBarWidth = [UIScreen mainScreen].bounds.size.width;
     CGFloat filterBarHeight = 100;
     CGFloat filterBarY = [UIScreen mainScreen].bounds.size.height - filterBarHeight;
     NSArray *dataSource = @[@"无",@"缩放",@"灵魂出窍",@"抖动",@"闪白",@"毛刺",@"幻觉"];
     FilterBar *filerBar = [[FilterBar alloc] initWithFrame:CGRectMake(0, filterBarY, filterBarWidth, filterBarHeight)];
     filerBar.itemList = dataSource;
     filerBar.delegate = self;
     [self.view addSubview:filerBar];
      
 }


 - (void)filterBar:(FilterBar *)filterBar didScrollToIndex:(NSUInteger)index {
     //1. 选择默认shader
     if (index == 0) {
         [self setUpDrawShaderWith:@"normal"];
     }else if(index == 1)
     {
         [self setUpDrawShaderWith:@"scale"];
     }else if(index == 2)
     {
         [self setUpDrawShaderWith:@"soulOut"];
     }else if(index == 3)
     {
         [self setUpDrawShaderWith:@"shake"];
     }else if(index == 4)
     {
         [self setUpDrawShaderWith:@"shineWhite"];
     }else if(index == 5)
     {
         [self setUpDrawShaderWith:@"glitch"];
     }else if(index == 6){
         [self setUpDrawShaderWith:@"vertigo"];
     }
     // 重新开始滤镜动画
     [self startRender];
 }

 #pragma mark - 2
 - (void)loaderImage {

     //1、准备工作
     /*
      把一些会重复用到的地方,封装起来,然后剩下的不变的,放在这个方法里面。
      上下文&设置当前
      设置图层
      设置缓冲区
      设置视口
      设置顶点数据
      设置顶点缓冲区
      解压图片,拿到纹理id(因为这里面只有一个纹理,如果有多个也要拆分出去,方便复用)
      */
     [self setUpConfig];
     
     //2、绘制每一个着色器都需要调用的方法。第一次加载,肯定使用默认着色器
     /*
      1、加载、编译shader
         1)拿到shader路径,转成c字符串
         2)创建shader对象
         3)把着色器字符串 附着到shader对象上
         4)编译shader对象&检验
      2、附着、连接program
         1)创建一个program对象
         2)把顶点、片元shader 附着上
         3)链接program&检验
      3、use program
      4、传递数据
         1)顶点坐标数据
         2)纹理坐标数据
         3)采样器传递纹理id(纹理id在准备工作就拿到了,不放这里是防止重复操作)
      */
     [self setUpDrawShaderWith:@"normal"];
     
      
 }
 #pragma mark - 2.1
 - (void)setUpConfig {
     
     //1.上下文
     self.context = [[EAGLContext alloc] initWithAPI: kEAGLRenderingAPIOpenGLES2];
     [EAGLContext setCurrentContext:self.context];
     
     
     //2、图层-设置一个正方形
     CAEAGLLayer *layer = [[CAEAGLLayer alloc] init];
     layer.frame = CGRectMake(0, 100, self.view.frame.size.width, self.view.frame.size.width);
     layer.contentsScale = [[UIScreen mainScreen] scale];
     [self.view.layer addSublayer:layer];
     
     
     //3、缓冲区
     //1)渲染缓冲区
     GLuint rBuffer,fBuffer;
     glGenRenderbuffers(1, &rBuffer);
     glBindRenderbuffer(GL_RENDERBUFFER, rBuffer);
     //把layer的存储绑定到渲染缓冲区
     [self.context renderbufferStorage:GL_RENDERBUFFER fromDrawable:layer];
     //2)帧缓冲区
     glGenFramebuffers(1, &fBuffer);
     glBindFramebuffer(GL_FRAMEBUFFER, fBuffer);
     //把renderBuffer绑定到ATTACHMENT0上
     glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, rBuffer);

     
     //4、视口
     glViewport(0, 0, self.drawableWidth, self.drawableHeight);


     //5、顶点数据
     //1)开辟顶点数组内存空间
     self.vertices = malloc(sizeof(SenceVertex) * 4);
     //2)
     self.vertices[0] = (SenceVertex){{-1, 1, 0}, {0, 1}};
     self.vertices[1] = (SenceVertex){{-1, -1, 0}, {0, 0}};
     self.vertices[2] = (SenceVertex){{1, 1, 0}, {1, 1}};
     self.vertices[3] = (SenceVertex){{1, -1, 0}, {1, 0}};


     //6、顶点缓冲区
     GLuint vBuffer;
     glGenBuffers(1, &vBuffer);
     glBindBuffer(GL_ARRAY_BUFFER, vBuffer);
     glBufferData(GL_ARRAY_BUFFER, sizeof(SenceVertex) * 4, self.vertices, GL_STATIC_DRAW);
     //保存,退出的时候才释放
     self.vertexBuffer = vBuffer;


     //7、解压图片,获取纹理id
     
     GLuint textureID = [self createTextureWithImageName:@"mark.jpeg"];
     //设置纹理ID
     self.textureID = textureID;
     
     
     
 }
 - (GLuint)createTextureWithImageName:(NSString *)imageName{
     
     
     //1、拿到图片路径
     //这么写的好处是,图片不做缓存处理
     NSString *imagePath = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:imageName];
    
     UIImage *image = [UIImage imageWithContentsOfFile:imagePath];
     
     
     //2、解压图片
     CGImageRef imageRef = [image CGImage];
     
     //3、判断图片有没有拿到
     if (!imageRef) {
         NSLog(@"load image faile");
         exit(1);
     }
     
     //4、创建上下文
     //1)获取宽高
     GLuint width = (GLuint)CGImageGetWidth(imageRef);
     GLuint height = (GLuint)CGImageGetHeight(imageRef);
     //2)拿到图片大小
     void *imageData = malloc(width * height * 4);
     //3)拿到图片的颜色
     CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
     //3)上下文
     /*
     参数1:data,指向要渲染的绘制图像的内存地址
     参数2:width,bitmap的宽度,单位为像素
     参数3:height,bitmap的高度,单位为像素
     参数4:bitPerComponent,内存中像素的每个组件的位数,比如32位RGBA,就设置为8
     参数5:bytesPerRow,bitmap的没一行的内存所占的比特数
     参数6:colorSpace,bitmap上使用的颜色空间  kCGImageAlphaPremultipliedLast:RGBA
     */
     CGContextRef imageContext = CGBitmapContextCreate(imageData, width, height, 8, width * 4, colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);

     //5、重新绘制
     CGRect rect = CGRectMake(0, 0, width, height);
     //1)翻转策略
     CGContextTranslateCTM(imageContext, 0, height);
     CGContextScaleCTM(imageContext, 1.0f, -1.0f);
     
     //2)对图片重新绘制,得到一张新的解压后的位图
     CGContextDrawImage(imageContext, rect, imageRef);
     
     //3)用完之后释放
     CGColorSpaceRelease(colorSpace);
     CGContextRelease(imageContext);
     
     //6、设置纹理 (因为这个方法需要我们返回一个id,就不穿默认0了,还是写一遍代码吧)
     GLuint textureId;
     glGenTextures(1, &textureId);
     glBindTexture(GL_TEXTURE_2D, textureId);
     
     //7、载入纹理数据
     /*
     参数1:纹理模式,GL_TEXTURE_1D、GL_TEXTURE_2D、GL_TEXTURE_3D
     参数2:加载的层次,一般设置为0
     参数3:纹理的颜色值GL_RGBA
     参数4:宽
     参数5:高
     参数6:border,边界宽度
     参数7:format
     参数8:type
     参数9:纹理数据
     */
     glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, imageData);

     
     //8、设置纹理属性
     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
     
     //9、重新绑定一下(用的时候就绑定准没错)
     glBindTexture(GL_TEXTURE_2D, textureId);
     //10、释放
     free(imageData);
         
     return textureId;
 }

 #pragma mark - 2.2
 - (void)setUpDrawShaderWith:(NSString *)shaderName{
     
     //1. 编译顶点着色器/片元着色器
     GLuint vertexShader = [self compileShaderWithName:shaderName type:GL_VERTEX_SHADER];
     GLuint fragmentShader = [self compileShaderWithName:shaderName type:GL_FRAGMENT_SHADER];
     
     
     //2、
     //1)创建一个program
     GLuint program = glCreateProgram();
     
     //2)附着
     glAttachShader(program, vertexShader);
     glAttachShader(program, fragmentShader);
     
 //    glDeleteShader(vertexShader);
 //    glDeleteShader(fragmentShader);
     
     //3)link
     glLinkProgram(program);
     
     //4)检查
     GLint linkStatus;
     glGetProgramiv(program, GL_LINK_STATUS, &linkStatus);
     if (linkStatus == GL_FALSE) {
         GLchar messages[256];
         glGetProgramInfoLog(program, sizeof(messages), 0, &messages[0]);
         NSString *messageString = [NSString stringWithUTF8String:messages];
         NSLog(@"program链接失败:%@", messageString);
         exit(1);
     }
  
     
     //3、use
     glUseProgram(program);
     
     //4、传递数据
     //1)先拿到通道名
     //顶点坐标
     GLuint positionSlot = glGetAttribLocation(program, "Position");
     //纹理坐标
     GLuint textureCoordsSlot = glGetAttribLocation(program, "TextureCoords");
     //纹理
     GLuint textureSlot = glGetUniformLocation(program, "Texture");
  
     
     //2)传顶点坐标
     glEnableVertexAttribArray(positionSlot);
     glVertexAttribPointer(positionSlot, 3, GL_FLOAT, GL_FALSE, sizeof(SenceVertex), NULL + offsetof(SenceVertex, positionCoord));
     
     //3)传纹理坐标
     glEnableVertexAttribArray(textureCoordsSlot);
     glVertexAttribPointer(textureCoordsSlot, 2, GL_FLOAT, GL_FALSE, sizeof(SenceVertex), NULL + offsetof(SenceVertex, textureCoord));
     
     //4) 传纹理
     glActiveTexture(GL_TEXTURE0);
     glBindTexture(GL_TEXTURE_2D, self.textureID);
     
     glUniform1i(textureSlot, 0);
     
     
     //5.保存program,界面销毁则释放
     self.program = program;
 }

 //编译shader代码
 - (GLuint)compileShaderWithName:(NSString *)name type:(GLenum)shaderType {
     
     //1、获得shader路径
     NSString *shaderPath = [[NSBundle mainBundle] pathForResource:name ofType:shaderType == GL_VERTEX_SHADER ? @"vsh" : @"fsh"];
     
     //2、转换成c语言字符串
     NSError *error;
     NSString *shaderString = [NSString stringWithContentsOfFile:shaderPath encoding:NSUTF8StringEncoding error:&error];
     if (!shaderString) {
         NSLog( @"读取shader失败");
         exit(1);
     }
     
 //    const GLchar* source = (GLchar*)[pathString UTF8String];
     
     const char *shaderStringUTF8 = [shaderString UTF8String];
     int shaderStringLength = (int)[shaderString length];
     
     
     //3、创建shader对象
     GLuint shader = glCreateShader(shaderType);
     
     //4、附着
     glShaderSource(shader, 1, &shaderStringUTF8, &shaderStringLength);
     
     //5、编译
     glCompileShader(shader);
     
     //6、检查编译
     GLint compileStatus;
     glGetShaderiv(shader, GL_COMPILE_STATUS, &compileStatus);
     
     if (compileStatus == GL_FALSE) {
         GLchar messages[256];
         glGetShaderInfoLog(shader, sizeof(messages), 0, &messages[0]);
         NSString *messageString = [NSString stringWithUTF8String:messages];
         NSLog(@"shader编译失败:%@", messageString);
         exit(1);
     }
     
     return shader;
 }
 #pragma mark - 3
 - (void)startRender {

     //1.因为会重复调用,严谨一点,先判断一下
     if (self.displayLink) {
         
         [self.displayLink invalidate];
         self.displayLink = nil;
     }
     //2. 设置displayLink 的方法
     self.startTimeInterval = 0;
     self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(timeAction)];
     
     //3.将displayLink 添加到runloop 运行循环
     [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
 }

  
 - (void)timeAction{
     
     //DisplayLink 的当前时间撮
     if (self.startTimeInterval == 0) {
         self.startTimeInterval = self.displayLink.timestamp;
     }
    
     //使用program
     glUseProgram(self.program);
     //绑定buffer
     glBindBuffer(GL_ARRAY_BUFFER, self.vertexBuffer);
      
     // 传入时间
     CGFloat currentTime = self.displayLink.timestamp - self.startTimeInterval;
     GLuint time = glGetUniformLocation(self.program, "Time");
     glUniform1f(time, currentTime);
     
     // 清除画布
     glClear(GL_COLOR_BUFFER_BIT);
     glClearColor(1, 1, 1, 1);
     
     // 重绘
     glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
     //渲染到屏幕上
     [self.context presentRenderbuffer:GL_RENDERBUFFER];
     
 }


 //获取渲染缓存区的宽
 - (GLint)drawableWidth {
     GLint backingWidth;
     glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_WIDTH, &backingWidth);
     return backingWidth;
 }
 //获取渲染缓存区的高
 - (GLint)drawableHeight {
     GLint backingHeight;
     glGetRenderbufferParameteriv(GL_RENDERBUFFER, GL_RENDERBUFFER_HEIGHT, &backingHeight);
     return backingHeight;
 }
 @end


源码链接:

链接:pan.baidu.com/s/1MjafIFev… 密码:uokx