Funktionen und M¨oglichkeiten von Blend4Web zur Visualisierung im Bereich des systematischen Messebaus und der Messebauplanung Studiengang Medieninformatik Bachelorarbeit vorgelegt von Jannik S¨orensen geb. in Vechta durchgefuhrt¨ an der Technischen Hochschule Mittelhessen, Friedberg und in der Firma omnia concepts, Bad Homburg vor der H¨ohe Referent der Arbeit: Prof. Dr. Cornelius Malerczyk Korreferent der Arbeit: Hans Christian Arlt, M.Sc. Betreuer bei omnia concepts: F. Martin Gerhard Friedberg, 2019 Danksagung An dieser Stelle m¨ochte ich mich bei allen Menschen bedanken, welche mir bei dieser Ar- beit zur Seite standen. Allen voran der Firma omnia concepts, welche mir nicht nur bei der Themenfindung geholfen haben, sondern auch mir die n¨otige Software zur Verfugung¨ gestellt haben. Ein besonderer Dank gilt hier noch einmal meinem Betreuer F. Martin Ger- hard, welcher sich ebenfalls durch s¨amtliche Blend4Web Informationen gewuhlt¨ und diese mit mir geteilt hat. Des Weiteren m¨ochte ich auch meinem Referenten Prof. Dr. Cornelius Malerczyk danken, welcher mir gerade bei der Struktur dieser Arbeit sehr weiter geholfen hat. Selbstverst¨andlich gilt mein Dank auch besonders meiner Familie die mich seit meinem Abitur kontinuierlich Unterstutzt¨ haben und mir somit dieses Studium gar erst erm¨oglichten. Wirklich vielen, vielen Dank. i Selbstst¨andigkeitserkl¨arung Ich erkl¨are, dass ich die eingereichte Bachelorarbeit selbstst¨andig und ohne fremde Hilfe verfasst, andere als die von mir angegebenen Quellen und Hilfsmittel nicht benutzt und die den benutzten Werken w¨ortlich oder inhaltlich entnommenen Stellen als solche kenntlich gemacht habe. Friedberg, Mai 2019 Jannik S¨orensen iii Inhaltsverzeichnis Danksagungi Selbstst¨andigkeitserkl¨arung iii Inhaltsverzeichnisv Abbildungsverzeichnis vii 1 Einleitung1 1.1 Motivation................................... 1 1.2 Problemstellung................................ 2 1.3 Zielsetzung................................... 3 1.4 Aufbau der Arbeit ............................... 3 1.5 Zusammenfassung ............................... 4 2 Stand der Technik 7 2.1 Planung .................................... 7 2.2 Planung im Messebau ............................. 8 2.2.1 Panoramic Studio 3D ......................... 10 2.2.2 SketchUp/Aluvision .......................... 13 2.3 Konfiguratoren ................................. 14 2.3.1 Blickfang Konfigurator von RedPlant . 16 2.3.2 Konfiguratoren mit Blend4Web .................... 16 3 Grundlagen 19 3.1 Messebau ................................... 19 3.1.1 Konventioneller Messestand ...................... 24 3.1.2 Modularer Messestand ........................ 25 3.1.3 Mobiler Messestand .......................... 25 3.2 WebGL ..................................... 27 3.3 Blend4Web .................................. 28 3.3.1 Engine Features ............................ 28 Materials ................................ 28 Animation ............................... 29 v Inhaltsverzeichnis Physics................................. 30 Sound ................................. 32 Logic Editor und Scripting ...................... 33 3.4 Blender ..................................... 34 3.4.1 User Interface ............................. 35 3.4.2 Editoren ................................ 35 3.4.3 Modeling ................................ 37 4 Anforderungs- und Vorlagenanalyse 39 4.1 Anwendungsbereich .............................. 39 4.2 Abh¨angigkeiten von Systemherstellern .................... 39 4.3 Konfigurationsm¨oglichkeiten von Messest¨anden . 40 4.4 Blend4Web Referenzmaterial und Vorlagen . 41 4.4.1 Cartoon Interior ............................ 41 4.4.2 Code Snippets ............................. 44 4.4.3 Demos Interactivity - Inherit Material . 44 5 Umsetzung Prototyp 49 5.1 Vorbereitung der Szenen und Objekte .................... 49 5.2 Implementierung der Logik .......................... 51 5.2.1 Szenenwechsel ............................. 51 5.2.2 Grafikwechsel ............................. 51 5.2.3 Objektmanagement .......................... 52 6 Ergebnisse 57 6.1 Ergebnisse fur¨ den Bereich der Visualisierung . 57 6.2 Ergebnisse bei der Umsetzung durch den Logic Editor . 57 6.3 Ergebnisse durch die Umsetzung mit Hilfe der JavaScript-API . 58 6.4 Ungel¨oste Probleme .............................. 59 7 Zusammenfassung und Ausblick 61 A HTML-Code der Startszene 63 B JavaScript Code der Startszene 65 C CSS Code der Startszene 77 Literaturverzeichnis 87 vi Abbildungsverzeichnis 1.1 Branchenkonjunktur der befragten Unternehmen................. 1 1.2 Mercedes Benz Markenauftritt Messestand Gestaltung IAA 2017........ 2 2.1 3D Weichgewebepr¨adikation nach simulierter Knochenverlagerung....... 8 2.2 3D Modellierung von Infostrukturbaumaßnahmen als Grundlage einer integrier- ten digitalen Planung und Ausfuhrung¨ ...................... 9 2.3 Black&Decker 16m2 Reihenstand Visualisierung................. 10 2.4 Black&Decker 16m2 Reihenstand Grundriss ................... 11 2.5 Panoramic H-Line................................. 11 2.6 PS3D Voreinstellungen .............................. 12 2.7 PS3D Messestandgestaltung ........................... 12 2.8 PS3D 3D Ansicht ................................. 13 2.9 Mobiliar Panoramic Studio 3D .......................... 13 2.10 Menuleiste¨ von Aluvision in SketchUp ...................... 14 2.11 Aluvision Sammlung in SketchUp ......................... 14 2.12 Ansammlung fertiger Objekte von Aluvision in SketchUp . 15 2.13 Snapping Tool von Aluvision in SketchUp .................... 15 2.14 Konfigurator fur¨ Mercedes CC 220 d T.Modell . 16 2.15 Blickfang Messebau Konfigurator ......................... 17 2.16 Brillenkonfigurator von Resch. Manufaktur-Sehen . 17 2.17 Wanzl Einkaufswagen Konfigurator ........................ 18 3.1 ausstellungssysteme ................................ 20 3.2 StudieMesseBedeutung .............................. 20 3.3 Beispiel Hallenplan mit Grundarten von Messest¨anden . 21 3.4 Beispiel: Kopfstand ................................ 22 3.5 Beispiel: Eckstand ................................. 22 3.6 Beispiel Reihenstand ................................ 23 3.7 Beispiel Inselstand ................................. 23 3.8 Ruckseite¨ eines Doppelstockes in konventioneller Bauweise . 24 3.9 ISE Amsterdamm 2019 Aluvision LED-Tiles ................... 26 3.10 Flexi-Line Beispiel ................................. 26 3.11 Blend4Web SDK mit Zugang zu WebGL ..................... 27 vii Abbildungsverzeichnis 3.12 Transparenz Ubersicht¨ ............................... 29 3.13 Vertex Animation Beispiel............................. 30 3.14 Physics Panel Dynamic.............................. 31 3.15 Physics Constraints................................ 32 3.16 Einstellungen der Audioquelle ........................... 33 3.17 Beispiel: Logic Editor ............................... 34 3.18 Standard Interface von Blender .......................... 35 3.19 Der Editor Type Selector ............................. 36 3.20 Der Graph Editor von Blender .......................... 37 4.1 B4W Project Manager .............................. 42 4.2 3D Szene Cartoon Interior ............................ 42 4.3 Dynamisches Laden JavaScript Code ....................... 43 4.4 Beispiele Code Snippets .............................. 45 4.5 Code Snippets Image Change Beispiel ...................... 46 4.6 Code Snippets Code anzeigen lassen ....................... 46 4.7 Inherit Material NodeTree ............................. 47 4.8 Inherit Material Szene ............................... 47 5.1 N¨otige Einstellungen fur¨ Interaktion ....................... 50 5.2 Aktivieren der Physik fur¨ Kollisionsabfrage .................... 50 5.3 Aufruf Szenen in HTML-Datei .......................... 51 5.4 Buttons zum Szenenwechsel ........................... 52 5.5 Parenting von Objekten an die Kamera in Blender . 52 5.6 Select Funktion um das Ausw¨ahlen der W¨ande zu erm¨oglichen . 53 5.7 Einblenden der Grafikm¨oglichkeiten fur¨ die ausgew¨ahlte Wand . 53 5.8 Funktion fur¨ den Wechsel der Grafiken ...................... 54 5.9 Gesamt NodeTree fur¨ Grafikwechsel von Lorenz 4x3m Reihenstand . 54 5.10 Laden von Objekten ................................ 55 5.11 Spawnerposition laden ............................... 55 5.12 Programmcode fur¨ das Ersetzen von Objekten . 56 6.1 Visualisierung eines Messestandes in Blend4Web . 58 6.2 Buttons in der Szene zum Wechseln der Grafiken in zweier P¨archen . 59 6.3 Objekte in der Szene mit den unterschiedlichen Buttons . 60 viii Kapitel 1 Einleitung Der Messebau ist, wie viele andere Bereiche, stetig im Wandel und muss deswegen auch kontinuierlich weiterentwickelt werden.[ref16c] In dieser Arbeit wird sich aufgrund dessen mit der Weiterentwicklung von M¨oglichkeiten zur Visualisierung und die Vereinfachung der Planung mit Hilfe von Blend4Web besch¨aftigt. 1.1 Motivation Messen sind in allen Bereichen ein Bestandteil der Firmen fur¨ den Kundenkontakt und der Vermarktung ihrer Dienstleistungen oder Produkte. Neben den großen Messehallen und Ausstellungen gibt es noch weitere Veranstaltungsorte, wie Firmenevents, Tagungen oder Kongresse, an denen Messest¨ande aufgebaut werden. Eine ungef¨ahre Ubersicht¨ der Vertei- lung bietet Abbildung 1.1. Große bekannte Messen, wie zum Beispiel der IAA1 oder auch die Gamescom, sind zum gr¨oßten Teil mit konventionellen Messest¨anden umgesetzt (Beispiel siehe Abbildung: 1.2). Diese Messest¨ande werden jedes mal erneut geplant, konstruiert, her- gestellt und aufgebaut, da die Firmen immer wieder