Нарисуйте круг в позиции курсора, используя фрагментный шейдер на не квадратном холсте - PullRequest
Новая
       99

Нарисуйте круг в позиции курсора, используя фрагментный шейдер на не квадратном холсте

0 голосов
/ 04 октября 2018

Я только начинаю работать с шейдерами, и у меня возникают проблемы с рисованием круга на основе позиции курсора, но он не отображается в виде эллипса.

Я использую следующий фрагментный шейдер (через 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ссылка - вам нужно нажать и перетащить, чтобы изменить положение мыши.

1 Ответ

0 голосов
/ 04 октября 2018

Вы должны соблюдать соотношение сторон вектора точки фрагмента к центральной точке круга: 

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