Shadertoy: Как смешать-добавить-умножить любые два шейдера? - PullRequest
Новая
       65

Shadertoy: Как смешать-добавить-умножить любые два шейдера?

1 голос
/ 30 апреля 2020

Есть какие-нибудь хитрые уловки, чтобы смешать два шейдера вместе? т.е. добавить шейдеры вместе, иначе сделать один шейдер в центральном квадрате, а другой - в виде рамки? Можем ли мы переименовать некоторые параметры ввода-вывода и добавить их в окончательную мета-функцию микширования изображений?

т.е. если я изменю 

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{...}

, изменив на: 

void mainImage( out vec4 A_FragColor, in vec2 fragCoord )
{...}

и 

void mainImage( out vec4 B_FragColor, in vec2 fragCoord )
{...}

Возможно, я смогу смешивать и перетаскивать шейдеры A а Б слева направо от холста?

1 Ответ

1 голос
/ 01 мая 2020

Вы можете использовать рендер для текстуры, включенный вкладками буфера Shadertoy и отображением iChannel.

Чтобы сделать это, просто добавьте вкладку BufA и вставьте в нее свой первый код шейдера, затем сделайте то же самое с вкладкой BufB и ваш второй код шейдера.

Например, я сгенерирую два градиентных изображения и суммирую их. BufA нарисует немного красного на черный, а BufB нарисует градиент черного на зеленый. 

// Shader in buffer A returns a red to black gradient
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord / iResolution.xy;
    fragColor = vec4(uv.x, 0., 0., 1.);
}

// Shader in buffer B returns a black to green gradient
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord / iResolution.xy;
    fragColor = vec4(0., 1. - uv.x, 0., 1.);
}

Включите iChannel0 и iChannel1 в нижней панели и подключите их к BufA и BufB. На этом этапе ShaderToy будет рендерить оба шейдера в текстуры iChannel, прежде чем вызывается основной шейдер вкладки Image.

На вкладке Image вы можете получить текстуры, обратившись к отображенному вами iChannel [i], и использовать iChannelResolution [i ] для вычисления ультрафиолетовых координат.

И вы можете смешивать все, как вы хотите 

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uvA = fragCoord / iChannelResolution[0].xy;
    vec2 uvB = fragCoord / iChannelResolution[1].xy;

    // Output to screen
    // Fragment is the sum of both gradients: red to green
    fragColor = texture(iChannel0, uvA) + texture(iChannel1, uvB);
}

Все это должно выглядеть так

enter image description here

...