CARTOONS - Sternenschwarmsternenschwarm.de/files/Celshading.pdf · 10.5.2004 Informatikseminar NPR - Cartoons Seite 31 2.3 Systeme mit Cel Shading Cinema 4D XL ab Version 6 Lightwave

Informatikseminar„Non-Photorealistic Computer Graphics“

CCAARRTTOOOONNSS

Autor: Marcus Timm ([email protected])

10.5.2004 Informatikseminar NPR - Cartoons Seite 2

Gliederung

1. Einführung2. Cel Shading / Cartoon Shading3. Merkmalskanten4. Speedlines & Sprechblasen5. Blickpunktabhängige Geometrie6. Traditionelle Animationstechnik7. Zusammenfassung8. Literaturangaben


1. Einführung• 1.1 Begriffsklärung und Beispiele• 1.2 Geschichte der Cartoons• 1.3 Motivation für NPR-Techniken


1.1 Begriffsklärung und Beispiele„Cartoon“:

Eine Zeichnung mit zumeist humorvollem Inhalt, die eventuell mit einer Bildunterschrift oder ergänzenden Texten versehen ist.

„Animated Cartoon“ (kurz: „Toons“) (deutsch: „Zeichentrickfilm“):

entsteht durch eine Sequenz von Cartoons, wodurch zeitliche Eindrücke wie z.B. Bewegungen von Figuren erreicht werden. Typischerweise wird bei der Wiedergabe eine Anzahl von 25 Bildern je Sekunde gezeigt.


1.1 Begriffsklärung und Beispiele

Beispiele für Cartoon(© Harm Bengen

Cartoons)



„Karikaturen“Manchmal zu Cartoons gezählt, aber eigentlich

eine eigene Kunstrichtung.Überzeichnete Darstellung von bekannten

Personen anhand typischer Körpermerkmale.Beispiele:

(Quelle: www.schnellzeichner-karikaturist.de)



„Comics“:Moderne Bezeichnung für die

Bildergeschichten aus dem westlichen Kulturkreis.

Comics enthalten in den meisten Fällen auch viel Text und erzählen eine Geschichte.

Bestimmte Stilelemente wie Sprechblasen, Umschreibung von Geräuschen mit Schriftzügen, Bewegungslinien und weitere sind typisch für einen Comic.

(in manchen Cartoons ebenfalls zu finden).



Aus der Comic-Reihe„Little Nemo in Slumber Land“

(Autor: Winsor McCay)



„Comic Strips“:Hierbei handelt es sich um die Kurzform von

Comics. Typischerweise bestehen sie aus nur etwa 3 bis 4 Einzelbildern.

Comic Strips können als Serie gestaltet sein, die sich immer um die gleichen Figuren dreht.

Man findet sie meist in Zeitungen und Zeitschriften, wo sie z.B. für Satire, Werbung oder ähnliche Botschaften als Medium dienen.



ein Comic Strip (© king features / distr. bulls (Browne / Hägar))

ein weiterer Comic Strip



„Manga“:Japanische Form der Comics.In jener Kultur stark verbreitetes Medium,

meist schwarz-weiß Zeichnungen im Taschenbuchformat.

„Anime“:Japanische Form der Zeichentrickfilme.Wort entstand aus dem englischen

„Animation“.



Zeichnungen im Manga-Stil (Titelbilder zu Comics).

Quelle: www.animelab.com u.a.

http://www.animelab.com/


1.2 Geschichte der CartoonsBildergeschichten aus dem Altertum:

1300 v.Chr. -ein Ägyptisches Totenbuch beschreibt die Reise ins Jenseits.

113 n.Chr. -Die Trajansäule in Rom schildert die Eroberungen der kaiserlichen Armee


1.2 Geschichte der Cartoons

Bildergeschichten im Mittelalter

1070 n.Chr. -Teppich von Bayeux schildert die Eroberung Englands durch die Normannen

1230 n.Chr. -erstmals Sprechblasen in der „Trinity Apocalypse“

1379 n.Chr. -Petrialtar von Bertram (Szenen aus der Bibel)



Renaissance (neue Drucktechnik, Flugblätter)

1682 n.Chr. -Zweiseitiges Flugblatt aus England, verbreitet Paranoia vor Katholiken

1783 n.Chr. -„Leonardo und Blandine“



19.Jhdt.:

1860 - Max und Moritz 1894 - „The Yellow Kid“

1848 - „der hohle Zahn“ 1897 – „Katzenjammer Kits“ (die amerikanischen Max & Moritz)



Moderne:• 1910 – Krazy Kat (George Herriman)• 1928 – Tarzan (Harold Foster)• 1934 – Donald Duck (Carl Barks)• 1938 – Superman• 1939 – Batman• 1941 – Cpt. Amerika• 1949 – Lucky Luke• 1950 – Peanuts• 1950 – Loriots erste Cartoons• 1961 – The Fantastic Four• 1961 – Asterix• 1978 – Garfield• 1981 – „Werner“ (von Rötger Feldmann)• 1985 – Calvin and Hobbes• 1993 – Dilbert (erstes Internet-Comic)



Animated Cartoons:•1906 – „Funny phases of funny faces“ (ältester, noch erhaltener A.C.)•1921 – „Gertie on Tour“•1928 – „Steam Boat Willie“ (erster Micky Mouse Film)•1937 – „Snowwhite and the seven dwarfs“•1940 – „Pinocchio“•1950 – „Cinderella“•1967 – „The Jungle Book“•1973 – „Robin Hood“•1989 – „The Little Mermaid“ (Arielle)•1991 – „The Beauty and the Beast“•1992 – „Aladdin“•1994 – „The Lion King“•1998 – „Mulan“•2003 – „Brother Bear“

Viele weitere (v.a. Disney-Filme) ...



Zeichentrickfilme als TV-Serien:•1960 – Familie Feuerstein•1987 – Simpsons•1999 – Futurama

Viele weitere (z.B. „Spiderman“, „Ducktales“, „Aladdin“, „diverse Animes, ...)


1.3 Motivation für NPR-Techniken1. Zeichentrickfilme und Comics sind sehr beliebt

bei vielen Zuschauern und Lesern – eine Computergrafik in diesem Stil profitiert von diesem Umstand.

2. Bestimmte Effekte sind in Trickfilmen nur schwer oder gar nicht realisierbar (Beispiel: Kamerafahrten durch komplexen Hintergrund, Drehung eines komplexen Modells).

3. Kombination mit traditionellen Techniken soll nicht auffallen (Beispiel „Titan A.E.“) – herkömmliche Rendertechniken sind nicht geeignet (Stilbruch droht).


1.3 Motivation für NPR-Techniken

Charakterisierung von Animated Cartoons:• Figuren werden mit wenigen Merkmalen beschrieben• Figuren haben Konturen, die sie abgrenzen• Figuren haben homogene Farbfüllung (ohne Textur)• Figuren haben nur wenige Helligkeitsstufen (2 bis 4)• Hintergrundbilder mit mehr Farben / Helligkeitsstufen

Charakterisierung von Cartoons/Karikaturen:• Sehr komplexe Grafiken möglich (nur ein Bild)• Speedlines und andere Mittel für Bewegung• Sprechblasen für Dialoge• Weitere Mittel, mit ähnlichen Aufgaben

Charakterisierung von Comics/Comic Strips:• Komplexität ähnlich wie bei animated Cartoons• Speedlines und Spruchblasen wie bei Cartoons


2. Cel Shading /Cartoon Shading• 2.1 Was ist Cel Shading?• 2.2 Wie funktioniert es?• 2.3 Systeme mit Cel Shading


2.1 Was ist Cel Shading?Unter diesem Begriff versteht man eine Technik,

mit der 3D-Modelle so gerendert werden, dass sie farblich eher einem klassischen Cartoon ähneln als einem plastisch wirkenden, photorealistischen Bild.

Ergebnis des Cel-Shaders „Toon“, Quelle: www.webnation.com/vidirep/panels/renderman/shaders/toon/toon.phtml.htm

Einsatz des „Super Cel Shader“, Quelle: www.celshader.com,

man beachte die Schatteneffekte

http://www.webnation.com/vidirep/panels/renderman/shaders/toon/toon.phtml.htm

http://www.celshader.com/


2.2 Wie funktioniert es?Wdh. Phongsches Beleuchtungsmodell:Lphong = Lamb + Ldiff + Lspec

Für Cel Shading wird der spiegelnde Anteil nicht betrachtet, am wichtigsten ist hier der diffuse Anteil, dieser ergibt sich aus:

Ldiff =

N – normalisierter Vektor der OberflächennormaleL – normalisierter Vektor in Richtung LichtquelleLd – Leuchtdichte des einfallenden Lichtesdm – diffuser Reflexionsgrad des Materials des Objektes

))0,(max( md dLNL ××⋅


2.2 Wie funktioniert es?

Die Farbe eines Punktes hängt von der Leuchtdichte Ldiff ab, diese wiederum vom Winkel zwischen L und N.

Ist der Winkel 0 (Licht trifft senkrecht ein), so ist der Farbwert (Helligkeit) maximal.

Bei größeren Winkeln wird der Einfluss des diffusen Anteils immer kleiner und es bleibt nur noch der ambiente Anteil.



Um nun das Cel Shading zu realisieren, wird eine eindimensionale Texture Map angelegt. Im einfachsten Fall besteht sie aus 2 Texeln, das eine ist mit der Farbe für den Schatten gefüllt (d.h. diffuser Anteil = 0), das andere mit der Farbe bei maximalem diffusen Anteil.

Dieser Schritt kann in einem Präprozess erledigt werden (für jedes Objektmaterial).

Zur Laufzeit wird für jeden sichtbaren Eckpunkt (im Polygon-Netz) einmal der folgende Ausdruck berechnet: )0,max( NL

⋅



Liegt das Ergebnis über einem Schwellwert (z.B. 0,5), dann gilt die Farbe für maximale Intensität, ansonsten die Schattenfarbe.

Die Zwischenwerte im Polygon können dann mit einer Texture-Filtering-Option des jeweiligen API berechnet werden.

(entnommen aus „Non-Photorealistic Rendering“ (Gooch&Gooch))



Besondere Effekte können erzielt werden, wenn man mehr als 2 Texel nimmt (um den Schwellenwert von 0,5 zu ändern) oder wenn man mehr als 2 Farben nimmt (um nicht nur eine Schattierungsfarbe zu haben).

Man kann dadurch verschiedene Effekte erzielen, z.B. „Highlights“ oder einen „Metallic-Look“.

Cel Shader von 3D Software bieten ebenfalls solche Effekte an („Color Zones“) – auf der nächsten Seite sind Beispiele, die mit dem „Super Cel Shader“ erstellt wurden.



Bilder mit verschiedenen Effekten:

(Quelle: www.celshader.com)



Weitere Bilder:

(Screenshot vom Computerspiel „XIII“)

(Musikvideo „2 Pieds“, Thomas Fersen)


2.3 Systeme mit Cel ShadingCinema 4D XL ab Version 6Lightwave 3D mit Super Cel ShaderPlugin für 3D Studio„Toon“ für RendermanDiverse Cel Shader für OpenGL und Co.


3. Merkmalskanten• 3.1 Konturen, Falten, Ränder• 3.2 Mögliche Verfahren


3.1 Konturen, Falten, RänderIn Cartoons werden häufig Umrandungen von

Figuren genutzt, um diese optisch klarer abzugrenzen. Außerdem werden bestimmte Kanten betont, während andere ausgespart bleiben. Diesen Effekte muss man simulieren, wenn man im Cartoon-Stil rendern will.

Man unterscheidet folgende Kantenarten:• „silhouettes“ (Konturen)• „creases“/„discontinuities“ (Diskontinuitäten)• „boundaries“ (Ränder, Randkurven)


3.1 Konturen, Falten, Ränder

Konturen:Sei P(u,v) ein Punkt auf einer Fläche und N(u,v) die dortige Flächennormale und V(u,v) der Blickvektor auf diesen Punkt, dann ist P ein Punkt der Kontur, falls V und N orthogonal sind.

(Quelle: „Non-Photorealistic Rendering“ (Gooch&Gooch))



Für Polygonnetze:Eine Kante gehört zur Kontur, wenn sie gleichzeitig zu einer Vorderseite und einer Rückseite des Objekts gehört.




Diskontinuitäten:Im Falle eines Polygonnetzes ist eine Falte eine

gemeinsame Kante zwischen zwei Vorderseiten, deren Flächennormalen einen bestimmten Winkel zueinander überschreitet.




Randkurven:Bei Polygonnetzen: Kanten, die nur zu einem

Polygon gehören (können nur bei nicht geschlossenen Modellen auftreten).

Beispiele für Merkmalskanten:



3.2 Mögliche VerfahrenBildraumverfahren:

Für ein optimales Ergebnis braucht man ein Grauwertbild, das die z-Werte der Szene auf einen Bereich [0,255] abbildet („depth image“, Tiefenbild).

Nun wendet man einen Filterkern auf das Tiefenbild an (z.B. Sobel-Filter, siehe CV-Vorlesung). Das entstandene Differenzbild enthält die Kanten.

In einem weiteren Schritt wird nun dieses „Konturenbild“ mit dem geshadeten Bild logisch verknüpft.

Beispiele für Tiefenbilder und Anwendung des

Verfahrens

(Quelle: Gooch&Gooch)


3.2 Mögliche Verfahren

Einsatz von Hardwareunterstützung:Der Einsatz von moderner Grafikhardware über APIs wie

OpenGL ermöglicht ebenfalls das Finden von Konturen auf eine einfache Art und Weise. Der folgende Algorithmus erzeugt eine schwarze Kontur, welche einen Pixel weit ist, um die Objekte:

• Fill background in white.• Enable back-face culling, set depth function to „Less Than.“• Render front-facing polygons in white.• Enable front-face culling, set depth function to „Equal To.“• Draw back-facing polygons in black.• Repeat for a new viewpoint.


3.2 Mögliche Verfahren

Objektraumverfahren:Suchen das 3D-Modell mit verschiedenen Methoden auf

Konturpunkte ab und erzeugen dann die Konturlinien (ebenfalls im 3D-Modell).

Dies gibt bessere Kontrolle über die Linienbreite der Kontur (auch andere Attribute der Konturlinien können gesteuert werden).

Die Objektraumverfahren können bei sehr komplexen Modellen schneller sein als die Hardware-Lösung.

Geschwindigkeitsgewinne können auch durch erhöhte Ungenauigkeit erreicht werden.


4. Speedlines & Sprechblasen

• 4.1 Speedlines• 4.2 Sprechblasen


4.1 SpeedlinesZiel:

Bei unbewegten Bildern den Eindruck von Bewegung (Geschwindigkeit) erwecken.

Lösung:Einsatz von „Speedlines“, die das Objekt hinter sich herzieht. Eine andere Möglichkeit: Konturen vervielfachen.

Speedlines (Szene aus „Tim und Struppi“, von 1928)

Vervielfachung von Konturen (Quelle: siehe Literaturangabe)


4.1 Speedlines

Ansatz von Masuch, Schlechtweg, Schulz:Ausgangspunkt: Polygonales Modell, Keyframe-Daten der

Animation der ObjekteDurchlaufen einer Render-Pipeline für Linien-Zeichnung.Nutzen der gewonnenen 3D-Daten für Sichtbarkeitsberechnung

und korrekte Perspektive der Speedlines.Die Keyframe-Daten bestimmen die Richtung der zu

zeichnenden Linien.Speedlines werden an markanten Punkten (z.B. Konturpunkte)

begonnen und mit einem zufälligen Offset versehen (leicht hinter dem Objekt).

Verschiedene Arten von Speedlines und wiederholten Konturen, (Quelle: siehe Literaturangabe)


4.2 SprechblasenZiel:

Der Comic-Stil mit seinen gezeichneten Lauten und Sprechblasen soll imitiert werden.

Lösung:Es werden 2D-Elemente parallel zur Bildebene gezeichnet, z.B.

Text oder Bitmaps im Comic-Stil.

Beispiele: Screenshots aus dem Computerspiel XIII


5. Blickpunktabhängige Geometrie• 5.1 Motivation• 5.2 Statische Modelle• 5.3 Animierte Modelle


5.1 MotivationWenn Zeichner ihre Figuren für einen Trickfilm oder für

einen Comic aus unterschiedlichen Richtungen darstellen, dann verstoßen sie dabei bisweilen bewusst gegen die korrekte Perspektive, um ganz bestimmte Details immer sichtbar zu lassen oder ganz einfach, weil es „besser aussieht“.

3D-Modelle sind jedoch statisch und werden immer in korrekter Perspektive gezeigt. Es muss also ein neuer Weg gefunden werden, wie man diesen Effekt imitieren kann.


5.1 Motivation

In seinem Paper „View-Dependent Geometry“ stellt Paul Rademacher von der University of North Carolina einen interessanten Ansatz vor, der sich mit dem Problem befasst.

Je nach Blickrichtung und Orientierung des Modells verändert sich dabei auch dessen Geometrie leicht, so dass es nicht mehr perspektivisch korrekt dargestellt wird.


5.2 Statische ModelleErstellung eines blickpunktabh. Modells:

Alles beginnt mit einer 2D-Vorlage, der „Referenzzeichnung“ der Cartoon-Figur.Es wird ein passendes 3D-Modell entworfen.

(Quelle: „View-Dependent Geometry“ (P.Rademacher))


5.2 Statische Modelle

Zu dem Basismodell werden eine Reihe von leicht deformierten Modellen angegeben, die jeweils der Referenzzeichnung ähneln, die sogenannten „Schlüssel-Deformationen“. Diese sind nun jeweils für eine ganz bestimmte „Schlüssel-Blickrichtung“ gültig.




Für die Deformierung: Man wählt einen Eckpunkt aus und zieht diesen in die gewünschte Richtung, alle anderen in einem gewissen Umkreis, r, bewegen sich mit:

Dabei wirkt ein Skalierungsfaktor je nach der Entfernung, d, zu dem gewählten Eckpunkt.

Als Faktor wählt Rademacher:Der Nutzer muss darauf achten, dass

Deformierungen nicht zu Überschneidungen des Polygonnetzes mit sich selbst führen.

2

1

−

rd



Wenn man von außerhalb der Schlüssel-Blickrichtungen auf das Modell blickt, werden die Modelle der drei nächsten Schlüsselrichtungen genommen und speziell gewichtet interpoliert, so dass ein neues Modell entsteht.



5.2 Statische ModelleDas ganze funktioniert auf ähnliche Weise auch

mit nur einer einzigen Deformation – z.B. für ein Hintergrundobjekt, das nicht so detailliert gestaltet werden soll. Es wird dann mit dem Basismodell interpoliert.



5.3 Animierte ModelleDie Methode lässt sich auch bei Animationen anwenden:



5.3 Animierte Modelle

In dieser Sequenz wurden alle Effekte vermischt (statisch, statisch mit nur einem Schlüsselbild und animierte Bewegung):



6. Traditionelle Animationstechnik

• 6.1 Klassischer Produktionsablauf• 6.2 Computerunterstützung


6.1 Klassischer ProduktionsablaufPlanung:

• Zu Beginn einer Produktion steht eine Idee.• Die beteiligten Figuren werden skizziert.• Charakterbeschreibungen für jede Figur.• Ein Skript („Drehbuch“) wird erstellt.• Finanzielle Mittel werden organisiert.


6.1 Klassischer Produktionsablauf

Vorbereitung:• Ein „Storyboard” wird erstellt (skizzenhafte

Bilder, Unterteilung der Story in Szenen – dadurch Parallelisierung der Arbeit möglich).

• Aufnahme von Musik und Dialogen.• Es werden Phoneme für die beteiligten

Charaktere notiert, also die passenden Sprechbewegungen für die Dialoge.

• Dann folgt das Layout – Anordnung von Figuren und Hintergrund, Beschreibung der Kamerabewegung, weitere Spezifikationen.


6.1 Klassischer Produktionsablauf

Zeichnen:• Zeichnen des Hintergrundes.• Schlüsselpositionen der Figuren werden

gezeichnet und Anweisungen für die „In-Betweener“ (Zeichner für die Übergänge)

• Säuberung der Zeichnung (max. Qualität)• Saubere Zeichnung auf Acetat Celluloid,

sogenannte „Cels“ und anschließendes Ausmalen mit Farben.

Aufnahme:• Prüfung, ob die Layout-Spezifikationen

eingehalten wurden.• Aufnahme des Materials auf Film / Video.


6.2 ComputerunterstützungErstellen eines Zeichentrickfilms ist mit vielen eintönigen Arbeitsschritten verbunden (Automatisierung nötig).

Programme zum Füllen der Farbflächen (mit seed-fill-Algorithmus) und andere einfache Aufgaben (Rotation, Zoom, etc.)

Programme zum (semi-)automatischen In-Betweening. Die gezeichneten Linien werden vektorisiert und zwischen key frames interpoliert (quasi eine Art 2D-Morphing).

Papierlose Systeme (z.B. „TicTacToon“) – fast die gesamte Produktion rechnergestützt.


6.2 Computerunterstützung

Ein weiteres nützliches Werkzeug von L.Petrovic, B.Fujito, A.Finkelstein, L.Williams bietet die Möglichkeit, eine Szene mit 2D-Figuren und Hintergrund durch Schatten zu bereichern.

Dazu wird mittels Gesten-Erkennung ein einfaches 3D-Modell des Hintergrundes erstellt.

Dann wird das 2D-Modell der Figur in ein mehrschichtiges 3D-Modell umgewandelt.

Mit den Modellen wird der Schattenwurf berechnet.Eventuell ist das schneller als per Hand.



Beispielbilder:

Quelle: „Non-Photorealistic Rendering“ (Gooch&Gooch)



Es existieren weitere Werkzeuge für andere Aufgaben:

Von W. Corrêa, R. Jensen, S. Thayer, A.Finkelstein stammt ein Werkzeug, das ein halbautomatisches Texturemapping für handgezeichnete 2D-Modelle über einen 3D-Zwischenschritt (mit Warping) ermöglicht.

Quelle: „Non-Photorealistic Rendering“ (Gooch&Gooch)


7. Zusammenfassung


7.1 AbschlussbemerkungCartoon Shading ist heute weitverbreitet.Mit Cartoon Shading lassen sich viele Szenen in

Zeichentrickfilmen einfacher realisieren.Aber nicht jedes Modell kann man wie einen

Cartoon aussehen lassen und somit ist noch immer der interaktive Nutzer gefragt.

Auch im Bereich der traditionellen Zeichentrickfilme gibt es heute mehr Unterstützung den je durch den Computer.

Alles in allem bieten NPR und CG eine Reihe Erleichterungen und nützliche Werkzeuge für den modernen Animator.


7.1 Abschlussbemerkung

Einsatzgebiete für Cartoon Shading sind vor allem in der Unterhaltungsbranche und in der Produktwerbung zu sehen.

Eine Reihe von Computerspielen verwenden inzwischen Cel Shading und große Firmen wie VW präsentieren ihre Produkte in einem ästhetischen Cartoon-Look. Auch Kinofilme können von dieser Technik profitieren.

Das einzige, was man (noch) nicht automatisch erzeugen kann, sind kreative Ideen, so scheint es jedenfalls...


8. Literaturangaben


8.1 Literaturverzeichnis, QuellenBücher:„Non-Photorealistic Rendering“, Gooch & Gooch„Im Comic vereint – eine Geschichte der Bildergeschichte“, Andreas Platthaus

Papers:„View-Dependent Geometry“, P. Rademacher„Depicting Motion in Motionless Pictures“,Maic Masuch, Stefan Schlechtweg and Ronny Schulz

Internetseiten:http://www.celshader.com (Seite rund ums Thema)http://www.toonopedia.com (amerikanische Toons)http://www.comic.de (Geschichte der Cartoons)http://www.animelab.com (Seite zu Animes)



http://www.toonopedia.com/

http://www.toonopedia.com/

http://www.comic.de/

http://www.animelab.com/

Documents

CARTOONS - Sternenschwarmsternenschwarm.de/files/Celshading.pdf · 10.5.2004 Informatikseminar NPR - Cartoons Seite 31 2.3 Systeme mit Cel Shading Cinema 4D XL ab Version 6 Lightwave