Cel Shading

Cel Shading oder Cel-shaded Animation (gelegentlich Toon-Shading) ist eine Technik zum nicht-fotorealistischen Rendern von 3D-Computergrafiken. Dabei erhalten Bilder oder Animationen, die auf einem digitalen 3D-Modell basieren, ein Aussehen, als wären sie von Hand im Stil eines Comics oder Zeichentrickfilms erstellt. Die Technik wird seit etwa 1997 bei der Produktion von Zeichentrickfilmen und seit etwa 2000 in Computerspielen angewendet. Der englische Begriff cel (von celluloid, deutsch Zelluloid<ref>Vgl. <templatestyles src="Webarchiv/styles.css" />{{#if:20220223055516

      | {{#ifeq: 20220223055516 | *
    | Vorlage:Webarchiv/Wartung/Stern{{#if: Cellshader.com FAQ | {{#invoke:WLink|getEscapedTitle|Cellshader.com FAQ}} | {{#invoke:Webarchiv|getdomain|http://www.celshader.com/FAQ.html}} }} (Archivversionen)
    | {{#iferror: {{#time: j. F Y|20220223055516}}
         | {{#if:  || }}Vorlage:Webarchiv/Wartung/DatumDer Wert des Parameters {{#if: wayback | wayback | Datum }} muss ein gültiger Zeitstempel der Form YYYYMMDDHHMMSS sein!
         | {{#if: Cellshader.com FAQ | {{#invoke:WLink|getEscapedTitle|Cellshader.com FAQ}} | {{#invoke:Webarchiv|getdomain|http://www.celshader.com/FAQ.html}} }} {{#ifeq:  | [] | [ | ( }}Memento{{#if: {{#if:  | {{{archiv-bot}}} |  }} |  des Vorlage:Referrer }} vom {{#time: j. F Y|20220223055516}} im Internet Archive{{#if:  | ;  }}{{#ifeq:  | [] | ] | ) }}
      }}
  }}
      | {{#if:
          | {{#iferror: {{#time: j. F Y|{{{webciteID}}}}}
    | {{#switch: {{#invoke:Str|len|{{{webciteID}}}}}
       | 16= {{#if: Cellshader.com FAQ | {{#invoke:WLink|getEscapedTitle|Cellshader.com FAQ}} | {{#invoke:Webarchiv|getdomain|http://www.celshader.com/FAQ.html}} }} {{#ifeq:  | [] | [ | ( }}Memento{{#if: {{#if:  | {{{archiv-bot}}} |  }} |  des Vorlage:Referrer }} vom {{#time: j. F Y| 19700101000000 + {{#expr: floor {{#expr: {{#invoke:Str|sub|{{{webciteID}}}|1|10}}/86400}} }} days}} auf WebCite{{#if:  | ;  }}{{#ifeq:  | [] | ] | ) }}
       | 9 = {{#if: Cellshader.com FAQ | {{#invoke:WLink|getEscapedTitle|Cellshader.com FAQ}} | {{#invoke:Webarchiv|getdomain|http://www.celshader.com/FAQ.html}} }} {{#ifeq:  | [] | [ | ( }}Memento{{#if: {{#if:  | {{{archiv-bot}}} |  }} |  des Vorlage:Referrer}} vom {{#time: j. F Y| 19700101000000 + {{#expr: floor {{#expr: {{#invoke:Str|sub|{{#invoke:Expr|base62|{{{webciteID}}}}}|1|10}}/86400}} }} days}} auf WebCite{{#if:  | ;  }}{{#ifeq:  | [] | ] | ) }}
       | #default= Der Wert des Parameters {{#if: webciteID | webciteID | ID }} muss entweder ein Zeitstempel der Form YYYYMMDDHHMMSS oder ein Schüsselwert mit 9 Zeichen oder eine 16-stellige Zahl sein!Vorlage:Webarchiv/Wartung/webcitation{{#if:  || }}
      }}
    | c|{{{webciteID}}}}} {{#if: Cellshader.com FAQ | {{#invoke:WLink|getEscapedTitle|Cellshader.com FAQ}} | {{#invoke:Webarchiv|getdomain|http://www.celshader.com/FAQ.html}} }} (Memento{{#if: {{#if:  | {{{archiv-bot}}} |  }} |  des Vorlage:Referrer}} vom {{#time: j. F Y|{{{webciteID}}}}} auf WebCite{{#if:  | ;  }}{{#ifeq:  | [] | ] | ) }}
  }}
          | {{#if: 
              | Vorlage:Webarchiv/Today
              | {{#if:
                      | Vorlage:Webarchiv/Generisch
                      | {{#if: Cellshader.com FAQ | {{#invoke:WLink|getEscapedTitle|Cellshader.com FAQ}} | {{#invoke:Webarchiv|getdomain|http://www.celshader.com/FAQ.html}} }}  
                 }}}}}}}}{{#if:
    | Vorlage:Webarchiv/archiv-bot
  }}{{#invoke:TemplatePar|check
     |all      = url=
     |opt      = text= wayback= webciteID= archive-is= archive-today= archiv-url= archiv-datum= ()= archiv-bot= format= original=
     |cat      = Wikipedia:Vorlagenfehler/Vorlage:Webarchiv
     |errNS    = 0
     |template = Vorlage:Webarchiv
     |format   = *
     |preview  = 1
  }}{{#ifexpr: {{#if:20220223055516|1|0}}{{#if:|+1}}{{#if:|+1}}{{#if:|+1}}{{#if:|+1}} <> 1
    | {{#if:  || }}Vorlage:Webarchiv/Wartung/Parameter{{#invoke:TemplUtl|failure| Fehler bei Vorlage:Webarchiv: Genau einer der Parameter 'wayback', 'webciteID', 'archive-today', 'archive-is' oder 'archiv-url' muss angegeben werden.|1}}
  }}{{#if: 
    | {{#switch: {{#invoke:Webarchiv|getdomain|{{{archiv-url}}}}}
        | web.archive.org = 
          {{#if:  || }}{{#invoke:TemplUtl|failure| Fehler bei Vorlage:Webarchiv: Im Parameter 'archiv-url' wurde URL von Internet Archive erkannt, bitte Parameter 'wayback' benutzen.|1}} 
        | webcitation.org = 
          {{#if:  || }}{{#invoke:TemplUtl|failure| Fehler bei Vorlage:Webarchiv: Im Parameter 'archiv-url' wurde URL von WebCite erkannt, bitte Parameter 'webciteID' benutzen.|1}} 
        | archive.today |archive.is |archive.ph |archive.fo |archive.li |archive.md |archive.vn = 
          {{#if:  || }}{{#invoke:TemplUtl|failure| Fehler bei Vorlage:Webarchiv: Im Parameter 'archiv-url' wurde URL von archive.today erkannt, bitte Parameter 'archive-today' benutzen.|1}}
      }}{{#if: 
         | {{#iferror: {{#iferror:{{#invoke:Vorlage:FormatDate|Execute}}|Vorlage:FormatDate/Wartung/Error}}
             | {{#if:  || }}Vorlage:Webarchiv/Wartung/Parameter{{#invoke:TemplUtl|failure| Fehler bei Vorlage:Webarchiv: Der Wert des Parameter 'archiv-datum' ist ungültig oder hat ein ungültiges Format.|1}}
          |  }} 
         | {{#if:  || }}Vorlage:Webarchiv/Wartung/Parameter{{#invoke:TemplUtl|failure| Fehler bei Vorlage:Webarchiv: Der Pflichtparameter 'archiv-datum' wurde nicht angegeben.|1}}
      }}
    | {{#if: 
         | {{#if:  || }}Vorlage:Webarchiv/Wartung/Parameter{{#invoke:TemplUtl|failure| Fehler bei Vorlage:Webarchiv: Der Parameter 'archiv-datum' ist nur in Verbindung mit 'archiv-url' angebbar.|1}}
      }}
  }}{{#if:{{#invoke:URLutil|isHostPathResource|http://www.celshader.com/FAQ.html}}
    || {{#if:  || }} URL/Pfad ungültig.
  }}{{#if: Cellshader.com FAQ
    | {{#if: {{#invoke:WLink|isBracketedLink|Cellshader.com FAQ}}
        | {{#if:  || }} Linktext ungültig.
      }}
    | {{#if:  || }}Vorlage:Webarchiv/Wartung/Linktext_fehlt Linktext fehlt.
  }}{{#switch: 
    |addlarchives|addlpages= {{#if:  || }}{{#if: 1 |Vorlage:Webarchiv/Wartung/Parameter}}{{#invoke:TemplUtl|failure| Fehler bei Vorlage:Webarchiv: enWP-Wert im Parameter 'format'.|1}}
  }}{{#ifeq: {{#invoke:Str|find|http://www.celshader.com/FAQ.html%7Carchiv}} |-1
    || {{#ifeq: {{#invoke:Str|find|{{#invoke:Str|cropleft|http://www.celshader.com/FAQ.html%7C4}}%7Chttp}} |-1
         || {{#switch: {{#invoke:Webarchiv|getdomain|http://www.celshader.com/FAQ.html }}
              | abendblatt.de | daserste.ndr.de | inarchive.com | webcitation.org = 
              | #default = {{#if:  || }}{{#if: 1 |Vorlage:Webarchiv/Wartung/URL}}{{#invoke:TemplUtl|failure| Fehler bei Vorlage:Webarchiv: Archiv-URL im Parameter 'url' anstatt URL der Originalquelle. Entferne den vor der Original-URL stehenden Mementobestandteil und setze den Archivierungszeitstempel in den Parameter 'wayback', 'webciteID', 'archive.today' oder 'archive-is' ein, sofern nicht bereits befüllt.|1}}
            }} 
       }}
  }}, Jennifer Hachigian 2005.</ref>) bezieht sich auf das Aussehen der sogenannten Cels im Produktionsprozess von Trickfilmen, während toon vom englischsprachigen Cartoon abgeleitet ist.

Obwohl das Resultat von Cel Shading recht einfach wirkt, ist der Prozess der Entwicklung komplex.

Prozess

Datei:Toon Shader.jpg

Eine Computergrafik, links mit konventionellem Shading, rechts mit Cel Shading

Der Prozess des Cel Shading beginnt mit einem typischen 3D-Modell. Der Unterschied zu traditionellen Render-Methoden besteht in der Art, wie diese Modelle auf dem Bildschirm dargestellt werden. Statt die Schattierungen auf dem Objekt weich verlaufen zu lassen, werden nur drei oder vier Helligkeitsstufen verwendet (in der Regel weiß, hellgrau und dunkelgrau, aber kein schwarz) und bei Oberflächen wird fast immer auf Texturen verzichtet und es werden stattdessen nur einzelne Farbtöne verwendet. Zur effizienten Implementierung werden die Graustufen in einer 1D-Textur gespeichert und dann wird der benötigte Grauwert über den Winkel zwischen dem Normalenvektor des Polygons und dem Vektor vom Polygon zur Lichtquelle berechnet. Der Kosinus dieses Winkels ist dann der gewünschte Punkt auf der Textur (1=Hell, 0=dunkel, bei Werten <0 wird die Textur von hinten beleuchtet und der Wert wird auf 0 gesetzt). Der Kosinus des Winkels lässt sich direkt über das Skalarprodukt der beiden Vektoren berechnen. Bei moderneren Grafikkarten können diese Berechnungen auch direkt in den Shadern durchgeführt werden.

Um schwarze Linien darzustellen, die Konturen eines Objekts zu zeichnen, invertiert man Backface Culling, um Dreiecke, die eigentlich perspektivisch nach hinten sichtbar sind, schwarz darzustellen. Diese Linien müssen mehrmals mit leichten Variationen in der Invertierung gezeichnet werden, um dicke Striche zu erzeugen. Das Back Face Culling wird dann in den Normalzustand versetzt, um die Farbtöne und zusätzliche Texturen für das Objekt darzustellen. Abschließend wird das Gesamtbild über einen Z-Buffer zusammengesetzt. Das Resultat ist ein Objekt, das mit einer schwarzen Umrandung und sogar Konturen innerhalb der Objektoberfläche dargestellt wird.

Verwendung in Filmen

Filme und Animationen mit Cel Shading ermöglichen im Vergleich zu handgezeichneten Cartoons wesentlich aufwändigere Effekte wie Kameraschwenks oder eine Vielzahl bewegter Objekte, da diese (relativ günstig) gestaltet und berechnet und nicht (aufwändig) per Hand gezeichnet werden müssen. Auffällig ist dies etwa bei bewegten Hintergründen, wie z. B. beim Start des Raumschiffs in Futurama. Hier wirkt die Bewegung des Hintergrunds deutlich realistischer als beispielsweise bei den Simpsons, wo die Kamerafahrten in der Regel nur aus einem von rechts nach links bewegten Hintergrund bestehen und ein Objekt auf dem Vordergrund an der mehr oder minder gleichen Stelle bleibt. Dennoch wirkt Cel Shading oft etwas steril, weswegen Serien wie die Simpsons immer noch per Hand gezeichnet werden.

Prinzipiell kommt bei allen Zeichentrick-Produktionen, die 3D-Modelle verwenden und die Ästhetik eines klassischen Zeichentrickfilms haben, Cel Shading zum Einsatz. Eine Auswahl:

Animatrix (Kurzfilme 2003)
Appleseed (Anime 2004)
BanG Dream! (Anime 2017, ab Staffel 2)
D4DJ (Anime 2020)
Das Land der Juwelen (Anime 2017)
Futurama (Serie 1999–2013)
Der Gigant aus dem All (Film 1999)
Die Simpsons – Der Film (Film 2007, auch einige Episoden der Serie)
Spirit – Der wilde Mustang (Film 2002, handgezeichnete Charaktere, Landschaften via Cel Shading)

Die Filme Waking Life und A Scanner Darkly – Der dunkle Schirm wurden zunächst auf Film gedreht und anschließend mit dem Programm Rotoshop von Bob Sabiston digitalisiert und durch Rotoskopie verfremdet. Dadurch wirken diese Filme, als ob sie mit Cel Shading generiert worden wären.

Verwendung in Computerspielen

Bei Computerspielen ist es eine künstlerische Frage, ob Cel Shading in der Grafik-Engine eingesetzt wird. Als die Technik neu war, gab es eine ganze Welle von Spielen (Modeerscheinung). Inzwischen findet Cel-Shading nur gezielt Verwendung. Für Ōkami von Clover Studios gibt es frühe Demo-Videos, die Spielszenen in der Ästhetik japanischer Malerei zeigen. Dies war für die PS2 zu rechenaufwändig. Im schließlich veröffentlichten Spiel ist die Cel-Shading-Grafik wesentlich konventioneller.

Einige bekannte Computerspiele, die Cel Shading einsetzen:

Afro Samurai (2009)
Breath of Fire: Dragon Quarter (2002)
Dark Chronicle (2002)
Dragon Quest VIII: Die Reise des verwunschenen Königs (2004)
Eternal Sonata (2007)
Fear Effect (2000)
Genshin Impact (2020)
Jet-Set-Radio-Serie (2000)
Killer Is Dead (2013)
killer7 (2005)
League of Legends (2009)
No More Heroes (2008)
Ōkami (2006)
Prince of Persia (2008)
Sly-Racoon-Serie (2003)
Sonic Shuffle (2000)
Tales of Symphonia (2003)
The Legend of Zelda: Breath of the Wild (2017)
The Legend of Zelda: Tears of the Kingdom (2023)
The Legend of Zelda: The Wind Waker (2003)
The Legend of Zelda: The Wind Waker HD (2013)
The Walking Dead (2012)
Untitled Goose Game (2019)
Valkyria Chronicles (2008)
Valorant (2020)
Viewtiful-Joe-Serie (2003)
Warsow (2005)
X Rebirth (2013)
XIII (2003)

Weblinks

[{{canonicalurl:Commons:Category:{{#if:Cel shading|Cel shading|Cel Shading}}|uselang=de}} Commons: {{#if:|{{{2}}}|{{#if:Cel shading|Cel shading|{{#invoke:WLink|getArticleBase}}}}}}]{{#switch:1

|X|x= |0|-= |S|s= – Sammlung von Bildern |1|= – Sammlung von Bildern{{#if:

    | {{#switch: {{#invoke:TemplUtl|faculty|1}}/{{#invoke:TemplUtl|faculty|1}}
        |1/=  und Videos
        |1/1=, Videos und Audiodateien
        |/1=  und Audiodateien}}
    | , Videos und Audiodateien
  }}

|#default= – }}{{#if: Cel shading

   | {{#ifeq: {{#invoke:Str|left|cel shading|9}} 
       | category:

| FEHLER: Ohne Category: angeben!}}}}

Vorlage:Wikidata-Registrierung

Einzelnachweise