CocosCreator Effect (Shader) - 正多边形范围

分享一个shader种做任意正多边形的裁剪的高效方式。

核心代码与变量对应的几何意义

    // basic side
    float n = u_side;
    float pi = 3.1415926;
    float pi2 = pi * 2.0;
    float section = pi2 / n;
    float sectionh = section / 2.0;

    // 旋转
    // ... 
    
    vec3 one = vec3(1.0, 1.0, 1.0);
    float radius = sqrt(pow(p.x, 2.0) + pow(p.y, 2.0));

    float r = u_radius;
    float t = atan(p.y, p.x);
    
    float t2 = mod(t, section);
    float t3 = step(t2, sectionh) * t2 + step(sectionh, t2) * (t2 - section);
    float dt = abs(t3);
    float r1 = r * cos(sectionh);
    float r2 = r1 / cos(sectionh - dt);

    float mixRate = step(r2, radius);
    o.a = mix(o.a, 0.0, mixRate);

全局图示：
把局部放大一下：

图中的标注与代码对应。目的就是求屏幕点是否超过r2的长度。超过则透明度为0。

完整代码

具体代码可直接使用，包含了一些图集相对坐标的反变换和坐标抗拉伸等变换。
资源下载