马赛克效果(shader)

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

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_MASAIC
    realPos = getUvMapPos();
  #endif

  o *= texture(texture, realPos);
  o *= v_color;

  gl_FragColor = o;
}

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

demo

效果预览

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值