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

我刚刚开始使用着色器，在基于光标位置绘制圆时遇到了问题，因为它不会显示为椭圆

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

我可以通过添加以下内容使椭圆成为一个圆：

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

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

-您需要单击并拖动鼠标来更改鼠标位置。
您必须考虑碎片点到圆中心点的向量上的纵横比：

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);
}

这是有效的：）-我还在想它，但它现在起作用了，所以谢谢！随着我越来越多地使用它，它会变得更有意义，我确信：首先，pWhy除以分辨率？“使用像素坐标似乎更为简单。”老实说，riv，因为这是《阴影之书》中所做的，这也是我学习的内容，所以我只知道这个方法。不过这是一个很好的观点。。。我可能会用绝对像素坐标重写它，看看我是否觉得这更直观。
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);
}