Als Basis für die Herstellung der WebGL Modelle diente uns die Software Unity(https://unity3d.com/de/get-unity/download). Zwar können mit Unity 3D-Modelle importiert und animiert werden, doch ist Unity selbst keine 3D-Modellierungssoftware. Unity greift dabei auf externe Modellierungssoftware zurück. In diesem Forschungsprojekt wurde dabei Blender verwendet, alternativ hätte zum Beispiel aber auch 3ds Max verwendet werden können. Es werden zwar einige primitive 3D-Grundobjekte zur Verfügung gestellt, doch bilden diese auf keinen Fall die Möglichkeiten einer nativen Anwendung ab. Diese Grundobjekte werden Primitives genannte und enthalten etwa die Abbildung von Kugeln, Zylinder oder Quadern und können für kleine Arbeiten genutzt werden.

Für komplexere 3D-Modelle empfiehlt es sich speziell darauf angepasste Modellierungssoftware zu verwenden. Möchte man zusätzlich zu den reinen Geometriedaten auch Texturen exportieren, um diese schlussendlich in Unity verwenden und zu visualisieren, muss man einen Dateityp verwenden, der diese im Export inkludiert. Da Unity sehr auf die Kompatibilität mit Blender angepasst wurde, kann man in diesem Fall direkt das native Speicherformat von Blender, .blend, verwenden. Alternativ kann man aber auch .obj verwenden, wobei man bei dieser Exportvariante auf zusätzlich benötigte Parameter achten muss, um zu der .obj die benötigte .mtl zu exportieren. Beispielsweise sind „Material Groups“ oder „Textures“ gängige Parameternamen. Nur durch die Kombination einer .obj mit einer .mtl werden auch Texturen gespeichert. Schlussendlich gibt es in manchen Programmen noch die Möglichkeit, diese als .fbx zu exportieren. Dieser Dateityp beinhaltet die Gemoetriedaten und Texturen in einer Datei. Innerhalb dieses Forschungsprojektes wurden innerhalb der verschiedenen Teilprojekte verschiedene Modellierungsprogramme verwendet. Unser Workflow beim Import der verschiedenen Modelle bestand daraus, die verschiedenen Dateitypen zuerst in Blender zu importieren und dann im nativen Format .blend zu speichern, um eine Normalisierung zu erreichen. Für das weitere Vorgehen wurden in Unity dann für die importierten 3D-Modelle .blend verwendet.

Aus den importierten 3D-Modellen konnten wir innerhalb von Unity die Modelle animieren. Dazu wurden für die anzuwendenden Transformationen Scripte in Unity angelegt, die diese innerhalb des Lebenszyklus der Anwendung berechnen. Da in unserer Anwendung keine Kollissionen zwischen 3D-Objekten angedacht sind, wurde die Animierung innerhalb der sogenannten „Game Logic“ durchgeführt. Dadurch kann gewährleistet werden, dass eine Transformation innerhalb einer Aktualisierung eines Frames nur einmal durchgeführt wird.

Zur Steuerung der verschiedenen Blickwinkel auf die 3D-Modelle werden virtuelle Kameras benötigt. Wir haben dabei auf eine sogenannte Track and Dolly Technik zurückgegriffen, die sich mit Hilfe des Plugins Cinemachine einfach in Unity integrieren lässt. Dabei definiert man eine Spur, auf der sich eine Kamera bewegen darf. In unserem Anwendungsfall wird die Blickrichtung dabei abhängig vom derzeitigen Standpunkt der Kamera zum zu betrachtenden 3D-Modell automatisch berechnet.

Zur genaueren Nachverfolgung und dem Aufbau für die Unity-Szene sei an dieser Stelle auf die nachfolgende Workshop-Dokumentation verwiesen.

https://unity3d.com/de/get-unity/download

Unity Hub Installer herunterladen und installieren.

Registration ist notwendig, die Lizenz ist kostenlos.

Version 2019.3.7 f1 mit WebGL Support auswählen.

Beim Unity-Workshop wurde die Version "Unity 2019.4.13f1 (LTS)" verwendet.

Blender wird für die Darstellung der 3D-Modelle benötigt.

https://www.blender.org/download/

Assets sind in Unity ALLE Dateien/Bilder/Sprites/Skripte... die im Projekt verwendet werden. Dafür gibt es im Projektordner einen eigenen Ordner und in Unity eine Assets-Ordner-Hierarchie-Ansicht.

Es gibt auch bereits erstellte Skripte, Texturen usw. von anderen Benutzern im Asset Store.

https://assetstore.unity.com/

Achtung: Manche Assets von anderen Benutzern kosten Geld, bitte darauf achten!

Verlinkung zu Unity automatisch (notfalls über dem Browser zulassen, falls eine Warnmeldung im Browser erscheint)

Empfohlene Assets:

• Standard Assets (Abhängig von jeweiliger Version, z.B.: https://assetstore.unity.com/packages/essentials/asset-packs/standard-assets-for-unity-2018-4-32351)
• Cinemachine (Kameras)
• Polylised - Medieval Desert City (3D-Umgebung verwendet beim Unity Workshop)

Aktuelles Modell: neues (besseres) Modell von TP2 bekommen. Dieses liegt auf MiNAS: ISAC/Projekte/TP4/HiWis/TP2_Foerdbanddaten/3D_Modell/SimEMImportTest.zip

1. GameObject -> 3D Object -> (gewünschtes Objekt auswählen)

Optional: Falls das Objekt komplizierter als eine von Unity gegebene Geometrische Form sein sollte, nutze Blender oder ähnliches. Das Gewünschte Objekt dann einfach in den Assets hinzufügen.

2. Im Inspector gegebenfalls Positionen und Skalierungen des Objektes anpassen
3. Add Component -> Box Collider
4. Box Collider Size anpassen wie benötigt

Physics:

1. Plane für Boden
2. Collider für Plane
3. Für die Maschine: BoxCollider
4. RigidBody zum Festlegen der Masse
5. Assets/PhysicsMaterielNew (Zum Hinzufügen von "Gravity")
6. Zuweisen dieser Eigenschaft zum "Kollidierenden" RigidBody

Wird benötigt um Objekten eine Farbe, mit oder ohne Effekten, z.B. Glas-Effekt, hinzuzufügen.

1. Rechtsklick in Assets und Material auswählen und umbenennen wie gewünscht
2. Im Inspector des Material hinzufügen

1. Bild in Assets hinzufügen
2. Bild an das Objekt mit gedrückter linker Maustaste ziehen um es hinzuzufügen

Achtung: Größe und Breite wird an Objekt angepasst, nicht an das Bild! => Beim Material muss man Tiling angeben (Wie oft es auf der Breite / Länge gezeichnet werden soll)

(Umgesetzt bei Thermometer)

1. Gewünschte Variabel, auf die Zugriff erfolgen sollte, public setzen

2. Im Skript die den Zugriff auf die Variabel benötigt, eine

   private otherScriptName tempScript

   setzen

3. In der Start oder Update Funktion

   tempScript = GameObject.Find("ObjectNameWithTheVariable").GetComponent();

   variable = tempScript.variableNameFromOtherScript;

Hier wird auf ein externes Script aus dem Asset Store zurückgegriffen.

Aus dem Packet "Standard Assets" wird nur benötigt:

1. GameObject UI / Canvas erstellen
2. UI / Button hinzufügen
3. Script unter CrossPlatformInput/Scripts/AxisTouchButton auf Button ziehen
4. "Axis Name" definiert "Variable", die dann ausgelesen werden kann
5. "Axis Value" definiert, was mit der Variable passiert, wenn man klickt (1, -1, ...)
6. Assets / Scripts erstellen
7. Neues Script erstellen (Create C# Script)
8. Script auf Canvas ziehen, wird also ausgeführt, wenn Canvas geladen wird
9. Vorlage anschauen / anpassen

• NextCameraClick.cs

1. GameObject UI / Canvas erstellen
2. Rechtsklick in der Hierarchie -> UI -> Button
3. In der Hierarchy Canvas auswählen
4. Im Inspector, Canvas Scaler (Script) -> UI Scale Mode auf Scale With Screen Size setzen

Skript zum Button:

1. Button in der Hierarchie auswählen
2. Im Inspector, ganz unten, Add Component und nach Event Trigger suchen und hinzufügen
3. Im Event Trigger (Script) dann gewünschte Event Types hinzufügen und Events nach Wünschen Anpassen

Hinweis: Mit Event Triggern kann man Events von Elementen "abgreifen". Sonst hätte man z.B. bei einem Button nur die Möglichkeit "On Click()" zu verwenden. Mit Event Triggern kann man dann auch "Pointer Down / Pointer Up usw." verwenden. Bei Select Object muss immer der Button angegeben werden. Zusätzlich muss man beim Objekt noch das Script aus den Assets hinzufügen (Drag & Drop). Dann kann man unter Buttonscript/Funktion auf im Script hinterlegte public-Funktionen zugreifen.

Um Bilder oder Symbole als Button verwenden zu können, müssen die Bilder/Symbole als Sprite umkonvertiert werden.

1. Bild in den Assets hinzufügen
2. Bild auswählen
3. Im Inspector, Texture Type auf Sprite (2D and UI) auswählen (Änderungs/Konvertierungsmeldung, der beim Speichern oder Klicken anderer Elemente auftritt, bestätigen.)
4. Button auswählen
5. Im Inspector, in Image (Script) den Source Image ändern auf das Gewünschte umkonvertierte Sprite Bild/Symbol

In diesem Workshop geht es darum, zu verstehen, wie man mit Cinemachine Kameras anlegen kann und diese verwenden kann. Durchgeführt wurden in diesem Workshop die darunter folgenden Punkte.

Lerninhalt:

• Kamera
• Track & Dolly
• Buttons auf Canvas verwenden

Auf dem MiNas liegen unter dem Pfad ISAC/Projekte/TP4/HiWis/unity-workshop/ zwei Archive:

• unity-workshop-leer.zip (Nur das leere Projekt + einige Assets)
• unity-workshop_abgeschlossen.zip (Projekt inkl. allen benötigten Assets, Kameras und Skripten, das nach Abschluss des Workshops entsteht)

• Window / Package Manager öffnen
• Cinemachine 2.6.3 installieren

• GameObject Cinemachine erstellen, um Kameras darunter zu erstellen
• Cinemachine / Create Virtual Camera
  • Umgang mit den verschiedenen Perspektiven
• Bei (citadel_base_a am Schloss) platzieren
• Sinnvollen Namen geben (Cam Schloss)
• Farbe beim Inspector
• Mit Rotation im Inspector spielen (Werte eingeben, Ziehen der Werte nach links bzw. rechts)
• citadel_main ansehen, einmal Look At im Inspector auswählen, einmal Look At, indem man das Object reinzieht
• wieso wird beim Filtern nach citadel_main alles grau? => Nur das richtige Objekt ist sichtbar!
• Doppelklick auf citadel_main springt dorthin
• Tracked Object Offset (Zentrieren bei Look At)

• Cinemachine / Create Virtual Camera erstellen
• Cam in der Hierarchie unterordnen
• Priorität, wenn notwendig, erhöhen
• Follow boat_02 (5)
• Look At sentinel_tower_b
• Tracked Objects Offs Z
• Boot auf die andere Seite des Hafens fahren
• W ... Move
• E ... Rotieren

• Dolly Cart Boot
• Create Dolly Track with Cart
  • Cinemachine / Dolly Cart Boot
  • Cinemachine / Dolly Track Boot
• Dolly Track Wegpunkte erstellen, Route definieren
• Dolly Cart Position Units auf Normalized (warum)
  • Path Units: Pro Wegpunkte 1
  • Distance: X/Y/Z Werte
  • Normalized: 0 bis 1
• Boot in DoolyCart unterordnen
• Position / Rotation anpassen
• Camera für das Boot erstellen
• Position / Rotation anpassen
• Lookat sentinel_tower_b
• Camera bewegt sich erst mit, wenn sie im Cart ist!

• Cinemachine / Dolly Camera with Track
• Pfad um den Brunnen vor die Türe erstellen
• LookAt Brunnen (fountain_a)
• Wir wollen jetzt aber dynamisch zwischen Brunnen und Tür wechseln
• Cinemachine / Dolly Camera with Track erstellen
• Zwischen Brunnen und Türe
• LookAt Brunnen auf die "Aim Kamera"
• "Verfolgt" die eigentliche Kamera (Follow)
• Body / Auto Dolly aktivieren