Programação gráfica replicando a transição do Chrono Trigger dentro do portão

Ultimamente comecei a jogar este jogo e isso realmente despertou meu interesse

Você pode ver a transição em movimento a partir de ~ 12: 08

Parece haver algumas matemáticas interessantes acontecendo lá. Parece que existem duas visões diferentes combinadas. As ondulações azuis são renderizadas primeiro no fundo e, em seguida, as ondas oscilantes roxas parecem ser renderizadas em algum tipo de pseudo-projeção 3D.

Como exatamente eles chegaram a esse resultado, porém, está além de mim e a curiosidade tomou conta de mim.

Eu não espero que muitas pessoas saibam como isso é feito especialmente, mas se alguém tiver feito uma extensa programação gráfica, talvez possa me esclarecer.

Tentei duplicar o efeito usando o sombreador.

Shader00 Center: https://www.shadertoy.com/view/XsXSz2

Shader01 Sides: https://www.shadertoy.com/view/4sXSz2

:) você pode, como disse Byte56, montar três aviões. Um avião voltado para a câmera diretamente para a frente com o Shader00 e, em seguida, dois para o Shader01, talvez como RandyGaul mencionou, superior / inferior não uniformemente dimensionado para dar a ilusão de profundidade.

Devem, acredito, dar uma aparência 3D suficiente para serem convincentes.

Os dois shaders não são exatamente iguais aos do seu link do youtube (também são mais rascunhos). No entanto, acredito que esses shaders podem, esperançosamente, dar a você um lugar para começar a criar sua própria versão.

Tutorial: Como criar um padrão de listras simples.

Cada ponto no plano tem coordenada. Tentar criar um efeito de sombreador é basicamente visualizar matemática 2D no plano. Aqui, deixe-me apresentar um exemplo simples.

//This shader will visualize coordinates 
vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,uv.y,0,1);

A cor vermelha representará a coordenada x e a tonalidade verde representará a coordenada y. Por enquanto, queremos criar o efeito shader mais simples; uma faixa. Não precisaremos do valor uv.y para este tutorial.

vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,0,0,1);

Você pode ver que a tonalidade vermelha fica intensa à medida que ela se direciona para o lado direito. Isso ocorre porque o valor x da coordenada aumenta conforme você se move para o lado direito; a coordenada final esquerda x começa em 0 e a coordenada final direita é 1.

Como temos esse entendimento básico, vamos tentar algo "intuitivo"

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float color = 0.0;
if(uv.x < .5 ) color= 1.0 ;
gl_FragColor = vec4(color,0,0,1);

Lá você tem um padrão de listras. Espere ... isso não parece certo. Sim, isso é apenas vermelho e preto. O padrão de distribuição consiste em mais do que apenas duas seções de cores. Lá...!

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float color = 0.0;
if(uv.x < .2 ||(uv.x >.4 && uv.x < .6) || (uv.x > .8 && uv.x <1.0 )) color= 1.0 ;
gl_FragColor = vec4(color,0,0,1);

mas e se quisermos fazer o número N da faixa?

O que estou tentando exibir é que, se você tentar abordar a programação de sombreador com mais da "lógica" de programação tradicional, é provável que falhe. Quando se trata de shader, é tudo sobre matemática.

Falando em matemática, qual é o padrão que mais se assemelha ao padrão de "faixa"? Em outras palavras, qual é a equação que se parece com listras? Sim. Y = pecado (X). No entanto, nosso valor X varia de 0,0 ~ 1,0. Se queremos usar Y = sin (X), queremos que nosso valor x varie de 0,0 ~ 6,28 (que é aproximadamente 2 PI).

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * 2.0 *PI; 
float y = sin(x);
gl_FragColor = vec4(y,0,0,1);

Agora temos "faixa" em termos de padrão gerado por uma equação. Por que devemos adotar essa abordagem? Isso não apenas pode ser mais rápido, mas também elimina a necessidade de escrever condições feias "se" para ter N número de faixas. Se quiséssemos ter mais de uma faixa, poderíamos simplesmente estender o padrão aumentando ainda mais o valor máximo de X.

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * (2.0 *PI * 10.0); //ta dan!
float y = sin(x);
gl_FragColor = vec4(y,0,0,1);

Você pode dizer que esse shader não produz a faixa perfeita como no shader inicial, mas, na verdade, tudo o que você precisa fazer é escrever uma equação mais adequada!

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * (2.0 *PI * 10.0);
float y = sin(x) / abs(sin(x) );
gl_FragColor = vec4(y,0,0,1);

Weeee ~~~

Próximo: Como criar um padrão de listras onduladas.