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

2018-04-27 16:24:04 浏览数 (1)

教程

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

效果展示

核心思路

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

具体细节

1、AVPlayer

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

代码语言:javascript复制
    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 人点赞