Shader特效——“变换的五角星”的实现 「GLSL」

静态效果图

动态效果图

为啥需要旋转 18 °

如何判断像素是否落在区域内

组合成五角星

代码与详解如下：

<code>#iChannel0 "file://./yeah_0.jpg"
#iChannel1 "file://./yeah.jpg"
 
vec2 circlePoint(float ang)
{
    // 调整五个点所构成的边的角度
    ang -= PIx2 * 0.05;     // 18° 正五角星
    return vec2(cos(ang), sin(ang));
}
 
float cross2d(vec2 a, vec2 b)
{
    return (a.x * b.y - a.y * b.x);
}

void main(void)
{
    vec2 p = gl_FragCoord.xy / iResolution.xy;         
    vec2 o = p * 2.0 - 1.0; // [-1., 1.]
    float progress = sin(PI_HALF * iGlobalTime);
    float t = progress * 1.4;
 
    float c1 = star(o, t);       // “五角星”
    float c2 = star(o, t - 0.1); // 小一点的“五角星”
    float border = max(0., c1 - c2);   
 
    vec4 col0 = texture2D(iChannel0, p).rgba;
    vec4 col1 = texture2D(iChannel1, p).rgba;
    gl_FragColor = mix(col0, col1, c1) + vec4(vec3(border), 0.0);
}

// reference from: panda1234lee.blog.csdn.net/article/details/104045591/<code>

閱讀更多 興趣技術雜貨鋪 的文章

關鍵字: 特效 file 变换