3d für Anfänger - Outlines

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • 3d für Anfänger - Outlines

      Weitere 3d-Anfänger Tutorials gibt's hier:



      Vorwort: 1. Dieses Tutorial basiert teilweise auf meinem Tutorial "3d für Anfänger", einige Kenntnisse sollten also vorhanden sein.
      2. Bei meinem alten Tutorial habe ich nach kurzer Zeit auf Grund von blöden Fragen, die besser in "Technische Fragen" gepasst hätten, die Notbremse gezogen und habe den Thread closen lassen. Ich hoffe das läuft diesmal besser.

      Wer kennt ihn nicht, den Cel Shading Look der in vielen Spielen wie zum Beispiel in XIII oder Warsow verwendet wird? Oftmals werden zur Aufwertung des Effekts schwarze Konturen um die Objekte gezeichnet, um sie noch "comichafter" darzustellen. Diesen Effekt kann man mit ein wenig Wissen auch mit dem Gamemaker erzielen, was ich euch in diesem Tutorial kurz erklären werde.

      Dafür müssen wir erstmal einige Sachen klären.

      Wichtige Begriffe und Wissenswertes:

      (1) (2)

      Vertices: (Ich bin mir nicht sicher ob die Teile überall so heißen.) Vertices werden die Eckpunkte unseres Blockes genannt. Ein Block hat 8 Vertices (1). In Figuren wie zum Beispiel einer Kugel sieht das ganze etwas komplexer aus. (2, Ist aber für uns erstmal unwichtig.)

      Polygone: Polygone kennt man vielleicht schon aus der Mathematik. Sie setzen sich meistens aus 3 Punkten (Vertices) zusammen. (In Bild 1 farbig makiert.). Wichtig für den Comic Look: Polygone sind nur von einer Seite sichtbar. Wäre die Kamera innerhalb des Blockes/Ellipsoiden plaziert, wären die Polygone für uns nicht sichtbar.

      Bei manchen kommt jetzt die Frage: Ich habe aber in Gamemaker Spielen schon Wände gesehen, die von beiden Seite sichtbar sind.

      Das stimmt, dafür gibt es eine Funktion.

      GML-Quellcode

      1. d3d_set_culling(true)


      Wenn wir "d3d_set_culling" auf true stellen gilt das, was ich oben sagte. Stellen wir es auf false kann man ein Objekt aus jeder Richtung und Position betrachten. Für Anfänger ist es natürlich leichter es auf false zu haben. Die Nachteile es zu deaktivieren liegen aber darin:

      • Wenn man falsche Koordinaten setzt, können Texturen falschrum abgebildet werden, dazu später mehr.
      • Das Spiel wird performancelastiger, da beide Seiten eines Polygons dargestellt werden müssen.

      Stellen wir also im Create Event "Culling" auf true, müssen wir beim zeichen von Objekten ein bisschen aufpassen.

      GML-Quellcode

      1. d3d_draw_block(x-16,y-16,0,x+16,y+16,32,tex,1,1)


      Der erste Z-Wert sollte immer kleiner als der 2te sein, weil die Polygone sich sonst umkehren und unsichtbar für uns werden.
      Dann muss man sich noch für einen Punkt entscheiden von dem man drawen möchte, den Origin. Er kann ein negativer oder positiver Wert sein, nur die beiden Ursprungswerte sollten entweder größer oder kleiner als die zweiten Werte sein.

      Falsch wäre also... :

      GML-Quellcode

      1. d3d_draw_block(x-16,y+16,0,x+16,y-16,32,tex,1,1)


      ... Da sich die Polygone wieder umkehren würden.

      Nach dem "bisschen" Theorie kommt jetzt die Praxis:

      Lasst uns mit einem einfachen Block starten, welchen wir nacher mit einer Umrandung versehen werden. Der Code könnte so aussehen:

      GML-Quellcode

      1. d3d_draw_block(x-16,y-16,0.5,x+16,y+16,32.5,tex,1,1)


      Der Z-Wert ist absichtlich um 0.5 erhöht damit nacher der Effekt besser aussieht.

      Jetzt kommt die Umrandung.

      GML-Quellcode

      1. d3d_draw_block(x-16.5,y-16.5,33,x+16.5,y+16.5,0,c_black,1,1)


      Damit zeichnen wir einen schwarzen Block, der den anderen umhüllt. Da wir aber die Z-Werte so vertauscht haben, dass der größere an erster Stelle steht, werden die Polygone ebenfalls invertiert. Um nochmal um die 0.5 Erhöhung einzugehen: Jene ist dafür da, dass der Comic Effekt auf dem Boden anfängt, nicht der Block.


      Die Seiten, welche die hinteren eigentlich verdecken sollten, sind für uns nicht sichtbar. (3)
      (An den Anblick muss man sich vielleicht etwas gewöhnen um ihn zu verstehen.)

      Um genau zu sein war das schon alles, zusammenfassend zeige ich nochmal einen Code wie er aussehen könnte.

      GML-Quellcode

      1. d3d_set_culling(true) //Culling aktivieren
      2. d3d_draw_block(x-16,y-16,0.5,x+16,y+16,32.5,tex,0,0) //Block
      3. d3d_draw_block(x-16.5,y-16.5,33,x+16.5,y+16.5,0,tex_black,0,0) // Umrandung
      4. d3d_set_culling(false)//Culling deaktivieren


      Ich hoffe ich konnte euch ein wenig über den Comic Look beibringen, aber abschließend muss ich noch sagen:
      Bei dieser "Technik" wird (logischer Weise) die doppelte Menge an Polygonen verbraucht, und ist damit sehr performancelastig.
      (Fast alles ist selbst erlernt und beigebracht, deswegen lass ich mich gerne (abgesehen von Noobs) verbessern.)

      In meinem Example sieht das Ganze dann so aus:

      Dateien
      • Outline_tut.zip

        (2,53 kB, 411 mal heruntergeladen, zuletzt: )

      Dieser Beitrag wurde bereits 20 mal editiert, zuletzt von Moolt ()

    • Das Problem was ich hier sehe sind weniger die Outlines als das wirkliche Shading.

      GML-Quellcode

      1. Cel-Shading != Outlines


      Um mich mal verständlich zu machen.

      Die Idee find ich schonmal sehr gut, es verbraucht nur halt viel Leistung, da ja alles doppelt gezeichnet wird und bringt nicht den Effect, den Cel-Shading ausmacht, nämlich das Cel-Shading...

      Outlines sind ja eigentl. nur ein extra zum Cel-Shading, um alles auch wirklich nach Zeichentrick aussehen zu lassen.

      Mir wäre es lieb, wenn du dir mal wirklich was über Cel-Shading durchlesen würdest und mal dazu ein Tut schreiben würdest. Würde vielen helfen denke ich. (Ich bin zu doof zum Tuts schreiben und bin auch kein eingefleischter Profi-Programmierer)

      Naja, hoffe du verträgst Kritik (Is wirklich nicht böse gemeint.)

      Dennoch schöne Idee, ohne durchs Internet lesen hätt ichs nicht besser machen können.
      So far, Schattenphoenix~
      _____________________________________________________________________________
      "Who needs a stairway to heaven...
      If there is an elevator to hell... ?
      "
      - Vergessen
      "Auch ein perfektes Chaos ist etwas vollkommenes."
      - Jean Genet
    • War mir auch sofort aufgefallen, als ich das Tut gelesen habe. Die schwarzen Ränder machen Cel-Shading nicht wirklich aus. Es gibt auch Spiele mit Cel-Shading völlig ohne die Outlines. Das wesentliche ist ja das Licht- und Schattenverhalten auf den Flächen drauf und das bleibt hier völlig unbeachtet. Tatsächlich wundert mich, dass Du es irgendwie geschafft hast diese Technik hier zu entwickeln oder zumindest zu imitieren, offensichtlich ohne dich jemals ernsthaft mit Cel-Shading auseinandergesetzt oder darüber gelesen zu haben. Ich meine: Das Tutorial befasst sich inhaltlich ja in keiner Form überhaupt mit Shading!

      Ändert aber natürlich nichts daran, dass das Tut schöne Resultate bringt. Das Outlining an sich ist auch schon ein toller und nützlicher Effekt um Comic-Grafik darzustellen, aber eben nicht Cel-Shading. Eine Umbenennung des Tutorials würde für das ganze wohl reichen.
    • F4LL0UT schrieb:

      War mir auch sofort aufgefallen, als ich das Tut gelesen habe. Die schwarzen Ränder machen Cel-Shading nicht wirklich aus. Es gibt auch Spiele mit Cel-Shading völlig ohne die Outlines. Das wesentliche ist ja das Licht- und Schattenverhalten auf den Flächen drauf und das bleibt hier völlig unbeachtet. Tatsächlich wundert mich, dass Du es irgendwie geschafft hast diese Technik hier zu entwickeln oder zumindest zu imitieren, offensichtlich ohne dich jemals ernsthaft mit Cel-Shading auseinandergesetzt oder darüber gelesen zu haben. Ich meine: Das Tutorial befasst sich inhaltlich ja in keiner Form überhaupt mit Shading!
      Auch ich habe mir schon die Haare aus dem Kopf gerissen bei dem Versuch, die Schattierung wirklichen Cel Shadings zu entwickeln. Die Outlines sind ja wirklich ein Kinderspiel, wenn man sich ein wenig mit den 3D-Möglichkeiten des GM auskennt. Dennoch sind sie ziemliche Polygonschleudern, weil jedes Objekt die doppelte Anzahl an Polygonen benötigt. Vielleicht lässt sich da auch noch eine andere Methode entwickeln.
      Für die korrekte Schattierung müsste man die Graustufen bei der Beleuchtung von "stufenlos" auf sagen wir mal grob 7 Werte zwischen schwarz und weiß begrenzen. Wie gesagt, ich bin dran, aber bisher ist es (zumindest für mich) noch nicht umsetzbar. Es fehlt die zündende Idee.
      █████ ██ █ ████ everything ███ █████ is █████ ████ ████ fine ████ ███ █ ██████ love.
      █████ ███████ ███ your █████ ████ government.
    • Oh, da ist mir wohl ein schwerwiegender Fehler unterlaufen.
      Dass Cel Shading wenig mit den Outlines zu tun hat hört man schon direkt am Namen, ich habe das wohl immer ignoriert, denn immer wenn ich z.B in der Gamestar "Cel Shading" Look lese, sehe ich immer diese schwarzen Konturen. (Dabei fällt mir auf: Bei dem Spiel "Silverfall" war auch von Cel Shading die Rede, nur wird in diesem Spiel (afaik) keine derartige Schattierungs Technik benutzt.) Zusätlich möchte ich noch sagen dass ich ja am Ende des Tutorials erwähnt habe, dass fast alle Informationen selbst beigebracht wurden und deswegen kleine wie auch große Pazer schnell mal passieren können.

      Ich stehe im Moment auf dem Schlauch wie ich das Tutorial nennen soll. - Ich bitte um Ideen.


      Mfg, Moolt.

      Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von Moolt ()

    • Haha... ich fand das witzig, dass Du die ganze Zeit von Outlines geredet hast und dann nicht wusstest wie Du das Tutorial nennen sollst. :D Naja, jetzt ist ja alles korrekt - abgesehen von der Tatsache vielleicht, dass wir immer noch kein Cel-Shading im GM haben.

      Zum allgmeinen Umgang mit (dem Ausdruck) Cel-Shading: Du musst beachten, dass die Fachpresse auch zum Großteil in diesem Bereich keine Ahnung hat. Ich kenne einige Spiele (vor allem damals von der Dreamcast), die Outlines hatten aber kein Cel-Shading und trotzdem stand in der Fachpresse dann immer was von Cel-Shading... ich frage mich nur woher der Ausdruck "Fach" in Fachpresse kommt... von "Fachwissen" jedenfalls nicht.

      Silverfall... ja, ich habe es zwar nicht gespielt, aber ich kenne Screenshots und die zeigen deutlich Outlines, Cel-Shading konnte ich aber so direkt nicht erkennen (was aber in Bewegung ohnehin viel einfacher wäre). Trotzdem denke ich, dass da tatsächlich Cel-Shading zum Einsatz kommt - schließlich geht es nur um die Technik, nicht um die genaue Darstellungsweise und den Grad der Anwendung. Kann auch sein, dass das so ein dezentes Cel-Shading ist, dass Du es garnicht als solches wahrnimmst, es jedoch wirklich im Gesamtbild sehr dazu beiträgt, dass die Darstellung besonders künstlich/künstlerisch wirkt. Muss ich mal genauer nach gucken.

      Btw: Ich fand den Wikipedia-Artikel ziemlich aufklärend in dem Bereich (vor allem den englischen), sodass man immerhin ein bißchen was zu Konzept und theoretischer Anwendung findet. Gewiss gibt es viel bessere und vor allem konkretere Texte dazu, aber wie gesagt - er gibt einen guten Überblick, wie ich finde.
    • Da hier eine kleine Diskusion stattgefunden hat, ob und wie ein wirklicher Cel Shading Effekt im Gamemaker realisierbar ist, habe ich über einen längeren Zeitraum mit Google nach vernünftigen Ergebnissen gesucht und hauptsächlich Examples über Outlines gefunden.
      Über einen längeren Umweg bin ich auf dieses Forum gestoßen.
      Hier wird unter anderem dieses Bild gezeigt, welches, finde ich, ziemlich nach Cel Shading aussieht.
      Er hat, zum Glück, auch ein Example veröffentlich, welches er (leider) nur in der *.gmk Variante hochgeladen hat.
      Ich würde mich freuen wenn es sich jemand anguckt, dann kommen wir unserem Cel Shading vielleicht auch endlich näher.

      Edit: Ich habe nun selbst schnell die *.gmk umgewandelt (Hat als ich den Post verfasst habe noch nicht geklappt), und muss sagen dass dieses Example den Cel Shading Effekt sehr gut demonstriert. < Screenshot ; Download als *.gm6 >

      Mfg, Moolt

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Moolt ()

    • Das is hier schon älter, aber ich dachte, ich frag beim Threadersteller und ggf. bei mauge hiermit nochmal nach, ob jemand von euch ne Möglichkeit gefunden hat, das Schattieren/Shading auf ein paar Farben zu begrenzen.

      Das einzige was ich gefunden hab im Internet, ist es, eine "1D-Textur" über die eigentliche zu legen, um das Schattieren hinzukriegen.
      Das würde so funktionieren, dass man in dieser 1D-Textur z.B. 1x5 Pixel von Weiss nach Schwarz speichert und dann die Textur je nach Winkel der Lichtquelle mit einem gerundetem Wert aus dem Schwarz-Weiss-Verlauf zu übermalen. Ähnliches Prinzip wie beim Snapped-Walking (floor(x/32)*32).
      So far, Schattenphoenix~
      _____________________________________________________________________________
      "Who needs a stairway to heaven...
      If there is an elevator to hell... ?
      "
      - Vergessen
      "Auch ein perfektes Chaos ist etwas vollkommenes."
      - Jean Genet
    • Schattenphoenix schrieb:

      Das is hier schon älter, aber ich dachte, ich frag beim Threadersteller und ggf. bei mauge hiermit nochmal nach, ob jemand von euch ne Möglichkeit gefunden hat, das Schattieren/Shading auf ein paar Farben zu begrenzen.

      Das einzige was ich gefunden hab im Internet, ist es, eine "1D-Textur" über die eigentliche zu legen, um das Schattieren hinzukriegen.
      Das würde so funktionieren, dass man in dieser 1D-Textur z.B. 1x5 Pixel von Weiss nach Schwarz speichert und dann die Textur je nach Winkel der Lichtquelle mit einem gerundetem Wert aus dem Schwarz-Weiss-Verlauf zu übermalen. Ähnliches Prinzip wie beim Snapped-Walking (floor(x/32)*32).

      Ich hab vermutlich das gleiche Example. Leider ist eine andere Lösung ohne Ausweichen auf DLL wohl unmöglich. Meine ursprüngliche Idee war ja im Grunde dieselbe und etwas anderes ist mir bisher nicht eingefallen. Ich hab diesen Artikel mal überflogen, aber das hilft uns nicht weiter. Auch im Wiki bin ich bis auf verschiedene Beleuchtungsmodelle nicht fündig gewurden. Ich weiß nicht genau, wie der GM (bzw. Direct3D) die Beleuchtung berechnet und vor allem welche Werte ausgegeben werden. Wenn man das wüsste und diese beeinflussen könnte, wäre es möglich, sie auf ein paar Abstufungen zu runden. Vielleicht kennt sich da jemand besser aus, mit dem ich evtl. zusammen an einer Lösung arbeiten könnte.
      █████ ██ █ ████ everything ███ █████ is █████ ████ ████ fine ████ ███ █ ██████ love.
      █████ ███████ ███ your █████ ████ government.
    • Schade eigentlich, mit dem Game Maker kann man ja, meines Wissens nach, nur Lichtquellen festlegen aber nicht wirklich die Art der Beleuchtung irgendwie verändern.

      Würd mich freuen, wenn jemand ne DLL dafür schreiben würde/könnte, aber ich befürchte, dass man dafür komplett sich von D3D entfernen muss... zumindest is das, was der GM mit D3D liefert eher bedürftig.
      So far, Schattenphoenix~
      _____________________________________________________________________________
      "Who needs a stairway to heaven...
      If there is an elevator to hell... ?
      "
      - Vergessen
      "Auch ein perfektes Chaos ist etwas vollkommenes."
      - Jean Genet
    • Schattenphoenix schrieb:

      Würd mich freuen, wenn jemand ne DLL dafür schreiben würde/könnte, aber ich befürchte, dass man dafür komplett sich von D3D entfernen muss... zumindest is das, was der GM mit D3D liefert eher bedürftig.

      Weg von D3D muss man eigentlich nicht. Es gibt ja bereits diverse 3D DLLs, die entweder auch auf D3D zugreifen, oder eben auf OpenGL. Ich kenne dein Vorhaben nicht, aber probier doch einfach mal Ultimate3D.
      █████ ██ █ ████ everything ███ █████ is █████ ████ ████ fine ████ ███ █ ██████ love.
      █████ ███████ ███ your █████ ████ government.
    • Ich werds mir mal bei gelegenheit anschauen.

      Selber hab ich kein wirkliches vorhaben, aber das ist ein Thema, was ich relativ interessant finde.
      So far, Schattenphoenix~
      _____________________________________________________________________________
      "Who needs a stairway to heaven...
      If there is an elevator to hell... ?
      "
      - Vergessen
      "Auch ein perfektes Chaos ist etwas vollkommenes."
      - Jean Genet