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

相关推荐
胡gh4 小时前
页面卡成PPT?重排重绘惹的祸!依旧性能优化
前端·javascript·面试
言兴4 小时前
# 深度解析 ECharts:从零到一构建企业级数据可视化看板
前端·javascript·面试
山有木兮木有枝_4 小时前
TailWind CSS
前端·css·postcss
烛阴5 小时前
TypeScript 的“读心术”:让类型在代码中“流动”起来
前端·javascript·typescript
杨荧5 小时前
基于Python的农作物病虫害防治网站 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python
Moment6 小时前
毕业一年了,分享一下我的四个开源项目!😊😊😊
前端·后端·开源
程序视点7 小时前
Escrcpy 3.0投屏控制软件使用教程:无线/有线连接+虚拟显示功能详解
前端·后端
silent_missile7 小时前
element-plus穿梭框transfer的调整
前端·javascript·vue.js
专注VB编程开发20年7 小时前
OpenXml、NPOI、EPPlus、Spire.Office组件对EXCEL ole对象附件的支持
前端·.net·excel·spire.office·npoi·openxml·spire.excel
古蓬莱掌管玉米的神7 小时前
coze娱乐ai换脸
前端