Advertisement
  1. 3D & Motion Graphics
  2. UDK

Erstellen eines erweiterten Hologrammmaterials in UDK

by
Read Time:11 minsLanguages:

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

In diesem Tutorial erstellen wir ein Advanced Hologram Material in UDK, das mit Hilfe von Parallax Mapping (Bump Mapping) im Unreal Development Kit hin und her animiert wird. Wir werden auch lernen, wie man RGB-Kanäle in Photoshop verwendet, um eine einzelne Textur aus drei separaten Texturen zu erstellen. Um dieses Tutorial gründlich zu verstehen, müssen Sie zumindest die Grundlagen der Schattierung und Materialerstellung in UDK kennen.


1. Vorbereitung

Zuerst müssen wir in Photoshop eine Textur für das Hologramm erstellen.

rgb_mergergb_mergergb_merge

Bevor wir mit der Texturierung fortfahren, möchte ich erklären, was wir in diesem Tutorial genau tun werden. Wie im obigen Bild gezeigt, haben wir auf der linken Seite des Gleichheitszeichens drei Texturen, die R, G und B sind. Wenn wir alle diese Texturen zusammenführen (oder hinzufügen), erhalten wir eine neue Textur, die RGB ist , das ist das Ergebnis, das auf der rechten Seite des Gleichheitszeichens oben angezeigt wird. Das Ziel hier ist es, eine Textur aus diesen drei Texturen zu erstellen, indem Kanäle zusammengeführt werden. Fahren wir also mit dem Erstellen der Textur fort.

R

rrr
Klicken um zu vergrößern

G

ggg
Klicken um zu vergrößern

B

bbb
Klicken um zu vergrößern

Wir werden die oben genannten drei Texturen mit den Namen R, G und B verwenden.

Wie ich schon sagte, Anstatt diese als drei separate Texturen zu speichern; wir fügen sie lieber in den RGB-Kanal ein. Das Bearbeiten und Erstellen von RGB-Kanälen in Photoshop ist ein ziemlich komplexer Vorgang, aber dennoch zeige ich Ihnen, wie Sie in Photoshop Informationen wie Texturen in RGB-Kanäle einfügen.


2. Erstellen der Texturen

Erstellen Sie zunächst eine neue 1024x1024-Datei in Photoshop und laden Sie alle drei der oben genannten Texturen in dieselbe 1024x1024-Datei.

rgb_layersrgb_layersrgb_layers
Klicken um zu vergrößern

Nachdem Sie die neue 1024x1024-Datei wie im obigen Bild gezeigt erstellt haben, stellen Sie einfach sicher, dass Sie jede Textur in eine separate Ebene laden und sie jeweils mit R, G und B benennen, um Verwechslungen zu vermeiden. Erstellen Sie auch eine neue Ebene mit Schwarz gefüllt für den Hintergrund. Stellen Sie den Mischmodus aller Ebenen auf Bildschirm.


3. Kopieren der ersten R-Ebene

Wichtig ist hier, dass alle Texturen wie im Bild unten zentriert sind. Wenn die Mittelachse der Texturen nicht gleich ist, liegt ein Problem vor.

Jetzt gehört die R-Ebene zum Rot-Kanal, die G-Ebene zum Grün-Kanal und die B-Ebene zum Blau-Kanal. Lassen Sie uns zuerst mit der R-Ebene für den Roten Kanal gehen. Halten Sie STRG gedrückt und klicken Sie auf die R-Ebene und kopieren Sie die Auswahl, indem Sie STRG+C drücken. Deaktivieren Sie nach dem Kopieren der Ebene alle Ebenen, aktivieren Sie jedoch nur die mit Schwarz gefüllte Ebene. Wählen Sie es aus und gehen Sie dann zur Registerkarte KANÄLE. Wenn die Registerkarte KANÄLE nicht angezeigt wird, aktivieren Sie sie über die Dateimenüoption Windows > Kanäle.

copying_layerscopying_layerscopying_layers
Klicken um zu vergrößern

4. Einfügen der R-Ebene in den roten Kanal

Sobald Sie die R-Ebene kopiert haben, gehen Sie zur Registerkarte KANÄLE und klicken Sie auf den roten Kanal, damit nur der rote Kanal aktiviert und der Rest deaktiviert wird. Wählen Sie den roten Kanal aus und fügen Sie ihn ein, indem Sie STRG+V drücken. Sie sollten jetzt die Textur genau in der Mitte des Roten Kanals haben (genau wie im Bild unten). Sobald Sie die Textur in der Mitte des Roten Kanals haben, kann es losgehen.

Wiederholen Sie diesen Vorgang für die G- und B-Layer. Denken Sie daran, dass G für Grün und B für den Blaukanal steht.

rgb_channelsrgb_channelsrgb_channels
Klicken um zu vergrößern

Nachdem Sie alle drei Ebenen in die entsprechenden Kanäle kopiert haben, sollten Sie jetzt etwas haben, das wie in der Abbildung unten aussieht. Was wir haben, ist Rot für den kleineren inneren Kreis, Grün für den mittleren Kreis und Blau für den größeren äußeren Kreis.

mergemergemerge
Klicken um zu vergrößern

Der letzte Schritt besteht darin, eine weitere neue Ebene zu erstellen, die mit Schwarz gefüllt ist. Und um den Mischmodus unserer neu erstellten Textur auf den Bildschirmmodus einzustellen (siehe unten). Speichern Sie nun einfach die Textur im .TGA-Format.

final_texturefinal_texturefinal_texture
Klicken um zu vergrößern

Wir benötigen auch eine Scanner-Textur, also erstellen Sie eine neue Textur mit einer Auflösung von 128 x 128, mit einer schön verteilten dünnen einzelnen weißen Linie (genau wie im Bild unten). ODER Sie können das Bild einfach herunterladen und im .TGA-Format speichern save .

scanner_texture
texturetexturetexture
Klicken um zu vergrößern

5. Erstellen des Materials in UDK

Nachdem wir nun die beiden oben genannten Texturen fertig haben, ist es an der Zeit, UDK zu laden. Erstellen Sie nach dem Laden ein neues Paket namens Hologramm. Nachdem Sie ein neues Hologramm-Paket erstellt und die Texturen in UDK importiert haben.

udk_importudk_importudk_import
Klicken um zu vergrößern

Erstellen Sie ein neues Material für das Hologramm.

new_materialnew_materialnew_material
Klicken um zu vergrößern

Doppelklicken Sie auf das neu erstellte Hologramm-Material, um das Material-Editor-Fenster zu öffnen.

Für dieses Hologramm-Material und um das Setup besser zu verstehen, habe ich das Setup in 4 Teile unterteilt und diese sind wie folgt;

  • 1. Center Gauge – Dadurch wird die Textur des Mittelkreises in der Z-Achse vor und zurück animiert.
  • 2. Zahnradrotator – Zum Randomisieren der Drehung mit dem Rest des Kreises.
  • 3. Flackereffekt – Für einen beschädigten Projektionseffekt.
  • 4. Scanline-Effekt – Elektronischer Scan-Effekt, um es realistischer aussehen zu lassen.

Und dann werden wir alle oben genannten Setups in zwei Add-Ausdrücke zusammenführen.


6. Einrichtung der Mittelanzeige

Ziehen Sie im Material-Editor-Fenster einfach die Hologramm-Textur per Drag & Drop und erhalten Sie zwei Ausdrücke, einen Rotator und BumpOffset. Wie in der Abbildung unten gezeigt, wird ein konstanter Vektorwert von 1,5 in die Höhe des BumpOffsets eingefügt, der dann in die Koordinate des Rotators und dann in die UVs der Hologrammtextur eingefügt wird.

Der rote Kanal der Hologrammtextur wird dann mit einem Wert eines Constant3Vector-Ausdrucks multipliziert, R=0.5, G=1.6 und B=1.5. Sobald Sie alles richtig eingerichtet haben (genau wie im Bild unten). Wählen Sie dieses gesamte Setup aus, indem Sie STRG + ALT gedrückt halten und dann die linke Maustaste ziehen und die Auswahl durch Drücken von STRG + W duplizieren.

center_gauge1center_gauge1center_gauge1
Klicken um zu vergrößern

Nachdem Sie das Setup dupliziert haben, fügen Sie sie einfach mit einem Add-Ausdruck hinzu. Wie Sie in der Abbildung unten sehen können, müssen wir hier nur die Werte des konstanten Vektorausdrucks ändern, der 1 ist. Die Geschwindigkeit des Rotators beträgt 0,125 und die RGB-Werte des Constant3Vector für eine schöne hellgelbe Farbmischung, die 1,5, 1,6 bzw. 0,5 von R, G und B betragen.

Der Constant3Vector wird dann mit dem Blaukanal der Hologrammtextur multipliziert. Nennen (oder kommentieren) wir dies als "Center Gauge", indem wir STRG+ALT gedrückt halten und dann die linke Maustaste um das Setup ziehen, dann mit der rechten Maustaste darauf klicken und Neuer Kommentar auswählen. Geben Sie "Center Gauge" ein und drücken Sie die Eingabetaste.

center_gauge2center_gauge2center_gauge2
Klicken um zu vergrößern

7. Einrichtung des Zahnradrotators

Erstellen Sie erneut ein neues Setup, aber diesmal verwenden wir anstelle eines konstanten Werts für die Höhe des Bumpoffsets Sinus- und Zeitausdrücke. Stecken Sie einfach die Zeit in den Sinus und geben Sie dem Sinus in den Eigenschaften eine Periode von 2.0. Und dann stecken Sie diesen Sinus in die Höhe des Bumpoffset. Was diese Sinus- und Zeitausdrücke tun, ist, auf der Z-Achse mit einer Zeitperiode von 2 hin und her zu oszillieren, so dass wir eine schöne und glatte Animation auf der Z-Achse erhalten.

Stecken Sie das Bumpoffset wie in der Abbildung unten gezeigt in die Koordinate des Rotators und dann in die UVs der Hologramm-Textur. Um einen schönen grünlichen Effekt zu erzielen, erhalten Sie einen Constant3Vector-Ausdruck und geben die folgenden Werte R=1, G=2 und B=1 in die Eigenschaften ein. Dann multiplizieren Sie es mit dem roten Kanal der Hologramm-Textur. Wenn Sie fertig sind, wählen Sie dieses gesamte Setup aus und duplizieren Sie es.

gear_rotator1gear_rotator1gear_rotator1
Klicken um zu vergrößern

Nachdem Sie das gesamte Setup dupliziert haben, fügen Sie beide Setups mit einem ADD-Ausdruck hinzu. Wie in der Abbildung unten gezeigt (Setup 1+ Setup 2.) Das einzige, was wir hier tun müssen, ist den Wert des Rotators zu ändern, also ändern Sie einfach die Geschwindigkeit des Rotators auf -0.5 (Negativ .5).

Nachdem wir nun ein neues Setup erstellt haben, ist es an der Zeit, dieses Setup mit dem zuvor erstellten Center Gauge-Setup zusammenzuführen. Holen Sie sich dazu einen Add-Ausdruck und stecken Sie die Ausgabe des Add für Setup 1&2 in das A des neu erstellten ADD-Ausdrucks, genau wie in der Abbildung unten.

Wenn sich der Zusammenführungspunkt des Haupt-ADD-Ausdrucks befindet (der sowohl das Center Gauge- als auch das Gear Rotator-Setup zusammenführt), stellen Sie sicher, dass Sie die Ausgabe des ADD-Ausdrucks des Center Gauge in das B dieses Merge-Add-Ausdrucks stecken. Was im Bild unten gezeigt wird.

gear_rotator2gear_rotator2gear_rotator2
Klicken um zu vergrößern

Beide Setups sollten nun wie unten gezeigt aussehen. Jetzt ist es an der Zeit, die Einstellungen für einige Flicker-Effekte vorzunehmen.

setup_previewsetup_previewsetup_preview
Klicken um zu vergrößern

8. Flackereffekte

Rufen Sie einen Time-Ausdruck ab, und fügen Sie ihn in einen Sinus ein, und geben Sie ihm in den Eigenschaften einen Periodenwert von 0,00010. Setzen Sie diesen Sinus-Ausdruck in einen Constant-Clamp-Ausdruck ein und geben Sie ihm die folgenden Werte, Min= -3 und Max= 1.0 in seinen Eigenschaften. Duplizieren Sie nun diese drei Ausdrücke und erhalten Sie einen Multiply-Ausdruck, und fügen Sie dann diese beiden Setups in den Multiply-Knoten ein. Wie in der Abbildung unten gezeigt, ändern Sie einfach den Periodenwert des neuen Sinus auf 0,01 und ändern Sie auch die Constant Clamp-, Min- und Max-Werte auf -10 bzw. 2.

Jetzt müssen wir diese Hologrammtextur entsättigen, also erhalten Sie einen Entsättigungsausdruck und stecken Sie die Hologrammtextur in die Entsättigung, geben Sie ihr einfach einen Luminanzwert von 1,0 für jeden Kanal der Entsättigung, der RGBA ist. Wir brauchen diese entsättigte Textur, um auch animiert zu werden, also holen Sie sich eine Zeit und einen Sinusausdruck und stecken Sie dann die Zeit in den Sinus.

Wir brauchen es auch in der Z-Achse leicht versetzt. Wir brauchen also einen BumpOffset- und einen Rotator-Ausdruck, um die Textur zu drehen. Holen Sie sich also diese beiden Ausdrücke und stecken Sie den Sinus in die Höhe des Bumpoffsets und diesen Bumpoffset in die Koordinate des Rotators. Schließen Sie es dann schließlich an die UVs der Hologramm-Textur an (genau wie das Setup unten im Bild unten). Jetzt müssen wir alle Setups mehrfach machen, also alle Verbindungen richtig anschließen, wie im Bild unten gezeigt, und Kommen wir zum Erstellen eines Scanline-Effekts.

Flickering_effectFlickering_effectFlickering_effect
Klicken um zu vergrößern

9. Scanline-Effekt

Ziehen Sie die Scanner-Textur per Drag & Drop in dieses Hologramm-Material-Editor-Fenster. Und erhalten Sie zwei Ausdrücke, einen Panner und einen TexCoordinate. Stecken Sie die TexCoordinate in den Panner, und setzen Sie nun in den Eigenschaften des Panners die Geschwindigkeit von X und Y auf die gleiche Geschwindigkeit von 1.0 und stecken Sie diesen Panner in die UVs der Scanline-Textur, die wir zuvor importiert haben.

Wir brauchen diese Scanline, um ein bläuliches Aussehen zu haben, also müssen wir dies mit einem Constant3Vector-Ausdruck multiplizieren. Wie in der Abbildung unten stecken Sie diese Scanline-Textur in den A-Eingang des Multiply und den Constant3Vector in den B des Multiple-Ausdrucks. Geben Sie dann in den Eigenschaften des Constant3Vector jeweils RGB-Werte von 1, 2, 2 ein.

Um das Setup abzuschließen, benötigen wir auch die Hologramm-Textur, jedoch in einer Graustufen- oder entsättigten Version. Holen Sie sich also diese Hologramm-Textur zusammen mit einem Entsättigungsausdruck und fügen Sie diese Hologramm-Textur in die Entsättigung ein (wie unten gezeigt). In den Eigenschaften des Entsättigungsausdrucks , geben Sie jedem RGBA-Kanal einen Luminanzwert von 1,0. Jetzt müssen wir nur noch alle diese Ausdrücke zusammenführen, also erhalten Sie einen LERP-Ausdruck sowie einen Constant Vector-Ausdruck mit einem Wert von 0.

Verbinden Sie nun diesen konstanten Vektorausdruck mit A des Lerp-Eingangs, und für B einfach den Multiply-Ausdruck der Scanline-Textur und dann diese Entsättigung in den Alpha-Eingang des LERP. Stellen Sie einfach sicher, dass jede Verbindung richtig eingesteckt ist (wie in der Abbildung unten gezeigt).

scanline_effectscanline_effectscanline_effect
Klicken um zu vergrößern

Nachdem wir nun alle Setups bereit haben, d. h. Center Gauge, Gear Rotator, Flickering Effect und Scanline Effect, ist es an der Zeit, alle vier Setups mit zwei ADD-Ausdrücken zusammenzuführen. Holen Sie sich also zwei ADD-Ausdrücke. Die Verbindung geht so: Der Gear Rotator und Flickering Effect werden jeweils in die A & B Inputs des Add gesteckt, dann wird dieses ADD in das A des zweiten ADD Inputs gesteckt. Und schließlich wird der Scanline-Effekt an das B des zweiten ADD-Eingangs angeschlossen.

Kommentieren Sie nun diese beiden ADD-Ausdrücke als "Main Switch". Stecken Sie nun einfach das zweite ADD in den DIFFUSE-Kanal, genau wie im Bild unten. Gehen Sie dann zu Windows > Eigenschaften.

final_setupfinal_setupfinal_setup
Klicken um zu vergrößern

10. Materialeigenschaften

Erweitern Sie im Eigenschaftenfenster den Abschnitt Material und setzen Sie den Deckkraftmasken-Clipwert auf 0,2. Stellen Sie den Mischmodus auf BLEND_Additive, das Beleuchtungsmodell auf MLM_Unlit und vergewissern Sie sich auch, dass Zweiseitiges Gesicht eingeschaltet ist, indem Sie die Option aktivieren.

material_propertiesmaterial_propertiesmaterial_properties
Klicken um zu vergrößern

Abschluss

Das ist es! Ihr Hologramm-Material ist fertig. Tragen Sie dieses Material einfach auf ein beliebiges Netz auf und sehen Sie die Magie!

Unten sehen Sie die vollständige High-RES-Vorschau des Hologramm-Material-Setups.

whole_setupwhole_setupwhole_setup
Klicken um zu vergrößern

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.