1.開篇
龍少:
最近在寫什麼bug呢?
捷特:會用OpenGL播放視訊之後,感覺個很多知識都串到一起了。很多shader都是OpenGLES2.0,我順便用3.0的規範重塑了一下。
龍少:真是閒著沒事,播個視訊還要OpenGL, 哥VideoView一把梭你信不信?
捷特:少年,你對於力量一無所知,難到你以為視訊播放都是這樣的?
![[- 多媒體 -] OpenGLES3.0 接入視訊實現特效 - 引言](https://i.iter01.com/images/e3c5181e8bded5971b39164f14224fbaf5abb695e81fdb63bb328fb0d9d723d3.gif)
龍少:
不然呢?還能這麼播?
捷特:縮放了解一下。
龍少:對View的變換也行啊,so easy
![[- 多媒體 -] OpenGLES3.0 接入視訊實現特效 - 引言](https://i.iter01.com/images/7f8f5211facfa6b38ff11f5ab6a49692bd25393df04b66e36e2ad478ec7eafad.gif)
原始碼:com.toly1994.tolygl.gl.shape.player.VideoDrawer
shader: 頂點: video.vsh 片段:video_simple.fsh
複製程式碼
捷特:
透視呢?
龍少:對View的變換...,應該也可以...
![[- 多媒體 -] OpenGLES3.0 接入視訊實現特效 - 引言](https://i.iter01.com/images/5de0f0746847ccafdfe88d08715a9ecfa4a3443a0069159ab6b5349aa8f7dfff.gif)
原始碼:com.toly1994.tolygl.gl.shape.player.VideoDrawer
shader: 頂點: video.vsh 片段:video_simple.fsh
複製程式碼
捷特:
旋轉呢?
龍少:對View的變換......不知道行不行...
![[- 多媒體 -] OpenGLES3.0 接入視訊實現特效 - 引言](https://i.iter01.com/images/e266d583c5add021b341e3513bc2c3934d4e8cba90927865ff20d463ed27fde5.gif)
原始碼:com.toly1994.tolygl.gl.shape.player.VideoDrawer
shader: 頂點: video.vsh 片段:video_simple.fsh
複製程式碼
捷特:
黑白呢?
龍少:控制View顯示時的RGB的值....
![[- 多媒體 -] OpenGLES3.0 接入視訊實現特效 - 引言](https://i.iter01.com/images/73690bab38a7328c75ec933fb32a7b41fef24bf45824838af42d251ab25c669d.gif)
捷特:
色效呢?
龍少:我......
![[- 多媒體 -] OpenGLES3.0 接入視訊實現特效 - 引言](https://i.iter01.com/images/1f81a408e72121cca247df3724ad099f6d027875866ac8a9020878b282ab628a.gif)
原始碼:com.toly1994.tolygl.gl.shape.player.VideoDrawer
shader: 頂點: video.vsh 片段:video_gray.fsh
複製程式碼
捷特:
負片呢?
龍少:我......
![[- 多媒體 -] OpenGLES3.0 接入視訊實現特效 - 引言](https://i.iter01.com/images/9b694e894b1a074bde468821a53b0e9bd68da13fe92fc5b81bd4c76106427cad.gif)
原始碼:com.toly1994.tolygl.gl.shape.player.VideoDrawer
shader: 頂點: video.vsh 片段:video_fupian.fsh
複製程式碼
捷特:
六邊形馬賽克呢?
龍少:我......
![[- 多媒體 -] OpenGLES3.0 接入視訊實現特效 - 引言](https://i.iter01.com/images/8af2e4937423264b92e20003a74d4950f6dad22612b5fb951db3eaaa0a053578.gif)
原始碼:com.toly1994.tolygl.gl.shape.player.VideoDrawer
shader: 頂點: video.vsh 片段:video_mask.fsh
複製程式碼
捷特:
分屏呢?
龍少:我......
![[- 多媒體 -] OpenGLES3.0 接入視訊實現特效 - 引言](https://i.iter01.com/images/78a37c7c2d28fc234299d9018311c56025afb1aa978c38b9bb25a7e6fbb25514.gif)
原始碼:com.toly1994.tolygl.gl.shape.player.VideoDrawer
shader: 頂點: video.vsh 片段:video_split.fsh
複製程式碼
捷特:
色動呢?
龍少:我......
![[- 多媒體 -] OpenGLES3.0 接入視訊實現特效 - 引言](https://i.iter01.com/images/d974e3ccf47bbcb24d0bf0c696e292648dbbefe0bc1589c31425aadf2be6be36.gif)
原始碼:com.toly1994.tolygl.gl.shape.player.VideoDrawer2
shader: 頂點: video.vsh 片段:video_offset.fsh
複製程式碼
捷特:
縮放顫動呢?
龍少:我......
![[- 多媒體 -] OpenGLES3.0 接入視訊實現特效 - 引言](https://i.iter01.com/images/527ff80c8853b223edc38c219b882328c0db8b7100efdfaac6697c9c204a5e5d.gif)
原始碼:com.toly1994.tolygl.gl.shape.player.VideoDrawer2
shader: 頂點: video_scale.vsh 片段:video_scale.fsh
複製程式碼
捷特:
靈魂出竅呢?
龍少:我......
![[- 多媒體 -] OpenGLES3.0 接入視訊實現特效 - 引言](https://i.iter01.com/images/74f4546555aab657a229d06b21fea02c79e0cc06c4ab7dc72757d46bf29249ac.gif)
原始碼:com.toly1994.tolygl.gl.shape.player.VideoDrawer2
shader: 頂點: video.vsh 片段:video_gost.fsh
複製程式碼
捷特:
毛刺呢?
龍少:我......
![[- 多媒體 -] OpenGLES3.0 接入視訊實現特效 - 引言](https://i.iter01.com/images/5e702424a9d53d7f2c194deab628236e204b63d5df76fe8fc0f1248b25ea4d5f.gif)
原始碼:com.toly1994.tolygl.gl.shape.player.VideoDrawer2
shader: 頂點: video.vsh 片段:video_ci.fsh
複製程式碼
捷特:
渦旋呢?
龍少:我......
![[- 多媒體 -] OpenGLES3.0 接入視訊實現特效 - 引言](https://i.iter01.com/images/965a52afaca0120dc9a47bc181e0eef5f3ea6ee1e0d329cd10955ecf3a892e47.gif)
原始碼:com.toly1994.tolygl.gl.shape.player.VideoDrawer
shader: 頂點: video.vsh 片段:video_rotate.fsh
複製程式碼
![[- 多媒體 -] OpenGLES3.0 接入視訊實現特效 - 引言](https://i.iter01.com/images/ab0383ce80ca23ee4738c51a4ec9756bdfe308b8edb34354308eb1c317ea68c1.png)
2.導言
不知從何說起,知識點挺多的。OpenGL是塊難啃的骨頭,但是一旦啃碎了,就會覺得真香。這把石中劍你拔不拔得起不是問題,關鍵在於你肯不肯拔。
OpenGLES2.0已成為歷史,以前寫了6篇ES2.0入門文章,雖然有略微的變化,但是核心思想還是不變的。不會玩矩陣,不瞭解三維相機,不明白顏色構造,懶得計算,只想CV,學啥都是白搭。
吾想要寫幾篇OpenGLES3.0的文章,直接開撕視訊,總感覺雲裡霧裡的。先寫些基礎的知識鋪墊一下,作為OpenGLES3.0最佳實踐。再結合視屏的播放特效來說說實際使用。可能的話後面會接入FFmpeg,讓編解碼大佬和渲染大佬並肩作戰。下面是一些入門OpenGLES的過程:
2.1 紅屏
相當於用顏色來說:"Hello World"
![[- 多媒體 -] OpenGLES3.0 接入視訊實現特效 - 引言](https://i.iter01.com/images/44c0ee6eefdcd66bae7bd2def8a5a833cb960ff52f845b4f4891c5beb61e8473.png)
2.2 點
無中生有,萬物起源。在此將介紹著色器的使用,與圖形渲染流程。
![[- 多媒體 -] OpenGLES3.0 接入視訊實現特效 - 引言](https://i.iter01.com/images/e8985c7c27fe6606365551cffed9ea02f75a40aff54a650d31c3d872584f90de.png)
2.3 視點與透視投影
雖然你是三維物體,但你的眼睛只能看到二維面,只是通過變動參考位置來感受三維物體。人們的日常生活,僅需要二維就足夠了。OpenGL為你開啟了一扇通往三維的大門它只是二維面上的模擬三維。
![[- 多媒體 -] OpenGLES3.0 接入視訊實現特效 - 引言](https://i.iter01.com/images/77c400ef72eccc34a69ac08090de2bd5eeb9aa9773248c8948968f404f6133b4.png)
2.4 線與座標系
地心說,日心說?在我的世界(0,0,0)就是中心。紅色x軸向,藍色z軸向,綠色y軸向。瞭解世界座標是創造世界的第一步:
![[- 多媒體 -] OpenGLES3.0 接入視訊實現特效 - 引言](https://i.iter01.com/images/0e015f9337a1490de4fe8698145e15e8ce5247a9e8482ed70b4a34845faac60d.png)
2.5 網格線
如何通過迴圈來收錄座標,是件挺重要的事。
![[- 多媒體 -] OpenGLES3.0 接入視訊實現特效 - 引言](https://i.iter01.com/images/0180b438f796d8aebefaa6fd3f0bbc91ababff9266b8c165133d060404deea67.png)
2.6 繪製三角形
![[- 多媒體 -] OpenGLES3.0 接入視訊實現特效 - 引言](https://i.iter01.com/images/197a538bf6407ce87d2031c620f47c6114422d51f72de3955d4a5e62232f97e0.png)
2.7 四邊形和五邊形
![[- 多媒體 -] OpenGLES3.0 接入視訊實現特效 - 引言](https://i.iter01.com/images/3d25d448277164f7af30febbd56e8b4d454e256dc5867146db4cff1f3e7d00db.png)
2.8 貼圖
![[- 多媒體 -] OpenGLES3.0 接入視訊實現特效 - 引言](https://i.iter01.com/images/8627c76bd2807835302af9a53087e98bdd00a14356d38a4316dcc4fcd48129c5.png)
2.9 操作和變換
手勢操作:
![[- 多媒體 -] OpenGLES3.0 接入視訊實現特效 - 引言](https://i.iter01.com/images/65ff0a7e7ef67ac54cf33c434ab8d747d38d04d1469f342ee56fd7be31d6ca04.gif)
旋轉展示:
![[- 多媒體 -] OpenGLES3.0 接入視訊實現特效 - 引言](https://i.iter01.com/images/2fef36303a23aba6a71732cbd16ebf2e3a20c24ad8390bda102f86a4567421a1.gif)
到這來就可以接入視訊了,視訊也就是一個貼圖而已,你完全可以將視訊貼在空間的任何位置。此後花分兩朵,各表一枝:
其一是視訊/相機的接入和特效、FFmpeg的接入,專注多媒體;
其二是複雜的空間立體圖形的繪製及環境渲染,專注圖形學。
複製程式碼
更多的細節也會慢慢說吧,畢竟不是一兩句就能說清的。不過以後沒那麼多空閒,可能更新的就比較慢了。日更變月更吧,有生之年系列,隨著更新會補連結,介意收藏此文。也會在長滿草的公眾號
程式設計之王
上收錄,歡迎除草。 如有興趣,可以先看先了解一些基礎知識,也就是萬變不離的宗。以前的2.0系列:
Android多媒體之GL-ES2戰記第一集--勇者集結
Android多媒體之GL-ES2戰記第二集--謎團立方
Android多媒體之GL-ES2戰記第三集--聖火之光
Android多媒體之GL-ES2戰記第四集--移形換影
Android多媒體之GL-ES2戰記第五集--宇宙之光
Android多媒體之GL-ES2戰記第六集--九層之臺
小結
馬上到2019年的最後一個月了,緬懷一下吧。今年的成長也很多,最起碼把Flutter的框架撕的差不多了,音視訊的知識也逐漸聯絡起來。拓撲、離散數學和量子力學作為茶餘飯後的科普知識基本瞭解一些;微積分忘得差不多了,有必要還得撿起來。總的看來,並沒有完成預期的目標。畢竟上半年算是廢了...... 不過也算對得起今年的標籤。
未來嘛,很遠,遠到我看不見。只是耳邊迴響那靈魂三問:我是誰,我來自何方,我終歸何處......
2017年標籤:"海的彼岸,有我未曾見證的風采"
2018年標籤:"海的彼岸,吾在征途"
2019年標籤:"向那些曾經無法跨越的鴻溝敬上——君臨"
2020年標籤:"封神之路,漫漫修遠"
複製程式碼
@張風捷特烈 2019.11.30 未允禁轉
我的公眾號:程式設計之王
~ END ~