shader 中的 step()和 smoothStep()

土豆奥利奥
825 阅读3分钟

前言

今天我们来学习 shader 中的 step()函数和 smoothStep()函数。话不多说，直接开始吧。

hpic5178.jpg

step()

函数意义

通过比较两个值生成一个阶跃函数, Edge 指定步长函数的边缘位置。X 指定用于生成步长函数的值。如果 x< edge 则返回 0.0，否则返回 1.0。此函数在边缘处变化是骤增或骤降的，不存在类似 smoothstep 似的缓慢上升或者缓慢下降。 用于代替 if else

函数语法

float step(float edge, float x)
vec2 step(vec2 edge, vec2 x)
vec3 step(vec3 edge, vec3 x)
vec4 step(vec4 edge, vec4 x)

vec2 step(float edge, vec2 x)
vec3 step(float edge, vec3 x)
vec4 step(float edge, vec4 x)

函数值域

  1. step(a, x)函数的结果如下：
  • 如果 x 小于 a，结果为 0
  • 如果 x 大于等于 a，结果为 1 这意味着当输入值超过给定阈值时，输出值变为 1；否则，输出为 0。 step()函数通常用于创建简单的阈值映射效果。
  1. step(x,a)函数的结果如下：
  • 如果 x 小于 a，结果为 1
  • 如果 x 大于等于 a，结果为 0 这意味着当输入值超过给定阈值时，输出值变为 0；否则，输出为 1。 step()函数通常用于创建简单的阈值映射效果。

函数图形

image.png

image.png

shader 实例

矩形

#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
void main() {
  vec2 st = (gl_FragCoord.xy * 2. - u_resolution.xy) /
            min(u_resolution.x, u_resolution.y); //[-1,1]
  float y = step(0.0, st.x);
  vec3 color = vec3(y);
  gl_FragColor = vec4(color, 1.0);
}

image.png

四色

float square(in vec2 p, in vec2 C, float r) {
  vec2 a = abs(p - C);
  return 1.0 - step(r, max(a.x, a.y));
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  vec2 p = (2.0 * fragCoord - iResolution.xy) / iResolution.y;

  vec3 red = vec3(0.95, 0.314, 0.133);
  vec3 green = vec3(0.5, 0.73, 0.0);
  vec3 blue = vec3(0.0, 0.643, 0.937);
  vec3 yellow = vec3(1.0, 0.725, 0.0);

  float size = 0.3;
  float gap = 0.03;

  vec3 color = red * square(p, vec2(-gap - size, gap + size), size) +
               green * square(p, vec2(gap + size, gap + size), size) +
               yellow * square(p, vec2(gap + size, -gap - size), size) +
               blue * square(p, vec2(-gap - size, -gap - size), size);

  fragColor = vec4(color, 1.0);
}

image.png

smoothStep()

函数意义

具有在[0,1]间过渡的能力，并且过渡具有渐进的特性 。 常用的场景是抗锯齿.

函数语法

float smoothstep(float edge0, float edge1, float x)
vec2 smoothstep(vec2 edge0, vec2 edge1, vec2 x)
vec3 smoothstep(vec3 edge0, vec3 edge1, vec3 x)
vec4 smoothstep(vec4 edge0, vec4 edge1, vec4 x)

vec2 smoothstep(float edge0, float edge1, vec2 x)
vec3 smoothstep(float edge0, float edge1, vec3 x)
vec4 smoothstep(float edge0, float edge1, vec4 x)

函数值域

smoothstep 返回的结果分为以下两种情况：

情况一

如果参数一大于参数二，函数成像如下图所示：

image.png

当 x 小于参数二的时候，返回结果 1。当 x 大于参数一的时候，返回结果 0.

情况二

如果参数二大于参数一的时候，函数成像如下图所示：

image.png

当 x 小于参数一的时候，返回结果 0。当 x 大于参数二的时候，返回结果 1.

总结

以上便是 step 和 smoothStep 的全部内容了.如有错误之处,欢迎大家留言指出,谢谢大家了。

avatar
文章
阅读
粉丝