Programmation graphique reproduisant la transition de Chrono Trigger à l'intérieur de la porte

J'ai commencé à jouer à ce jeu pour la première fois récemment et cela a vraiment suscité mon intérêt

Vous pouvez voir la transition en mouvement à partir de ~ 12: 08

Il semble y avoir des mathématiques intéressantes là-dedans. Il semblerait qu'il y ait deux points de vue différents combinés ensemble. Les ondulations bleues sont d'abord rendues en arrière-plan, puis les ondes oscillantes violettes semblent être rendues sur une sorte de projection pseudo 3D.

Cependant, comment ils sont arrivés exactement à ce résultat me dépasse et la curiosité a pris le dessus.

Je ne m'attends pas à ce que beaucoup de gens sachent comment cela se fait en particulier, mais si quelqu'un a fait une programmation graphique approfondie, il pourrait peut-être m'éclairer.

J'ai essayé de dupliquer l'effet en utilisant un shader.

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

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

:) vous pouvez, comme l'a dit Byte56, configurer trois avions. Un avion face à la caméra directement vers l'avant avec Shader00, puis deux avions avec Shader01, peut-être comme RandyGaul l'a mentionné, haut / bas non uniformément mis à l'échelle pour donner l'illusion de profondeur.

Ils devraient, je crois, donner un aspect 3D suffisant pour être convaincants.

Les deux shaders ne sont pas exactement les mêmes que dans votre lien youtube (ils sont également plus de brouillon). Cependant, je crois que ces shaders peuvent, espérons-le, vous donner un endroit pour commencer à créer votre propre version.

Tutoriel: Comment faire un simple motif de rayures.

Chaque point dans le plan a des coordonnées. Tenter de créer un effet de shader revient à visualiser des mathématiques 2D sur le plan. Ici, permettez-moi de vous présenter un exemple simple.

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

La couleur rouge représentera la coordonnée x et la teinte verte représentera la coordonnée y. Pour l'instant, nous voulons créer un effet de shader le plus simple; une rayure. Nous n'aurons pas besoin de la valeur uv.y pour ce tutoriel.

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

Vous pouvez voir que la teinte rouge devient intense lorsqu'elle se dirige vers le côté droit. En effet, la valeur x de la coordonnée augmente lorsque vous vous déplacez vers la droite; la coordonnée x de l'extrémité gauche commence à 0 et la coordonnée x de l'extrémité droite est 1.

Puisque nous avons cette compréhension de base, essayons quelque chose d '"intuitif"

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à, vous avez un motif à rayures. Attendez ... cela ne semble pas tout à fait correct. Oui, c'est juste rouge et noir. Le motif à rayures est composé de plus de deux sections de couleur. 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);

mais que se passe-t-il si nous voulons faire un nombre N de rayures?

Ce que j'essaie de montrer, c'est que si vous essayez d'approcher la programmation des shaders avec plus de "logique" de programmation traditionnelle, vous risquez d'échouer. Quand il s'agit de shader, c'est une question de mathématiques.

En parlant de mathématiques, quel est le motif qui ressemble le plus au motif "à rayures"? En d'autres termes, quelle est l'équation qui ressemble à des rayures? Oui. Y = sin (X). Cependant, notre valeur X varie de 0,0 à 1,0. Si nous voulons utiliser Y = sin (X), nous voulons que notre valeur X varie de 0,0 à 6,28 (ce qui correspond à environ 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);

Nous avons maintenant une "bande" en termes de motif généré par une équation. Pourquoi devrions-nous adopter cette approche? Non seulement cela peut être plus rapide, mais cela élimine également la nécessité d'écrire des conditions "if" moches pour avoir un nombre N de bandes. Si nous voulions avoir plus d'une bande, nous pourrions simplement étendre le motif en augmentant davantage la valeur X maximale.

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

Vous pourriez dire que ce shader ne produit pas la bande parfaite comme dans les premiers shaders, mais vraiment, tout ce que vous avez à faire est d'écrire une équation plus adaptée!

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

Suivant: Comment faire un motif à rayures ondulées.