Step-4

Task

Create a shader program that draws a rectangular frame border around the screen. The border width is 50 pixels. Use uv coordinates as the frame border color.

Use the step function to draw each border separately. Next, combine the borders together to create a frame. To do this, you only need to compute the union of the test results.

创建一个着色器程序，在屏幕周围绘制一个矩形边框。边框宽度以50像素为单位。使用uv坐标作为边框颜色。

使用step函数分别绘制每个边框。接下来，将这些边框组合在一起以创建一个框架。为此，您只需计算测试结果的并集。

Requirements

The shader should avoid using branching or conditional statements in its code, and instead rely on the step and max functions to determine the color of each pixel.

着色器应避免在其代码中使用分支或条件语句，而是依靠step和max函数来确定每个像素的颜色。

Theory

step函数的并集是指只要某个值大于并集内的阈值，则返回1。 要使用并集，您只需计算给定点处所有函数的结果，然后取其中的最大值即可。简单来说，step计算单个阈值判断，max对step的值进行合并。

示例用法

float stepUnion(float x) {
// check if the value is less than 0.25.
float r0 = 1.0 - step(0.25, x);

// check if the value is greater than 0.75.
float r1 = step(0.75, x);

// check if the value is less than 0.25 or greater than 0.75.
return max(r0, r1);
}

Answer

uniform vec2 iResolution;

void main() {
  // Normalized pixel coordinates (from 0 to 1)
  vec2 uv = gl_FragCoord.xy / iResolution.xy;

  
  float w0 = 50.0 / iResolution.x;
  float w1 = 50.0 / iResolution.y;
  
  float t1 = step(1.0 - w0, uv.x);
  float t2 = 1.0 - step(w0, uv.x);
  float t3 = step(1.0 - w1, uv.y);
  float t4 = 1.0 - step(w1, uv.y);

  float t = max(t1, max(t2, max(t3, t4)));

  gl_FragColor = vec4(uv * t, 0.0, 1.0);
}

效果

练习

Step

最后

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