Methoden zum Zeichnen von Outlines in Videospielen

 (ameye.dev)
2 Punkte von GN⁺ 2025-01-05 | 1 Kommentare | Auf WhatsApp teilen

  • Einführung

    • In Spielen wird das Outline-Rendering oft sowohl aus ästhetischen Gründen als auch zur Unterstützung des Gameplays verwendet. Zum Beispiel nutzt Sable Outlines, um einen Comicbuch-Look zu erzeugen, während The Last of Us Outlines nutzt, um Gegner zu betonen.

  • Rim-Effekt

    • Technik

      • Mit dem Fresnel-Effekt können Outlines an Objektkanten gerendert werden; der Effekt wird dabei an den Kanten stärker.

    • Implementierung

      • Es wird ein benutzerdefinierter Shader verwendet, der den Fresnel-Effekt implementiert, um ein Objekt mit Outlines zu rendern. Er eignet sich für weiche Objekte wie Kugeln oder Kapseln, aber nicht für harte Objekte wie Würfel.

  • Vertex-Extrusion

    • Technik

      • Es wird eine Kopie des Originalobjekts verwendet, um eine Outline zu erzeugen. Die Vertices der Kopie werden extrudiert, damit sie größer als das Original werden.

    • Extrusionsrichtung

      • Die Größe wird über die Richtung bestimmt, in die die Vertices verschoben werden. Die Vertices werden im Objekt-Space bewegt, um die Outline zu formen.

    • Extrusionsraum

      • Vertices können im Objekt-Space oder im Clip-Space verschoben werden. Die Verschiebung im Clip-Space erzeugt eine gleichmäßigere Outline.

    • Maskierung

      • Die Vorderseite des duplizierten Mesh wird entfernt, sodass nur die Outline sichtbar bleibt.

  • Blur-Buffer

    • Technik

      • Die Silhouette eines Objekts wird in einen Buffer gerendert und anschließend verwischt, um eine Outline zu bilden.

    • Silhouette-Buffer

      • Ein Silhouette-Buffer wird erstellt, indem das Objekt in einer einfarbigen Farbe gerendert wird.

    • Blur-Pass

      • Ein Blur-Pass wird genutzt, um den Silhouette-Buffer zu erweitern. Box Blur oder Gaussian Blur werden eingesetzt, um die Leistung zu verbessern.

    • Outline-Pass

      • Die verwischte Silhouette wird mit der Originalszene kombiniert, um die Outline zu bilden.

  • Jump Flood-Algorithmus

    • Der Jump Flood-Algorithmus wird verwendet, um Outlines zu rendern. Er ermöglicht breite Outlines mit geringem Performance-Aufwand.

  • Kantenerkennung

    • Technik

      • Ein Fullscreen-Pass wird verwendet, um Diskontinuitäten in der Szene zu erkennen und Outlines zu rendern.

    • Diskontinuitätsdetektion

      • Mit den Operatoren Roberts Cross oder Sobel werden Diskontinuitäten erkannt.

    • Quellen der Diskontinuität

      • Diskontinuitäten werden anhand von Tiefen-, Normal- und Farbtexturen erkannt, um Outlines zu bilden.

    • Anpassung der Kantenerkennung

      • Die beim Erkennen von Diskontinuitäten verwendeten Schwellenwerte werden angepasst, um Artefakte zu entfernen.

    • Benutzerdefinierte Diskontinuitätsquellen

      • Durch benutzerdefinierte Diskontinuitätsquellen kann die Outline-Steuerung übernommen werden.

  • Fazit

    • Es gibt fünf Methoden zum Zeichnen von Outlines, die einen Kompromiss zwischen Performance, visueller Qualität und manuellem Setup bieten.

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2025-01-05
Hacker News Kommentar

  • Den Artikel über den Jump Flood Algorithm habe ich als sehr interessant gelesen. Es macht Spaß, auf Pixelebene verschiedene Ansätze auszuprobieren.

    • Das ist ein sehr cleverer Weg, ein SDF (Signed Distance Field) zu erzeugen. Beeindruckend ist, dass man in linearer Zeit Outlines mit der gewünschten Breite erzeugen kann.
    • SDFs lassen sich auf unterschiedliche Arten einsetzen, etwa vektorbasiert, funktionsbasiert oder texel-/voxelbasiert. Houdini unterstützt Raster-SDFs gut und hat auch eine kostenlose Version.
    • SDFs sind in vielen Bereichen nützlich.

  • Es wird vorgeschlagen, das Modell erst einfarbig zu rendern und dann über Kantenerkennung die Umrisse zu erzeugen. Dafür ist ein zusätzlicher Render-Pass nötig.

  • Ich interessiere mich für F&E-Projekte zu stylisierten 3D-Grafiken. Dabei gibt es noch mehrere ungelöste Fragen.

    • Wie reduziere ich den Detailgrad eines Comic-3D-Modells, wenn die Kamera herauszoomt?
    • Wie rendere ich 3D-Hintergründe wie Aquarelle?
    • Wie stellt man Rauch, Flammen und Bäume in einem stylisierten 3D-Spiel dar?
    • Wie passe ich Modelle automatisch bei frei bewegter Kamera an?
    • Wie sollte ein idealer Mesh- und Hintergrund-Editor für einen stylisierten 3D-Renderer aussehen?
    • Wie möglich ist das Rendern von Retro-Pixel-Art mit einfachen 3D-Modellen?
    • Wie kann man durch Stilmittel eine physikalisch präzisere 3D-Spielwelt schaffen?

  • In Astral Divide wurde eine Technik entwickelt, die einem Blur-Buffer ähnelt. Sie nutzt Antialiasing zur Kantenerzeugung. Sie ist performant günstig und einfach zu implementieren.

  • Ich habe Leidenschaft für Technical Art und freue mich auf Verbesserungen am Compute-Shader-Pipeline von Godot. Die aktuelle Konfiguration der Compositor-Plugin-Einstellung ist etwas kompliziert.

  • Ich frage mich, ob nach der Preiskontroverse um Unity Entwickler zu Unreal und Godot gewechselt sind.

  • Ich habe die Arbeit von VR-Apps zu Webentwicklung gewechselt, vermisse aber den Zauber von 3D-Grafiken, Kollisionen und Shader-Arbeit.

  • Die Ergebnisse des Kantenerkennungs-Renderings sind wirklich eindrucksvoll. Es sieht aus wie eine Szene aus dem niederländischen Comic Franka.

  • Ich habe eine großartige Notiz zur Kantenerkennungsmethode gefunden, die ein Entwickler von Mars First Logistics vorgeschlagen hat.

  • Einfache Technikvorschläge zum Zeichnen von Outlines

    • Erstelle ein Array, das den eindeutigen Kanten jeder Fläche enthält.
    • Transformiere die Kanten in den View Space und zeichne sie je nach Bedingung.