GLSL 效果示例

旋转方块阵列

用二维旋转矩阵旋转坐标,再用 fract() 把一个方块重复铺满屏幕。

在线示例

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

工作原理

rotate2d(angle) 用 cos 和 sin 构造一个 2x2 矩阵。一个点乘以这个矩阵,就会绕原点转过这个角度。shader 不是去旋转图形,而是旋转坐标,之后画出来的所有图形看起来都转了。

fract(p * 3.0) - 0.5 是重复的技巧。fract 只保留小数部分,所以坐标从 0 数到 1 就重新开始,每个单位重复 3 次。减去 0.5 把原点放到每个格子的正中间,于是你围绕 (0, 0) 画的东西会出现在每一个格子里。

方块本身是 max(abs(x), abs(y)):到正方形最近一条边的距离,就像 length() 是圆的距离一样。对 local 再旋转一次,每个方块就绕自己的中心转起来。

试着改一改

修改效果
p * 3.0 改成 p * 6.0方块数量翻倍、变小
rotate2d(-u_time) 改成 rotate2d(0.785)方块固定转 45 度,变成菱形图案
max(abs(local.x), abs(local.y)) 改成 length(local)圆点代替方块
删掉第一行旋转整个网格不再转动,只有方块自转

用到的内置函数

一步步学会这个效果