GLSL 效果示例

旋涡扭曲:让图片中心旋转、边缘保持静止

旋转强度随半径衰减,外圈不出现接缝。

在线示例

修改右侧代码,左侧预览会实时更新。

观察什么

旋转强度随半径衰减,外圈不出现接缝。

实现原理

旋转角随半径衰减,外圈角度回到零;边缘不被整幅图像的旋转拖动。

找到控制效果的代码

float r=length(p),a=(1.-smoothstep(0.,.9,r))*u_parameter*8.;vec2 q=rot(a)*p;c=texture2D(u_texture,q*.5+.5).rgb;

动手修改

把 u_parameter 从 0 调到 1,衰减前的旋转量会从零增至八弧度。中心明显扭转,半径 0.9 以外的位置则不会旋转。

调试与成本

旋转后的 q 只需一次纹理读取。把 smoothstep(0.,.9,r) 的衰减终点 .9 改为 .5,扭曲会缩到更小圆盘内,采样次数不变。

用到的内置函数

一步步学会这个效果