时间戳

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

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

问题描述

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

我正在使用以下片段着色器（通过 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 链接- 您需要单击并拖动以更改鼠标位置。

标签： glslwebglshaderfragment-shader

解决方案

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

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

推荐阅读