[小白自学]Shader-05-实现马赛克图片效果

功能描述:
将图片渲染成低像素下的马赛克图片(给图片打码效果)
效果:


参数:

//像素块的尺寸(越小越清晰)
pixelSize:      { value: 0.5, editor: { slide : true, range : [0.01,1], step: 0.01 } }

核心思路:
将uv按照某个特定步长进行取整操作以模拟对贴图的降采样过程。

vec2 downsampling(vec2 v_uv) {

    float block_size = 0.1 * pixelSize;
    float block_x_idx = floor(v_uv.x / block_size);
    float block_y_idx = floor(v_uv.y / block_size);

    return vec2(block_size * (block_x_idx + 0.5), block_size * (block_y_idx + 0.5));
  }

  vec4 frag () {
    vec2 down_uv = downsampling(v_uv);
    vec4 col = mainColor * texture(mainTexture, down_uv);
    
    return CCFragOutput(col);
  }
3赞

cocos creator 的Shade在哪里学?

论坛啊 论坛不都有吗 :rofl: