❌

阅读视图

发现新文章，点击刷新页面。

Step

✇掘金 前端
烛阴

Task

Write a shader that splits the screen into two parts: the left half should be black and the right half should be red. The shader should work for any screen resolution. To achieve this, consider using the iResolution uniform variable and gl_FragColor to control the position of the split.

编写一个着色器，将屏幕分成两部分：左半部分为黑色，右半部分为红色。该着色器应适用于任何屏幕分辨率。为此，请考虑使用iResolutionuniform 变量 和gl_FragColor来控制分割的位置。

Requirements

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

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

Theory

step是一个阈值函数。如果传递的值小于阈值，step则返回0.0，否则返回1.0。edge是阈值

函数

float step(float edge, float x)

  • 如果是x < edge，函数返回0.0。
  • 如果是x >= edge，函数返回1.0。

示例用法

float edge = 0.5;

float x = 0.3;

float result = step(edge, x); // x < edge ? 0.0 : 1.0

Answer

uniform vec2 iResolution;

void main() {
  vec2 uv = gl_FragCoord.xy/iResolution.xy;
  float result = step(0.5, uv.x);
  gl_FragColor = vec4(result, 0.0, 0.0, 1.0);
}

效果

image.png

练习

Step

最后

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

❌