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


9

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.


2
Sieht aus wie 3 Flugzeuge, eines oben, eines unten und eines mit Blick auf die Kamera.
MichaelHouse

Die Ebenen oben / unten sind ebenfalls ungleichmäßig skaliert, um die Illusion von Tiefe zu erzeugen. Es gibt keine "Kamera", nur ein paar Skalierungssachen oder nicht. Das "vor der Kamera" ist wahrscheinlich nur eine Animation oder so etwas oder eine clevere Kachelung einer Animation.
RandyGaul

1
Schauen Sie sich diesen Wikipedia-Artikel an: en.wikipedia.org/wiki/Mode_7
Neverender

Antworten:


11

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

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein Weeee ~~~

Weiter: So erstellen Sie ein Wellenstreifenmuster.


1
Chrono Trigger wurde ursprünglich für SNES veröffentlicht, das keine Flugzeuge hatte, aber Mode 7 . Gleiches Konzept, nur ein technisches Detail.
Icy Defiance

2
Vielleicht können Sie die Antwort ergänzen, indem Sie beschreiben, wie die Shader erstellt werden? Andernfalls ist diese Antwort meistens nutzlos, falls die Links jemals sterben sollten.
MichaelHouse

In Übereinstimmung mit Byte56, wo kann jemand das Wissen erlernen, um solche glsl-Shader herzustellen, und was ist Ihr Denkprozess beim Schreiben?
Oxysoft

1
@oxysoft Diese Arten von Shadern sind eher Variationen von herkömmlichen Lichteffekt-Shadern. So spezifisch sie auch sind, es gibt nicht viele Ressourcen, die sich mit "wie man sie herstellt" befassen. Dies bedeutet jedoch nicht, dass Sie keine Beispiele finden können. Probieren Sie shadertoy.com und andere "Fun Shader" -Websites aus, um viele großartige Beispiele dafür zu sehen, was Sie mit Shader tun können. Die beste Methode, um zu lernen, wie man sie herstellt (glaube ich), besteht darin, nur allgemeine Shader-Praktiken zu lernen und die im Internet gefundenen "Fun Shader" -Beispiele zu studieren.
Tofu_Craving_Redish_BlueDragon
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.