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更轻松!!

相关推荐
学习3人组3 分钟前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架
世伟爱吗喽9 分钟前
threejs入门学习日记
前端·javascript·three.js
朝阳58122 分钟前
用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声,只需 50 行代码
前端·websocket·rust
F2E_Zhangmo23 分钟前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript
slim~42 分钟前
javaweb基础第一天总结(HTML-CSS)
前端·css·html
一支鱼1 小时前
leetcode常用解题方案总结
前端·算法·leetcode
惜.己1 小时前
针对nvm不能导致npm和node生效的解决办法
前端·npm·node.js
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
用户21411832636022 小时前
Nano Banana免费方案来了!Docker 一键部署 + 魔搭即开即用,小白也能玩转 AI 图像编辑
前端
Zacks_xdc2 小时前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js