{"id":447,"date":"2014-05-28T10:20:22","date_gmt":"2014-05-28T10:20:22","guid":{"rendered":"http:\/\/www.malzbie.com\/wordpress\/?page_id=447"},"modified":"2014-05-30T08:08:35","modified_gmt":"2014-05-30T08:08:35","slug":"shaderforge-0-3x-ein-plugin-fuer-das-erstellen-der-shader-in-unity3d","status":"publish","type":"page","link":"http:\/\/www.malzbie.com\/wordpress\/shaderforge-0-3x-ein-plugin-fuer-das-erstellen-der-shader-in-unity3d\/","title":{"rendered":"ShaderForge 0.3x &#8211; Ein Plugin f\u00fcr das Erstellen der Shader in Unity3D"},"content":{"rendered":"<p>Einen Shader in Unity3D zu programmieren ist ohne fundiertes Vorwissen nicht so leicht m\u00f6glich.<br \/>\nDie Shader, die von Unity3D mit geliefert werden sind an sich nicht schlecht, aber sobald man einen vorhabndenen Shader um eine Funktion erweitern will, wird es kompliziert. Aus diesem Grund habe ich schon l\u00e4ngere Zeit nach einem Node-basierenden Werkzeug Ausschau gehalten.<br \/>\nShader Forge ist so ein Node-basierendes Werkzeug und es ist im Assetstore f\u00fcr 80$ zu erhalten.<br \/>\nDas ist schon recht teuer aber seinen Preis auch wert.<br \/>\nK\u00fcrzlich war es\u00a0 bei den 24Hour-Deals f\u00fcr die H\u00e4lfte zu bekommen, und da habe ich zugeschlagen.<br \/>\nShader Forge ist eigentlich noch im Beta-Stadium\u00a0 und zur Zeit dieses Reviews in der Version 0.32.<br \/>\nDas bedeutet aber nicht, dass man damit nur rum spielen kann. Nein! Man kann schon die tollsten Shader erstellen und fast alles wird unterst\u00fctzt. Nat\u00fcrlich k\u00f6nnen hier und da Fehler entstehen und es kann auch vorkommen, dass Unity3D sich mal aufh\u00e4ngt. Das wei\u00df ich aber nur vom Versions-Log. Passiert ist es mir noch nicht.<\/p>\n<p style=\"text-align: center;\"><span style=\"text-decoration: underline;\"><strong>Wie funktioniert Shader Forge?<\/strong><\/span><\/p>\n<p style=\"text-align: left;\">Wie schon erw\u00e4hnt, ist Shader Forge \u201eNode\u201c (auf deutsch Knoten) basierend. Das bedeutet, es ist ein grafisches Werkzeug. Aus diesem Grund \u00f6ffnet man in Unity ein Shader Forge Window wenn man einen neuen Shader erzeugen will.<\/p>\n<div id=\"attachment_453\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/startfenster.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-453\" class=\"size-medium wp-image-453\" alt=\"Das Startfenster\" src=\"http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/startfenster-300x256.jpg\" width=\"300\" height=\"256\" srcset=\"http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/startfenster-300x256.jpg 300w, http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/startfenster.jpg 514w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-453\" class=\"wp-caption-text\">Das Startfenster<\/p><\/div>\n<p>\u00dcber die Buttons kann man dann entweder einen neuen Shader anlegen, einen \u00f6ffnen oder Informationen bekommen. Beim Anlegen und \u00d6ffnen erscheint ein Dateimanager der im Assetordner des Projektes startet. Lege ich einen neuen Shader an, so w\u00e4hle ich einen Speicherpfad aus und benenne den Shader wie ich es will.<br \/>\nNachdem der Shader angelegt wurde \u00f6ffnet sich die grafische Oberfl\u00e4che, in der ich jetzt \u00fcber verschiedene Elemente meinen Shader zusammen basteln kann.<\/p>\n<div id=\"attachment_455\" style=\"width: 310px\" class=\"wp-caption alignleft\"><a href=\"http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/Arbeitsflaeche.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-455\" class=\"size-medium wp-image-455\" alt=\"Die Arbeitsfl\u00e4che\" src=\"http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/Arbeitsflaeche-300x206.jpg\" width=\"300\" height=\"206\" srcset=\"http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/Arbeitsflaeche-300x206.jpg 300w, http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/Arbeitsflaeche-1024x706.jpg 1024w, http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/Arbeitsflaeche.jpg 1118w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-455\" class=\"wp-caption-text\">Die Arbeitsfl\u00e4che<\/p><\/div>\n<p>Der Hauptknoten ist schon angelegt und alle m\u00f6glichen Eing\u00e4nge sind zu sehen.\u00a0 Um Jetzt andere Nodes zu erzeugen, reicht es aus, einfach mit rechts in das Fenster zu klicken und dort dann im entstandenen Dialog ein Element auszuw\u00e4hlen oder aber man w\u00e4hlt sich ein Element aus dem Men\u00fcbaum an der rechten Seite aus und platziert es irgendwo in dem Fenster.<br \/>\nMan kann ganz normal rein und raus zoomen oder aber wie in Unity sich im Fenster hin und her bewegen. Das ist auch n\u00f6tig, denn ganz schnell hat man den Fensterausschnitt mit verschiedensten Elementen gef\u00fcllt.<\/p>\n<p>Auf der linken Seite ist oben ein Vorschaufenster zu sehen, mit dem man seinen Shader super \u00fcberpr\u00fcfen kann. Voreingestellt ist es mit einer Kugel, aber es l\u00e4sst sich jedes beliebige Objekt aus dem Projekt einf\u00fcgen.<br \/>\nUnter dem Vorschaufenster sind diverse Men\u00fcs, in denen man weitere Shadereigenschaften einstellen kann, die mit dem Node-Fenster nicht zu tun haben.<\/p>\n<p>Der Start ist wirklich leicht. Um dein Einstieg zu demonstrieren, nutze ich ein Objekt, welches ich mit einer UV Map versehen habe und f\u00fcr das ich auch schon UV Texturen erstellt habe.<\/p>\n<p>Ich w\u00e4hle mir beim Vorschaufenster einfach mein Modell aus und fange im Nodefenster an den Diffuse-Kanal zu bedienen. Diesem Kanal soll eine Textur zugewiesen werden und diese Textur soll man einf\u00e4rben k\u00f6nnen.<br \/>\nAlso Rechtklick in das Nodefenster und unter Properties das Texture2D Element ausw\u00e4hlen. Ein Node ist entstanden und ihm kann ich auch gleich schon eine Textur zuweisen.<br \/>\nN\u00e4chster Rechtsklick und wieder unter Properties das Color Element ausgew\u00e4hlt. Es erscheint auf dem Fenster und hat eine graue Farbe voreingestellt.<br \/>\nBeides m\u00f6chte ich verkn\u00fcpfen, und zwar will ich die Color mit den Farbanteilen der Textur multiplizieren. Also wieder ein Rechtsklick und dieses Mal unter Arithmetic das Mulitiply gew\u00e4hlt.<br \/>\nJetzt schnell die RGB Kan\u00e4le von der Textur und von der Farbe mit den 2 Eing\u00e4ngen des Multiply verbinden und schon sehe ich im Multiply Node ein Ergebnis. Meine Textur ist verf\u00e4rbt. Dieses soll dem Diffuse-Kanal zugewiesen werden, also verbinde ich schnell den Ausgang des Multiply mit dem Diffuse-Eingang meines Main Nodes. Fertig!<\/p>\n<p>In meinem Vorschaufenster sehe ich mein Objekt mit eingef\u00e4rbter Textur. Es rotiert und so kann ich es von allen Seiten begutachten. 2 Lichtquellen, die selber langsam um das Objekt herum rotieren, beleuchten das Modell und helfen beim Einstellen der Shader. Ich kann nat\u00fcrlich auch das Objekt manuell so drehen, wie ich es gerne h\u00e4tte, oder aber nah ran zoomen um Feinheiten im Modell zu begutachten.<\/p>\n<p><a href=\"http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/Diffuse.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-medium wp-image-449\" alt=\"sf-Diffuse\" src=\"http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/Diffuse-300x190.jpg\" width=\"300\" height=\"190\" srcset=\"http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/Diffuse-300x190.jpg 300w, http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/Diffuse-1024x648.jpg 1024w, http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/Diffuse.jpg 1086w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>Die Properties, die ich eben erzeugt hatte, werden sp\u00e4ter beim Shader einstellbar sein. Sie sind also im Inspector zu sehen. Jetzt ist es aber so, dass die Reihenfolge der Properties so ist, wie ich die Properties erstellt habe. Das l\u00e4sst sich aber leicht \u00e4ndern, wenn man im Einstellungsbereich den Propertiespfad \u00f6ffnet. Dort kann ich die Elemente einfach so verschieben, dass sie am Schluss eine logische Reihenfolge ergeben. Die Benennungen der Properties lassen sich direkt am Node oder bei den Properties\u00a0 einstellen.<\/p>\n<p>Nat\u00fcrlich ist so ein Shader, der gerade mal einen Diffuse-Kanal bedient, nichts Besonderes. Es zeigt aber schon einmal, wie schnell sich die einzelnen Kan\u00e4le einstellen lassen.\u00a0 Dem Shader jetzt z.B. ein Texturnode f\u00fcr eine Normalmap hinzu zuf\u00fcgen ist eine Sache von wenigen Sekunden.<br \/>\nSelbst komplexere Shader, die eine Vielzahl von Kan\u00e4len bedienen sind recht schnell gebaut und \u00fcber das Vorschaufenster hat man sofort eine R\u00fcckmeldung, ob alles so wird wie man es vorhatte.<br \/>\nHier mal ein Beispiel f\u00fcr einen Shader:<\/p>\n<div id=\"attachment_452\" style=\"width: 620px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/komplett.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-452\" class=\"size-large wp-image-452\" alt=\"Ein fertiger Shader\" src=\"http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/komplett-1024x648.jpg\" width=\"610\" height=\"386\" srcset=\"http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/komplett-1024x648.jpg 1024w, http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/komplett-300x190.jpg 300w, http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/komplett.jpg 1086w\" sizes=\"auto, (max-width: 610px) 100vw, 610px\" \/><\/a><p id=\"caption-attachment-452\" class=\"wp-caption-text\">Ein fertiger Shader<\/p><\/div>\n<p>Und so sieht er dann im Inspector aus:<\/p>\n<div id=\"attachment_451\" style=\"width: 397px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/inspector.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-451\" class=\"size-full wp-image-451\" alt=\"Der Shader im Inspector\" src=\"http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/inspector.jpg\" width=\"387\" height=\"555\" srcset=\"http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/inspector.jpg 387w, http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/inspector-209x300.jpg 209w\" sizes=\"auto, (max-width: 387px) 100vw, 387px\" \/><\/a><p id=\"caption-attachment-451\" class=\"wp-caption-text\">Der Shader im Inspector<\/p><\/div>\n<p style=\"text-align: left;\">Dieser Shader hat rund 300 Zeilen Code!<\/p>\n<p>Jedoch sind einige Dinge nicht so einfach, denn obwohl man mit den Nodes sehr leicht die unterschiedlichsten Dinge verkn\u00fcpfen kann, muss man doch wissen was man braucht. Ein wenig hilft Shader Forge. Denn wenn ich z.B. einen Wert mit dem Normal-Kanal verbinden will, so kann ich es nicht. Der Eingang wird sofort ausgegraut, sobald man den Ausgang vom Value-Node anklickt.<br \/>\nAber Shader, die \u00fcber Vektoren, dem Lichteinfall oder der Entfernung in der Szene arbeiten brauchen schon ein wenig mehr Wissen und das muss man sich erst einmal aneignen.<\/p>\n<p>Wie ich oben schon schrieb, ist Shader Forge noch im Beta-Stadium. Das wirkt sich auch auf die Hilfestellung aus.<br \/>\nWenn man mit rechts auf ein Node klickt, kann man schnell eine Hilfe dazu bekommen, wird also auf eine Homepage geleitet, wo wichtige Informationen und sogar ein Wiki zu finden sind. Das Wiki ist aber noch im Aufbau und will erst einmal richtig gef\u00fcllt werden. Es gibt auch schon einige Tutorials die einem den Einstieg erleichtern. Aber auch dort sollte noch erweitert werden, denn mit 3 Videotutorials kann ich nicht die F\u00fclle, die dieses Tool bringt, erkl\u00e4ren.\u00a0 Es reicht aber allemal f\u00fcr den Einstieg.<br \/>\nMan kann Shader Forge auch mit Tastenkombinationen bedienen, jedoch habe ich noch keine Auflistung dar\u00fcber gesehen. In den Videotutorials werden nur einige wenige Kombinationen erw\u00e4hnt.<\/p>\n<p style=\"text-align: center;\"><span style=\"text-decoration: underline;\"><strong>Limitationen:<\/strong><\/span><\/p>\n<p style=\"text-align: left;\">Shader Forge kann f\u00fcr alle Unity3D Versionen ab der Version 4.3 genutzt werden.<br \/>\nEinige wenige Features funktionieren nicht mit der Free Version, was an den Limitationen der Free Version liegt. Laut Herrsteller kann man die Effekte wohl noch im Editor sehen, aber bei einem Build sollen diese dann nicht mehr gehen.<\/p>\n<p>Shader Forge unterst\u00fctzt noch kein Deferred Lighting. Es soll aber ab der Version 5 von Unity3D mit eingebaut werden. Erst dann, weil Unity scheinbar mit dem \u00dcbergang zur Version 5 auch etwas am Deferred Lighting \u00e4ndern wird.<\/p>\n<p>Einige Inspector-Elemente, wie die Checkbox, sind noch nicht eingebaut.<\/p>\n<p style=\"text-align: center;\"><span style=\"text-decoration: underline;\"><strong>Fazit:<\/strong><\/span><\/p>\n<p style=\"text-align: left;\">Shader Forge ist m\u00e4chtig! Selbst in der Version 0.3.2.<br \/>\nDie Bedienung ist leicht und man bekommt schon beim Erstellen eine R\u00fcckmeldung \u00fcber das zu erwartende Ergebnis.\u00a0 Es macht einfach Spa\u00df mit den unterschiedlichen Elementen herum zu spielen und das Ergebnis zu begutachten.<br \/>\nDas Tool ist logisch und intuitiv aufgebaut. Ich brauchte so gut wie keine Einarbeitungszeit.<\/p>\n<p>Die OnlineHilfe ist ausreichend und wird hoffentlich weiter ausgebaut.<\/p>\n<p>Der Preis von 80$ ist angemessen,\u00a0 wenn man davon aus geht, dass Shader Forge auch wirklich fertig gestellt wird. (Und davon will ich mal ausgehen.)<br \/>\nIch kann das Asset bedenkenlos empfehlen.<\/p>\n<p>Beispiel eines zweiseitigen und transparenten Shaders:<\/p>\n<div id=\"attachment_454\" style=\"width: 620px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/transparentes.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-454\" class=\"size-large wp-image-454\" alt=\"Zweiseitig und transparent\" src=\"http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/transparentes-1024x667.jpg\" width=\"610\" height=\"397\" srcset=\"http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/transparentes-1024x667.jpg 1024w, http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/transparentes-300x195.jpg 300w, http:\/\/www.malzbie.com\/wordpress\/wp-content\/uploads\/2014\/05\/transparentes.jpg 1057w\" sizes=\"auto, (max-width: 610px) 100vw, 610px\" \/><\/a><p id=\"caption-attachment-454\" class=\"wp-caption-text\">Zweiseitig und transparent<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Einen Shader in Unity3D zu programmieren ist ohne fundiertes Vorwissen nicht so leicht m\u00f6glich. Die Shader, die von Unity3D mit geliefert werden sind an sich nicht schlecht, aber sobald man einen vorhabndenen Shader um eine Funktion erweitern will, wird es kompliziert. Aus diesem Grund habe ich schon l\u00e4ngere Zeit nach einem Node-basierenden Werkzeug Ausschau gehalten. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-447","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/www.malzbie.com\/wordpress\/wp-json\/wp\/v2\/pages\/447","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.malzbie.com\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www.malzbie.com\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/www.malzbie.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.malzbie.com\/wordpress\/wp-json\/wp\/v2\/comments?post=447"}],"version-history":[{"count":5,"href":"http:\/\/www.malzbie.com\/wordpress\/wp-json\/wp\/v2\/pages\/447\/revisions"}],"predecessor-version":[{"id":488,"href":"http:\/\/www.malzbie.com\/wordpress\/wp-json\/wp\/v2\/pages\/447\/revisions\/488"}],"wp:attachment":[{"href":"http:\/\/www.malzbie.com\/wordpress\/wp-json\/wp\/v2\/media?parent=447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}