Aspect Ratio -- 宽高比

Task

Write a shader that draws a red circle in the center of the screen. The circle should have a radius of 0.25 times the height of the screen. For aspect ratio correction, adjust the circle's dimensions to account for landscape orientation.
编写一个着色器，在屏幕中心绘制一个红色圆形。该圆形的半径应为屏幕高度的0.25倍。并且进行宽高比校正。

Theory

在片元着色器中，我们通常使用归一化坐标系 (Normalized Coordinates) ，也就是我们熟知的 uv 坐标。这个坐标系的 x 和 y 分量都从 0.0 变化到 1.0。当我们写下 length(uv) 时，我们是在一个理想的、边长为 1 的正方形空间里进行计算。

但问题在于，我们的屏幕或画布很少是正方形的。

想象一个常见的 800x600 像素的画布：

在 X 轴上，从 0.0 到 1.0 代表了 800 个像素的跨度。
在 Y 轴上，从 0.0 到 1.0 代表了 600 个像素的跨度。

这意味着，在物理显示上，uv 坐标系中 X 轴的"单位长度"比 Y 轴的要长。当你基于这个被"拉伸"的坐标系来计算到某一点的距离时，距离的计算本身就会发生扭曲，一个完美的圆形定义（到圆心等距）自然就变成了椭圆。

为此，用宽高比"反向拉伸"坐标系来解决圆被拉伸为椭圆的问题。 将其中一个坐标轴乘以画布的宽高比 。 宽高比 (Aspect Ratio) = 画布宽度 / 画布高度

对于 800x600 的画布，宽高比为 800.0 / 600.0 = 1.333。

这个值告诉我们：X 轴被拉伸了 1.333 倍。为了抵消这种拉伸，我们可以在计算距离之前，将 uv 坐标的 x 分量预先乘以这个宽高比 。或者将 uv 坐标的 y 分量预先除以这个宽高比。

Answer

glsl 复制代码

uniform vec2 iResolution;

void main() {
  vec2 uv = gl_FragCoord.xy / iResolution.xy;
   float aspect = iResolution.x / iResolution.y;
 
   // 核心修复：将 x 轴"压扁"，以抵消画布的"拉伸"
    uv.x *= aspect;
 
    // 我们需要同样校正圆心的坐标
    vec2 center = vec2(0.5, 0.5);
    center.x *= aspect;
    
    float radius = 0.25;
    
    // 现在，在一个"看起来"是正方形的坐标空间里计算距离
    float d = distance(uv, center);
    
    // 使用 smoothstep 获得平滑的边缘
    float circle = 1.0 - smoothstep(radius - 0.01, radius, d);
 
    gl_FragColor = vec4(vec3(circle, .0, .0), 1.0);
}

效果

练习

Aspect Ratio

最后

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