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

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 轴上错误的位置绘制圆（这也不是正确的做法）。我想我通常对如何绘制不基于整体的形状感到困惑 canvas 并且不确定我应该寻找什么来填补我理解中的空白。

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

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

Draw a circle at cursor position using fragment shader on a non square canvas

shader

glsl

webgl

fragment-shader