shader——floor()函数

前言

今天我们来学习下 shader 中的 floor 函数。话不多说，直接开始吧。

floor()函数

函数意义

向下取整

函数语法

float floor(float x)
vec2 floor(vec2 x)
vec3 floor(vec3 x)
vec4 floor(vec4 x)

函数值域

我们以最简单的 float floor(float x) 举例:

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

同样的道理 vec2/vec3/vec4 也是满足上述特点。

例如：vec2(-6.1, 2.1)，则 floor(x)将返回 vec2(-7.0, 2.0)。

函数图形

shader 实例

绘制实心格子

我们之前用 ceil 绘制过实心格子，同样的 floor 函数页可以绘制实心格子。

#ifdef GL_ES
precision mediump float;
#endif
uniform float u_time;
uniform vec2 u_resolution;
void main(void) {
  vec2 uv = (gl_FragCoord.xy) / u_resolution.y;
  vec3 col = vec3(0.0);
  uv *= 10.;
  vec2 id = floor(uv); // id.xy取值范围是[0,10]
  id.xy /= 10.;        //取值安慰变成[0,1]
  col.xy += id;        //所以渐变
  gl_FragColor = vec4(col, 1.0);
}

绘制波浪翻滚

直接上代码，代码中有注释，感兴趣的小伙伴可以自己运行尝试一下。

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  // 计算uv坐标
  vec2 uv = (fragCoord.xy / iResolution.xy) * 10.0;

  // 使用floor函数将当前像素分配到最近的整数坐标下方
  vec2 pixelPos = ceil(uv);

  // 在每个像素内部添加一些随机偏移量
  uv = fract(uv) - 0.5; //[-0.5,0.5]
  uv += vec2(0.1, 0.2) * vec2(sin(iTime), sin(iTime)) * floor(pixelPos.x);

  // 计算垂直方向上的波浪扭曲
  float wave = sin(uv.y * 20.0 + iTime * 3.0) * 0.05;
  uv.x += wave;

  // 将波浪渲染成颜色渐变的环形图案
  float d = length(uv);
  // float angle = atan(uv.x, uv.y) / (2.0 * 3.14) + 0.5;
  float angle = atan(uv.x, uv.y) + 0.5;
  vec3 color = mix(vec3(1.0, 0.0, 0.0), vec3(1.0, 1.0, 0.0), angle);
  fragColor = vec4(color, smoothstep(0.75, 0.95, d));
}

总结

关于 floor 函数的分享就到这里了。如有错误之处，欢迎大家留言指出，谢谢大家了。