关于GLSL着色器索引计算逻辑的技术问询
2026-7-23
《The Book of Shaders》索引计算逻辑解析
核心困惑点：代码中通过mod和step函数为2x2网格单元格分配索引的逻辑，以下是逐行拆解：
前置坐标变换
计算索引前，代码执行_st *= 2.0，将原[0,1]范围的坐标缩放至[0,2]，把画布划分为2x2的大单元格，每个单元格的x/y坐标范围均为0~2。
索引计算核心代码拆解
float index = 0.0; index += step(1., mod(_st.x,2.0)); index += step(1., mod(_st.y,2.0))*(2.0);
1. mod(_st.x, 2.0)的作用
当前_st.x范围是0~2，mod(_st.x,2.0)的结果等于_st.x本身（任何数对大于自身的数取模，结果为自身）。若后续调整缩放倍数（比如改成_st *=4.0），mod会自动将x坐标归到0~2的循环，确保每2个单位的网格都能重复判断逻辑，这是代码的扩展性设计。
2. step(1., ...)的判断逻辑
step(a, b)函数规则：当b >= a时返回1.0，否则返回0.0。
- x轴判断：
step(1., mod(_st.x,2.0))在**x坐标处于右半区域（1<=x<2）**时返回1.0，左半区域返回0.0，为索引加1。 - y轴判断：
step(1., mod(_st.y,2.0))在**y坐标处于上半区域（1<=y<2）**时返回1.0，下半区域返回0.0，乘以2后为索引加2。
3. 最终索引分配（对应代码注释的网格）
| 索引值 | 单元格位置 | 计算方式 |
|---|---|---|
| 0 | 左下（x<1, y<1） | 0+0=0 |
| 1 | 右下（x>=1, y<1） | 1+0=1 |
| 2 | 左上（x<1, y>=1） | 0+2=2 |
| 3 | 右上（x>=1, y>=1） | 1+2=3 |
后续逻辑关联
计算完索引后，_st = fract(_st)将每个大单元格的坐标重新缩回到[0,1]，接着根据索引值对不同单元格应用旋转：
- 索引1：顺时针旋转90°
- 索引2：逆时针旋转90°
- 索引3：旋转180°
最后通过step(st.x, st.y)绘制斜线，形成四个方向不同的斜线网格图案。
内容的提问来源于stack exchange，提问作者Yerbs
相关产品推荐
相关产品推荐
