Programación gráfica que replica la transición de Chrono Trigger dentro de la puerta

Empecé a jugar este juego por primera vez últimamente y esto realmente despertó mi interés.

Puede ver la transición en movimiento a partir de las ~ 12: 08

Parece que hay algunas matemáticas interesantes que tienen lugar allí. Parece que hay dos puntos de vista diferentes combinados. Las ondas azules se representan primero en el fondo y luego las ondas oscilantes púrpuras parecen representarse en algún tipo de proyección pseudo 3D.

Sin embargo, cómo llegaron exactamente a este resultado está más allá de mí y la curiosidad me ha vencido.

No espero que mucha gente sepa cómo se hace esto especialmente, pero si alguien ha hecho una programación gráfica extensa, tal vez podrían aclararme.

Traté de duplicar el efecto usando shader.

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

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

:) podrías, como dijo Byte56, configurar tres aviones. Un avión frente a la cámara directamente hacia adelante con Shader00, y luego dos aviones con Shader01, tal vez como mencionó RandyGaul, arriba / abajo no uniformemente escalados para dar la ilusión de profundidad.

Deberían, creo, dar suficiente aspecto 3D para ser convincentes.

Los dos sombreadores no son exactamente los mismos que en el enlace de youtube (también son más de borrador). Sin embargo, creo que estos sombreadores pueden, con suerte, darle un lugar para comenzar a construir su propia versión.

Tutorial: Cómo hacer un patrón de rayas simple.

Cada punto en el plano tiene coordenadas. Intentar crear un efecto de sombreado es básicamente visualizar matemática 2D en el plano. Aquí permítanme presentarles un ejemplo simple.

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

El color rojo representará la coordenada xy el tono verde representará la coordenada y. Por ahora, queremos crear el efecto de sombreador más simple; una raya No necesitaremos el valor uv.y para este tutorial.

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

Puede ver que el tono rojo se vuelve intenso cuando se dirige hacia el lado derecho. Esto se debe a que el valor x de la coordenada aumenta a medida que te mueves hacia el lado derecho; la coordenada x del extremo izquierdo comienza en 0 y la coordenada x del extremo derecho es 1.

Como tenemos esta comprensión básica, intentemos 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);

Ahí tienes un patrón de rayas. Espera ... eso no se ve del todo bien. Sí, esto es solo rojo y negro. El patrón de rayas consiste en más de solo dos secciones de color. Allí...!

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

pero ¿qué pasa si queremos hacer un número N de rayas?

Lo que intento mostrar es que si intenta acercarse a la programación del sombreador con más "lógica" de programación tradicional, es probable que falle. Cuando se trata de sombreador, se trata de matemáticas.

Hablando de matemáticas, ¿cuál es el patrón que más se asemeja al patrón de "rayas"? En otras palabras, ¿cuál es la ecuación que parece rayas? Si. Y = sin (X). Sin embargo, nuestro valor X varía de 0.0 ~ 1.0 Si queremos usar Y = sin (X) queremos que nuestro valor x oscile entre 0.0 ~ 6.28 (que es 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);

Ahora tenemos "franja" en términos de patrón generado por una ecuación. ¿Por qué deberíamos tomar este enfoque? Esto no solo puede ser más rápido, sino que también elimina la necesidad de escribir condiciones "si" feas para tener un número N de bandas. Si quisiéramos tener más de una franja, simplemente podríamos extender el patrón aumentando aún más el 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);

Se podría decir que este sombreador no produce la franja perfecta como la del sombreador anterior, pero en realidad, ¡todo lo que necesita hacer es escribir una ecuación más adecuada!

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 ~~~

Siguiente: Cómo hacer un patrón de rayas onduladas.