Methoden zum Zeichnen von Outlines in Videospielen

 (ameye.dev)
2 Punkte von GN⁺ 2025-01-05 | 1 Kommentare | Auf WhatsApp teilen
  • Die gängigen Methoden zum Zeichnen von Outlines um Objekte in Unity sind Rim-Effekte, Vertex-Expansion, Blur-Buffer, der Jump-Flood-Algorithmus und Kantenerkennung; sie unterscheiden sich jeweils bei Qualität, Performance und Einrichtungsaufwand.
  • Rim-Effekte approximieren Fresnel über das Skalarprodukt von Normalen- und Blickrichtung und betonen die innere Kante, liefern aber bei runden und scharfkantigen Modellen sehr unterschiedliche Ergebnisse.
  • Vertex-Expansion erzeugt eine Kontur, indem ein dupliziertes Mesh von hinten vergrößert wird; im Clip Space lässt sich die Breite auf dem Bildschirm konstanter halten.
  • Blur-Buffer und der Jump-Flood-Algorithmus zeichnen die Silhouette in einen Buffer und erweitern sie anschließend; sie haben ihre Stärken jeweils bei weichen Linien bzw. sehr breiten Outlines.
  • Kantenerkennung sucht im gesamten Bild nach Diskontinuitäten in Tiefen-, Normalen- und Farb-Buffer und erzeugt daraus Linien; um unerwünschte Linien zu reduzieren, müssen Schwellenwerte und Modulation fein abgestimmt werden.

Warum Outline-Rendering verwendet wird

  • Outlines werden in Spielen genutzt, um einen visuellen Stil zu erzeugen oder als Gameplay-Hilfe, etwa zum Hervorheben oder Auswählen von Objekten.
    • Sable verwendet Outlines für einen comicartigen Stil.
    • The Last of Us verwendet Outlines, um Gegner hervorzuheben, wenn der Spieler in den Schleichmodus wechselt.
  • Die fünf Techniken bieten jeweils unterschiedliche Kompromisse zwischen Performance, visueller Qualität und manueller Einrichtung.

Rim-Effekt: innere Kanten per Fresnel-Approximation betonen

  • Ein Rim-Effekt approximiert den Fresnel-Effekt und rendert eine Linie am Rim bzw. Rand eines Objekts.
  • Die Berechnung basiert auf dem Skalarprodukt des normalisierten Normalenvektors N und der normalisierten Blickrichtung V.
    • Der Wert 1.0 - saturate(dot(N, V)) wird mit dem Exponenten P potenziert, um die Stärke des Effekts zu erzeugen.
    • Das ist eher eine Approximation für Outlines als ein physikalisch korrektes Fresnel.
  • In einer Unity-Implementierung steuert ein Custom Shader Breite, Stärke, Weichheit und Farbe der Outline.
    • Eine Beispielimplementierung verwendet smoothstep, lerp, _OutlineWidth, _OutlineSoftness, _OutlinePower und _OutlineColor.
  • Diese Methode erscheint immer als innere Linie und ist nicht an der äußeren Kontur des Objekts sichtbar.
  • Sie funktioniert gut bei runden, glatten Objekten, kann bei Würfeln oder komplexen Modellen aber ungleichmäßige Linienbreiten erzeugen oder nicht wirklich wie eine Outline aussehen.

Vertex-Expansion: ein dupliziertes Mesh vergrößern, um eine äußere Linie zu erzeugen

  • Bei der Vertex-Expansion wird eine Kopie des ursprünglichen Objekts oder Meshes erneut gerendert; die Vertices werden hinter dem Original expandiert, um eine größere Form zu erzeugen, die dann einfarbig gerendert wird.

  • Auswahl der Expansionsrichtung

    • In welche Richtung Vertices bewegt werden, hat großen Einfluss auf die Qualität der Outline.
    • Eine Bewegung in Richtung der Vertex-Position lässt das Mesh aufgebläht wirken.
    • Im lokalen Raum kann die Vertex-Position wie ein Vektor vom Objektzentrum zum Vertex verwendet werden.
    • Ohne Normalisierung bewegen sich weiter vom Zentrum entfernte Vertices stärker.
    • Mit normalize(positionOS) * width ist im Objektraum eine gleichmäßigere Bewegung möglich.
    • Eine Bewegung in Richtung des Normalenvektors liefert gute Ergebnisse bei Objekten mit glatten Kanten, etwa Kugeln oder Kapseln.
    • Bei Objekten mit scharfen Kanten wie Würfeln können Lücken in der Outline entstehen.
    • Auch Vertex-Farben können als Expansionsrichtung verwendet werden.
    • Dabei werden Custom Normals erzeugt und im Vertex-Color-Kanal des Meshes gespeichert.
    • Wenn man bei einem Würfel sphärische, glatte Normalen als Vertex-Farben baked, lassen sich bessere Outlines erzielen.
    • Der Nachteil ist die manuelle Einrichtung, da für jedes Mesh Custom Normals erzeugt werden müssen; das lässt sich per Skript automatisieren.

  • Auswahl des Expansionsraums

    • In der Vertex-Stufe des Shaders beginnen Vertex-Koordinaten im Objektraum und werden über die MVP-Matrix in den Clip Space transformiert.
    • Der Ablauf ist Objektraum/Modellraum/lokaler Raum → World Space → Kamera-/View Space → Clip Space → Screen Space → Viewport-/Window Space.
    • Wird im Objektraum expandiert, kann die Outline verzerrt werden, weil die MVP-Transformation noch nicht angewendet wurde.
    • Beim Anwenden der Model-Matrix können Skalierungsprobleme auftreten.
    • Beim Übergang vom Clip Space in den Screen Space kommt es durch die perspektivische Division zu perspektivischer Verkleinerung.
    • Ein Teil der Bewegung im 3D-Raum erfolgt in Kamerarichtung und trägt nicht zur sichtbaren Outline-Breite auf dem Bildschirm bei.
    • Eine Expansion im Clip Space kann eine saubere Outline erzeugen, deren Breite auf dem Bildschirm nahezu konstant ist.
    • Dazu werden Vertex-Position und Normale in den Clip Space transformiert und nur die x- und y-Koordinaten verändert.
    • Durch Division durch Bildschirmbreite und -höhe wird das Seitenverhältnis korrigiert.
    • Durch Multiplikation mit w im Clip Space wird verhindert, dass die spätere perspektivische Division einen Nettoeffekt auf die Outline-Breite hat.
    • Durch Multiplikation mit width * 2 entspricht eine Breiteneinheit einem Pixel auf dem Bildschirm.
    • Auch die Clip-Space-Methode hängt von den Mesh-Normalen ab.
    • Ohne Custom Normals können an scharfen Kanten Lücken entstehen.
    • Wenn Normalen falsch gesetzt sind und in die entgegengesetzte Richtung zeigen, bewegen sich auch die Outline-Vertices in die falsche Richtung, wodurch Lücken entstehen.
    • Weitere Erläuterungen finden sich unter creating an outline in clip space.

  • Maskierung

    • Beim duplizierten Mesh soll nur der herausragende Outline-Teil sichtbar sein.
    • Üblich ist, beim duplizierten Mesh die front-facing geometry zu cullen und die Outline aus den Backfaces zu erzeugen.
    • Der Depth Test verwendet less than or equal to, damit Backfaces nur an der Outline-Position sichtbar werden.
    • Eine andere Methode ist die Verwendung einer Stencil-Maske, damit das duplizierte Mesh nicht vor dem Original sichtbar ist.
    • In diesem Fall ist kein Culling nötig.
    • Es entstehen keinerlei Linien innerhalb des Objekts.
    • Wenn sich zwei Objekte überlappen, ist die Outline nur um die beiden Objekte herum sichtbar.

Blur-Buffer: die Silhouette weich erweitern

  • Beim Blur-Buffer-Verfahren wird die Silhouette eines Objekts in einen Buffer gerendert, anschließend per Blur erweitert und das Ergebnis für das Outline-Rendering verwendet.

  • Silhouetten-Buffer

    • Der erste Schritt besteht darin, einen Silhouetten-Buffer zu erstellen.
    • Jedes Objekt wird mit einem Shader, der eine Volltonfarbe ausgibt, in eine Textur gerendert.
    • Wenn alle Silhouetten weiß gerendert werden, kann am Ende die gewünschte Outline-Farbe multipliziert werden, um eine einheitliche Farbe zu erzeugen.
    • Wenn pro Objekt unterschiedliche Outline-Farben benötigt werden, kann jede Silhouette in einer bestimmten Farbe gerendert werden.

  • Blur-Pass

    • Der Blur-Pass wird verwendet, um den Silhouetten-Buffer zu erweitern.
    • Typischerweise kommen ein Box Blur oder Gaussian Blur zum Einsatz.
    • Zur Verbesserung der Performance kann der Silhouetten-Buffer vor dem Blur verkleinert werden.
    • Ein Blur-Pass ist teuer, weil er für jedes Pixel den Durchschnitt oder gewichteten Durchschnitt mehrerer umliegender Pixel berechnet.
    • Es ist empfehlenswert, den Blur in 2 Passes auszuführen.
    • Bei separierbaren Filtern wie Box Blur und Gaussian Blur lässt sich die algorithmische Komplexität von O(N²) auf O(2N) reduzieren.
    • Zuerst wird vertikal geblurrt, anschließend wird dieses Ergebnis erneut horizontal geblurrt, um das finale Ergebnis zu erzeugen.
    • Die Outline-Breite wird über den Parameter _KernelSize des Blur-Shaders gesteuert.

  • Outline-Pass und Maskierung

    • Nach dem Blur-Pass wird die geblurrte Silhouette mit der ursprünglichen Szene kombiniert, um die Outline zu erzeugen.
    • Der Blur-Buffer eignet sich für weiche oder leuchtende Outlines.
    • Wird das Blur-Ergebnis per step verarbeitet, lassen sich auch harte Outlines rendern.
    • Wie bei der Vertex-Expansion kann eine Stencil-Maske verwendet werden, damit die Outline nur hinter der Geometrie gerendert wird.
    • Die Performance-Auswirkungen können größer sein als bei anderen Methoden.

Jump-Flood-Algorithmus: sehr breite Outlines verarbeiten

  • Die vierte Methode rendert Outlines mit dem Jump-Flood-Algorithmus.
  • Der Vorteil liegt darin, dass sehr breite Outlines mit vertretbaren Performance-Kosten gerendert werden können.
  • Die Detailerklärung führt zu Ben Golus’ The Quest for Very Wide Outlines.

Kantenerkennung: Diskontinuitäten im gesamten Bild finden

  • Die Kantenerkennungsmethode sucht in einem Fullscreen-Pass nach Diskontinuitäten in der Szene und zeichnet daraus Linien.
  • Diskontinuitäten lassen sich in Tiefen-Buffer-Werten, Normalenvektoren, Albedo-Farben oder anderen im Renderprozess verfügbaren Daten erkennen.

  • Roberts Cross

    • Der Roberts cross operator ist ein Differenzialoperator, der die Summe der Quadrate diagonaler Pixeldifferenzen berechnet.
    • In einer praktischen Implementierung wird ein Kernel mit dem Ausgangsbild gefaltet, um Kanten zu erkennen.
    • Es werden zwei Kernel für die x- und y-Richtung verwendet.
    • Die Kernelgröße beträgt 2 x 2.
    • Pro Pixel sind nur vier umliegende Samples nötig.
    • Es ist ein einfacher Operator, kann aber gute Ergebnisse liefern.

  • Sobel Operator

    • Auch der Sobel operator verwendet zwei Kernel für die x- und y-Richtung.
    • Der Sobel-Kernel hat die Größe 3 x 3 und verwendet neun Samples um ein Pixel herum.
    • Wie Sobel-Filter funktionieren, ist im blog post on Sobel filters genauer zu sehen.

  • Quellen für Diskontinuitäten

    • Üblich ist es, Diskontinuitäten in der Depth Texture, Normal Texture und Color Texture zu suchen, die die Render-Pipeline für die Szene erzeugt.
    • Der Kantenerkennungs-Pass sampelt diese Texturen und erkennt Diskontinuitäten mit den oben genannten Operatoren.
    • Die so erzeugten Kanten können aufgrund einer in einem der drei Buffer gefundenen Diskontinuität gezeichnet werden.
    • Da diese Methode auf alle Objekte angewendet wird, die in diese Buffer schreiben, bietet sie nur geringe Kontrolle pro Objekt.
    • Werden mehrere Diskontinuitätsquellen zugelassen, kann ein robusteres Outline-System entstehen.
    • Manche Kanten werden in allen drei Quellen erkannt.
    • Viele Kanten werden nur durch den Beitrag einer bestimmten einzelnen Quelle erkannt.
    • Für jede Quelle können unterschiedliche Gewichte und Schwellenwerte vergeben werden, um das visuelle Ergebnis der Outline zu steuern.

  • Modulation der Kantenerkennung

    • Wird auf einen Diskontinuitäts-Buffer lediglich ein Kantenerkennungsoperator angewendet, kann es schwierig sein, artefaktfreie Ergebnisse zu erzielen.
    • Der Tiefen-Buffer ist in vielen Render-Pipelines nichtlinear implementiert.
    • Der Tiefenunterschied zwischen zwei Objekten nahe an der Kamera, die 1 m voneinander entfernt sind, ist größer als bei zwei weit entfernten Objekten mit ebenfalls 1 m Abstand.
    • Um das zu korrigieren, kann der Schwellenwert zur Erkennung von Tiefen-Diskontinuitäten mit dem Tiefen-Buffer selbst moduliert werden.
    • Nahe Geometrie benötigt eine größere Diskontinuität im Tiefenwert, bevor sie als Kante erkannt wird.
    • Bei kleinen grazing angles können außerdem unerwünschte Kanten entstehen.
    • Zur Modulation kann eine Fresnel-Maske verwendet werden, die aus dem Skalarprodukt des Normalenvektors N und der Blickrichtung V gebildet wird.
    • Diese Maske ist von derselben Art wie die beim Rim-Effekt verwendete.
    • Auch andere Modulationstechniken sind möglich, die Auswahl hängt jedoch vom angestrebten visuellen Effekt ab.

  • Benutzerdefinierte Diskontinuitätsquellen

    • Dem Outline-Shader können auch benutzerdefinierte Diskontinuitätsquellen bereitgestellt werden.
    • Dabei handelt es sich um Render-Texturen, die im Renderprozess direkt erzeugt werden und benutzerdefinierte Daten für die Outline-Erzeugung enthalten.
    • Da direkt gesteuert werden kann, welche Objekte in den Custom Buffer schreiben, lässt sich auch steuern, welche Objekte eine Outline erhalten.
    • Beispielsweise können die Vertex-Farben eines Meshes in eine Textur gerendert werden, um eine Diskontinuitätsquelle zu erzeugen.
    • Weitere Möglichkeiten sind das Einfärben von Flächen anhand ihrer Weltposition oder das Erzeugen eines Custom Buffers, der Informationen aus Tiefen- und Normalen-Buffer kombiniert.
    • Weitere Informationen gibt es in der Linework section map.

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2025-01-05
Hacker-News-Kommentare

  • Der verlinkte Artikel zum Jump Flood Algorithm war wirklich gut: https://bgolus.medium.com/the-quest-for-very-wide-outlines-b...
    Es ist spannend, über verschiedene Ansätze nachzudenken, die auf Pixel-/Texel-Ebene funktionieren; auch hier wird ein Signed Distance Field (SDF) auf clevere Weise eingesetzt, um viel Arbeit zu übernehmen
    Das Ergebnis, Outlines beliebiger Breite in linearer Zeit zu erzeugen, ist im Vergleich zu einem Brute-Force-Ansatz bei großen Breiten beeindruckend
    SDFs kann ich sehr empfehlen – ob vektorbasiert, funktionsbasiert wie bei Arbeiten von Inigo Quilez oder als texel-/voxelbasierter Rasteransatz wie im Artikel
    Auch Houdini unterstützt Raster-SDFs gut und hat ein ausgereiftes SDF-Toolset; selbst die kostenlose Version ist einen Blick wert

  • Irgendwann würde ich mich gern im Rahmen eines F&E-Projekts tiefgehend mit stilisierter 3D-Grafik beschäftigen
    In letzter Zeit gab es zwar einige Fortschritte, aber es scheint noch viele niedrig hängende Früchte zu geben
    Mich interessiert, wie man bei Toon-Rendering-3D-Modellen Details reduziert, wenn die Kamera weiter weg ist, und wie man natürlich zwischen stärker stilisierten und weniger stilisierten Looks überblendet
    Auch stellt sich die Frage, ob sich die Aquarell-Hintergründe handgezeichneter 2D-Animationen überzeugend als 3D-Szenen rendern lassen und wie man Pinselstriche und Papiertexturen im Screen Space weich animiert
    Offen ist auch, wie man Elemente wie Rauch, Feuer, Bäume, Gras, Schlamm, Regen, Fell und Wasser in stilisierten 3D-Spielen darstellen sollte
    Außerdem frage ich mich, ob man in Spielen mit freier Kamera automatisch Modelle subtil verformen kann, damit sie aus dem aktuellen Kamerawinkel besser aussehen, ähnlich wie bei handgezeichneter Animation
    Große Fragen sind auch, wie der ideale Mesh-Editor und Hintergrund-Editor für einen stilisierten Renderer aussehen würde und ob physikalisch korrekte 3D-Oberflächen und Rigs wirklich nötig sind oder ob man sie abstrakter definieren kann
    Spannend wäre auch, aus einfachen 3D-Modellen Retro-Pixel-Art zu rendern, um prozedurale 2D-Spiele zu erstellen; außerdem könnte man Stilisierung wohl nutzen, um zufällige Überschneidungen zweier Meshes weniger auffällig zu machen
    Allein diese Fragen könnten zehn Karrieren füllen, aber genau das scheint mir eher etwas Gutes zu sein

    • Für Aquarell-Hintergründe gibt es mehrere Techniken; persönlich fällt mir am stärksten die Blender-Arbeit mit Blender Geometry Nodes auf: https://www.youtube.com/watch?v=ljjUoup2uTw
      Ein Kuwahara-Filter wirkt für die meisten auch schon überzeugend genug
      Für Editing-Tools für stilisierte Renderer waren Blender + Rigify + Shape Keys + ein wenig Driver-Magie für meine Zwecke völlig ausreichend
      Texturing in Blender ist lästig, aber auf Hobby-Niveau auszuhalten; wenn man mehr Kontrolle über nicht-fotorealistisches Rendering braucht, könnte der Fork von DillonGoo Studio besser sein: https://www.dillongoostudios.com/gooengine
      Pixel-Art aus 3D-Modellen zu erzeugen habe ich ausprobiert, indem ich Animationen/Modelle in niedriger Auflösung gerendert habe; die Ergebnisse waren ordentlich, brauchten aber einiges an Trial and Error
      Ich erinnere mich auch an Beispiele mit ausgefeilterem Post-Processing, um Dinge wie Pixel-Flackern zu beseitigen
    • Es ist zwar nicht 3D, aber das Datenvisualisierungs- und Kartografie-Studio Stamen hat einen schönen Aquarell-Karten-Renderer gebaut: https://maps.stamen.com/watercolor/#14/52.3718/4.8958
    • Es ist schwer, das eindeutig Retro-Pixel-Art zu nennen, aber ab Commandos 2 wurden Figuren, Fahrzeuge usw. als 3D-Modelle erstellt und zur Laufzeit als 2D-Sprites gerendert, die dann mit vorgerenderten 2D-Sprites und Hintergründen gemischt wurden
    • Bei der Entwicklung eines 3D-Pixel-Art-Spiels musste ich die Pixelgröße ändern, wenn die Kamera herauszoomte
      Niedrige Auflösung: https://x.com/Navy_Green/status/1525564342975995904
      Stabilisierung: https://x.com/Navy_Green/status/1693820282245431540
    • Als Beispiel für Pixel-Art aus 3D-Modellen kann man sich Dead Cells ansehen: https://www.gamedeveloper.com/production/art-design-deep-div...

  • Ich habe meine Karriere mit VR-Apps begonnen, bin aber bald in die Webentwicklung gewechselt, weil der Markt dort besser war
    Bei solchen Artikeln vermisse ich diesen Bereich
    An der Arbeit mit 3D-Grafik, Kollisionen und Shadern hatte etwas Magisches, das man in anderen Bereichen nur schwer findet
    Im Grunde erschafft man Welten und bildet Physik nach, und auch die Mathematik ist viel praktischer und kommt viel häufiger vor als in anderen Programmierfeldern

    • Ich bin umgekehrt von der Webentwicklung in den Spielebereich gewechselt, und es ist tatsächlich so spaßig und spannend, wie es klingt
      Die Arbeitszufriedenheit ist deutlich höher, und auch Tiefe und Obergrenze des Themengebiets sind höher
      Ich mache das seit vier Jahren und bin nie an diese Wand der Langeweile gestoßen wie damals in der Webentwicklung
      Es gibt kaum etwas Besseres, als montags zur Arbeit zu kommen, den Engine-Editor zu öffnen, die kleine Welt, an der man arbeitet, gerendert zu sehen und darüber nachzudenken, welches coole Feature man als Nächstes einbaut
    • In der Webentwicklung könnte es sein, dass Leute den gesamten Code aufsaugen und damit neuronale Netze füttern, wodurch die langweiligen und lästigen Teile abnehmen und interessante Arbeit übrig bleibt
      Im Bereich Technical Art dagegen verschwinden die interessanten und lohnenden Teile, wenn man die Ergebnisse aufsaugt und neuronale Netze damit füttert; für professionelle Arbeit bleiben nur die bisherigen langweiligen Aufgaben übrig oder es werden sogar mehr
      Auch der Wert des gesamten Skillsets sinkt, und Leute aus der Tech-Branche tun so, als wüssten sie besser als die Betroffenen selbst, wie diese Arbeit funktioniert, und werfen ihnen vor, sich nicht darüber zu freuen, dass Silicon-Valley-Firmen den Markt ruinieren, indem sie ohne Vergütung der ursprünglichen Datenersteller Ergebnisse der Note C- zu einem F-Preis liefern
      Wenn ich Vor- und Nachteile abwäge, denke ich, dass der Wechsel in die Webentwicklung die richtige Entscheidung war

  • In meinem Spiel Astral Divide habe ich eine Technik entwickelt, die im Artikel nicht vorkommt.
    Sie ähnelt Blurred Buffer, kommt aber ohne Blur-Pass aus und nutzt stattdessen die Kanten, die durch Antialiasing entstehen.
    Ich zeichne das Objekt als deckendes Weiß auf einen transparenten schwarzen Hintergrund und filtere im Fragment-Shader mit einem hartcodierten Schwellwert nur die Pixel heraus, deren Alphakanal weder vollständig deckend noch vollständig transparent ist.
    Das Ergebnis ist gut genug, die Performance-Kosten sind gering, und die Implementierung ist sehr einfach.

    • Solche Tricks sind wirklich befriedigend.
      Als ich früher in einer Videobearbeitungssoftware ein Zuschneidewerkzeug implementierte, musste der Bereich außerhalb des Zuschnitts während der Bearbeitung vorübergehend unscharf dargestellt werden.
      Ich wollte keinen weiteren teuren Blur-Pass einbauen, also habe ich nur den Mipmap-Bias geändert, damit eine niedriger aufgelöste Textur gerendert wird, und das Texture Filtering hat die ganze Arbeit gratis erledigt.
      Im Vergleich mit einem ähnlichen Zuschneide-Blur-Effekt in PowerPoint sah es nahezu identisch aus; PowerPoint hatte sogar leichtes Color Banding, meine Implementierung nicht.
      In einer ähnlichen Situation ohne Antialiasing in voller Auflösung bestand der Großteil des Canvas aus drehbaren 2D-Rechtecken, deren Kanten Treppeneffekte zeigten.
      Statt Full-Screen-Antialiasing zu aktivieren, habe ich alle Rechtecke etwas vergrößert und die UV-Koordinaten proportional verkleinert, sodass die sichtbaren Kanten innerhalb des eigentlichen 3D-Rechtecks lagen — und wieder hat das Texture Filtering das Problem gratis gelöst.
    • Entstehen da nicht Treppeneffekte, wenn man diese Pixel auf eine einheitliche Farbe setzt?
      Oder ist der Ansatz, das Alpha beizubehalten und nur die Farbe zu setzen, sodass die Kontur zwar weich, aber nicht treppig ist?

  • Die Notizen sind hervorragend.
    Ich habe mich kürzlich mit Ansätzen zur Kantenerkennung beschäftigt und eine gute Methode des Entwicklers von Mars First Logistics gesehen: https://www.reddit.com/r/Unity3D/comments/taq2ou/improving_e...

  • Auch der Artikel ist großartig, und das Ergebnis sieht sehr gut aus: https://ameye.dev/notes/rendering-outlines/edge-detection/co...
    Es sieht aus wie eine Szene aus dem niederländischen Comic Franka.

    • Das ist eine Nachbildung eines Panels aus Tintin The Black Island.

  • Ein wirklich herausragender Artikel, und auch die Leseerfahrung ist großartig.
    Schwierige Konzepte werden in Worten erklärt, die jeder verstehen kann; die Diagramme und Beispiele sind gut, und Abstände sowie Typografie sorgen für eine erstklassige Lesbarkeit.
    Ich frage mich, was der Anlass für das aktuelle Theme war, und ob du je darüber nachgedacht hast, eine publikationsplattform für Engineers zu bauen.

  • Technical Art ist in Software ganz klar meine erste Liebe.
    Ich wünschte, Godot würde eine einfachere Compute-Shader-Pipeline für Post-Processing-Effekte bekommen.
    Die aktuelle Compositor-Plugin-Konfiguration bringt ziemlich viel Boilerplate mit.
    Dieses Repository ist ein gutes Beispiel für Post-Processing in Godot: https://github.com/sphynx-owner/JFA_driven_motion_blur_demo

  • Ich glaube, das erste Mal habe ich diesen Effekt in Wacky Races auf der Dreamcast gesehen.
    Damals gab es viel Marketing in der Art, dass es das erste Spiel sei, das diesen Effekt einsetzt, und dass die Entwickler ihn im Grunde erfunden hätten.
    Ob das stimmte oder nur Werbeübertreibung war, weiß ich nicht, aber als Spieler habe ich ihn definitiv damals zum ersten Mal erlebt.

    • Ich vermute, dass viele Leute diesen Effekt ungefähr zur gleichen Zeit unabhängig voneinander erfunden haben.
      Die Dreamcast war, ehrlich gesagt, die erste Hardware, die diesen Effekt in hoher Qualität in Echtzeit bewältigen konnte.
      Ich habe den Cel-Shading-Effekt für das Dreamcast-Spiel Looney Tunes: Space Race entwickelt, und zwar direkt in der ersten Woche, nachdem wir das Dreamcast-Development-Kit bekommen hatten.
      Infogrames Sheffield, die Wacky Racers gemacht haben, sahen eine frühe Version unserer Implementierung und fügten ihrem Spiel einen ähnlichen Effekt hinzu.
      Er sah gut aus, kam aber erst spät in der Produktion dazu und war deshalb nicht so auf den Effekt hin optimiert wie unser Spiel.
      Das Team von Jet Grind Radio entwickelte denselben Effekt ebenfalls unabhängig und veröffentlichte vor uns.
      Der Algorithmus war exakt derselbe, aber die Nutzung unterschied sich: Dort nahm man die ungleichmäßigen, breiten und gezackten Konturen bewusst an, während Sheffield und wir gegen diese Eigenschaft ankämpften, um einen gleichmäßigeren, traditionelleren Kunststil zu erreichen.
      Etwa ein Jahr später scheint jemand bei Dragons Lair 3D auf der Xbox herausgefunden zu haben, wie man kantenerkennungsbasiertes Cel Shading in Echtzeit laufen lässt.
      Ich hatte diesen Ansatz auf der Dreamcast testweise implementiert, aber die Performance reichte bei laufendem Spiel überhaupt nicht aus, um ihn gleichzeitig auf mehrere Charaktere anzuwenden.
      Ob es daran lag, dass die Xbox leistungsfähiger war, oder daran, dass der Algorithmus cleverer war, weiß ich nicht, aber das Ergebnis lässt sich nicht bestreiten.
      Wenn man ein Spiel machen will, das wie ein tatsächlich handgezeichneter Cartoon aussieht, halte ich diese Methode persönlich immer noch für die qualitativ beste.
      Ich würde gern irgendwann einen Vorwand finden, sie erneut zu implementieren, und inzwischen dürfte Performance wohl kein Problem mehr sein.
    • Es scheint zeitgleich mit Jet Set Radio erschienen zu sein, ebenfalls für die Dreamcast, und hatte einen ähnlichen Effekt.
      Ein ziemlich erstaunlicher Zufall.

  • Ich muss unbedingt mit Shader-Programmierung und 3D-Rendering anfangen.
    Solche Artikel sind wirklich gut, und ich wünschte, ich könnte Shader tatsächlich einsetzen.

    • Ich habe vor etwa 8 Jahren mit Shadron gelernt.