在非方形画布上使用片段着色器在光标位置绘制一个圆圈

Question

我刚刚开始使用着色器，并且无法根据光标位置绘制圆而不显示为椭圆。

我正在使用以下片段着色器（通过 Shadertoy）：

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 st = fragCoord.xy/iResolution.xy;

    float m_x = iMouse.x / iResolution.x;
    float m_y = iMouse.y / iResolution.y;

    vec3 m_color = vec3(1.0);

    float mouse_pct = distance(vec2(m_x, m_y), st);
    mouse_pct = step(0.01, mouse_pct);
    m_color = vec3(mouse_pct);


    fragColor = vec4(m_color, 1.0);
}

我可以通过添加使椭圆变成一个圆圈：

st.x *= iResolution.x/iResolution.y;

但是，这会导致在 X 轴上的错误位置绘制圆（这也不是正确的做法）。我想我通常对如何绘制不基于整个画布的形状感到困惑，并且不确定我应该寻找什么来填补我的理解空白。

Shadertoy link - 你需要点击并拖动来改变鼠标位置。

Answer 1

您必须尊重片段点向量与圆心的纵横比：

vec2 dist = vec2(m_x, m_y) - st.xy;
dist.x *= iResolution.x/iResolution.y;

以某种方式更改您的代码：

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 st = fragCoord.xy/iResolution.xy;

    vec2 dist = iMouse/iResolution - st.xy;
    dist.x *= iResolution.x/iResolution.y;

    float mouse_pct = length(dist);

    mouse_pct = step(0.3, mouse_pct);
    vec3 m_color = vec3(mouse_pct);
    fragColor = vec4(m_color, 1.0);
}