GLSL 效果示例

万花筒:让一块纹理折叠成镜面对称花纹

扇区数可调,纹理跨扇区边界时形成镜面对称。

在线示例

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

观察什么

扇区数可调,纹理跨扇区边界时形成镜面对称。

实现原理

角度先折入一个扇区,再镜像折半。采样半径不变,所以纹理沿对称轴连续映射。

找到控制效果的代码

float sectors=3.+floor(u_parameter*9.);float a=atan(p.y,p.x)+u_time*.1;float wedge=6.28318/sectors;a=abs(mod(a,wedge)-wedge*.5);vec2 q=length(p)*vec2(cos(a),sin(a));c=texture2D(u_texture,q+.5).rgb;

动手修改

把 u_parameter 从 0 调到 1,sectors=3.+floor(u_parameter*9.) 会从 3 变为 12。围绕同一中心重复的镜像扇区会增多,半径不变。

调试与成本

折叠后的坐标每像素仍只需一次纹理采样。把 q+.5 改为 q*.4+.5,更多读取位置会落在测试图内部,而非被限制到图像外边界的颜色。

深入理解

用到的内置函数

一步步学会这个效果