shader 函数——fract()

前言

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

fract()

函数意义

fract函数的意思是取小数部分，即x-floor(x)。

例如:fract(1.5) = 0.5，fract(-1.2)=0.8。这里 fract(t)跟 mod(t,1.0)是等价的。

函数语法

float fract(float x)
vec2 fract(vec2 x)
vec3 fract(vec3 x)
vec4 fract(vec4 x)

函数值域

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

fract(1.8)=0.8; fract(-1.8)=0.2;

同样的道理 vec2/vec3/vec4 也是满足上述特点，用于计算向量 x 中每个分量的小数部分。

例如:

---

vec2(3.14, 1.11)，那么 fract(x) 的返回值将是 vec2(0.14, 0.11)。

vec2(-3.1, -1.1)，那么 fract(x) 的返回值将是 vec2(-3.1-floor(-3.1), -1.1-floor(-1.1))即：vec2(-3.1+4, -1.1+2),vec2(0.9, 0.9)。

---

函数图形

shader 实例

跳动的小球

#ifdef GL_ES
precision mediump float;
#endif
uniform highp float u_time;
uniform vec2 u_resolution;
vec2 MovingCeil(vec2 uv) {
  float time = u_time * 0.2;
  // 对uv坐标添加随机偏移值
  if (fract(time) > 0.5) {
    if (fract(uv.y * 0.5) > 0.5) {
      uv.x += fract(time) * 2.0;
    } else {
      uv.x -= fract(time) * 2.0;
    }
  } else {
    if (fract(uv.x * 0.5) > 0.5) {
      uv.y += fract(time) * 2.0;
    } else {
      uv.y -= fract(time) * 2.0;
    }
  }
  return fract(uv);
}
void main(void) {

  vec2 uv = (gl_FragCoord.xy * 2. - u_resolution.xy) /
            min(u_resolution.x, u_resolution.y); // uv:[-1,1]
  vec3 col = vec3(0.0);
  uv *= 10.; //[-10,10]

  uv = MovingCeil(uv) - .5; //[-0.5,0.5]
  float d = length(uv);
  col += smoothstep(0.3, 0.28, d);

  gl_FragColor = vec4(col, 1.0);
}

总结

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