GLSL mod() 取模函数深度解析：The Book of Shaders 中实现周期性平铺、索引与动画的基石

【免费下载链接】thebookofshadersStep-by-step guide through the abstract and complex universe of Fragment Shaders.项目地址https://gitcode.com/gh_mirrors/th/thebookofshaders点击查看免费下载导读mod()是 GLSL 中最基础也最高频的数学函数之一它返回一个数对另一个数取模的余数。在 The Book of Shaders 项目中mod()不仅是第 05 章塑形函数Shaping Functions演示的核心工具更被广泛应用于空间平铺、单元格编号、位解码、噪声周期化与万花筒成像等数十个示例着色器中。读完本文你将彻底掌握mod()的数学定义、重载形式、边界行为并学会用它在片段着色器中构建重复图案、交错布局与周期性动画。本文以仓库 glossary/mod/README.md 的词条为骨架展开并结合仓库内大量.frag源码佐证其真实用法。一、函数声明与重载形式mod()属于 GLSL 内建数学函数glossary 词条给出了完整的声明形式float mod(float x, float y) vec2 mod(vec2 x, vec2 y) vec3 mod(vec3 x, vec3 y) vec4 mod(vec4 x, vec4 y) vec2 mod(vec2 x, float y) vec3 mod(vec3 x, float y) vec4 mod(vec4 x, float y)可见 GLSL 为重载了 7 种签名向量与向量逐分量取模或向量与标量混合标量会被隐式提升为向量并与每个分量运算。这在处理vec2坐标、vec3颜色、vec4位置数据时非常方便无需像在 C 语言中那样逐分量手写%循环。参数语义x被求模的值被除数即要对它取模的数y模数除数即用来取模的数。词条原文的描述为Compute value of one parameter modulo another对应中文即计算一个参数对另一个参数取模的值。二、数学定义为什么它是余数而非取余词条明确给出mod()的计算公式mod(x, y) x - y * floor(x / y)关键在于floor()向下取整而非trunc()向零取整。这带来两个重要的数学性质结果符号跟随除数y。当y为正数时结果永远落在[0, y)区间当y为负数时结果落在(y, 0]区间。这与 C 语言中%运算符向零取整、符号跟随被除数行为完全不同也与 GLSL 中基于trunc的%不同。结果恒等于除尽后剩下的那一截。例如mod(7.3, 2.0)计算为7.3 - 2.0 * floor(7.3 / 2.0) 7.3 - 2.0 * 3 1.3。这一数学定义让mod()成为把一维直线折叠成周期性区间的天然工具也是后续所有空间平铺技巧的原理基础。与相邻函数的关系mod()与仓库词条 floor、fract、ceil 紧密相关三者互相在 See Also 中引用函数定义结果区间x 0 时用途floor(x)不大于 x 的最大整数整数取格子编号fract(x)x - floor(x)即小数部分[0, 1)取格子内位置ceil(x)不小于 x 的最小整数整数向上取整mod(x, y)x - y * floor(x / y)[0, y)周期折叠、取余特别地当y 1.0时mod(x, 1.0)与fract(x)完全等价——因此词条同时链接了 fract。二者常被互换使用但mod(x, y)允许任意周期y通用性更强。三、第 05 章中的经典演示周期化塑形mod()在 The Book of Shaders 正文中的首次核心登场是第 05 章塑形函数。在 05/README.md 中作者提供了可交互的一维函数图y mod(x, 0.5); // return x modulo of 0.5在同一交互面板中mod与fract、ceil、floor、sign、abs、clamp、min、max一起被列为额外有用的函数作者将其比喻为栅栏帮助读者掌握一维空间中的往复运动。当y 0.5时函数曲线呈现锯齿状周期波形——这正是后续章节中无数平铺图案的最小单元。第 05 章还收录了 05/easing.fragRobert Penner 缓动函数的 GLSL 移植、05/impulse.frag、05/cubicpulse.frag 等塑形函数库它们与mod()一样属于把输入约束到特定形态的基础积木。四、仓库源码实战mod() 的六种典型用法在 The Book of Shaders 的示例着色器中mod()的身影遍布第 0915 章。以下用法均来自仓库真实源码可逐一打开对照学习。1. 行交错偏移砖墙平铺09/bricks.frag 用一行mod实现了砖墙的错缝平铺vec2 brickTile(vec2 _st, float _zoom){ _st * _zoom; // Here is where the offset is happening _st.x step(1., mod(_st.y,2.0)) * 0.5; return fract(_st); }mod(_st.y, 2.0)把纵向坐标折叠成周期为 2 的区间step(1., ...)判断当前行是奇数行还是偶数行奇数行把横向坐标平移0.5格从而形成砖块交错效果。这正是mod 周期折叠 step 条件分支的经典组合。2. 单元格编号索引Truchet 图案旋转09/truchet.frag 用mod为 2×2 网格的每个单元格分配唯一索引再按索引旋转图案float index 0.0; index step(1., mod(_st.x,2.0)); index step(1., mod(_st.y,2.0))*2.0;mod(_st.x, 2.0)与mod(_st.y, 2.0)分别折叠出 0/1 两个相位组合成 0、1、2、3 四个索引随后rotate2D()依据索引把单元格旋转 0°、90°、180°、-90°生成无限延伸的 Truchet 纹样。3. 位解码易经卦象与 Ikeda 数字第 09 章的 09/iching-01.frag 用mod实现二进制位提取把整数解码成六爻float remain floor(mod(N,64.)); for(int i 0; i 6; i){ b[i] step(1.0,mod(remain,2.)); remain ceil(remain/2.); }mod(remain, 2.0)每次取出当前最低位配合ceil(remain/2.0)右移一位循环 6 次即还原出卦象的 6 根爻线。同样的位解码套路出现在第 10 章 10/ikeda-digits.frag 中——它用mod(remain, 2.0)把 09 数字的 5×3 点阵位图逐位还原再用floor(mod(n,10.))从随机数中选出数字。4. 整数网格平铺与随机散点10/2d-random-dots.frag 与砖块同款的交错技巧被用于随机圆点阵st * 10.0; // Offset every other row st.x - step(1., mod(st.y,2.0)) * 0.5; vec2 ipos floor(st); // integer position vec2 fpos fract(st); // float position这里mod(st.y, 2.0)折叠出行相位floor取格子编号、fract取格内坐标——整数位置 小数位置的拆分正是格子空间的核心范式而mod负责其中的周期交错。5. 噪声与排列中的周期取模第 11 章的 Simplex 噪声 11/3d-snoise.frag 用自实现mod289()把坐标折叠回有限周期格子vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }这本质上就是x - y * floor(x/y)在y 289时的特例。第 12 章 Voronoi 示例 12/cell.frag 的permute()同样依赖mod((34.0 * x 1.0) * x, 289.0)完成伪随机排列并配合mod(floor(P), 289.0)周期化格子坐标。可见mod是程序化噪声类算法中保持计算有界、图案可周期重复的关键。6. 角度周期折叠圆周动画与万花筒mod同样适用于极坐标角度。第 11 章 11/circleWave-noise.frag 用角度取模制造周期波纹float m abs(mod(au_time*2.,3.14*2.)-3.14)/3.6;mod(a, 2π)把任意旋转后的角度折叠回[0, 2π)再减去 π 取绝对值得到以角度为周期、随时间流动的波瓣。第 15 章 15/texture-kaleidoscope.frag 用角度取模实现万花筒镜像float sides 10.; float ma mod(a, TWO_PI/sides); ma abs(ma - PI/sides); st r * vec2(cos(ma), sin(ma));mod(a, 2π/10)把圆周切成 10 个扇区再折叠到单个扇区内纹理即被对称地重复成 10 瓣花瓣——一个参数sides即可控制对称数量。五、使用注意与常见误区除数y不能为 0。GLSL 中mod(x, 0.0)的结果未定义实践中应保证y严格非零。与 C 语言%的区别。C 的%向零取整、结果符号随被除数GLSL 的mod向下取整、结果符号随除数。写跨语言移植代码时务必留意。与fract的等价关系。fract(x) mod(x, 1.0)当周期为 1 时可互换但mod能表达任意周期语义更明确。动画中的时间取模。常见写法mod(u_time, T)可把时间折叠进[0, T)实现循环动画mod(u_time, 2π)则用于角度相位。与floor/ceil配合mod负责折叠周期floor负责取格子编号二者几乎总是成对出现在空间平铺代码中参考 09/bricks.frag 与 10/2d-random-dots.frag。六、动手练习建议参考第 05 章 05/README.md 的练习思路可围绕mod设计以下实验在 05/README.md 的交互图中将y mod(x, 0.5)的模数改为0.25、1.0、2.0观察锯齿周期如何随y变化打开 09/bricks.frag把mod(_st.y, 2.0)中的2.0改为其他值观察砖缝错位节奏的变化打开 15/texture-kaleidoscope.frag调整sides从 3 到 12体会一个参数驱动对称性的威力将mod(u_time, 2π)接入 11/circleWave-noise.frag 的角度参数让波瓣沿圆周周期旋转。七、总结mod()在 The Book of Shaders 中扮演着周期折叠器的角色从第 05 章的一维锯齿波形到第 09 章的砖块错缝与 Truchet 索引再到第 11/12 章噪声算法中的mod289直至第 15 章的万花筒对称——它把无限空间折叠进有限周期把连续时间切成循环节拍。掌握x - y * floor(x/y)这一定义及其结果符号随除数的特性你就掌握了 GLSL 程序化生成中最重要的复用与重复技巧。相关词条floor、fract、ceil理论章节Chapter 05: Shaping Functions实战参考09/bricks.frag、09/truchet.frag、10/2d-random-dots.frag、10/ikeda-digits.frag、11/3d-snoise.frag、12/cell.frag、15/texture-kaleidoscope.frag赞分享【免费下载链接】thebookofshadersStep-by-step guide through the abstract and complex universe of Fragment Shaders.项目地址https://gitcode.com/gh_mirrors/th/thebookofshaders点击查看免费下载相关推荐GLSL fract() 函数深度解析The Book of Shaders 中的小数提取与图案平铺实战GLSL fract 函数深度解析The Book of Shaders 中的小数提取与图案平铺实战 本篇指南以《The Book of Shaders》开源The Book of Shaders 术语详解GLSL mod() 取模函数——从数学定义到平铺与对称实战The Book of Shaders 术语详解GLSL mod 取模函数——从数学定义到平铺与对称实战 导读 mod 是 GLSL 中最常用也最容易被低估的The Book of Shaders 中的 pow()GLSL 幂函数与一维造型函数的基石The Book of Shaders 中的 pow GLSL 幂函数与一维造型函数的基石 导读 pow x, y 是 GLSL 中用于计算以 x 为底、y上一篇终极指南使用JUCE框架构建智能音频安防监控系统下一篇从0到1开发网页控制器AXWebViewController框架设计思想解读创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考