Grafikprogrammierung, die den Übergang vom Chrono-Trigger im Gate nachbildet

Ich habe in letzter Zeit zum ersten Mal angefangen, dieses Spiel zu spielen, und das hat mein Interesse geweckt

Sie können den Übergang in Bewegung ab ~ 12: 08 sehen

Es scheint einige interessante Mathe zu geben, die dort stattfinden. Es scheint, dass zwei verschiedene Ansichten miteinander kombiniert sind. Die blauen Wellen werden zuerst im Hintergrund gerendert und dann scheinen die lila oszillierenden Wellen auf einer Art Pseudo-3D-Projektion gerendert zu werden.

Wie genau sie zu diesem Ergebnis gekommen sind, ist mir jedoch ein Rätsel und die Neugier hat mich überwunden.

Ich erwarte nicht, dass viele Leute wissen, wie das besonders gemacht wird, aber wenn jemand eine umfangreiche Grafikprogrammierung gemacht hat, könnten sie mich vielleicht aufklären.

Ich habe versucht, den Effekt mithilfe des Shaders zu duplizieren.

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

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

:) Sie könnten, wie Byte56 sagte, drei Flugzeuge einrichten. Ein Flugzeug, das mit Shader00 direkt nach vorne zeigt, und dann zwei Flugzeuge mit Shader01, die möglicherweise, wie RandyGaul erwähnte, oben / unten ungleichmäßig skaliert sind, um die Illusion von Tiefe zu erzeugen.

Ich glaube, sie sollten einen ausreichenden 3D-Look bieten, um zu überzeugen.

Beide beiden Shader sind nicht genau die gleichen wie in deinem Youtube-Link (auch sie sind eher grobe Entwürfe). Ich glaube jedoch, dass diese Shader Ihnen hoffentlich einen Ort bieten können, an dem Sie mit dem Erstellen Ihrer eigenen Version beginnen können.

Tutorial: So erstellen Sie ein einfaches Streifenmuster.

Jeder Punkt in der Ebene hat eine Koordinate. Der Versuch, einen Shader-Effekt zu erstellen, besteht im Wesentlichen darin, 2D-Mathematik auf der Ebene zu visualisieren. Lassen Sie mich hier ein einfaches Beispiel vorstellen.

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

Die Farbe Rot repräsentiert die x-Koordinate und der grüne Farbton repräsentiert die y-Koordinate. Im Moment möchten wir den einfachsten Shader-Effekt erstellen. ein Streifen. Für dieses Tutorial benötigen wir keinen UV-Wert.

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

Sie können sehen, dass der rote Farbton intensiv wird, wenn er nach rechts zeigt. Dies liegt daran, dass der x-Wert der Koordinate höher wird, wenn Sie sich nach rechts bewegen. Die x-Koordinate am linken Ende beginnt bei 0 und die x-Koordinate am rechten Ende ist 1.

Da wir dieses Grundverständnis haben, versuchen wir etwas "Intuitives".

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

Dort haben Sie ein Streifenmuster. Warten Sie ... das sieht nicht ganz richtig aus. Ja das ist nur rot und schwarz. Das Streifenmuster besteht aus mehr als nur zwei Farbabschnitten. Dort...!

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

aber was ist, wenn wir N Streifenzahl machen wollen?

Ich versuche anzuzeigen, dass Sie wahrscheinlich scheitern, wenn Sie versuchen, sich der Shader-Programmierung mit mehr traditioneller Programmier- "Logik" zu nähern. Wenn es um Shader geht, dreht sich alles um Mathematik.

Apropos Mathematik, welches Muster ähnelt am meisten dem "Streifen" -Muster? Mit anderen Worten, wie sieht die Gleichung aus, die wie Streifen aussieht? Ja. Y = sin (X). Unser X-Wert liegt jedoch zwischen 0,0 und 1,0. Wenn wir Y = sin (X) verwenden möchten, möchten wir, dass unser x-Wert zwischen 0,0 und 6,28 liegt (was ungefähr 2 PI entspricht).

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

Wir haben jetzt "Streifen" in Bezug auf das Muster, das durch eine Gleichung erzeugt wird. Warum sollten wir diesen Ansatz wählen? Dies kann nicht nur schneller sein, sondern es entfällt auch die Notwendigkeit, hässliche "Wenn" -Bedingungen zu schreiben, um N Streifen zu haben. Wenn wir mehr als einen Streifen haben möchten, können wir das Muster einfach erweitern, indem wir den maximalen X-Wert weiter erhöhen.

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

Man könnte sagen, dieser Shader erzeugt nicht den perfekten Streifen wie der frühe Shader, aber alles, was Sie tun müssen, ist eine passendere Gleichung zu schreiben!

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

Weiter: So erstellen Sie ein Wellenstreifenmuster.