Int / Floor

Task

Create a shader program that generates a gradient image using an array of 5 colors. The colors are defined in the following array:

scss 复制代码
vec3 palette[5] = vec3[5]
(
    vec3(1.0, 0.0, 0.0),
    vec3(0.0, 1.0, 0.0),
    vec3(0.0, 0.0, 1.0),
    vec3(1.0, 1.0, 0.0),
    vec3(0.0, 0.0, 0.0)
);

The program should determine which color range the current pixel falls within and interpolate its color accordingly. This will result in a smooth gradient transition between the colors in the array.

根据palette提供的数组创建一个阶梯状的渐变颜色。每两个颜色之间使用线性插值的方式。

Theory

函数介绍

1. floor(x) - 数学函数

  • 定义 :它返回不大于 x的最大整数。
  • 举例
    • floor(3.9) -> 3.0
    • floor(3.1) -> 3.0
    • floor(-3.9) -> -4.0 (因为-4是小于-3.9的最大整数)
  • 返回类型float

2. int(x) - 类型转换函数

  • 定义:将一个浮点数转换为一个整数,丢掉小数部分。
  • 举例
    • int(3.9) -> 3
    • int(3.1) -> 3
    • int(-3.9) -> -3 (直接砍掉.9)
  • 返回类型int

任务解析

创建5级阶梯:

使用 floor():

glsl 复制代码
float steps = 5.0;
float value = floor(uv.x * steps) / steps; // 结果是 {0.0, 0.2, 0.4, 0.6, 0.8}
// float value = float(int(uv.x * steps)) / steps; 或者使用int
gl_FragColor = vec4(vec3(value), 1.0); 

这样就会产生从黑到灰的5级阶梯。

Answer

glsl 复制代码
uniform vec2 iResolution;

vec3 palette[5] = vec3[5] (
  vec3(1.0, 0.0, 0.0),
  vec3(0.0, 1.0, 0.0),
  vec3(0.0, 0.0, 1.0),
  vec3(1.0, 1.0, 0.0),
  vec3(0.0, 0.0, 0.0)
);

void main() {
  vec2 uv = gl_FragCoord.xy / iResolution.xy;
  float steps = 5.0;
  int index = int(uv.x * (steps - 1.0)); // 数组序号最大为4.0
  //float value = floor(uv.x * steps) / steps; // 结果是 {0.0, 0.2, 0.4, 0.6, 0.8}
  vec3 color = mix(palette[index], palette[index + 1], fract(uv.x * (steps - 1.0)));
  gl_FragColor = vec4(color, 1.0);
}

效果

练习

Int / Floor

最后

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

相关推荐
学习笔记1011 天前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-19431 天前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧1 天前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台1 天前
海龟交易系统R
前端·人工智能·r语言
歪歪1001 天前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
Captaincc1 天前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
吃饺子不吃馅1 天前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学
Baklib梅梅1 天前
无头内容管理系统:打造灵活高效的多渠道内容架构
前端·ruby on rails·前端框架·ruby
over6971 天前
浏览器里的AI魔法:用JavaScript玩转自然语言处理
前端·javascript
渣渣盟1 天前
探索Word2Vec:从文本向量化到中文语料处理
前端·javascript·python·文本向量化