OpenGL ES入门06-图像膨胀、腐蚀、模糊
前言
本文是关于OpenGL ES的系统性学习过程，记录了自己在学习OpenGL ES时的收获。
这篇文章的目标是学习OpenGL ES 2.0中的图像膨胀、腐蚀、模糊。
环境是Xcode8.1+OpenGL ES 2.0
目前代码已经放到github上面，OpenGLES06-图像膨胀腐蚀模糊
欢迎关注我的 OpenGL ES入门专题
图像膨胀
膨胀 是将与物体接触的所有背景点合并到该物体中，使边界向外部扩张的过程。可以用来填补物体中的空洞。膨胀的简单理解就是亮的像素点向着周围扩散的过程。在OpenGL ES中实现图像的膨胀也是利用这一原理。在对某个像素点取值的时候，使用周围最亮的颜色代替本来的颜色来达到膨胀的效果。以下是OpenGL ES着色器代码的实现：
// 顶点着色器
attribute vec3 position;
attribute vec2 texcoord;
varying vec2 vTexcoord;
void main()
{
gl_Position = vec4(position, 1.0);
vTexcoord = texcoord;
}
// 片元着色器
precision mediump float;
uniform sampler2D image;
varying vec2 vTexcoord;
void main()
{
float block = 100.0;
float delta = 1.0/block;
vec4 maxColor = vec4(-1.0);
for (int i = -1; i <= 1 ; i++) {
for (int j = -1; j <= 1; j++) {
float x = vTexcoord.x + float(i) * delta;
float y = vTexcoord.y + float(i) * delta;
maxColor = max(texture2D(image, vec2(x, y)), maxColor);
}
}
gl_FragColor = maxColor;
}
膨胀
原图
图像腐蚀
腐蚀 是一种消除边界点，使边界向内部收缩的过程。可以用来消除小且无意义的物体。腐蚀的简单理解就是暗的像素腐蚀着亮的像素。在OpenGL ES中实现图像的腐蚀也是利用这一原理。在对某个像素点取值的时候，使用周围最暗的颜色代替本来的颜色来达到腐蚀周围的效果。以下是OpenGL ES着色器代码的实现：
// 顶点着色器
attribute vec3 position;
attribute vec2 texcoord;
varying vec2 vTexcoord;
void main()
{
gl_Position = vec4(position, 1.0);
vTexcoord = texcoord;
}
// 片元着色器
precision mediump float;
uniform sampler2D image;
varying vec2 vTexcoord;
void main()
{
float block = 200.0;
float delta = 1.0/block;
vec4 maxColor = vec4(1.0);
for (int i = -1; i <= 1 ; i++) {
for (int j = -1; j <= 1; j++) {
float x = vTexcoord.x + float(i) * delta;
float y = vTexcoord.y + float(i) * delta;
maxColor = min(texture2D(image, vec2(x, y)), maxColor);
}
}
gl_FragColor = maxColor;
}
腐蚀
![Uploading chart-1_391495.png . . .]
原图
图像模糊
1、普通模糊
模糊 可以理解成每一个像素都取周边像素的平均值。中间像素点取周围像素点的平均值。在数值上，这是一种平滑化。在图形上，就相当于产生模糊效果，则中间点失去细节。在OpenGL ES中卷积是一种很常见的数字图像处理操作，可以用来过滤一副图像,实现过滤的方法是计算原图像与卷积内核之间的积，所谓卷积内核是指一个MxN的矩阵,N一般为奇数,进行卷积计算时将卷积内核对待处理图像中的每个像素都应用一次。
卷积内核
着色器实现
attribute vec3 position;
attribute vec2 texcoord;
varying vec2 vTexcoord;
void main()
{
gl_Position = vec4(position, 1.0);
vTexcoord = texcoord;
}
precision mediump float;
uniform sampler2D image;
varying vec2 vTexcoord;
void main()
{
float block = 150.0;
float delta = 1.0/block;
vec4 color = vec4(0.0);
float factor[9];
factor[0] = 1.0; factor[1] = 1.0; factor[2] = 1.0;
factor[3] = 1.0; factor[4] = 1.0; factor[5] = 1.0;
factor[6] = 1.0; factor[7] = 1.0; factor[8] = 1.0;
for (int i = -1; i <= 1; i++) {
for (int j = -1; j <= 1; j++) {
float x = max(0.0, vTexcoord.x + float(i) * delta);
float y = max(0.0, vTexcoord.y + float(i) * delta);
color += texture2D(image, vec2(x, y)) * factor[(i+1)*3+(j+1)];
}
}
color = color/9.0;
gl_FragColor = vec4(vec3(color), 1.0);
}
2、高斯模糊
在使用简单平均方案的时候，并不是特别合理，因为图像都是连续的，越靠近的点关系越密切，越远离的点关系越疏远。因此，需要安排合适的权重去取周围的像素，距离越近的点权重越大，距离越远的点权重越小。在图形上，正态分布是一种钟形曲线，越接近中心，取值越大，越远离中心，取值越小。计算平均值的时候，我们只需要将中心点作为原点，其他点按照其在正态曲线上的位置，分配权重，就可以得到一个加权平均值。正态分布是一维的，图像都是二维的，所以我们需要二维的正态分布。正态分布的密度函数叫做高斯函数。高斯模糊就是将二维正态分布用于图像处理。
一
![Uploading chart-2_658231.png . . .]
维的正态分布
二维的正态分布
一维高斯函数
二维高斯函数
当中心点的坐标是远点，假定σ=1.5，则模糊半径为1的权重矩阵如下：
一个高斯权重矩阵
着色器实现
attribute vec3 position;
attribute vec2 texcoord;
varying vec2 vTexcoord;
void main()
{
gl_Position = vec4(position, 1.0);
vTexcoord = texcoord;
}
precision mediump float;
uniform sampler2D image;
varying vec2 vTexcoord;
void main()
{
float block = 150.0;
float delta = 1.0/block;
vec4 color = vec4(0.0);
float factor[9];
factor[0] = 0.0947416; factor[1] = 0.118318; factor[2] = 0.0947416;
factor[3] = 0.118318; factor[4] = 0.147761; factor[5] = 0.118318;
factor[6] = 0.0947416; factor[7] = 0.118318; factor[8] = 0.0947416;
for (int i = -1; i <= 1; i++) {
for (int j = -1; j <= 1; j++) {
float x = max(0.0, vTexcoord.x + float(i) * delta);
float y = max(0.0, vTexcoord.y + float(i) * delta);
color += texture2D(image, vec2(x, y)) * factor[(i+1)*3+(j+1)];
}
}
gl_FragColor = vec4(vec3(color), 1.0);
}
高斯模糊图
原图
