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

时间:2018-10-04 06:26:28

标签: glsl webgl shader fragment-shader

我刚开始使用着色器,并且在根据光标位置绘制圆而没有出现椭圆的麻烦。

我正在使用以下片段着色器(通过Shadertoy):

If formLoaded("UserForm1") then Unload UserForm1

我可以通过添加以下内容使椭圆变成圆形:

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

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

Shadertoy link-您需要单击并拖动以更改鼠标位置。

1 个答案:

答案 0 :(得分:2)

您必须尊重片段点到圆心的向量的长宽比:

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