马赛克是一种常用的图像处理手段，因为这种模糊效果看上去有一个个的小格子组，便形象的称这种画面为马赛克。当画面上的马赛克格子小到一定程度的时候，画面呈现出来的风格也叫像素风

demo

实现思路

核心思路就是把图片划分成M * N个小格子，格子内取同一个颜色。我们前面经常用到texture(texture, v_uv0)这个函数，它的作用就是把纹理贴图按uv进行取样，输出一个vec4类型的颜色值，在实现马赛克效果的时候我们改为按M * N个点来取样，也就是要找出每个格子的中心点，然后传入texture函数，这样一来问题就变成了，如何计算每个格子的中心点。

从水平方向说起，每个格子的x轴中心坐标等于当前格子的x轴位置加上格子宽度的一半。格子数量x_count通过外部传入，每个格子的宽为block_w = 1.0 / x_count，每个格子的x轴位置等于当前格子的序号乘上格子的宽度，格子的序号为block_x_idx = floor(v_uv0.x / block_w)，当前格子的位置为block_x_idx * block_w，当前格子的中心点位置为block_w * (block_x_idx + 0.5)。同理可以得到格子中心点的垂直方向的位置：

vec2 getUvMapPos() {float block_w = 1.0 / x_count;float block_x_idx = floor(v_uv0.x / block_w);float block_h = 1.0 / y_count;float block_y_idx = floor(v_uv0.y / block_h);return vec2(block_w * (block_x_idx + 0.5), block_h * (block_y_idx + 0.5));
}

有了映射的坐标，我们就可以直接进行颜色取样和赋值，为了便于控制，我们还可以加上一个宏开关：

void main () {vec4 o = vec4(1, 1, 1, 1);vec2 realPos = v_uv0;#if USE_MASAICrealPos = getUvMapPos();#endifo *= texture(texture, realPos);o *= v_color;gl_FragColor = o;
}

后面可以通过更改传进来的垂直和水平方向的格子数量来控制马赛克的大小，效果如下：

demo

效果预览

源码获取请点击查看原文，长按二维码查看效果????

更

多

精

彩

融球效果(shader) 颜色滤镜水波扩散效果(shader)

镜面光泽效果圆形头像（shader）追光效果

shader 溶解效果富文本打字机效果放大镜效果

子弹跟踪效果移动残影效果刮刮卡实现

微信小游戏首包超出4M之后遥控杆实现

金币落袋效果使用cocos进行2D和3D混合开发

Cocos游戏开发入门最佳实践背景无限滚动

马赛克效果(shader)相关推荐

Unity ASE制作彩色流光马赛克像素风舞池DJ台效果Shader
Unity ASE制作彩色流光马赛克舞池DJ台效果 Shader@TOC 项目需求想写一个舞池DJ台的效果,尝试写了发现制作出好玩的效果. 首先想要得到这种棋盘格的效果,想到了马赛克像素平铺,平铺数 ...
『openframeworks』shader制作六边形马赛克效果
在天朝河蟹社会,许多影视作品中经常出现少儿不宜的片段,这时候有一个东西就少不了.没错,它就是马赛克! 以前弄过方块马赛克,圆形马赛克等,没有什么难度,最近看到苍蝇的研究,突然想能不能搞个六边形马赛克呢 ...
Unity ShaderLab特效教程适用于贴图、sprite和ugui的2d着色器实例代码+详解注释【将贴图转为马赛克效果】
如果代码中有什么不清楚请查看以下基础知识 Shader基础知识 unity3d 中七种坐标知识详解一个将贴图转为马赛克效果的shader: 万恶的马赛克其实也是一种艺术风格,如果你在开发2d游戏不 ...
IOS – OpenGL ES 像素化马赛克效果 GPUImagePixellateFilter
目录一.简介二.效果演示三.源码下载四.猜你喜欢零基础 OpenGL (ES) 学习路线推荐 : OpenGL (ES) 学习目录 >> OpenGL ES 基础零基础 Ope ...
Java中实现六种图像处理的效果（灰度化、马赛克效果、去背景实现、珠纹化实现、黑白版画效果、油画效果）
** Java中实现六种图像处理的效果(灰度化.马赛克效果.去背景实现.珠纹化实现.黑白版画效果.油画效果) ** 本文的编程的思想: 先将实现这六种效果的方法写入一个名为pic_performanc ...
Java中的实现马赛克效果以及灰度效果----整张图片
** Java中的实现马赛克效果以及灰度效果-----整张图片 ** 实现该效果的思路: 我们知道图片是由一个一个的像素组成的,比如一张图片的分辨率为800 * 800,则它是由800个像素 * 80 ...
PHP实现图片马赛克效果
原理: 对图片中选定区域的每一像素,增加若干宽度及高度,来生成矩型.而每一像素的矩型重叠在一起,就形成了马赛克效果.本例使用GD库的imagecolorat获取像素颜色,使用imagefilledre ...
python图片马赛克_Python实现PS滤镜中马赛克效果示例
本文实例讲述了Python实现PS滤镜中马赛克效果.分享给大家供大家参考,具体如下: 这里利用 Python 实现PS 滤镜中的马赛克效果,具体的算法原理和效果可以参考附录说明,Python示例代码如 ...
安卓马赛克view_Android马赛克效果MosaicView
图片涂鸦马赛克之前写的项目了,因为有小伙伴问到处理后如何保存的问题我把方法加到代码里了.(最近项目时间紧未经测试>o 最近项目里用到了马赛克效果,就是对手指划过的区域打码.效果如下: 关于图片 ...

马赛克效果(shader)

实现思路

效果预览

马赛克效果(shader)相关推荐

最新文章

热门文章