功能描述:
实现类似雷达扇形扫描的程序化纹理效果及其扩展应用。
效果:
此外还可以作为动态边框或者进度条
参数:
//主纹理
mainTexture: { value: white }
//边框颜色
mainColor: { value: [1, 1, 1, 1], editor: { type: color } }
//边框尺寸
borderSize: { value: 0.05, editor: { slide : true, range : [0.01,0.3], step: 0.01 } }
//周期
period : { value: 1.0, editor: { slide : true, range : [1.0,3.0], step: 0.1 } }
核心思路:
以纹理中心点为极坐标原点计算极角,然后根据极角映射每个像素对应的灰度,最后再根据时间变量覆盖区域颜色达到扫描的效果。
#define PI 3.14159
vec4 frag () {
vec2 center = vec2(0.5, 0.5);
//计算极坐标
float angle = atan(v_uv.x - center.x,v_uv.y - center.y);
//根据极坐标计算颜色梯度
float gradient = (angle + PI) / (PI * 2.0);
float smplColor = 1.0 - gradient;
vec4 col = vec4(smplColor, smplColor, smplColor, 1.0);
float timethresh = mod(cc_time.x, period);
if (smplColor < timethresh) {
col = mainColor;
}
#if USE_MAIN_TEXTURE
if(abs(v_uv.x - 0.5) < 0.5 - borderSize && abs(v_uv.y - 0.5) < 0.5 - borderSize) {
col = texture(mainTexture,v_uv);
}
#endif
return CCFragOutput(col);
}
扩展阅读:了解极坐标
根据此思路可以派生制作出许多有趣的程序化纹理效果。


这个东西引擎自带的


