继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

[- 多媒体 -] OpenGLES3.0 接入视频实现特效 - 引言

张风捷特烈
关注TA
已关注
手记 72
粉丝 21
获赞 57

1.开篇

龙少:最近在写什么bug呢?
捷特:会用OpenGL播放视频之后,感觉个很多知识都串到一起了。很多shader都是OpenGLES2.0,我顺便用3.0的规范重塑了一下。
龙少:真是闲着没事,播个视频还要OpenGL, 哥VideoView一把梭你信不信?
捷特:少年,你对于力量一无所知,难到你以为视频播放都是这样的?

http://img3.mukewang.com/5de7cac20001f2e203730211.jpg

龙少:不然呢?还能这么播?
捷特:缩放了解一下。
龙少:对View的变换也行啊,so easy

http://img2.mukewang.com/5de7cac300013d7502350101.jpg
源码:com.toly1994.tolygl.gl.shape.player.VideoDrawer shader: 顶点: video.vsh     片段:video_simple.fsh

捷特:透视呢?
龙少:对View的变换...,应该也可以...

http://img3.mukewang.com/5de7cac30001050d02480177.jpg
源码:com.toly1994.tolygl.gl.shape.player.VideoDrawer shader: 顶点: video.vsh     片段:video_simple.fsh

捷特:旋转呢?
龙少:对View的变换......不知道行不行...

http://img2.mukewang.com/5de7cac400015e3702420148.jpg
源码:com.toly1994.tolygl.gl.shape.player.VideoDrawer shader: 顶点: video.vsh     片段:video_simple.fsh

捷特:黑白呢?
龙少:控制View显示时的RGB的值....

http://img.mukewang.com/5de7cac4000169cd02170158.jpg

捷特:色效呢?
龙少:我......

http://img.mukewang.com/5de7cac50001311a01670200.jpg
源码:com.toly1994.tolygl.gl.shape.player.VideoDrawer shader: 顶点: video.vsh     片段:video_gray.fsh

捷特:负片呢?
龙少:我......

http://img1.mukewang.com/5de7cac70001f05e02380148.jpg
源码:com.toly1994.tolygl.gl.shape.player.VideoDrawer shader: 顶点: video.vsh     片段:video_fupian.fsh

捷特:六边形马赛克呢?
龙少:我......

http://img2.mukewang.com/5de7cac700018ad502120173.jpg
源码:com.toly1994.tolygl.gl.shape.player.VideoDrawer shader: 顶点: video.vsh     片段:video_mask.fsh

捷特:分屏呢?
龙少:我......

http://img4.mukewang.com/5de7cac80001fdfa02350152.jpg
源码:com.toly1994.tolygl.gl.shape.player.VideoDrawer shader: 顶点: video.vsh     片段:video_split.fsh

捷特:色动呢?
龙少:我......

http://img4.mukewang.com/5de7cac900018f3602290158.jpg
源码:com.toly1994.tolygl.gl.shape.player.VideoDrawer2 shader: 顶点: video.vsh     片段:video_offset.fsh

捷特:缩放颤动呢?
龙少:我......

http://img1.mukewang.com/5de7cb1500011e7702710207.jpg
源码:com.toly1994.tolygl.gl.shape.player.VideoDrawer2 shader: 顶点: video_scale.vsh     片段:video_scale.fsh

捷特:灵魂出窍呢?
龙少:我......

http://img3.mukewang.com/5de7cb160001f84602050179.jpg
源码:com.toly1994.tolygl.gl.shape.player.VideoDrawer2 shader: 顶点: video.vsh     片段:video_gost.fsh

捷特:毛刺呢?
龙少:我......

http://img3.mukewang.com/5de7cb1600019c7302420145.jpg
源码:com.toly1994.tolygl.gl.shape.player.VideoDrawer2 shader: 顶点: video.vsh     片段:video_ci.fsh

捷特:涡旋呢?
龙少:我......

http://img3.mukewang.com/5de7cb170001d97802420148.jpg
源码:com.toly1994.tolygl.gl.shape.player.VideoDrawer shader: 顶点: video.vsh     片段:video_rotate.fsh


http://img2.mukewang.com/5de7cb170001647f04400278.jpg

2.导言

不知从何说起,知识点挺多的。OpenGL是块难啃的骨头,但是一旦啃碎了,就会觉得真香。这把石中剑你拔不拔得起不是问题,关键在于你肯不肯拔。

OpenGLES2.0已成为历史,以前写了6篇ES2.0入门文章,虽然有略微的变化,但是核心思想还是不变的。不会玩矩阵,不了解三维相机,不明白颜色构造,懒得计算,只想CV,学啥都是白搭。

吾想要写几篇OpenGLES3.0的文章,直接开撕视频,总感觉云里雾里的。先写些基础的知识铺垫一下,作为OpenGLES3.0最佳实践。再结合视屏的播放特效来说说实际使用。可能的话后面会接入FFmpeg,让编解码大佬和渲染大佬并肩作战。下面是一些入门OpenGLES的过程:


2.1 红屏

相当于用颜色来说:"Hello World"

http://img.mukewang.com/5de7cb1700019fd612800583.jpg
2.2 点

无中生有,万物起源。在此将介绍着色器的使用,与图形渲染流程。

http://img1.mukewang.com/5de7cb170001834612800580.jpg
2.3 视点与透视投影

虽然你是三维物体,但你的眼睛只能看到二维面,只是通过变动参考位置来感受三维物体。人们的日常生活,仅需要二维就足够了。OpenGL为你打开了一扇通往三维的大门它只是二维面上的模拟三维。

http://img2.mukewang.com/5de7cb5a0001ddd412800576.jpg
2.4 线与坐标系

地心说,日心说?在我的世界(0,0,0)就是中心。红色x轴向,蓝色z轴向,绿色y轴向。了解世界坐标是创造世界的第一步:

http://img1.mukewang.com/5de7cb5a00016cc612800578.jpg
2.5 网格线

如何通过循环来收录坐标,是件挺重要的事。

http://img.mukewang.com/5de7cb5a0001369a12800578.jpg
2.6 绘制三角形
http://img4.mukewang.com/5de7cb5b00017a9a12800579.jpg
2.7 四边形和五边形
http://img4.mukewang.com/5de7cb5b0001a03e12800583.jpg
2.8 贴图
http://img2.mukewang.com/5de7cb5b0001210d12800577.jpg
2.9 操作和变换

手势操作:

http://img4.mukewang.com/5de7cb5c00018bcc03190152.jpg

旋转展示:

http://img1.mukewang.com/5de7cb5d0001c32302830154.jpg

到这来就可以接入视频了,视频也就是一个贴图而已,你完全可以将视频贴在空间的任何位置。此后花分两朵,各表一枝:

其一是视频/相机的接入和特效、FFmpeg的接入,专注多媒体;
其二是复杂的空间立体图形的绘制及环境渲染,专注图形学。



打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP