Ceil -- 从平滑到阶梯

Task

Create 10 equally sized vertical sections on the screen and label them with sequential numbers from 1 to 10. Adjust the intensity of the red color in each section based on its assigned number (0.1, 0.2 ... 1.0). This will result in a gradient effect where the red color becomes progressively stronger from left to right.
在屏幕上从左到右依次分配10个大小相同的垂直区域。并且依次把数字(0.1、0.2......1.0)分配给这10个区域作为颜色红色分量的值。

Requirements

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

Theory

ceil(x):返回大于或等于 x 的最小整数。

  • ceil(3.14) 结果是 4.0
  • ceil(-3.14) 结果是 -3.0
glsl 复制代码
float scaled_uv = uv.x * 10.0; // 值域从 [0, 1] 放大到 [0, 10]
float stepped_value = ceil(scaled_uv);

这一步是整个过程的核心。发生了什么?

  • uv.x(0, 0.1] 范围时,scaled_uv(0, 1]ceil() 结果为 1.0
  • uv.x(0.1, 0.2] 范围时,scaled_uv(1, 2]ceil() 结果为 2.0
  • ...
  • uv.x(0.9, 1.0] 范围时,scaled_uv(9, 10]ceil() 结果为 10.0

ceil() 将连续的值域 [0, 10] "吸附"到了离散的整数集合 {1, 2, 3, 4, 5, 6, 7, 8, 9, 10} 上。

现在我们得到的 stepped_value 是从1到10的整数。如果直接作为颜色输出,它们都会因为大于1而被裁剪为纯白色。我们需要将其重新映射回 [0, 1] 的颜色范围。怎么做?很简单,除以我们之前放大的倍数即可。

glsl 复制代码
float final_color = stepped_value / 10.0;

现在,final_color 的值将是 {0.1, 0.2, 0.3, ..., 1.0}。这正是我们想要的阶梯状渐变!

Answer

glsl 复制代码
uniform vec2 iResolution;
uniform float iTime;

void main() {
  // Normalized pixel coordinates (from 0 to 1)
  vec2 uv = gl_FragCoord.xy / iResolution.xy;
  float scaled_uv = uv.x * 10.0; // 值域从 [0, 1] 放大到 [0, 10]
  float stepped_value = ceil(scaled_uv);
  gl_FragColor = vec4(stepped_value / 10.0, 0.0, 0.0, 1.0);
}

效果

练习

Ceil

最后

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

相关推荐
太阳伞下的阿呆1 小时前
本地环境vue与springboot联调
前端·vue.js·spring boot
阳光是sunny1 小时前
走进微前端(1)手写single-spa核心原理
前端·javascript·vue.js
90后的晨仔2 小时前
🔍Vue 模板引用(Template Refs)全解析:当你必须操作 DOM 时
前端·vue.js
90后的晨仔2 小时前
👂 Vue 侦听器(watch)详解:监听数据的变化
前端·vue.js
90后的晨仔2 小时前
深入浅出 Vue 的 computed:不仅仅是“计算属性”那么简单!
前端·vue.js
Nan_Shu_6143 小时前
学习:入门uniapp Vue3组合式API版本(17)
前端·vue.js·学习·uni-app
止观止3 小时前
Remix框架:高性能React全栈开发实战
前端·react.js·前端框架·remix
萌萌哒草头将军4 小时前
🚀🚀🚀 深入探索 Node.js v22.18.0 新特性;默认支持运行 ts 文件了!
前端·typescript·node.js
安心不心安4 小时前
React ahooks——副作用类hooks之useThrottleFn
前端·javascript·react.js