日迹中视频编辑滤镜效果实现方法

导语 :本文简要分析,日迹视频解码流程以及视频滤镜的实现原理

需求背景:日迹需要的编辑滤镜效果预览图

图1:日迹滤镜效果

要实现产品想要的滤镜效果,首先我们需要把录制的视频mp4文件,用mediacodec解码出来,然后对解码出来的每一帧图像进行滤镜渲染,最后绘制到屏幕或者输出到文件。

我们先来了解mediacodec解码的流程。

图2:mediacodec解码流程

MediaExtractor 负责从视频文件中解析每一帧的原始数据;

Mediacodec 负责对音视频数据进行解码,并渲染指定的surface上;

代码示例:

//初始化extractor

MediaExtractor extractor = new MediaExtractor();

extractor.setDataSource(...);

...

//初始化meidacoec

MediaCodec decoder= Mediacodec.createDecodecByType(mine);

decoder.configure(format, surface, null, 0);

decoder.start();

...

//循环处理每一帧

While(notEndFlag){

//把读出来的帧数据交给mediacodec去解析

extractor.readSampleDate(buffer, 0);

decoder.queueInputBuffer(bufferIndex, 0, sampleSize, showTimeus, 0);

//向前移动 准备读取下一帧

extractor.advance();

//把mediacodec解析后的数据交给surface去渲染

decoder.dequeueOutputBuffer(info, 10000);

decoder.releaseOutputBuffer(bufferIndex, isRender);

}

走到这里,我们已经可以从Surface上拿到每一帧对应的Texture (纹理),之后我们就可以利用Opengl的可编程管线,对纹理进行相关的滤镜处理。下面说下opengl的渲染流程。

图3: opengl 渲染管线简图

CPU 将物体顶点坐标、顶点变换矩阵、纹理坐标、纹理变换矩阵等通过API传给VertexShader(顶点着色器),它针对VBO提供的每个顶点执行一遍顶点着色器,VertexShader通过varying限定符传输易变变量给FragmentShader使用,FrgementShader对光栅化的每个片元进行处理,生成多重的颜色混合效果,最后渲染到屏幕或者写到文件中。

1. 黑白滤镜的实现

我们拍摄出来的每一帧图片都是彩色图片,每个像素的颜色由红、绿、蓝三种值混合而成,红绿蓝的取值由很多种,组合形成各种不同的彩色图片,而灰度图片只有256种颜色。由彩色图片生成灰色图片一般由三种算法:

A. 最大值法:R=G=B=MAX(R,G,B),这种方式亮度值偏高;

B. 平均值法:R=G=B=(R+G+B)/3, 这种方式图片亮度值被平均,图片非常柔和

C. 加权平均法:R=G=B=(RWr+GWg+B*Wb),由于人眼对不同颜色的敏感度不一样,所以权重也不同,业界比较常用的权重值是(0.2125, 0.7154, 0.0721)。

我们采用的最后一种加权平均的方式,知道了算法就来实现下吧。要实现GPU实时滤镜,首先要了解这么写Shader,网上有很多shader的文章,这里我就不做叙述。

2. 不同颜色滤镜的实现

想实现不同颜色滤镜的实现,可以把期望加强的颜色通道的颜色值加强到相应的比例即可。

图4:红色值扩大两倍的滤镜效果

3. 暖色冷色滤镜的实现

通过PS调整出目标图片与原图每个通道的偏差规律,并把这种差异生成颜色表,给出最终的滤镜变换查表纹理,FragmentShader处理的时候,不同的RGB颜色值去查表纹理中找到对应的目标颜色值进行替换即可。

4. 马赛克的实现

实现马赛克,首先要确定马赛克单元的块大小,马赛克每个独立的方块上都是纯色的,它的取值一般是原图中对应区域的颜色的平均值。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Code_iOS

OpenGL ES 2.0 (iOS)[04]:坐标空间 与 OpenGL ES 2 3D空间

第一次变换 模型变换(Model Transforms):就是指从模型空间转换到世界空间的过程

732
来自专栏数据小魔方

数据地图系列2|三维立体数据地图(给你的地图加特效)

今天跟大家分享数据地图系列2——三维立体数据地图(给你的地图加特效)! 昨天已经跟大家分享过了如何在ppt中利用矢量地图图形编辑数据地图,因为是手工编辑,所以门...

3465
来自专栏落影的专栏

iOS开发-OpenGLES进阶教程2

教程 OpenGLES入门教程1-Tutorial01-GLKit OpenGLES入门教程2-Tutorial02-shader入门 OpenGLES入门教程...

2797
来自专栏Renderbus云渲染农场

vray渲染速度慢的影响因素和提升技巧-Renderbus

模型因素 较为复杂的模型(特别是存在较多细小转角的模型),会耗费更多的渲染计算时间。模型的复杂程度对渲染的影响较大,这个问题可以说是“硬件伤”。

1614
来自专栏大数据文摘

手把手:使用OpenCV进行面部合成— C++ / Python

24212
来自专栏ThoughtWorks

前端不止:Retina屏幕下两倍图

所见不一定即所得 眼睛是心灵的窗户,也是蒙蔽你的一种途径。 假设,我给你一张图片,你觉得肉眼可以观察到全部的细节吗? ? ---- 屏幕上一张清晰的图片 肉眼...

3365
来自专栏落影的专栏

OpenGL光照学习以及OpenGL4环境

前言 最近稍有空闲,整理下之前学习光照的笔记,以及在配置OpenGL4环境过程中遇到的问题。 光照 1、模拟灯光 模拟灯光:通过GPU来计算场景中的几何图...

3537
来自专栏Android-薛之涛

android-tips(ScaleType)

android tips主要讲解平时在开发中的一些常用有比较容易让人忽略的问题或者是个人建议。知识比较杂,但是好多人可能看到过,但没有仔细想,研究..........

925
来自专栏逍遥剑客的游戏开发

边缘高亮效果(三)

1162
来自专栏Golang语言社区

厚土Go学习笔记 | 37. 图片(image)生成器

图片的操控有点复杂。Image类型有一些必要的方法必须实现。而 Image 本身也要构建一个最简单的结构体,包含图片的宽和高。 我们实现一个给定了大小的图片,然...

34211

扫码关注云+社区