利用 OpenGL ES 给视频播放器做个字符画滤镜

最后不少朋友问,OpenGL ES 入门后怎么学习写一些滤镜 ?怎么学习 shader ?

最近请教了一些大佬,他们一致认为正确的做法就是“去模仿”。 先去模仿别人的滤镜怎么实现的,比如观察抖音的一些简单的滤镜,然后自己琢磨去实现一个。

当然,最有效率的方法是研究一些相关的开源项目,比如 大名鼎鼎的 gpuimage 项目 ,该项目基本上实现了各种常见滤镜,上手容易,学习 shader 、熟悉 GLSL 内建函数或者对 OpenGL 滤镜感兴趣的同学,可以研究下。

顺便说下,最近看了 一个项目叫 android-gpuimage-plus ,主要讲是 Native 层实现的滤镜 ,有一些比较不错的思路可以参考下。

之前有一位朋友发了一副表情画滤镜的效果图,就是利用不同的表情去替换不同的像素,生成一副由表情组成的图像。表情画滤镜的原理其实跟字符画相同,只是字符换成了表情。

由于那副效果图不方便展示,这里就介绍下字符画的实现原理,利用一个 shader 来实现字符画效果。

字符画滤镜原理

字符画滤镜其实跟 LUT 滤镜是同一个原理,本质上就是 查表,像素替换

实现字符画滤镜,首先想到的法子是,对图像进行逐像素替换成字符(一个字符实际上是由多个像素组成的小图片)。

逐像素替换会有两个问题:

  • 一个像素有 RGB 24 位三个通道,一共有 256×256×256 种颜色, 那么多颜色要与字符表对应起来很麻烦;
  • 逐像素替换字符,相当于原图一个像素替换成多个像素,比如现在用的字符表,一个字符的大小是 16x23 = 268 像素, 那么渲染出来的图像大小变为原来的 268 倍,显然也不合理

所以字符画滤镜实现的正确思路是先把原图转为灰度图,这样颜色种类只有 256 种。

然后做马赛克, 用一个小格子替换一个字符,保证小格子的宽高比与字符相同,确保替换后的字符不被拉伸,这样渲染出来的图像大小与原图一样。

1

字符画原理

字符画滤镜原理一句话描述就是,原图先做灰度图马赛克,再用小格子替换字符。

字符画滤镜实现

按照上节的原理描述,我们先对原图做灰度图马赛克,获取灰度值就直接对采样后像素点的 RGB 分量进行灰度转换。

//RGB 转灰度公式Y = 0.299R+0.587G+0.114B

马赛克效果原理就是将图像分割成很多小区域,小区域内取相同的颜色 ,颜色值可以是该区域某些像素值的加权平均,本文取的是小矩形区域内中心点的像素值。

2 字符表(图片来自项目android-gpuimage-plus )

这里使用的字符表图像尺寸 128x69 , 一共有 24 个字符,每个字符尺寸 16x23 像素

灰度图马赛克的实现。

//灰度图马赛克
#version 100
precision highp float;
varying vec2 v_texcoord;
uniform lowp sampler2D s_textureY;
uniform lowp sampler2D s_textureU;
uniform lowp sampler2D s_textureV;
uniform lowp sampler2D s_textureMapping;
uniform vec2 texSize;

vec4 YuvToRgb(vec2 uv) {
    float y, u, v, r, g, b;
    y = texture2D(s_textureY, uv).r;
    u = texture2D(s_textureU, uv).r;
    v = texture2D(s_textureV, uv).r;
    u = u - 0.5;
    v = v - 0.5;
    r = y + 1.403 * v;
    g = y - 0.344 * u - 0.714 * v;
    b = y + 1.770 * u;
    return vec4(r, g, b, 1.0);
}

const vec3  RGB2GRAY_VEC3 = vec3(0.299, 0.587, 0.114);
const float MESH_WIDTH = 16.0;//一个字符的宽
const float MESH_HEIGHT= 23.0;//一个字符的高
const float MESH_ROW_NUM = 100.0;//固定小格子的行数
void main()
{
    float imageMeshWidth = texSize.x / MESH_ROW_NUM;
    //使小格子的宽高比跟字符的宽高比保持一致,防止替换后字符被拉伸
    float imageMeshHeight = imageMeshWidth * MESH_HEIGHT / MESH_WIDTH;

    vec2 imageTexCoord = v_texcoord * texSize;//归一化坐标转像素坐标

        //取小格子中心点的像素
    vec2 midTexCoord;
    midTexCoord.x = floor(imageTexCoord.x / imageMeshWidth) * imageMeshWidth + imageMeshWidth * 0.5;//小格子中心
    midTexCoord.y = floor(imageTexCoord.y / imageMeshHeight) * imageMeshHeight + imageMeshHeight * 0.5;//小格子中心
    vec2 normalizedTexCoord = midTexCoord / texSize;//归一化
    vec4 rgbColor = YuvToRgb(normalizedTexCoord);//采样

    float grayValue = dot(rgbColor.rgb, RGB2GRAY_VEC3);//rgb转灰度值
    gl_FragColor = vec4(vec3(grayValue), rgbColor.a);
}

灰度图马赛克的效果。

灰度图马赛克的效果

灰度图马赛克完成后 ,每个小格子替换一个字符,24 个字符将 0~255 的灰度值(归一化后为 0~1.0 )分成 24 个等级,计算出灰度值后根据等级取对应的字符。

然后根据采样坐标在小格子内的偏移计算出字符(包含一个字符的小图片)的采样坐标,最后对字符采样。

字符画实现的完整 shader 。

//字符画
#version 100
precision highp float;
varying vec2 v_texcoord;
uniform lowp sampler2D s_textureY;
uniform lowp sampler2D s_textureU;
uniform lowp sampler2D s_textureV;
uniform lowp sampler2D s_textureMapping;//字符表纹理
uniform float u_offset;
uniform vec2 texSize;//原图尺寸
uniform vec2 asciiTexSize;//字符表尺寸

vec4 YuvToRgb(vec2 uv) {
    float y, u, v, r, g, b;
    y = texture2D(s_textureY, uv).r;
    u = texture2D(s_textureU, uv).r;
    v = texture2D(s_textureV, uv).r;
    u = u - 0.5;
    v = v - 0.5;
    r = y + 1.403 * v;
    g = y - 0.344 * u - 0.714 * v;
    b = y + 1.770 * u;
    return vec4(r, g, b, 1.0);
}

const vec3  RGB2GRAY_VEC3 = vec3(0.299, 0.587, 0.114);
const float MESH_WIDTH = 16.0;//一个字符的宽
const float MESH_HEIGHT= 23.0;//一个字符的高
const float GARY_LEVEL = 24.0;//字符表图上有 24 个字符
const float ASCIIS_WIDTH = 8.0;//字符表列数
const float ASCIIS_HEIGHT = 3.0;//字符表行数
const float MESH_ROW_NUM = 100.0;//固定小格子的行数
void main()
{
    float imageMeshWidth = texSize.x / MESH_ROW_NUM;
    //使小格子的宽高比跟字符的宽高比保持一致,防止替换后字符被拉伸
    float imageMeshHeight = imageMeshWidth * MESH_HEIGHT / MESH_WIDTH;

    vec2 imageTexCoord = v_texcoord * texSize;//归一化坐标转像素坐标

        //取小格子中心点的像素
    vec2 midTexCoord;
    midTexCoord.x = floor(imageTexCoord.x / imageMeshWidth) * imageMeshWidth + imageMeshWidth * 0.5;//小格子中心
    midTexCoord.y = floor(imageTexCoord.y / imageMeshHeight) * imageMeshHeight + imageMeshHeight * 0.5;//小格子中心
    vec2 normalizedTexCoord = midTexCoord / texSize;//归一化
    vec4 rgbColor = YuvToRgb(normalizedTexCoord);//采样

    float grayValue = dot(rgbColor.rgb, RGB2GRAY_VEC3);//rgb转灰度值
    //gl_FragColor = vec4(vec3(grayValue), rgbColor.a);

    //根据采样坐标在小格子内的偏移计算出在字符(包含一个字符的小图片)内的偏移
    float offsetX = mod(imageTexCoord.x, imageMeshWidth) * MESH_WIDTH / imageMeshWidth;
    float offsetY = mod(imageTexCoord.y, imageMeshHeight) * MESH_HEIGHT / imageMeshHeight;

    float asciiIndex = floor((1.0 - grayValue) * GARY_LEVEL);//根据灰度值确定第几个字符
    float asciiIndexX = mod(asciiIndex, ASCIIS_WIDTH);
    float asciiIndexY = floor(asciiIndex / ASCIIS_WIDTH);

    //根据字符的位置和字符内的偏移,计算出字符表纹理的采样点坐标
    vec2 grayTexCoord;
    grayTexCoord.x = (asciiIndexX * MESH_WIDTH + offsetX) / asciiTexSize.x;
    grayTexCoord.y = (asciiIndexY * MESH_HEIGHT + offsetY) / asciiTexSize.y;

    vec4 originColor = YuvToRgb(v_texcoord);//采样原始纹理
    vec4 mappingColor = vec4(texture2D(s_textureMapping, grayTexCoord).rgb, rgbColor.a);//采样字符表纹理

    gl_FragColor = mix(originColor, mappingColor, u_offset);//最后做个混合保留一些原图的色彩
}

下面是字符画的效果。

字符画的效果

– END –

推荐阅读
作者信息
ByteFlow
TA 暂未填写个人简介
文章
10
相关专栏
本专栏仅用于分享音视频相关的技术文章,与其他开发者和 Agora 研发团队交流、分享行业前沿技术、资讯。发帖前,请参考「社区发帖指南」,方便您更好的展示所发表的文章和内容。