Wie kann ich einen Iris Wipe-Effekt implementieren?

Für diejenigen, die nicht wissen:

Ein Iris-Wischtuch ist ein Wischtuch, das die Form eines wachsenden oder schrumpfenden Kreises annimmt. Es wurde häufig in animierten Kurzthemen verwendet, beispielsweise in den Zeichentrickserien Looney Tunes und Merrie Melodies, um das Ende einer Geschichte zu kennzeichnen. Bei Verwendung auf diese Weise kann das Iris-Wischtuch um einen bestimmten Brennpunkt zentriert sein und als Vorrichtung für einen "Abschiedsschuss" -Witz, ein viertes Augenzwinkern eines Charakters oder andere Zwecke verwendet werden.

Beispiel von flasheff.com

Ihre Antwort kann ein Codierungsbeispiel enthalten oder nicht. Eine sprachunabhängige Erklärung wird als ausreichend angesehen.

In einem 2D-iPhone-Spiel, das ich kürzlich gespielt habe, iris wipe effectwurde einfach Vollbild-Sprites mit etwas Transparenz verwendet:

Diese Bilder werden einfach über den Bildschirm gezeichnet, sobald alles andere gezeichnet wurde (wie Hud, Hintergrund, ...).

Sie können ganz einfach Thesen Bilder in bauen photoshop, gimp, flashoder was auch immer 2D - Programm , das Sie haben.

Sie können dies auch "in Echtzeit" tun, indem Sie 2D-Grundelemente verwenden, die in Ihrem Framework verfügbar sind (Sie geben keine an). Hier ist ein Beispiel in opengl (nicht getestet):

void drawIris(float inner_radius)
{
   const float outer_radius = 300.0f; //something big enough to cover whole screen

   glBegin(GL_TRIANGLE_STRIP);
   for (int i = 0; i < 360; i++)
   {
      float degInRad = i * DEG2RAD;
      glVertex2f(cos(degInRad) * inner_radius, sin(degInRad) * inner_radius);
      glVertex2f(cos(degInRad) * outer_radius, sin(degInRad) * outer_radius);
   }
   glEnd();
}

//to change the way iris animation is done,
//you can replace this function by something else like smoothstep() function
float lerp(float a, float b, float t)
{
   return a * (1.0f - t) + b * t;
}

//usage :
drawIris(lerp(0.0f, 50.0f, time));

So funktioniert es:

Wir zeichnen einen offenen Kreis mit einem Außenradius, der größer als der Bildschirm ist. Alles außerhalb des Bildschirms wird automatisch von opengl abgeschnitten. Der Innenradius ist die Öffnungsgröße der Iris.

Wenn Sie OpenGL oder Direct3D verwenden, können Sie einen Nachbearbeitungs-Shader schreiben, um die Aufgabe ziemlich einfach zu erledigen.

Sie rendern ein Vollbild-Quad über der bereits gerenderten Szene. Der Shader nimmt (als einheitlichen) aktuellen Radius der Iris auf (so dass Sie diesen auf der CPU "animieren").

Im Fragment / Pixel-Shader erhalten Sie die Bildschirmkoordinaten des aktuellen Pixels aus den interpolierten Scheitelpunktkoordinaten. Sie berechnen dann den Abstand zur Bildschirmmitte und geben ein schwarzes Pixel aus, wenn der Abstand größer als der aktuelle Irisradius ist, und einen transparenten, wenn nicht.

Wenn Sie weichere Kanten wünschen, können Sie den Vignetten-Shader nachschlagen und seinen Radius auf die gleiche Weise animieren.

Ein anderer Ansatz wäre, ein 2D-Netz mit einem Loch in der Mitte zu erzeugen und dieses über alles andere zu rendern.

Das Erzeugen dieses Netzes mag zunächst kompliziert erscheinen, insbesondere wenn das Loch teilweise größer als das Sieb ist. Denken Sie jedoch daran, dass das Netz möglicherweise viel größer als das Sieb ist.

Ich würde mit so etwas wie einer riesigen "O" -Kreisform gehen.

Alternativ können Sie Schablonenpuffer verwenden, um zuerst die Teile zu rendern, die Sie für den Schablonenpuffer sichtbar halten möchten, und dann mit diesem Schablonenpuffer ein großes Quad über alles zu rendern.