OpenGLES渲染

最新推荐文章于 2019-04-13 10:55:43 发布
最新推荐文章于 2019-04-13 10:55:43 发布
阅读量94 收藏
点赞数
原文链接：http://www.cnblogs.com/YouXianMing/p/3760742.html
版权

OpenGLES渲染

OpenGLES使用GPU渲染图片,不占用CPU,但其使用还是挺复杂的.

先用OpenGLES显示一张图片:

//
//  ShowViewController.m
//  OpenGLES
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "ShowViewController.h"
#import <GLKit/GLKit.h>
#import <CoreImage/CoreImage.h>

@interface ShowViewController ()
@property (nonatomic, strong) GLKView   *viewBuffer;
@end

@implementation ShowViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    // 获取OpenGLES渲染环境
    EAGLContext *eaglContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
    
    // 根据图片获取尺寸
    UIImage *image = [UIImage imageNamed:@"demo.png"];
    CIImage *ciimage = [[CIImage alloc] initWithImage:image];
    CGRect rect = CGRectMake(0, 0, image.size.width, image.size.height);
    
    // 初始化GLKView并指定OpenGLES渲染环境
    _viewBuffer = [[GLKView alloc] initWithFrame:rect context:eaglContext];
    [self.view addSubview:_viewBuffer];
    
    // 与OpenGLES绑定
    [_viewBuffer bindDrawable];
    
    // 定义绘制区域(像素描述)
    CGRect rectInPixels = \
        CGRectMake(0.0, 0.0, _viewBuffer.drawableWidth, _viewBuffer.drawableHeight);
    
    // 初始化CIImage的环境,指定在OpenGLES2上操作(此处只在GPU上操作)
    CIContext *context = \
        [CIContext contextWithEAGLContext:eaglContext
                                  options:@{kCIContextWorkingColorSpace:[NSNull null]}];
    
    // 开始绘制
    [context drawImage:ciimage
                inRect:rectInPixels
              fromRect:[ciimage extent]];
    
    // 显示
    [_viewBuffer display];
}

@end

只是显示一张图片而已,就需要写这么多的代码-_-!!!!

他有什么优势呢?其实,它的优势是实时渲染图片,不卡的.

//
//  RootViewController.m
//  OpenGLES
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "RootViewController.h"
#import <GLKit/GLKit.h>
#import <CoreImage/CoreImage.h>
#import <QuartzCore/QuartzCore.h>

@interface RootViewController ()

@property (nonatomic, strong) GLKView   *viewBuffer;

@property (nonatomic, strong) CIContext *ciContext;
@property (nonatomic, strong) CIImage   *ciImage;
@property (nonatomic, strong) CIFilter  *ciFilter;

@end

@implementation RootViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    // 获取OpenGLES2渲染环境
    EAGLContext *eaglContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
    
    // 初始化一个viewBuffer,并指定在OpenGLES2环境渲染
    CGRect rect = CGRectMake(0, 0,
                             [UIImage imageNamed:@"demo"].size.width,
                             [UIImage imageNamed:@"demo"].size.height);
    _viewBuffer = [[GLKView alloc] initWithFrame:rect
                                         context:eaglContext];
    
    // 绑定将这个view与OpenGLES2绑定
    [_viewBuffer bindDrawable];
    [self.view addSubview:_viewBuffer];
    
    // 初始化CIImage的环境,指定在OpenGLES2上操作(此处只在GPU上操作)
    _ciContext = [CIContext contextWithEAGLContext:eaglContext
                                           options:@{kCIContextWorkingColorSpace:[NSNull null]}];
    
    // 获取CIImage
    _ciImage = [[CIImage alloc] initWithImage:[UIImage imageNamed:@"demo"]];
    
    // 初始化一个CIFilter
    _ciFilter = [CIFilter filterWithName:@"CISepiaTone"];
    [_ciFilter setValue:_ciImage forKey:kCIInputImageKey];
    [_ciFilter setValue:@0 forKey:kCIInputIntensityKey];
    
    // 定义绘制区域(像素描述)
    CGRect rectInPixels = \
        CGRectMake(0.0, 0.0, _viewBuffer.drawableWidth, _viewBuffer.drawableHeight);
    
    // 开始绘制
    [_ciContext drawImage:_ciImage
                   inRect:rectInPixels
                 fromRect:[_ciImage extent]];
    [_viewBuffer display];
    
    UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(0, 400, 320, 20)];
    [self.view addSubview:slider];
    [slider addTarget:self
               action:@selector(event:)
     forControlEvents:UIControlEventValueChanged];
    slider.minimumValue = 0;
    slider.maximumValue = 1;
}

- (void)event:(UISlider *)slider
{
    [_ciFilter setValue:[NSNumber numberWithFloat:slider.value]
                 forKey:kCIInputIntensityKey];
    
    // 定义绘制区域(像素描述)
    CGRect rectInPixels = \
    CGRectMake(0.0, 0.0, _viewBuffer.drawableWidth, _viewBuffer.drawableHeight);
    
    [_ciContext drawImage:[_ciFilter outputImage]
                 inRect:rectInPixels
               fromRect:[_ciImage extent]];
    [_viewBuffer display];
}

@end

将这个View封装一下吧.

GPUView.h + GPUView.m

//
//  GPUView.h
//  OpenGLES
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import <UIKit/UIKit.h>
#import <GLKit/GLKit.h>
#import <CoreImage/CoreImage.h>

@interface GPUView : UIView

- (void)drawCIImage:(CIImage *)ciImage;

@end
//
//  GPUView.m
//  OpenGLES
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "GPUView.h"

@interface GPUView ()

@property (nonatomic, assign)  CGRect     rectInPixels;
@property (nonatomic, strong)  CIContext *context;
@property (nonatomic, strong)  GLKView   *showView;

@end

@implementation GPUView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        // 获取OpenGLES渲染环境
        EAGLContext *eaglContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
        
        // 初始化GLKView并指定OpenGLES渲染环境 + 绑定
        _showView = [[GLKView alloc] initWithFrame:frame context:eaglContext];
        [_showView bindDrawable];
        
        // 添加进图层
        [self addSubview:_showView];
        
        // 创建CIContext环境
        _context = \
            [CIContext contextWithEAGLContext:eaglContext
                                      options:@{kCIContextWorkingColorSpace:[NSNull null]}];
        
        // 定义绘制区域(像素描述)
        _rectInPixels = \
            CGRectMake(0.0, 0.0, _showView.drawableWidth, _showView.drawableHeight);
    }
    return self;
}

- (void)drawCIImage:(CIImage *)ciImage
{
    // 开始绘制
    [_context drawImage:ciImage
                 inRect:_rectInPixels
              fromRect:[ciImage extent]];
    
    // 显示
    [_showView display];
}

@end

实现同样的效果:

//
//  ShowViewController.m
//  OpenGLES
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "ShowViewController.h"
#import <CoreImage/CoreImage.h>
#import "GPUView.h"

@interface ShowViewController ()
@property (nonatomic, strong) CIFilter  *ciFilter;
@property (nonatomic, strong) GPUView   *gpuView;
@end

@implementation ShowViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    // 根据图片获取尺寸
    UIImage *image   = [UIImage imageNamed:@"demo.png"];
    CIImage *ciimage = [[CIImage alloc] initWithImage:image];
    CGRect rect      = CGRectMake(0, 0, image.size.width, image.size.height);
    
    // 初始化GPUView
    _gpuView = [[GPUView alloc] initWithFrame:rect];
    [self.view addSubview:_gpuView];
    [_gpuView drawCIImage:ciimage];
    
    // 初始化一个CIFilter
    _ciFilter = [CIFilter filterWithName:@"CISepiaTone"];
    [_ciFilter setValue:ciimage forKey:kCIInputImageKey];
    [_ciFilter setValue:@0 forKey:kCIInputIntensityKey];
    
    // 初始化一个UISlider
    UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(0, 400, 320, 20)];
    [self.view addSubview:slider];
    [slider addTarget:self
               action:@selector(event:)
     forControlEvents:UIControlEventValueChanged];
    slider.minimumValue = 0;
    slider.maximumValue = 1;
}

- (void)event:(UISlider *)slider
{
    [_ciFilter setValue:[NSNumber numberWithFloat:slider.value]
                 forKey:kCIInputIntensityKey];
    [_gpuView drawCIImage:[_ciFilter outputImage]];
}

@end

看起来简洁多了.....

来点复杂点的,同时操作两个滤镜

//
//  ShowViewController.m
//  OpenGLES
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "ShowViewController.h"
#import <CoreImage/CoreImage.h>
#import "GPUView.h"

@interface ShowViewController ()
@property (nonatomic, strong) CIFilter  *ciFilter1;
@property (nonatomic, strong) CIFilter  *ciFilter2;
@property (nonatomic, strong) GPUView   *gpuView;

@property (nonatomic, strong) UISlider  *slider1;
@property (nonatomic, strong) UISlider  *slider2;
@end

@implementation ShowViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    // 根据图片获取尺寸
    UIImage *image   = [UIImage imageNamed:@"demo.png"];
    CIImage *ciimage = [[CIImage alloc] initWithImage:image];
    CGRect rect      = CGRectMake(0, 0, image.size.width, image.size.height);
    
    // 初始化GPUView
    _gpuView = [[GPUView alloc] initWithFrame:rect];
    [self.view addSubview:_gpuView];
    [_gpuView drawCIImage:ciimage];
    
    // 初始化一个CIFilter
    _ciFilter1 = [CIFilter filterWithName:@"CISepiaTone"];
    [_ciFilter1 setValue:ciimage forKey:kCIInputImageKey];
    [_ciFilter1 setValue:@0.f forKey:kCIInputIntensityKey];
    
    _ciFilter2 = [CIFilter filterWithName:@"CIHueAdjust"];
    [_ciFilter2 setValue:[_ciFilter1 outputImage] forKeyPath:kCIInputImageKey];
    [_ciFilter2 setValue:@0.f forKeyPath:kCIInputAngleKey];
    
    // 初始化UISlider
    _slider1 = [[UISlider alloc] initWithFrame:CGRectMake(0, 400, 320, 20)];
    [self.view addSubview:_slider1];
    [_slider1 addTarget:self
               action:@selector(event1:)
     forControlEvents:UIControlEventValueChanged];
    _slider1.minimumValue = 0;
    _slider1.maximumValue = 1;
    _slider1.value = 0.5f;
    
    _slider2 = [[UISlider alloc] initWithFrame:CGRectMake(0, 450, 320, 20)];
    [self.view addSubview:_slider2];
    [_slider2 addTarget:self
                action:@selector(event2:)
      forControlEvents:UIControlEventValueChanged];
    _slider2.minimumValue = -3.14f;
    _slider2.maximumValue = +3.14f;
    _slider2.value = 0.f;
}

- (void)event1:(UISlider *)slider
{
    [_ciFilter1 setValue:[NSNumber numberWithFloat:_slider1.value]
                 forKey:kCIInputIntensityKey];
    [_ciFilter2 setValue:[_ciFilter1 outputImage] forKeyPath:kCIInputImageKey];
    [_ciFilter2 setValue:[NSNumber numberWithFloat:_slider2.value] forKeyPath:kCIInputAngleKey];
    [_gpuView drawCIImage:[_ciFilter2 outputImage]];
}

- (void)event2:(UISlider *)slider
{
    [_ciFilter1 setValue:[NSNumber numberWithFloat:_slider1.value]
                  forKey:kCIInputIntensityKey];
    [_ciFilter2 setValue:[_ciFilter1 outputImage] forKeyPath:kCIInputImageKey];
    [_ciFilter2 setValue:[NSNumber numberWithFloat:_slider2.value] forKeyPath:kCIInputAngleKey];
    [_gpuView drawCIImage:[_ciFilter2 outputImage]];
}

@end

 

 

 

 

 

转载于:https://www.cnblogs.com/YouXianMing/p/3760742.html

weixin_30291791
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
OpenGLES2.0渲图步骤：绘几何图形、图片处理、离屏渲染（3）
ShareUs的专栏
12-06 3956
  OpenGLES2.0是一个图形渲染（图形处理）库。 OpenGL ES 2.0渲染过程为：读取顶点数据——执行顶点着色器——组装图元——光栅化图元——执行片元着色器——写入帧缓冲区——显示到屏幕上。   Android openGL ES渲染示例- https://blog.csdn.net/junzia/article/category/6462864 &gt; OpenGL 图像直接渲...
OpenGLES（二）——渲染管线
q345911572的博客
01-30 1032
OpenGLES（二）——渲染管线
1.OpenGLES——FBO方式的离屏渲染
liuyizhou95的博客
04-13 5327
参考 https://blog.csdn.net/u011371324/article/details/78011211 书写本文的初衷是为了自我学习 出现背景 明确两个概念 窗口系统默认帧缓冲 应用程序帧缓冲 FBO(frame buffer object),帧缓冲区对象，在Android中，绘制三角形一般都是直接重写GLSurfaceVi...
OpenGL ES渲染管线概述（一）
08-27
OpenGL ES渲染管线概述 OpenGL ES渲染管线是图形渲染的核心组件，负责将3D图形渲染到屏幕上。渲染管线可以分为多个阶段，每个阶段都执行特定的任务，包括读取顶点数据、顶点着色器、组装图元、光栅化图元、片元着色...
opengles渲染NV21
11-14
要利用OpenGL ES渲染NV21数据，首先需要创建一个GLSurfaceView，它是Android系统提供的一个特殊视图，可以绑定到一个OpenGL ES上下文，允许我们绘制图形和处理图像。GLSurfaceView还提供了一个Renderer接口，我们...
Android Native层使用opengl es渲染yuv420
12-26
Android Native层使用opengl es渲染yuv420，通过egl绑定android的surface，直接在native层进行渲染 具体使用见http://blog.csdn.net/lidec/article/details/73732369#comments
OpenGLES 渲染立体图像资料
04-27
在"OpenGLES 渲染立体图像资料"中，我们主要会探讨如何利用OpenGLES来创建立体图像，这通常涉及到深度感知、视差和双目渲染等技术。 《OpenGL ES 3.0编程指南》是一本权威的参考书籍，它深入介绍了OpenGLES 3.0版本...
OpenGLES渲染播放Sdcard中的视频资源
最新发布
11-02
1、案例运行注意事项： ...2、案例源码原理： a、在OpenGL ES中创建 samplerExternalOES 类型纹理，用于渲染展示...e、通过 MediaPlayer 解封装视频，并最终通过OpenGL ES渲染解封装后的视频图像，同时播放视频的声音；
opengles渲染流程
07-05 2682
一个三角形v1(x,y,z)，v2(x,y,z)，v3(x,y,z)的渲染流程是这样的： vertex shader——Clipping——Perspective Division——视口转换——光栅化阶段——片段shader ——片段测试和操作（剪刀测试，模板测试，深度测试，混合，抖动，多重采样反锯齿等。 1 每个顶点先被传到顶点shader里面，一般在顶点shad
【OpenGL】OpenGL渲染流程详解
热门推荐
Zok93
12-24 2万+
查阅过很多资料，在OpenGL的整个渲染流程中很多资料上描述的过程大致相同却又略去了很多细节，可以说是每一份资料的描述都不尽相同，或许每个作者所阐述的重点都不太相同，不存在孰对孰错 例如：《OpenGL ES 3.0编程指南》中对可编程管线的流程介绍如下： VBO/VAO（顶点缓冲区对象或顶点数组对象） VertexShader（顶点着色器） rasterization（光栅化） Fragm...
七 OpenGL ES 2.0 渲染流程整理
寒风的技术博客
07-19 6095
OpenGL渲染流程及渲染管线，OpenGL ES2.0的渲染管线如下图所示，阴影部分为可编程阶段。下面是对图中的每个过程的详细解释：1 VBO/VAO（顶点缓冲区对象或顶点数组对象）VBO/VAO是cpu提供给GPU的顶点信息，包括了顶点的位置、颜色、纹理坐标（用于纹理贴图）等顶点信息。 VBO，全名Vertex Buffer Object。它是GPU里面的一块缓冲区，当我们需要传递数据的时候，
OpenGLES下进行渲染
陈思宇个人主页 欢迎大家讨论学习
11-03 1188
在OpenGLES下进行滤镜的渲染可以提高效率。 如果需要实时查看多个滤镜动态渲染的效果，使用OpenGLES是一个好的选择 @interface ViewController () @property (nonatomic, strong) GLKView *glkView; // 渲染用的buffer视图 @property (nonatomic, strong) CIFi
OpenGLES2.0 Shader及着色器语言CG HLSL GLSL，3D模型文件(.obj .frag .vert .mtl等)（2）
ShareUs的专栏
12-04 2966
-- openGL固定流水线（在OpenGLES 2.0之前），2.0之后的使用自定义着色器渲染。 --着色器流程： -- OpenGL 1.0的渲染管线主要包括： 1.准备顶点数据（通过VBO、VAO和Vertex attribute来传递数据给OpenGL） 2.顶点处理（这里主要由Vertex Shader来完成，从上图中可以看出，它还包括可选的Tessellation和G...
对OpenGLES2.0渲染管线的理解
srk19960903的博客
07-11 1712
在学习OpenGLES时，每一本书开始都会向我们介绍渲染管线，当我在开始学习它时，看这些东西完全不明白在说什么，经过一段时间对3D程序的开发和研究现在对渲染管线也有了一些自己的理解。由于WebGL是基于OpenGLES2.0实现的一套JavaScript封装API（其中也有一些特有的部分），那么就先聊聊我对OpenGLES2.0渲染管线的理解吧。
Android Camera 使用OpenGLES 渲染滤镜以及帧率优化问题
NBA_1的博客
02-18 1278
转自https://www.jianshu.com/p/2d2776a0931e 说到滤镜问题，市面上所有美颜类的相机都存在各式各样的滤镜。那么我们怎么实现滤镜呢？我们首先想到，是否有相关开源项目可以参考的。iOS 下有比较著名的GPUImage是用来做滤镜渲染的，Android下面也有类似的项目。其中，美颜类开源相机比较出名的是程序员杠把子(CSDN博客：http://my.csdn.net/o...
关于android OpenGl ES 渲染方式
Cwuhao的专栏
03-15 7317
最近使用OpenGl ES关于渲染方式有以下两种：RENDERMODE_CONTINUOUSLY和RENDERMODE_WHEN_DIRTY。默认渲染方式为RENDERMODE_CONTINUOUSLY，当设置为RENDERMODE_CONTINUOUSLY时渲染器会不停地渲染场景，当设置为RENDERMODE_WHEN_DIRTY时只有在创建和调用requestRender()时才会刷新。一般设置为RENDERMODE_WHEN_DIRTY方式，这样不会让CPU一直处于高速运转状态，提高手机电池使用时间和
opengles渲染序列帧
05-25
在使用OpenGL ES渲染序列帧时，需要将每一帧的图像作为纹理加载到OpenGL ES中，并设置纹理坐标和顶点坐标来显示每一帧。以下是一些基本的步骤： 1. 将每一帧的图像转换成OpenGL ES所支持的纹理格式，例如RGBA8888。 2. 创建OpenGL ES的纹理对象，将纹理数据加载到纹理对象中。 3. 设置顶点坐标和纹理坐标，以便显示序列帧。 4. 在渲染循环中，每帧更新纹理对象的内容，并绘制序列帧。 以下是一个简单的示例代码： ```java public class FrameRenderer implements GLSurfaceView.Renderer { private int[] textures = new int[10]; // 存储纹理对象的数组 private Bitmap[] bitmaps = new Bitmap[10]; // 存储位图的数组 private int currentFrame = 0; // 当前帧 private final float[] vertices = { // 顶点坐标 -1.0f, -1.0f, 1.0f, -1.0f, -1.0f, 1.0f, 1.0f, 1.0f }; private final float[] texCoords = { // 纹理坐标 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f }; public FrameRenderer(Context context) { // 加载序列帧 for (int i = 0; i < 10; i++) { bitmaps[i] = BitmapFactory.decodeResource(context.getResources(), R.drawable.frame_0000 + i); } } @Override public void onSurfaceCreated(GL10 gl, EGLConfig config) { // 创建纹理对象 GLES20.glGenTextures(textures.length, textures, 0); // 设置纹理参数 for (int i = 0; i < textures.length; i++) { GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textures[i]); GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_NEAREST); GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_NEAREST); GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE); GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE); GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmaps[i], 0); bitmaps[i].recycle(); // 释放位图内存 } } @Override public void onSurfaceChanged(GL10 gl, int width, int height) { GLES20.glViewport(0, 0, width, height); } @Override public void onDrawFrame(GL10 gl) { GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT); // 绑定纹理 GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textures[currentFrame]); // 设置顶点坐标和纹理坐标 FloatBuffer vertexBuffer = ByteBuffer.allocateDirect(vertices.length * 4) .order(ByteOrder.nativeOrder()) .asFloatBuffer() .put(vertices); vertexBuffer.position(0); FloatBuffer texCoordBuffer = ByteBuffer.allocateDirect(texCoords.length * 4) .order(ByteOrder.nativeOrder()) .asFloatBuffer() .put(texCoords); texCoordBuffer.position(0); // 绘制序列帧 int positionHandle = GLES20.glGetAttribLocation(program, "aPosition"); GLES20.glEnableVertexAttribArray(positionHandle); GLES20.glVertexAttribPointer(positionHandle, 2, GLES20.GL_FLOAT, false, 0, vertexBuffer); int texCoordHandle = GLES20.glGetAttribLocation(program, "aTexCoord"); GLES20.glEnableVertexAttribArray(texCoordHandle); GLES20.glVertexAttribPointer(texCoordHandle, 2, GLES20.GL_FLOAT, false, 0, texCoordBuffer); GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4); // 更新帧数 currentFrame = (currentFrame + 1) % textures.length; } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值