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的使用。

附上代碼

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容