GPUImage链式纹理的简单实现

最新推荐文章于 2020-08-10 11:23:14 发布
最新推荐文章于 2020-08-10 11:23:14 发布
阅读量314 收藏
点赞数
分类专栏： # GPUImage 源码解读 # OpenGLES 基础知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27074387/article/details/105941272
版权

链式 shader 的实现

实现链式 shader 的核心思路利 : 用帧缓冲对象,将帧缓冲对象生成的纹理单元最为下一个 shader 纹理的输入;
源码

帧缓冲的实现核心

/** 设置帧缓冲对象 */
-(void)setuptextureSize:(CGSize)size{
    glGenFramebuffers(1, &_frameBufferID);
    glActiveTexture(GL_TEXTURE1);
    glGenTextures(1, &_textureID);
    glBindTexture(GL_TEXTURE_2D, _textureID);
    
    // - 这里的 size 是需要渲染的填充的view 的size,而不是图片的 size
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, size.width, size.height, 0, GL_RGBA, GL_UNSIGNED_BYTE, NULL);

    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
    glBindFramebuffer(GL_FRAMEBUFFER, _frameBufferID);
    
    // - 帧缓冲对象
    glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0,GL_TEXTURE_2D, _textureID, 0);
    
    /*
     解绑纹理,解绑才能重新绑定新的纹理单元;
 	 如果没有解绑操作, 那么帧缓冲的输出纹理单元就是GL_TEXTURE1, 但是如果作为一个帧缓冲的输出和另一个帧缓冲输入, 就会出现输入和输出是同一个纹理单元;(如下边的shaderCompiler2, frameBuffer1的输出纹理单元作为shaderCompiler2的输入单元是 GL_TEXTURE1, 经shaderCompiler2后的frameBuffer2的输出纹理单元也是GL_TEXTURE1, 这是不可以的哦)
     glActiveTexture() : 设置帧缓冲的输出纹理单元;
     glUniform1i() : 设置 shader 的纹理的输入; 输入和输出不能是同一个纹理单元;
     */
    glBindTexture(GL_TEXTURE_2D, 0);
}

- (GLuint)textureID{
    return _textureID;
}

- (GLuint)framebufferID{
    return _frameBufferID;
}

/** 激活帧缓冲 */
-(void)activityFrameBuffer{
    glBindFramebuffer(GL_FRAMEBUFFER, _frameBufferID);
}

链式纹理的实现

// - 输入的纹理
-(void)setupInputTexture{
    GLuint texture;
    UIImage *image = [UIImage imageNamed:@"gyy.jpg"];
    size_t width = CGImageGetWidth(image.CGImage);
    size_t height = CGImageGetHeight(image.CGImage);
    _bufferSize = CGSizeMake(width, height);
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    void *imageData = malloc( height * width * 4 );
    
    CGContextRef context = CGBitmapContextCreate(imageData,
                                                 width,
                                                 height,
                                                 8,
                                                 4 * width,
                                                 colorSpace,
                                                 kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
    
    CGColorSpaceRelease( colorSpace );
    CGContextClearRect( context, CGRectMake( 0, 0, width, height ) );
    CGContextTranslateCTM(context, 0, height);
    CGContextScaleCTM (context, 1.0,-1.0);
    CGContextDrawImage( context, CGRectMake( 0, 0, width, height ), image.CGImage );
    CGContextRelease(context);
    glGenTextures(1, &texture);
    glBindTexture(GL_TEXTURE_2D, texture);
    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);
    glTexImage2D(GL_TEXTURE_2D,
                 0,
                 GL_RGBA,
                 (GLint)width,
                 (GLint)height,
                 0,
                 GL_RGBA,
                 GL_UNSIGNED_BYTE,
                 imageData);
    free(imageData);
}

// - 三个着色器程序 (原图纹理->shaderCompiler1->frameBuffe1, frameBuffe1->shaderCompiler2->frameBuffe2,  frameBuffe2->shaderCompiler3->渲染在屏幕上)
-(void)setupShader{
    self.shaderCompiler1 = [[QGShaderCompiler alloc]initWithvshaderFileName:@"VertextShader2" fshaderFileName:@"FragmentShader2_06"];
    _position1 = [self.shaderCompiler1 addAttribute:@"position"];
    _texture1 = [self.shaderCompiler1 addAttribute:@"textCoordinate"];
    _uni1 = [self.shaderCompiler1 addUniform:@"colorMap"];

    
    self.shaderCompiler2 = [[QGShaderCompiler alloc]initWithvshaderFileName:@"VertextShader2" fshaderFileName:@"FragmentShader2_04"];
    _position2 = [self.shaderCompiler2 addAttribute:@"position"];
    _texture2 = [self.shaderCompiler2 addAttribute:@"textCoordinate"];
    _uni2 = [self.shaderCompiler2 addUniform:@"colorMap"];


    self.shaderCompiler3 = [[QGShaderCompiler alloc]initWithvshaderFileName:@"VertextShader2" fshaderFileName:@"FragmentShader2_14"];
    _position3 = [self.shaderCompiler3 addAttribute:@"position"];
    _texture3 = [self.shaderCompiler3 addAttribute:@"textCoordinate"];
    _uni3 = [self.shaderCompiler3 addUniform:@"colorMap"];
}

// - 两个提供输出的帧缓冲对象
-(void)setupFrameBufferObj{
    self.frameBuffer1 = [[QGFrameBuffer alloc]initWithSize:self.frame.size];
    self.frameBuffer2 = [[QGFrameBuffer alloc]initWithSize:self.frame.size];
}

// - 原图纹理->shaderCompiler1->frameBuffe1
-(void)render1{
    [self.shaderCompiler1 glUseProgram];
    [self.frameBuffer1 activityFrameBuffer];
    glClearColor(1, 0, 0, 1);
    glClear(GL_COLOR_BUFFER_BIT);
    glViewport(0, 0, self.frame.size.width, self.frame.size.height);

    /*
     已知源纹理的输出纹理单元为 GL_TEXTURE0;
     下边的 glUniform1i(_uni1, 0) 是将 GL_TEXTURE0 作为 self.shaderCompiler1 的输入纹理,
     QGFrameBuffer 中的 glActiveTexture(GL_TEXTURE1); 是将 GL_TEXTURE1, 作为帧缓冲纹理输出单元;
     */
    glUniform1i(_uni1, 0);
    
    GLfloat vertices[] = {
        1.0, 1.0, 0.0,
        1.0, -1.0, 0.0,
        -1.0, 1.0, 0.0,
        
        1.0, -1.0, 0.0,
        -1.0, -1.0, 0.0,
        -1.0, 1.0, 0.0};
    
    GLfloat texturecoords[] ={
        1.0, 1.0,
        1.0, 0.0,
        0.0, 1.0,
        1.0, 0.0,
        0.0, 0.0,
        0.0, 1.0};
    
    glVertexAttribPointer(_position1, 3, GL_FLOAT, GL_FALSE,  sizeof(GLfloat) * 3, vertices);
    glVertexAttribPointer(_texture1, 2, GL_FLOAT, GL_FALSE,  sizeof(GLfloat) * 2, texturecoords);
    glDrawArrays(GL_TRIANGLES, 0, 6);
}

// - frameBuffe1->shaderCompiler2->frameBuffe2
-(void)render2{
    [self.shaderCompiler2 glUseProgram];
    [self.frameBuffer2 activityFrameBuffer];

    glClearColor(0, 1, 0, 1);
    glClear(GL_COLOR_BUFFER_BIT);
    glViewport(0, 0, self.frame.size.width, self.frame.size.height);
    
    /*
     前边已知self.frameBuffer1的输出纹理单元为 GL_TEXTURE1;
     glActiveTexture(GL_TEXTURE2); 和 glBindTexture(GL_TEXTURE_2D, [self.frameBuffer1 textureID]); 是将 self.frameBuffer1的输出纹理单元从 GL_TEXTURE1 改为 GL_TEXTURE2;
     glUniform1i(_uni2, 2) 是将 GL_TEXTURE2 作为 self.shaderCompiler2 的输入纹理;
     QGFrameBuffer 中的 glActiveTexture(GL_TEXTURE1); 是将 GL_TEXTURE1, 作为帧缓冲纹理输出单元;
     */
    glActiveTexture(GL_TEXTURE2);
    glBindTexture(GL_TEXTURE_2D, [self.frameBuffer1 textureID]);
    glUniform1i(_uni2, 2);
    
    GLfloat vertices[] = {
        1.0, 1.0, 0.0,
        1.0, -1.0, 0.0,
        -1.0, 1.0, 0.0,
        
        1.0, -1.0, 0.0,
        -1.0, -1.0, 0.0,
        -1.0, 1.0, 0.0};
    
    GLfloat texturecoords[] ={
        1.0, 1.0,
        1.0, 0.0,
        0.0, 1.0,
        1.0, 0.0,
        0.0, 0.0,
        0.0, 1.0};
    
    glVertexAttribPointer(_position2, 3, GL_FLOAT, GL_FALSE,  sizeof(GLfloat) * 3, vertices);
    glVertexAttribPointer(_texture2, 2, GL_FLOAT, GL_FALSE,  sizeof(GLfloat) * 2, texturecoords);
    glDrawArrays(GL_TRIANGLES, 0, 6);

}

// - frameBuffe2->shaderCompiler3->渲染在屏幕上
-(void)render3{
    [self.shaderCompiler3 glUseProgram];
    [self activityFrameBuffer];
    glClearColor(0, 0, 1, 1);
    glClear(GL_COLOR_BUFFER_BIT);
    glViewport(0, 0, self.frame.size.width, self.frame.size.height);
    
    /*
     前边已知self.frameBuffer2的输出纹理单元为 GL_TEXTURE1;
     glActiveTexture(GL_TEXTURE2); 和 glBindTexture(GL_TEXTURE_2D, [self.frameBuffer1 textureID]); 是将 self.frameBuffer2的输出纹理单元从 GL_TEXTURE1 改为 GL_TEXTURE2;
     glUniform1i(_uni2, 2) 是将 GL_TEXTURE2 作为 self.shaderCompiler3 的输入纹理;
     帧缓冲纹理输出单元渲染到屏幕上;
     */
    glActiveTexture(GL_TEXTURE2);
    glBindTexture(GL_TEXTURE_2D, [self.frameBuffer2 textureID]);
    glUniform1i(_uni3, 2);


    GLfloat vertices[] = {
        1.0, 1.0, 0.0,
        1.0, -1.0, 0.0,
        -1.0, 1.0, 0.0,
        
        1.0, -1.0, 0.0,
        -1.0, -1.0, 0.0,
        -1.0, 1.0, 0.0};
    
    GLfloat texturecoords[] ={
        1.0, 1.0,
        1.0, 0.0,
        0.0, 1.0,
        1.0, 0.0,
        0.0, 0.0,
        0.0, 1.0};
    

    glVertexAttribPointer(_position3, 3, GL_FLOAT, GL_FALSE,  sizeof(GLfloat) * 3, vertices);
    glVertexAttribPointer(_texture3, 2, GL_FLOAT, GL_FALSE,  sizeof(GLfloat) * 2, texturecoords);
    glDrawArrays(GL_TRIANGLES, 0, 6);

    [[QGEAGLContext sharedInstance] presentRenderbuffer];
}
Li.CQ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
GPUImage滤镜实战
风像云一样飘过
05-19 1万+
GPUImage是现在做滤镜最主流的开源框架，没有之一。作者BradLarson基于openGL对图片处理单元进行封装，提供出GPUImageFilter基类，配合shader，常用滤镜都拿下不是问题。   下面大致讲解下GPUImage里的一些基本概念，为了表达方便。已经知道请跳过 GPUImage中的几个概念 ⁃ output为输出源 ⁃ intput为输入源 ⁃ f
GPUImage的filter 响应处理链 的理解笔记
06-10 321
GPUImage的filter的textures处理链式结构 两个最重要的的地方： 最重要的一个类GPUImageOutput（所有的filter的父类，其他也有继承它的，如GPUImageUIElement，UIKit元素通过CG转gles贴图 等等）；协议（或者接口）GPUImageInput。　 继承GPUImageOutput且遵循GPUImageInput的...
关于GPUImage 两路输入 其中一路为 GPUImagePicture 的 问题的详细解析
jeffasd的专栏
03-07 1290
关于GPUImage 两路输入 其中一路为 GPUImagePicture 的 问题的详细解析情况1:GPUImagePicture -> 添加到1                                                 ->GPUImageTwoInputFilter 此时调用不会crashGPUImageMovie -> 添加到0在GPUIm...
GPUImage详细解析
xiaota00的博客
02-15 1078
http://www.jianshu.com/p/7a58a7a61f4c 从源码的角度分析、学习GPUImage和OpenGL ES，这是第一篇，介绍GPUImageFilter和 GPUImageFramebuffer。 OpenGL ES准备 回顾下我们之前的OpenGL ES教程，图像在OpenGL ES中的表示是纹理，会在片元着色器里面进行像素级别的处理。
GPUImage详细解析- 实时美颜滤镜
翻肚鱼儿的博客
08-10 1373
解析（一）解析（二） GPUImageFilter就是用来接收源图像，通过自定义的顶点、片元着色器来渲染新的图像，并在绘制完成后通知响应链的下一个对象。 GPUImageFramebuffer就是用来管理纹理缓存的格式与读写帧缓存的buffer。 GPUImageVideoCamera是GPUImageOutput的子类，提供来自摄像头的图像数据作为源数据，一般是响应链的源头。 GPUImageView是响应链的终点，一般用于显示GPUImage的图像。 琨君的基于GPUImage的实时美颜滤镜对G
教你实现GPUImage【OpenGL渲染原理】
田风有的博客
05-16 1387
一、GPUImageVideoCamera 可以捕获采集的视频数据 关键是捕获到一帧一帧视频数据如何展示？ 通过这个方法可以获取采集的视频数据 -(void)captureOutput:(AVCaptureOutput *)captureOutput didOutputSampleBuffer:(CMSampleBufferRef)sampleBuffer fromCo
GPUImage混合滤镜的简单使用
CrazyDuang的博客
09-02 2400
import "ViewController.h"#import "GPUImage.h"@interface ViewController (){ UIImage *_inputImage; UIImage *_outputImage;}@property (weak, nonatomic) IBOutlet UIImageView *iconImageView;@property (nonat
Android OpenGLES2.0（八）——纹理贴图之显示图片
热门推荐
偶尔记录的一些学习笔记
10-23 3万+
前面几篇博客，我们将了Android中利用OpenGL ES 2.0绘制各种形体，并在上一篇博客中专门讲了GLSL语言。但是我们看到的基于OpenGL开发的应用和游戏，可不仅仅是那些规则形体和一些简单的色彩构成，而是各种不规则的形体构成了现实世界或者卡通世界的人和事物，他们都是外面穿着漂亮“衣服”的。本篇博客就是来讲解这些“衣服”的基础的。这些衣服就是纹理贴图。什么是纹理贴图 一般说来，纹理是表
OpenGLES获取纹理流程图
忠烈的博客
08-29 1253
注意，以下流程图中的Created with Raphaël 2.1.0条件AByesno并不是真正意义上的判断，而是指一段程序分支。因为flowchart的格式不支持出现3条分支，或多个输入的表达。Created with Raphaël 2.1.0Program创建着色器Shader建立IDglCreateShader绑定文本glShaderSource编译glCompileShader获取各顶
OpenGL ES实践教程多重纹理实现图像混合（图像合成）
zhuawalibai的博客
05-28 3433
教程 OpenGL ES实践教程1-Demo01-AVPlayerOpenGL ES实践教程2-Demo02-摄像头采集数据和渲染OpenGL ES实践教程3-Demo03-MirrorOpenGL ES实践教程4-Demo04-VR全景视频播放 其他教程请移步OpenGL ES文集。 有简书的开发者问我如何使用在一张大图上贴一张小图，原始的需求是在检测人脸，在返回的范围（矩形）内贴上一张图片...
Android使用GPUImage实现滤镜效果精炼详解（一）
Chin_Style的博客
05-19 2万+
一、前期基础知识详解 “滤镜通常用于相机镜头作为调色、添加效果之用。如UV镜、偏振镜、星光镜、各种色彩滤光片。滤镜也是绘图软件中用于制造特殊效果的工具统称，以Photoshop为例，它拥有风格化、画笔描边、模糊、扭曲、锐化、视频、素描、纹理、像素化、渲染、艺术效果、其他等12个滤镜。 滤镜也可以制作或下载。滤镜直接使用效果很不自然，要合理搭配才能得到好的效果。” 以上是维基百科中对于滤镜...
GPUImage简单滤镜使用（一）
weixin_34203832的博客
11-20 123
　　今天来学习一下一个简单滤镜使用的流程，通过调节亮度滤镜来了解。先将GPUImage库导入到项目中，引入头文件"GPUImage.h" 　　   一、创建亮度滤镜对象   　   GPUImageBrightnessFilter *filter = [[GPUImageBrightnessFilter alloc] init]，经过alloc init之后，程序为我们创建了顶点数组以及帧缓冲...
OpenGL基础图形编程 - 纹理映射
popkiler的专栏
08-22 2340
12.1 基本步骤　　纹理映射是一个相当复杂的过程，这节只简单地叙述一下最基本的执行纹理映射所需的步骤。基本步骤如下：　　1）定义纹理、2）控制滤波、3）说明映射方式、4）绘制场景，给出顶点的纹理坐标和几何坐标。　　注意：纹理映射只能在RGBA方式下执行，不能运用于颜色表方式。下面举出一个最简单的纹理映射应用例子：　　例12-1 简单纹理映射应用例程（texsmpl.c）　　#include "g
iOS GPUImage之GPUImageFilterPipeline组合滤镜（4）
长乐未央
07-01 3146
实现滤镜的组合（又称混合滤镜）示例：为静态图片添加组合滤镜 注意：组合滤镜的添加顺序不同，处理结果也不同！代码： // // ViewController.m // GPUImageTest // // Created by 黄健 on 16/7/1. // Copyright © 2016年 黄健. All rights reserved. //#import "ViewControlle
使用android-gpuimage的一些问题总结
猴子请来的救兵
06-28 5209
前言 android-gpuimage虽然可以实现滤镜的效果，但遇到稍微复杂的需求，框架本身的bug和一些缺陷就暴露出来了，而且这个项目已经2年没维护过了，提issues也没人讨论，这里总结一些遇到的问题和解决办法。 1、Demo跑起来就有些bug android-gpuimage-support 重写了更友好的示例 2、异步调用getBitmapWithFilterApplied...
GPUImage 原理
ago_lei的博客
02-02 1140
最近在学习图像处理相关的内容,看了GPUImage的源码，查阅了相关资料，收集了许多人博客的基础上做出了整理，再次感谢给博主！GPUImage 是一个开源的基于GPU的图片或视频的处理框架，其本身内置了多达120多种常见的滤镜效果，并且支持照相机和摄像机的实时滤镜，并且能够自定义图像滤镜。 美颜基本概念 OpenGL ES：(Open Graphics Library For Embedded S
链式简单选择排序算法实现与分析
本次课程设计的目标是实现链式简单选择排序算法，适用于计算机科学与技术专业的学生。简单选择排序是一种基础的排序算法，它的工作原理是在未排序序列中找到最小（或最大）元素，存放到排序序列的起始位置，然后再从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值