功能描述:
这个功能的实现虽然之前的效果中也有使用过,但是感觉在实际项目中比较常用,因此单独抽出一个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);
}
