旋转淡入淡出过渡异常：GLSL(ShaderToy)代码修复求助

当前代码的问题在于直接对未校正宽高比的UV进行旋转，且使用旋转后的UV x轴作为过渡判断依据。当屏幕非正方形或旋转角度非0度时，旋转后的坐标轴范围无法覆盖整个屏幕区域，导致过渡效果出现死角。

修改后的代码 #

#define PI 3.14159265359

vec2 rotate(vec2 v, float a) {
    float c = cos(a);
    float s = sin(a);
    return vec2(c * v.x - s * v.y, s * v.x + c * v.y);
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    vec2 uv = fragCoord / iResolution.xy;
    // 转换为中心原点坐标，并校正宽高比
    float aspect = iResolution.x / iResolution.y;
    vec2 centered_uv = vec2(uv.x * aspect - 0.5 * aspect, uv.y - 0.5);
    
    float time = abs(sin(iTime));
    float angle = 111.0 * PI / 180.0;
    
    // 旋转中心对齐的坐标
    vec2 rotated_uv = rotate(centered_uv, angle);
    
    // 归一化到[-1, 1]空间，确保覆盖全屏
    float max_dim = max(aspect, 1.0);
    vec2 normalized_rotated = rotated_uv / max_dim;
    
    // 生成平滑过渡的alpha值
    float alpha = smoothstep(time - 0.01, time, 0.5 - normalized_rotated.x);
    
    fragColor = vec4(mix(texture(iChannel0, uv).rgb, vec3(0.0), alpha), 1.0);
}

关键修改说明 #

• 宽高比校正：将UV转换为以屏幕中心为原点的坐标，并根据宽高比拉伸x轴，避免旋转后因屏幕比例导致的坐标偏移。
• 归一化旋转坐标：将旋转后的坐标归一到[-1,1]区间，确保无论旋转角度和屏幕比例如何，过渡范围都能覆盖整个屏幕。
• 修复smoothstep参数：原代码中smoothstep的两个参数相同，实际是硬切换效果；修改为带微小区间的参数，实现平滑过渡。
• 简化冗余计算：移除了abs(sin(iTime)) * 36.00 / 36.00这类无意义的冗余运算。

内容的提问来源于stack exchange，提问作者loncer