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


9

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.


2
Parece 3 planos, uno arriba, uno abajo y uno frente a la cámara.
MichaelHouse

Los planos en la parte superior / inferior también se escalan de manera no uniforme para dar la ilusión de profundidad. No hay "cámara", solo algunas cosas de escalado o no. El "frente a la cámara" probablemente sea solo una animación o algo, o un ingenioso mosaico de una animación.
RandyGaul

1
Echa un vistazo a este artículo de Wikipedia: en.wikipedia.org/wiki/Mode_7
Neverender

Respuestas:


11

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

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí Weeee ~~~

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


1
Chrono Trigger fue lanzado originalmente para SNES, que no tenía aviones, pero sí tenía Modo 7 . El mismo concepto, solo un detalle técnico.
Icy Defiance

2
¿Quizás puede agregar a la respuesta describiendo cómo se crean los sombreadores? De lo contrario, si los enlaces alguna vez mueren, esta respuesta será en su mayoría inútil.
MichaelHouse

De acuerdo con Byte56, ¿dónde puede alguien aprender el conocimiento para hacer sombreadores glsl como estos y cuál es su proceso de pensamiento al escribirlo?
oxysoft

1
@oxysoft Estos tipos de sombreadores son más variaciones de los sombreadores de efectos de luz tradicionales. Tan específicos como son, no hay muchos recursos que cubran "cómo hacerlos". Sin embargo, eso no significa que no pueda encontrar ejemplos. Pruebe shadertoy.com y otros sitios web de "sombreadores divertidos" para ver muchos ejemplos excelentes de lo que puede hacer con sombreadores. El mejor método para que aprendas a hacerlos (creo) es aprender solo las prácticas generales de sombreado y estudiar esos ejemplos de "sombreador divertido" que se encuentran en Internet.
Tofu_Craving_Redish_BlueDragon
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.