Eigene Avatare mit Lens Studio
Mit Lens Studio für Snapchat gestalten Sie Video-Effekte einfach und schnell. Die fertigen Avatare lassen sich auch in anderen Video-Konferenz-Programmen verwenden.
Nicht nur für Snapchat sondern auch für Video-Konferenzen
N achrichten schreiben oder ein Videochat sind durch Apps auf dem Smartphone heute eine Selbstverständlichkeit. Das funktioniert sehr gut in einem WLANNetz und ist dann kostenlos. Ansonsten fallen Kosten für die mobilen Daten an. Snapchat ist eine der Apps, die hier gern verwendet wird. Das Besondere: Textnachrichten, Bilder und Videos werden nach dem Empfang gelöscht. Snapchat erlaubt, mithilfe der Lens-Technologie bei Videoaufnahmen Effekte, etwa Masken und Gra ken, über das eigene Gesicht zu legen oder die Umgebung zu verändern. Es steht schon eine breite Auswahl an Effekten zur Verfügung, für die es regelmäßig Updates gibt. Lens Studio kann jeder Anwender kostenlos laden ( lensstudio.snapchat.com/download/) und solche Effekte auch selbst gestalten. Der Einsatz einer selbst entwickelten Snapchat Lens beschränkt sich nicht nur auf das Telefon. Mithilfe des Tools Snap Camera werden die Effekte in Desktop-Chats wie Twitch, Skype oder Microsoft Teams integriert. Weitere Informationen nden Sie in Snap Camera in Kombination mit Desktop-Chats.
Erste Schritte im Programm: Lens Studio kennenlernen
Nach dem Start des Programms sehen Sie einen Willkommen- Bildschirm mit einer Auswahl an Lens-Vorlagen. Aktivieren Sie einen Eintrag, um ein bestehendes Projekt zu öffnen und zu studieren. Für eine eigene Lens starten Sie mit dem Knopf New Project ein Dokument ohne Lens.
Die Ober äche von Lens Studio teilt sich in mehrere Bereiche auf. Links oben sehen Sie eine Ansicht der Szenen-Hierarchie und alle Objekte im Projekt. Ein neues Dokument enthält die Kamera und Beleuchtung. Rechts daneben nden Sie Szene-Ansicht in 3D. Mit der Maus und gedrückter [Alt]- Taste navigieren Sie darin. Die linke Maustaste dreht die Ansicht und die rechte verändert die Zoom-Stufe. Mit gedrücktem Drehrad oder der mittleren Taste verschieben Sie die Szene in der Ansicht. Darunter blendet das Programm alle aufgezeichneten, internen Informationen ein. Die Palette Inspector
zeigt die Optionen und Einstellungen für das aktive Objekt. Ganz rechts sehen Sie eine Vorschau mit einem virtuellen Charakter. Auf diese Person werden alle Elemente angewendet. Im oberen Bereich wechseln Sie die virtuelle Person in der Vorschau. Unterhalb der Palette nden Sie ein Auswahlmenü für vorde nierte Smartphone-Simulationen wie iPhone- oder Galaxy- Modelle. Lens Studio zeigt die Bedienelemente des Telefons in der Vorschau, wenn Sie ganz unten auf das zweite Icon von rechts klicken. Links unten im Studio-Fenster be ndet sich die Palette Resources. Diese Ansicht zeigt alle verwendeten Inhalte wie Texturen, Fotos, Farben, Sounds und viele mehr.
Ein Projekt starten und eine Snapchat Lens mit Maske erstellen
Eine Lens für Snapchat kann Bilder und 3DModelle enthalten. Für eine Gesichtsmaske gibt es ein spezielles Objekt, das die Gra k später genau auf dem Gesicht xiert und auf Bewegungen reagiert. Dafür ist Head Binding verantwortlich. Im Objects- Fenster links oben klicken Sie auf den Plus- Knopf. Suchen Sie im Menü nach dem Eintrag Face Mesh. Das Programm erzeugt automatisch das Element Head Binding mit dem Untereintrag Face Mesh. Im 3D-View daneben sehen Sie das Objekt, und in der Vorschau rechts wird das Gesicht grau eingefärbt; hier sitzt später die Maske. Zusätzlich nden Sie in der Palette Resources rechts unten unter Textures ein neues Element mit der Bezeichnung Face Mesh Default. Diese Node de niert die Textur für das Face-Mesh.
Tipp: Zur Orientierung und besseren Übersicht benennen Sie die Elemente in den Paletten um. Klicken Sie mit der rechten Maustaste auf einen Eintrag, und wählen Sie im Kontextmenü Rename.
Klicken Sie darauf, und ändern Sie im Fenster Inspector den Wert bei Base Color. Probieren Sie auch den Slider für Metalic. Die komplette De nition des Materials erkunden Sie in einem Node-Netzwerk, wenn Sie bei Inspector oben rechts auf die Schalt äche Graph Editor klicken.
Um ein externes Bild einzufügen, benötigen Sie ein Foto oder eine Gra k. Kopieren Sie die betreffende Datei per Drag-and-drop in das Resources- Feld unten links. Eine andere Import-Möglichkeit bietet ein Klick auf das Plus- Symbol in Resources. Im folgenden Fenster benutzen Sie unten From Files. Im Bereich Inspector sehen Sie das Bild in der Vorschau. Sie müssen es nun Face Mesh Default zuweisen. Klicken Sie auf den Eintrag. Im Inspector bei Graph Parameters unter Base Texture wählen Sie das Feld neben Texture. Im neuen Fenster markie
ren Sie die zuvor geladene Gra k und bestätigen mit OK. Die Gra k wird sofort auf die Vorschau angewendet. Das Bild für eine Gesichtsmaske hat eine Au ösung von 2000 x 2000 Bildpunkten. Die genaue Positionierung der Maske erfolgt über UV-Koordinaten. Weitere Informationen dazu lesen Sie im Kasten links UV-Maps in Lens Studio. Um die Clown Lens zu komplettieren, brauchen Sie noch eine Nase. Dazu kommt ein 3D-Element aus Lens Studio zum Einsatz. Wechseln Sie zum Objects- Fenster links oben, und fügen Sie eine Sphere ein. Machen Sie diese zum Unterobjekt von Face Mesh Default, damit sie sich analog zum Face Mesh bewegt. Zum Einfärben der Nase benötigen Sie ein Material. In Resources über das Plus- Symbol öffnen Sie das Menü und suchen nach Simple NPR. Aktivieren Sie es, und ändern Sie im Inspector- Feld rechts den Wert bei Base Color auf ein Rot. Das rote Material weisen Sie in Objects zu. Klicken Sie auf Sphere und gehen dann in das Inspector-Feld Render Mesh Visual. In Material1 öffnen Sie eine Auswahl und markieren dort das angezeigte NPR-Material für die Maskennase.
Hinweis: Um anderen Snapchat-Anwendern Ihre Lens zur Verfügung zu stellen, melden Sie sich mit Login to my Lenses an. Folgen Sie den Anweisungen zum Einreichen des Projekts. Bei Snapchat wird die Lens geprüft und dann online für die Öffentlichkeit publiziert.
Die Clown-Nase ist viel zu groß und muss positioniert werden. Ändern Sie Scale im Inspector für alle drei Felder auf den Wert 0,3. Für die Position lassen Sie den Wert für die X- Achse, ändern aber bei Y die Einstellung auf zirka 6 und bei Z auf zirka 10. Dann passt die Nase zum Gesicht, und Sie können einen Testlauf direkt in Snapchat starten. Wichtig: Verschieben Sie die Kugel nicht zu stark auf der Z- Achse. Damit verhindern Sie, dass die Nase der Person durch die Kugel durchdrückt.
Virtuelle Bühne für Snapchats bauen
Nicht immer ist die Umgebung für Aufnahmen in Snapchat optimal. Mit einem eigenen Background lässt sich die private Bühne für die Videoclips in die Szene holen. Grundlage ist ein Bild Ihrer Wahl, oder Sie gestalten einen Hintergrund mit einem Firmen-Logo, einer Webseite oder einem Videokanal im Internet. Um die Person freizustellen, müssen Sie der Kamera einen Filter zuweisen. Gehen Sie zu Resources, und suchen Sie nach Segmentation Texture/Portrait Background. Aktivieren Sie links oben die Kamera, und wechseln Sie im Inspector unter Mask Texture zum Eintrag Portrait Background Segmentation.
Laden Sie ein Bild in den Bereich Resources, und erzeugen Sie ein Image Object in der Szene. De nieren Sie das Bild als Material für das Image Object. Verschieben Sie es auf der Z- Achse auf eine Position hinter der Person. Dafür nutzen Sie die 3D-Ansicht. Aktivieren Sie das Bild in der Hierarchie
links oben und dann das Werkzeug zum Verschieben. Sie nden es oberhalb der Szenen-Ansicht (Knopf mit Kreuz). Ziehen Sie den blauen Pfeil nach hinten von der Kamera weg. Alternativ nutzen Sie die Eingaben im Inspector bei Position.
Einstieg in die Programmierung mit Lens Studio
Lens Studio besitzt die Möglichkeit, per Skript auf die einzelnen Objekte einer Szene zuzugreifen und sie zu manipulieren. Der Code wird in JavaScript geschrieben und ist objektorientiert. Für das Beispiel setzen Sie ein SceneObject in das Projekt und untergeordnet einen Würfel (Box). Dieser soll sich um die Y- Achse drehen. In Resources fügen Sie ein Script hinzu und klicken doppelt auf den Eintrag. Der interne Code-Editor öffnet sich als Tab im Bereich der Szenen-Ansicht. Lens Studio erlaubt auch den Einsatz eines externen Editors and dieser Stelle. Das folgende Programm sorgt für die Rotation: // Rotation Wuerfel um Y-Achse // Geschwindigkeit berechnen var gkeit = 90 * getDeltaTime(); // Winkelmass berechnen var bogen = gkeit * (Math.PI / 180); // Y-Achse definieren var achse = vec3.up();
// Rotation zuweisen var rotationZuweisen = quat. angleAxis(bogen, achse);
// Aktuellen Wert des drehenden Wuer fels ermitteln var alteRotation = script.getSceneOb ject().getTransform().getLocalRotati on();
// Neuen Wert fuer Winkel ermitteln var neuRotation = rotationZuweisen. multiply(alteRotation);
// Neuen Wert fuer Rotation zuweisen script.getSceneObject().getTrans form().setLocalRotation(neuRotation);
Der Code ermittelt aus der Zeit seit dem letzten gerenderten Frame und der Zahl 90 die Geschwindigkeit. Testen Sie hier andere Werte. Ein negativer Wert dreht die Rotation um. Dann wird das Bogenmaß für die Rotation errechnet. Es folgt die De nition der Rotation um die Y- Achse ( vec.up) und die Zuweisung der Operation. Das Programm ermittelt nun den aktuellen Wert für die Rotation und errechnet die neue Position. Am Ende wird der neue Wert geschrieben. Damit das Skript wirkt, müssen Sie diesen dem Ziel zuweisen. Aktivieren
Sie das SceneObject, und wechseln Sie zum Inspector. Im Feld Script klicken Sie auf die Schalt äche in der Mitte und nutzen im folgenden Fenster den gerade bearbeiten Code. Im Pull-down-Menü neben der Bezeichnung stellen Sie die Option auf Frame Updated. Speichern Sie das Projekt, sehen Sie danach in der Vorschau einen drehenden Würfel. Einzelne Skripte bilden eine Bibliothek, die sich bei anderen Objekten erneut anwenden lässt. Alternativ hängen Sie einen weiteren Code-Schnipsel an den Würfel. Klicken Sie auf den Skript-Eintrag, und duplizieren Sie die Datei. Ändern Sie die Zeile mit vec.up() zu vec.Right(). Im Inspektor SceneObject wird dann das zweite Skript wie zuvor angehangen. Der Würfel dreht sich in der Vorschau um X und Y.
Lens Studio zeigt sich als Multimedia-Baukasten mit vielen Möglichkeiten und Funktionen. Dabei kann man, neben einfachen Masken, auch interaktive Anwendungen entwickeln. Neben den einfachen Beispielen sind die Integration von Animationen, 3D-Modellen oder Musik machbar. Über Snap Camera kann man seine Projekte auch einem breiteren Publikum auf anderen Plattformen zeigen. Die Vorlagen in Lens Studio und die Dokumentation liefern viele Beispiele, auf deren Basis man eigene Ideen umsetzen kann.