以方显圆，化方为圆？解析 ShaderJoy shader

2024-01-03 21:04:24

效果图

算法简介

首先，我们需要将 uv 坐标换算到 [-0.5, 0.5] 之间。这是因为，GLSL 中的纹理坐标是以 [-0.5, 0.5] 为范围的。

vec2 uv = (fragCoord.xy - vec2(0.5)) / iResolution.xy;

然后，我们需要计算圆的半径。圆的半径等于纹理的宽度或高度的一半，具体取决于哪个更小。

float radius = min(iResolution.x, iResolution.y) / 2.0;

接下来，我们需要计算圆心。圆心位于纹理的中心。

vec2 center = vec2(0.0);

最后，我们需要计算每个像素距离圆心的距离。如果距离小于或等于半径，则该像素属于圆形；否则，该像素不属于圆形。

float distance = length(uv - center);
if (distance <= radius) {
  // 该像素属于圆形
} else {
  // 该像素不属于圆形
}

ShaderJoy shader

#version 300 es

// 输入变量
in vec2 fragCoord;
in vec2 texCoord;

// 输出变量
out vec4 outColor;

// 纹理变量
uniform sampler2D tex;

// 常量变量
const float PI = 3.1415926535897932384626433832795;

void main() {
  // 将 uv 坐标换算到 [-0.5, 0.5] 之间
  vec2 uv = (fragCoord.xy - vec2(0.5)) / iResolution.xy;

  // 计算圆的半径
  float radius = min(iResolution.x, iResolution.y) / 2.0;

  // 计算圆心
  vec2 center = vec2(0.0);

  // 计算每个像素距离圆心的距离
  float distance = length(uv - center);

  // 如果距离小于或等于半径，则该像素属于圆形
  if (distance <= radius) {
    // 获取纹理颜色
    vec4 color = texture(tex, texCoord);

    // 输出颜色
    outColor = color;
  } else {
    // 输出透明色
    outColor = vec4(0.0, 0.0, 0.0, 0.0);
  }
}