[小白自学]Shader-08-实现动态蒙版效果

功能描述:
这个功能的实现虽然之前的效果中也有使用过,但是感觉在实际项目中比较常用,因此单独抽出一个part。此功能即是将指定位置的蒙版区域显示为图层像素,在手电筒,地图探索等功能中比较常见。
效果:


参数:

//主贴图
mainTexture:    { value: white }
//蒙版贴图
maskTexture:   { value: black }
mainColor:       { value: [1, 1, 1, 1], editor: { type: color } }
//蒙版半径
maskRadius:    { value: 0.1, editor: { slide : true, range : [0,1], step: 0.01 } }
//蒙版中心位置
maskCenter:    { value: [ 0.5, 0.5 ], editor: { slide : true, range : [0,1], step: 0.01 } }

核心思路:使用mix函数与smooth函数混合主帖图与蒙版贴图实现平滑过渡的效果。

vec4 frag () {
    //分别采样主纹理和遮罩纹理
    vec4 col = mainColor * texture(mainTexture, v_uv);
    vec4 maskCol = texture(maskTexture, v_uv);
    //计算遮罩纹理的颜色值
    col.rgb = mix(col.rgb,maskCol.rgb,smoothstep(0.0, 1.0, distance(v_uv.xy, maskCenter)/maskRadius));
    return CCFragOutput(col);
  }
4赞

up,有没有开源啊,我给你一键三连

谢谢关注,核心代码已经贴在上面了,使用的是cocos creator 3.8的环境录制的效果。相同版本下应该可以直接使用的。