Mod

Task

Create a pattern of alternating black and red columns, with 9 columns of each color. Then, hide every third column that is colored red.
创建一个黑色和红色交替出现的图案,红黑两种颜色各有9列。并且,每隔3列隐藏一列。

Requirements

The shader should avoid using branching or conditional statements in its code, and instead rely on the mod and step functions to determine the color of each pixel.
着色器应避免在其代码中使用分支或条件语句,而是依靠modstep函数来确定每个像素的颜色。

Theory

mod函数用于计算两个数字除法运算的余数。

函数

float mod(float x, float y);

mod函数有两个参数:

  • 被除数:被除数
  • 除数:被除数除以的数。

该函数返回除法运算的余数。

与模运算符的比较

mod函数的工作原理与许多编程语言中的模运算符 ( %) 类似。但是,在处理负数的方式上存在一些差异。在 GLSL 中,该mod函数始终返回非负结果。

示例

正数的基本用法:

scss 复制代码
float result = mod(10.0, 3.0); // Result will be 1.0 (10 / 3 has a remainder of 1)

处理负数:

scss 复制代码
float result = mod(-10.0, 3.0); // Result will be 2.0 (-10 / 3 has a remainder of 2)

实际应用

  • 创建重复图案: 通过使用 mod 功能,您可以创建无缝、重复的纹理或图案。

  • 动画: 可以通过将值包装在一定范围内来实现循环动画。

  • 网格系统: 用于创建基于网格的效果或将屏幕划分为多个部分。

Answer

glsl 复制代码
uniform vec2 iResolution;

void main() {
  // Normalized pixel coordinates (from 0 to 1)
  vec2 uv = gl_FragCoord.xy / iResolution.xy;
  
  uv *= 9.0;
  float x = fract(uv.x);
  float hide = 1.0;
  hide = step(1.0, mod(uv.x + 1.0, 3.0)) ;
  x = step(0.5, x * hide);

  gl_FragColor = vec4(x, 0.0, 0.0, 1.0);
}

效果

练习

Mod

最后

如果你觉得这篇文章有用,记得点赞、关注、收藏,学Shader更轻松!!

相关推荐
excel2 分钟前
Web发展与Vue.js导读
前端
YAY_tyy4 分钟前
Three.js 开发实战教程(五):外部 3D 模型加载与优化实战
前端·javascript·3d·three.js
Zuckjet_3 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_863801463 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d
珍宝商店5 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown5 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
gnip6 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿6 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
lumi.7 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰7 小时前
vue核心原理实现
前端·javascript·vue.js