Schritt für Schritt Anleitung zur Nutzung von VRdirect

Transkript

1 Schritt für Schritt Anleitung zur Nutzung von VRdirect Guide Stand: Fragen: 1

2 Agenda Anleitungsschritte Download und Installation des VRdirect Builders Erstellung eines VRdirect Accounts Erstellung des VR Projekts im VRdirect Builder Eine Szene hinzufügen Eine Transition hinzufügen Ein interaktives Element hinzufügen Ein Interaktions-Event hinzufügen Erste Vorschau des VR Projekts auf Smartphone Schritte zur Veröffentlichung des VR Projekts Teilen und Distribution des VR Projekts

3 Agenda Anleitungsschritte Download und Installation des VRdirect Builders 04 3

4 Schritt 1 Los geht s - Download des Builders Der Builder kann auf der Internetseite von VRdirect heruntergeladen werden: i Was ist der VRdirect Builder? Der VRdirect Builder ist die Software, die benutzt wird zur Erstellung und Veröffentlichung des VR Projekts. Dort werden per Drag-und-Drop interaktive Elemente hinzugefügt und die 360 Szenen miteinander verknüpft. Der Builder läuft auf dem macos und Windows Betriebssystem. 4

5 Schritt 2 Los geht s - Download des Builders Im Tab Product wird die Seite geöffnet, auf der die Download Buttons verfügbar sind. Mit einem Klick auf die Buttons für Mac oder für Windows kann der Builder runtergeladen werden. Der Installationsprozess für Mac und Windows erfolgt über einen Doppelklick auf die heruntergeladene Builder Datei. Hier öffnet sich automatisch die Installationshilfe, die Schritt für Schritt durch den Installationsprozess führt. 5

6 Agenda Anleitungsschritte Erstellung eines VRdirect Accounts 07 6

7 Schritt 3 Erstellen eines Accounts Ein Klick auf den Log In Button der VRdirect Webseite öffnet das VRdirect Nutzerportal. Über Create new account wird das entsprechende Formular aufgerufen, das für den neuen User ausgefüllt werden muss mit Name, und Passwort. VRdirect User Portal 7

8 Schritt 4 Erstellen eines Accounts Mit dem Ausfüllen der Felder und Absenden des Formulars ist der Account erfolgreich erstellt. Bei der Account Erstellung wird dem Nutzer automatisch eine Free Trial Lizenz zugewiesen, welche für 3 Monate gültig ist. Weiter geht es mit dem Öffnen des gerade installierten VRdirect Builders. 8

9 Agenda Anleitungsschritte Erstellung des VR Projekts im VRdirect Builder 10 9

10 Schritt 5 Zurück zum Builder Die Builder Umgebung Mit einem Klick auf Authoring öffnet sich die Umgebung des Builders. 10

11 Schritt 6 Die Builder Umgebung Menüleiste: Hier speichert, öffnet oder exportiert man ein Projekt. Außerdem findet sich hier ein Beispiel Projekt, sowie mehr Informationen über den VRdirect Builder. Detailfenster: Dieses Fenster zeigt das Innere einer Szene. Hier werden interaktive Elemente hinzugefügt und man kann sich per Maus-Drag in der Szene umschauen. Storyboard: Hier werden alle Szenen angezeigt und verwaltet. Neue Szenen und Verbindungen werden hier hinzugefügt. Eigenschaften: Dieses Fenster zeigt alle Eigenschaften des ausgewählten Objektes (z.b. interaktive Elemente oder Szenen). Diese können hier bearbeitet werden. 11

12 Agenda Anleitungsschritte Eine Szene hinzufügen 13 12

13 Schritt 7 Los geht s Die erste Szene Mit einem Klick auf Node legen wir die erste Szene an. Jeder Node repräsentiert eine Szene in der Experience. i Was ist eine Experience? Eine Experience ist das Projekt, das von dem jeweiligen Nutzer im VRdirect Builder gebaut wird. Es besteht aus verschiedenen Szenen und Interaktionen. 13

14 Schritt 8 Hinzufügen von Inhalten Das 360 Bild Außenansicht wird über einen Klick auf Media Path eingefügt. Es gibt eine geringere und höher auflösende Version für Smartphone und VR Brillen. HD Auflösung (1920x960px) = Media Path 4K Auflösung (4096x2080) = High resolution media path Um das Projekt übersichtlich zu halten, kann der Node benannt werden im Feld Name. i Welche Inhalte kann man hinzufügen? Inhalte werden zu einem Node hinzugefügt, damit sich der Nutzer in einer 360 /VR Umgebung befindet. Hierfür können 360 Bilder (PNG oder JPEG, HD und 4K Auflösung) und 360 Videos (MP4, HD und 4K Auflösung) hinzugefügt werden 14

15 Schritt 9 Hinzufügen von Inhalten Eine zweite Szene (Node) wird hinzugefügt. Die bereits ausgeführten Schritte werden wiederholt. Das zweite 360 Bild Flur wird hochgeladen, einmal in HD und einmal in 4K. 15

16 Agenda Anleitungsschritte Eine Transition hinzufügen 17 16

17 Schritt 10 Hinzufügen von Transitions Beide Szenen werden verbunden indem einer der kleinen Kreise angeklickt wird und der hervorkommende Pfeil an den zweiten Kreis ( Flur Node) geknüpft wird. Somit ist eine Transition erstellt worden. Der Vorgang wird wiederholt in die andere Richtung, um eine Transition zurück zu verbinden. i Was ist eine Transition? Transitions verbinden zwei Szenen miteinander. Über eine Transition kann der Nutzer von einer Szene zur nächsten gelangen (siehe Schritt 15). 17

18 Agenda Anleitungsschritte Ein interaktives Element hinzufügen 19 18

19 Schritt 11 Hinzufügen von Interaktiven Elementen Zurück in unserem ersten Node Außenansicht erstellen wir nun einen Szenenwechsel, also das Auslösen einer Transition. Ein Klick auf Interactive Element erstellt ein neues Element in der Node. Dieses kann frei im 360 Raum platziert werden. Über Maus-Drag lässt sich das Innere der Szene drehen und bewegen. Anschließend wird ein Bild ( Navigation_Eingang.png ) über den Mediapath hochgeladen und ein spezifischer Name eingegeben. i Was sind interaktive Elemente? Interaktive Elemente sind Elemente innerhalb einer 360 Szene, die eine Interaktion auslösen können (z.b. das Springen zu einer anderen Szene, ein Ton starten, etc ). 19

20 Schritt 12 Hinzufügen von Interaktiven Elementen Die Größe und Tiefe im 360 Raum des Elements werden über die Eigenschaften (rechts) eingestellt. Hier kann die genaue Platzierung eingestellt werden, sowie die Distanz zum Betrachter (hauptsächlich relevant im VR Modus) und die Größe des interaktiven Elements. 20

21 Schritt 13 Hinzufügen von Interaktiven Elementen Mit einem Klick auf die zweite Szene wechseln wir wieder in die zweite Szene. Auch hier wird ein neues interaktives Element hinzugefügt. Dazu einfach die gezeigte Schritte aus Schritt 11 und 12 wiederholen (Namensgebung, Bild über Media Path hochladen, Platzierung im Raum, gewünschte Größe skalieren). 21

22 Schritt 14 Hinzufügen von Interaktiven Elementen Um das Zurückkehren zum Ausgangspunkt zu ermöglichen, wird das Innere der 360 Szene um ca. 180 gedreht (bis zur Tür der Wohnung). Dort wird ein zweiter Button, der Ausgang, hinzugefügt. Dieser ermöglicht das Verlassen der Wohnung zurück zum Startpunkt. Auch hier erneut Schritte 11 und 12 wiederholen. 22

23 Agenda Anleitungsschritte Ein Interaktions-Event hinzufügen 24 23

24 Schritt 15 Hinzufügen einer Interaktion Um einen Szenenwechsel (Transition) zu ermöglichen wird ein Interaction Event hinzugefügt über das Plus Symbol. Als Interaction type wird Select und als Aktion Trigger Transition ausgewählt. Das beschreibt: Wenn ein User das Element selektiert (also beispielsweise anklickt oder anschaut) wird eine Transition ausgelöst. Der Name der jeweiligen Transition wird im dritten Feld ausgewählt. 24

25 Schritt 16 Hinzufügen einer Interaktion In der ersten Szene wird ebenfalls ein Interaction Event hinzugefügt. Dazu wird das jeweilige interaktive Element ausgewählt (in diesem Fall Button Eingang ) und das Interaction Event wieder über das kleine Plus Symbol hinzugefügt. 25

26 Schritt 17 Hinzufügen von Inhalten Eine dritte Szene (Node), das Wohnzimmer, wird hinzugefügt. Die Szene wird Wohnzimmer benannt und mit der vorherigen Szene in beide Richtungen verlinkt über Transitions. 26

27 Schritt 18 Hinzufügen von Interaktionen In der Node Wohnzimmer wird der Button Flur hinzugefügt - in der Richtung, die zum Flur der Wohnung zeigt. Dieser wird entsprechend benannt und das Interaction Event, welches den Szenenwechsel auslösen soll, wird hinzugefügt - wie bereits in Schritt 11 beschrieben wurde. 27

28 Schritt 19 Hinzufügen einer Interaktion In der zweiten Szene Flur wird der Button Wohnzimmer hinzugefügt, welcher den Nutzer vom Flur ins Wohnzimmer bringen soll. Das Interaction Event mit der Transition, welche in das Wohnzimmer führt, wird hinzugefügt. Hierbei ist zu Beachten den richtigen Transition Namen auszuwählen (im dritten Feld Transition to trigger ), da es nun zwei und nicht nur eine Transition zur Auswahl gibt. 28

29 Zwischenstand Geschafft - so gut wie fertig Alle Nodes sind jetzt miteinander verbunden und man kann von Szene zu Szene springen, sowie wieder zurückkommen. Glückwunsch! Abschließend fügen wir ein einzigartiges Add-On hinzu. 29

30 Schritt 20 Das Kunst Add-on Die dritte Szene, das Wohnzimmer, ist ausgewählt. Ein interaktives Element wird hinzugefügt über das Plus Symbol und an der Position des Bildes an der Wand positioniert. 30

31 Schritt 21 Das Kunst Add-on Ein Bild wird über den Media Path hochgeladen und an der Wand positioniert. Zur Auswahl stehen verschiedene PNGs von Kunstwerken (Andy Warhol, Leonardo da Vinci, Vincent van Gogh). 31

32 Schritt 22 Das Kunst Add-on Hier wird das Bild der Mona Lisa von Leonardo da Vinci als Beispiel benutzt. Der Interactive Element type wird von Image zu Invisible Image geändert, sodass das Bild beim Eintreten in die Wohnzimmer Szene noch versteckt ist. Hierbei muss nicht die erste Transition, sondern die zweite ausgewählt werden. 32

33 Schritt 23 Das Kunst Add-on Die dritte Szene, das Wohnzimmer, ist ausgewählt. Ein weiteres Interactive Element wird hinzugefügt und an der Wand positioniert, schräg unterhalb des Bildes. Der Name wird in Button Mona Lisa geändert, die Distanz und Größe entsprechend eingestellt. Ein Interaction Event wird hinzugefügt mit der Aktion Show Interactive Element und Bild Mona Lisa ausgewählt. Somit wird das Mona Lisa Bild nun angezeigt, sobald der Nutzer den Plus Button in der Szene anschaut. 33

34 Agenda Anleitungsschritte Erste Vorschau des VR Projekts auf Smartphone 35 34

35 Schritt 24 Test des Projekts Smartphone Vorschau Das Projekt kann jetzt auf dem Smartphone getestet werden. Hierfür muss die VRdirect App aus den Appstores installiert werden und der Vorschau Modus (Preview Mode) in der App aktiviert sein (dieser ist unter Settings verfügbar). 35

36 Schritt 25 Test des Projekts Smartphone Vorschau Sowohl der Laptop, an dem der Builder geöffnet ist, als auch das Smartphone, in dem die App geöffnet ist, müssen im gleichen WLAN Netzwerk sein, bevor die Vorschau gestartet wird. Alternativ kann auch ein Hotspot am Smartphone erstellt werden für den Laptop/PC um eine sichere Verbindung zu garantieren. 36

37 Schritt 26 Test des Projekts Smartphone Vorschau Zurück im Builder wird die Vorschau mit dem Button Preview gestartet. Im Pop-up Fenster wird die Vorschau mit einem Klick auf Start begonnen. 37

38 Schritt 27 Test des Projekts Smartphone Vorschau Nachdem der Vorschau Modus im Builder angeschaltet wurde und sich beide Instanzen im gleichen Netzwerk befinden kann die App neu gestartet werden um eine Projektvorschau zu sehen. Nach dem Neustart der App öffnet sich gleich zu Anfang das Preview Mode Fenster. Dort wird in einem der Buttons der jeweilige Laptop/PC Name angezeigt. Sobald man diesen auswählt, öffnet sich der Preview Modus in der App und zeigt eine Vorschau der eben erstellen Experience. 38

39 Agenda Anleitungsschritte Schritte zur Veröffentlichung des VR Projekts 40 39

40 Schritt 28 Veröffentlichung des Projekts Nach der Vorschau und dem Speichern des Projektes ist die fertige Experience bereit veröffentlicht zu werden. Hierfür wird im Startmenü der Management & Publishing Bereich angewählt. Anschließend kann sich mit der bereits registrierten angemeldet werden. 40

41 Hinweis Veröffentlichung des Projekts Hinweis: Das Einloggen im Management & Publishing Teil des Builders wird nur funktionieren, wenn der VRdirect Account auch eine Lizenz besitzt. Bei der Account Erstellung (siehe Schritt 4) wurde automatisch eine Free Trial Lizenz zugewiesen. Falls diese nicht mehr aktiv sein sollte, kann man die Lizenzen im User Portal unter Licenses auswählen. 41

42 Schritt 29 Veröffentlichung des Projekts Im Slot Management & Publihsing Bereich des VRdirect Builders angekommen, erstellt man einen neuen Publishing Slot um die gebaute Experience zu veröffentlichen. Jeder Slot steht für eine Experience, also ein VR Projekt. Um einen neuen Slot hinzuzufügen genügt ein Klick auf Create a new publishing slot. 42

43 Schritt 30 Veröffentlichung des Projekts Im folgenden Fenster werden alle generellen Informationen zum Projekt und dem Ersteller (Autor) eingetragen. Mit einem Klick auf Save information werden Experience Titel, Autor der Experience und Beschreibung der Experience gespeichert. 43

44 Schritt 31 Veröffentlichung des Projekts Im anschließenden Fenster wird das Projekt, sowie ein Vorschaubild (1024px x 542px) hochgeladen. Das abgespeicherte Projekt (.rf360 Datei) wird über den Button Upload Projekt hochgeladen. Das Starten des Uploads wird dann mit einem Klick auf Begin upload ausgelöst. Danach ist das Projekt zum Slot hinzugefügt. 44

45 Schritt 32 Veröffentlichung des Projekts Vor dem Veröffentlichen kann die Experience nochmal mit Preview draft getestet werden. Dort sieht man dann eine Vorschau der Experience mit hochwertiger Qualität des Kontents und Vorschaubild, Titel, Autor, etc. Dieser Schritt kann mit einem Klick auf Close auch übersprungen werden. i Was ist Preview Draft? Der Button Preview Draft öffnet die sogenannte Cloud Preview. Im Gegensatz zu der Local Preview (aus Schritt 24) bekommt man über die Cloud Preview eine Vorschau des Slots in hochwertiger Qualität, mit Titel, Beschreibung, etc. Hier testet man noch ein letztes Mal vor der Veröffentlichung, ob das Projekt so aussieht, wie es aussehen soll. Zu beachten ist, dass der Vorschau Link nur ein einziges Mal funktionieren wird. Er ist also nicht zur Distribution des Projektes gedacht. 45

46 Schritt 33 Veröffentlichung des Projekts Wenn die Cloud Preview erfolgreich war ist das Projekt bereit für die finale Veröffentlichung und Distribution. Mit einem Klick auf den Button Publish ist die Experience sofort verfügbar und kann weltweit geteilt werden. 46

47 Agenda Anleitungsschritte Teilen und Distribution des VR Projekts 48 47

48 Schritt 34 Distribution des Projekts Die Distribution des Projektes erfolgt über das Senden von Links. Die Links zum Distributieren werden unter Settings mit einem Klick auf Generate Link erzeugt, sofern sie noch nicht automatisch generiert wurden. Anschließend erscheint eine URL, ein scanbarer QR Code und ein Experience Code, welche versendet werden können. 48

49 Schritt 35 Distribution des Projekts Die URL kann einfach im Smartphone oder im Laptop Browser geöffnet werden und führt den Nutzer direkt zum erstellten VR Projekt. Der QR Code kann über ein Smartphone gescannt werden und öffnet einen Link, welcher den Nutzer direkt zum erstellten VR Projekt führt. Der 6-stellige Experience Code kann in der VRdirect App in das Suchfeld am Anfang eingegeben werden (bzw. das Suchfeld oben links). Er führt den Nutzer direkt zum erstellten VR Projekt. Hier zum Beispiel: Guide 49

50 Schritt 36 Distribution des Projekts Der erzeugte Embed Code (iframe) kann mittels Copy + Paste zu jeder Webseite hinzugefügt werden. Somit wird die gepublishte Experience durch den Web VR Player in jede Webseite eingebunden. Außerdem kann über die enthaltene URL der Web VR Player direkt im Browser aufgerufen werden. 50

51 Fertig! 51