iOS开发-OpenGL ES实践教程(一)

教程

入门教程和进阶教程,介绍的是OpenGL ES基础,学习图形学基本概念,了解OpenGL ES的特性。 实践教程是OpenGL ES在实际开发中的应用,demo的来源主要是apple官网github。 这一次的内容是用OpenGL ES绘制YUV视频:获取到视频的每帧图像信息,用OpenGL ES绘制出来

效果展示

核心思路

通过APLImagePickerController选择本地的视频文件,用AVPlayer播放音频,用OpenGL ES绘制视频。

具体细节

1、AVPlayer

AVAsset:用于获取多媒体信息。 AVPlayerItem:管理视频的基本信息和状态。 AVPlayer:用来读取本地或者远程的多媒体文件。 AVPlayer的使用实例

    AVAsset *movieAsset = [AVURLAsset URLAssetWithURL:sourceMovieURL options:nil];
    AVPlayerItem *playerItem = [AVPlayerItem playerItemWithAsset:movieAsset];
    AVPlayer *player = [AVPlayer playerWithPlayerItem:playerItem];
    AVPlayerLayer *playerLayer = [AVPlayerLayer playerLayerWithPlayer:player];
    playerLayer.frame = self.view.layer.bounds;
    playerLayer.videoGravity = AVLayerVideoGravityResizeAspect;
    [self.view.layer addSublayer:playerLayer];
    [player play];

可以使用KVO,观察playerItem的status和loadedTimeRange属性 status有三种状态: AVPlayerStatusUnknown AVPlayerStatusReadyToPlay:视频可以播放 AVPlayerStatusFailed loadedTimeRange属性代表已经缓冲的进度。

在demo中,还用到一个AVPlayerItemVideoOutput类,用于协调输出的CoreVideo像素缓存,配置AVPlayerItem。

CADisplayLink帧显示的定时器 通过 CADisplayLink的timestamp 和 duration,计算下一帧显示的时间 从videoOutput中取出像素数据copyPixelBufferForItemTime 再通过displayPixelBuffer把数据交给OpenGL ES绘制。

2、CGAffineTransform

CGAffineTransform是一个矩阵,结构如下 | a, b, 0 | | c, d, 0 | | tx, ty, 1 | demo中会通过videoTrack的preferredTransform来获取拍摄开始时候的旋转角度,从而修正显示的角度。即使录制的时候是反着,显示也会是正的。

3、CMTime

CMTimeMake(a,b) a当前第几帧, b每秒钟多少帧.当前播放时间a/b CMTimeMakeWithSeconds(a,b) a当前时间,b每秒钟多少帧

demo中的addPeriodicTimeObserverForInterval 方法 添加回调CMTimeMake(1, 2)每秒回调两次

4、APLEAGLView

自定义的UIView子类,用OpenGL ES绘制视频。 preferredRotation 旋转的弧度 presentationRect 显示视频的大小 chromaThreshold 色度大小 lumaThreshold 亮度大小

kColorConversion601kColorConversion709是两个YUV颜色空间到RGB颜色空间的转换矩阵。 OpenGL ES的基础不再赘述,入门教程和进阶教程这里有详细的介绍,这次着重介绍如何把YUV的视频显示绘制到屏幕上。 CVOpenGLESTextureCacheRef :缓存和管理CVOpenGLESTextureRef。 CVOpenGLESTextureRef、CVImageBufferRef、CVBufferRef这三个实际上是一样的,是CV纹理的缓存。

demo中的pixelBuffer是从AVPlayerItemVideoOutput获取到图像数据,再用CVOpenGLESTextureCacheCreateTextureFromImage从buffer中读取数据并创建chromaTexture和lumaTexture。

AVMakeRectWithAspectRatioInsideRect会计算得出合适的视频宽高,不超过layer的bounds,再与bounds相除,以此作为顶点坐标的位置数据。

5、shader

  • 顶点着色器。通过preferredRotation计算出rotationMatrix,再对position进行操作。
  • 片元着色器。从SamplerY和SamplerUV中取出颜色,再与lumaThreshold和chromaThreshold相乘得出最后的颜色。

总结

从iOS设备中获取到每一帧的视频信息,可以使用AV框架。 使用OpenGL ES绘制视频部分的逻辑与之前教程介绍相差不多,增加了CVOpenGLESTextureCacheRef的使用。

附上代码

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据科学与人工智能

【Python环境】matplotlib - 2D 与 3D 图的绘制

类MATLAB API 最简单的入门是从类 MATLAB API 开始,它被设计成兼容 MATLAB 绘图函数。 让我们加载它: from pylab impo...

65870
来自专栏钱塘大数据

【干货】这17个技能,让你的Excel飞一样的提升

1、最快数据行公式求和 选取空行,点Σ(或按Alt + =)可以快速设置求和公式 ? 2、多区域最快求和 如果求和的区域有多个,可以选定位,然后再点Σ(或按A...

38760
来自专栏天天P图攻城狮

iOS GPUImage源码解读(一)

最近在不断学习、使用的过程中,有了更深刻的理解,特来写一篇源码解读的文章详细介绍下核心代码的具体实现。

3.4K120
来自专栏落影的专栏

OpenGL ES实践教程(七)多滤镜叠加处理

教程 OpenGL ES实践教程1-Demo01-AVPlayer OpenGL ES实践教程2-Demo02-摄像头采集数据和渲染 OpenGL ES实践...

64240
来自专栏前端说吧

echarts - 特殊需求实现代码汇总之【线图】篇

继7月24的echarts-柱图配置汇总后,echarts特殊配置连载第四篇 之 线图终于也被我这个懒家伙放出来了!

25030
来自专栏数据小魔方

R语言可视化——REmapB函数

今天跟大家介绍一个REmap包的新函数——REmapB。 它是REmap包中诸多组函数中的一位,功能上要强大于之前介绍的REmap函数,不仅可以完成REmap函...

1.6K40
来自专栏数值分析与有限元编程

可视化 | Tecplot绘制云图

Tecplot是功能强大的数据可视化工具,可以将计算中得到的大量数据形成直观图形。Tecplot的功能包括绘制XY曲线、轮廓图、云线、等值线、向量图、离散点等。...

3.5K40
来自专栏拂晓风起

Flash图片处理 图像处理 效果 滤镜 pixelbender blender mode

  前6个小玩意,正好对应Flash CS滤镜面板的几个效果,使用比较简单,详细可以参考这个: http://blog.sina.com.cn/s/blog_3...

17120
来自专栏程序员的诗和远方

Canvas基础-粒子动画Part1

网页上各种酷炫的粒子动画看的人眼花缭乱,实际上原理却非常简单。 获取像素信息 首先我们需要画张图到Canvas上,这里因为我懒的扣图(实际上是不会),就找...

37260
来自专栏一“技”之长

Cocos2d-x-v3中3D网格特效动画的应用

        基础的动作是对节点整体进行移动,变形等操作,网格特效的原理是将节点分割成多个尺寸相同的网格,根据改变每个网格块的属性使整体节点产生3D的效果。

11720

扫码关注云+社区

领取腾讯云代金券