Wie kann ich einen Iris Wipe-Effekt implementieren?

7

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.

graphic-effects

1

Weitere Erklärung für Unbekannte: Animiertes GIF eines Iris-Wischtuchs - Beachten Sie, dass das Wischen die nächste Szene öffnen oder die aktuelle Szene schließen kann (stellen Sie sich vor, es wird in umgekehrter Reihenfolge abgespielt).

— Ricket

1

Ich denke, Sie müssen die Implementierungsplattform angeben. Was nützlich ist, hängt stark davon ab, welche Grafikoperationen verfügbar sind.

— Kevin Reid

10

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

Geben Sie hier die Bildbeschreibung ein

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:

Geben Sie hier die Bildbeschreibung ein

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.

— Tigrou
quelle

Nur zur Verdeutlichung: Zeichnen Sie in diesem Fall einen Kreis über den anderen und subtrahieren Sie den Schnittbereich.

Nein, wir zeichnen nur einmal. Stellen Sie sich einen ungefüllten Kreis mit einem riesigen Rand vor (wie ein Ring).

— Tigrou

Wenn ich jemanden in meinem Team mit dem Texturansatz unter iOS erwischen würde, würde ich ihn streng ansprechen. Diese Art von großer Transparenz würde die Bildrate auf vielen Geräten (insbesondere dem iPhone4 und iPad1) absolut beeinträchtigen. Aber es ist wahrscheinlich der beste Ansatz auf Desktop / Konsole.

— Trevor Powell

8

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.

— Tapio
quelle

+1 für die Verwendung von Pixel-Shadern (falls verfügbar). Das würde die Möglichkeit ermöglichen, leicht glatte Ränder um die Iris zu haben.

— Tigrou

2

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.

— Jari Komppa
quelle