shader 函数——ceil()

前言

今天，我们来学习下 shader——ceil()函数。话不多说，直接开始。

ceil()

函数意义

向上取整

函数语法

float ceil(float x)
vec2  ceil(vec2 x)
vec3  ceil(vec3 x)
vec4  ceil(vec4 x)

函数值域

我们以最简单的举例:

ceil(0.8)=1;
ceil(-0.8)=0;

同样的道理 vec2/vec3/vec4 也是满足上述特点。 例如：vec2(-6.1, 2.1)，则 ceil(x)将返回 vec2(-6.0, 3.0)。

函数图形

案例

绘制实心格子

由于 ceil 是向上取整，所以相邻区域会存在明显色差。

#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
void main(void) {
  vec2 uv = (gl_FragCoord.xy) / u_resolution.y; //[0,1]
  vec3 col = vec3(0.0);
  uv *= 10.;          //[0,10]
  vec2 id = ceil(uv); // id.xy取值范围是[0,11]
  id.xy /= 10.;       //此时di.xy变成[0,1.1]
  col.xy += id;       //所以渐变

  gl_FragColor = vec4(col, 1.0);
}

利用 ceil 生成一个哨声函数

通过 ceil 函数对归一化后的坐标向上取整，并乘以分辨率的一半，得到最接近当前像素中心的整数坐标作为随机数生成的种子。这样做是为了让每个像素或一组像素有相同的随机值，实现一种基于块的噪声效果。

//生成伪随机数
float rand(vec2 co) {
  // 固定种子
  return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  vec2 uv = (fragCoord.xy / iResolution.xy) * 2.0 - 1.0; // uv坐标：[-1,1]

  // 使用ceil函数将当前像素分配到与之最近的整数坐标上
  //通过ceil函数对归一化后的坐标向上取整，并乘以分辨率的一半，得到最接近当前像素中心的整数坐标作为随机数生成的种子。这样做是为了让每个像素或一组像素有相同的随机值，实现一种基于块的噪声效果。
  vec2 pixelPos = ceil((uv + vec2(1.0)) * iResolution.xy / 2.0); //

  // 将整数坐标作为随机数种子，生成噪声
  float noise = rand(pixelPos);

  // 添加噪声
  uv.y += noise;

  vec3 color = mix(vec3(0.0, 0.0, 1.0), vec3(1.0, 0.0, 0.0), uv.y);
  fragColor = vec4(color, 1.0);
}

总结

以上便是关于 shader——ceil()的分享。如有错误之处，欢迎大家留言指出，谢谢大家了。