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 neue Marken, Design¨anderungen oder

1 Internationale Automobil-Ausstellung

Abbildung 1.1: Branchenkonjunktur der befragten Unternehmen, Quelle: [ref16b] (zuletzt Aufgerufen: 06.07.19)

1 1. Einleitung

Abbildung 1.2: Mercedes Benz Markenauftritt Messestand Gestaltung IAA 2017, Quelle: https://www.markgraph.de/mercedes-benz-markenauftritt-iaa-2017-dialog- plattform/(zuletzt abgerufen: 27.06.2019)

einfach nur andere Konzepte im Auftreten umsetzen wollen. Es gibt neben diesen großen Messen allerdings noch, wie bereits erw¨ahnt, einige kleinere Veranstaltungen fur¨ den Einsatz von Messest¨anden, welche h¨aufig auch Hausmessen genannt werden. Bei der großen Anzahl dieser Messen w¨are es mit sehr viel Aufwand und hohen Kosten verbunden alles mit kon- ventionellen Messest¨anden abzuwickeln zu wollen, weswegen modulare Messestandsysteme von unterschiedlichen Herstellern entwickelt wurden. Diese Systeme erm¨oglichen es, Mes- sest¨ande beliebig anzupassen, Ver¨anderungen vorzunehmen oder diese zu erweitern. Dennoch ist es m¨oglich diese individuell zu gestalten und einen hochwertigen Gesamteindruck zu bie- ten, obwohl diese Systeme allen zur Verfugung¨ stehen. Fur¨ die Planung werden dafur¨ im Vorfeld Visualisierungen der Messest¨ande angefertigt, um die Produktionskosten weiter zu senken. Dabei kann es sich entweder um einfache Wandabwicklungen oder um hochwertigere 3D Renderings handeln, welche naturlich¨ den Vorteil einer r¨aumlichen Darstellung bieten. Zus¨atzlich k¨onnen beide Varianten, fur¨ den am Ende besch¨aftigten Dienstleister, als bildliche Vorlage fur¨ den Aufbau durch das engagierte Montageteam dienen.

1.2 Problemstellung

Das gr¨oßte Problem bei der Visualisierung und Planung von Messest¨anden liegt darin, dass diese haupts¨achlich spezielle Software, wie Bildbearbeitungs- oder 3D-Programme, ben¨oti- gen. Unabh¨angig ob es sich dabei um eine Wandabwicklung oder ein Rendering handelt. Dafur¨ wird dann dementsprechend Personal ben¨otigt, welches mit diesen Programmen um-

2 1.3. Zielsetzung zugehen weiß oder entsprechend geschult wurde. Aus diesem Grund werden h¨aufig Agentu- ren fur¨ die Planung und das Design dieser Messest¨ande beauftragt. Dies geschieht allerdings auch, wenn nur kleine Anderungen¨ anstehen oder auch wenn nur einmal geschaut werden soll wie es zum Beispiel aussieht, wenn der Tisch an einer anderen Stelle steht. Ein weiteres Problem ist, dass selbst wenn Agenturen sich dem Ganzen annehmen, sowohl Renderings als auch die Wandabwicklungen einiges an Zeit ben¨otigen, bis diese erstellt sind. Das gr¨oßte Problem dabei ist wenn ein System fur¨ mehrere Standgr¨oßen entwickelt wurde und Ande-¨ rungen am Design notwendig sind, denn dann wird dies bei allen Kombinationsm¨oglichkeiten umgesetzt werden mussen¨ und wurde¨ bedeuten, dass alle Visualisierungen eine Aktualisie- rung ben¨otigen.

1.3 Zielsetzung

Aus den in Kapitel 1.2 aufgefuhrten¨ Grunden¨ muss man sich mit der Weiterentwicklung von Darstellungs- und Planungsm¨oglichkeiten fur¨ Messest¨ande befassen. Die Idee ist, diese Vorg¨ange ins Web zu verlagern und somit zum einen ohne die Verwendung von spezieller Software oder speziell geschulten Personal auf Seiten der Nutzer auszukommen, als auch ei- ne einfachere und schnellere Umsetzung von Anderungen¨ bei bereits bestehenden Systemen zu bieten. Im laufe der Arbeit soll bewiesen werden, dass Blend4Web die n¨otigen Mittel zur Umsetzung bietet, um die Notwendigkeit der bisherigen Software zur verringern, wenn nicht sogar komplett abzul¨osen, und die Planung somit zu vereinfachen.

1.4 Aufbau der Arbeit

Die Einleitung dient dazu einen groben Uberblick¨ uber¨ die Arbeit zu verschaffen und erkl¨art dem Leser wieso es Wert ist das Thema zu bearbeiten, welche ungel¨osten Probleme exi- stieren und was in der Arbeit getan wird um diese Probleme anzugehen und im Idealfall zu l¨osen. Zus¨atzlich ist noch eine ein- bis zweiseitige Zusammenfassung enthalten. Das zweite Kapitel befasst sich mit dem aktuellem Stand der Technik. Dem Leser wird im Falle dieser Arbeit die aktuelle Vorgehensweise fur¨ Planungen mit 3D Software nahegelegt und der Ablauf erl¨autert. Hauptaugenmerk im Messebau liegt dabei auf Messebausysteme, wenn auch Planungen fur¨ konventionelle Messest¨ande ben¨otigt wird. Aus diesem Grund sind die verwendbaren Programme auf diesen Bereich beschr¨ankt. Ein letzter Blick wird auf g¨angige Konfiguratoren geworfen, unter anderem auf jene, welche bereits mit Blend4Web umgesetzt wurden. Im Grundlagenkapitel, dem insgesamt Dritten, werden die unterschiedlichen Messebauarten genauer erl¨autert. Um einen Uberblick¨ zu verschaffen muss ebenso erkl¨art werden, wieso es uberhaupt¨ modulare Systeme gibt und in welchen Bereichen diese Anwendung finden. Neben den Grundlagen zum Messebau wird zus¨atzlich noch die Grundlage der verwendeten Tech- niken erl¨autert. Angefangen mit WebGL welche als Javascript-API es erm¨oglicht interaktive 3D und 2D Grafiken mittels Webbrowsern darzustellen. Da sich diese Arbeit auf das Fra-

3 1. Einleitung

mework Blend4Web und der Software Blender bezieht, werden die vorhandenen Funktionen ebenfalls erkl¨art. Der Methodik Abschnitt besteht in dieser Arbeit aus 2 Kapiteln. Im ersten wird sich da- mit befasst, welche Anforderungen an einen Konfigurator fur¨ modulare Messest¨ande gestellt werden. Um dies zu Untersuchen werden vereinzelnd Systeme unterschiedlicher Herstel- ler miteinander Verglichen und auf Gemeinsamkeiten beziehungsweise Unterschiede erfasst. Nachdem dies geschehen ist, werden die Konfigurationsm¨oglichkeiten eines Messestandes un- tersucht. Dies ist wiederum von dem Materialien der Systemhersteller abh¨angig, weswegen dieser Abschnitt auf den vorherigen aufbaut. Im Anschluss werden die verfugbaren¨ Beispiele von Blend4Web untersucht und m¨ogliche Verwendungszwecke von Funktionen dargestellt. Im zweiten Teil der Methodik, dem insgesamt funften¨ der Arbeit, wird nun ein Prototyp eines Konfigurator fur¨ Messebausysteme umgesetzt. Dafur¨ wird ein einfaches User-Interface erstellt, welches die Bedienung fur¨ den Anwender erleichtern soll. Unter anderem wird hier erkl¨art wie die Steuerung funktionieren k¨onnte. Mit diesem sind auch die m¨oglichen Kon- figurationen verknupft¨ welche im vorherigen Kapitel ausgearbeitet wurden. Zu guter Letzt sind auch die in laufe dieser Arbeit ver¨anderten Programmcodes und erstellten Objekte hier zu finden. Also wie diese Vorbereitet sein mussen,¨ um im Konfigurator zu funktionieren. Nach der Methodik folgt das Kapitel mit den Ergebnissen dieser Arbeit. Dabei gilt es dar- zustellen, welche M¨oglichkeiten zur L¨osung des in der Einleitung gestellten Problems, mit Hilfe des Prototypen, erzielt werden konnten. Das finale Kapitel beinhaltet noch eine Zusammenfassung der gesamten Arbeit und ein Ausblick auf m¨ogliche weitere Arbeiten und nicht bearbeitete Teile des Problems, inklusive erster Ans¨atze zur L¨osung. Im Anhang befinden sich verwendeter Programmcode, Plugin Daten oder auch gr¨oßere Tex- te zum Nachlesen.

1.5 Zusammenfassung

Nun gibt es noch eine Zusammenfassung der Arbeit, um dem Leser so schnell herausfinden zu lassen, ob diese fur¨ ihn interessant w¨are und somit eine n¨ahere Besch¨aftigung zielfuhrend¨ w¨are oder nicht. Zum Start dieser Arbeit ging es darum die Probleme zu identifizieren, welche in der aktuellen Planung von Messest¨anden existieren und wieso diese angegangen werden mussen.¨ An dieser Stelle wurde festgestellt, dass die Planung große Mengen an Ressourcen ben¨otigt. Dies gilt vor allem in den Bereichen der Zeit und des Knowhows. Um den Aufwand zu verringern war dann die Idee mit Hilfe eines Konfigurators den Kunden eine M¨oglichkeit zu geben deren Messest¨ande anzupassen und so die Ideen, unter gewissen Einschr¨ankungen, selbst umsetzen zu lassen. Um genauer die Probleme zu erl¨autern werden in dieser Arbeit die aktuell verwendeten Planungsm¨oglichkeiten fur¨ Messest¨ande aufgezeigt. Damit der Leser auch weiß worum es sich bei der Planung fur¨ Messest¨ande handelt, muss dieser auch die Grundlagen dafur¨ besitzen. Aus diesem Grund sind sowohl fur¨ Messest¨ande selbst, als auch fur¨ spezielle Varianten eben dieser in den Grundlagen vermerkt. Fur¨ die Umsetzung eines Konfigurators werden mehrere Beispiele dargestellt, unter anderem ein bereits entwickelter

4 1.5. Zusammenfassung

Konfigurator fur¨ Messest¨ande von RedPlant fur¨ die Firma Blickfang. Dieser wurde allerdings eigenh¨andig von Entwicklern programmiert und den Wunschen¨ des Kunden angepasst, wes- wegen zus¨atzlich einige Konfiguratoren, welche mit der gewunschten¨ Software Blend4Web umgesetzt wurde, ebenfalls vorgestellt werden. Da die Arbeit auf Blender und Blend4Web basiert, gibt es einige Grundlagen fur¨ eben diese. Zus¨atzlich wird die Technologie, welche die Darstellung im Web realisiert, vorgestellt. Diese ist WebGL. Um einen Uberblick¨ daruber¨ zu erhalten, was ein Konfigurator fur¨ Messest¨ande liefern sollte, wird eine Analyse dieser Anforderungen durchgefuhrt.¨ Dabei stellen sich zwei Hauptmerkmale heraus. Zum einen die m¨oglichen Konfigurationen, welche dieser bieten sollte und zum anderen Abh¨angigkeiten von den Herstellern solcher Messesysteme. Zus¨atzlich werden die Beispiele, welche Blend4Web zur Verfugung¨ stellt, auf m¨ogliche Funktionen zur Umsetzung eines Messestandkonfigura- tors untersucht. Dort gibt es drei interessante Optionen, welche sowohl zum einen Objekte durchs dynamische Laden in die Szene bringen k¨onnen und zum anderen M¨oglichkeiten um Grafiken auf den unterschiedlichen Modulen ersetzen zu k¨onnen. Im folgenden geht es dann an die Umsetzung von eben diesen Konfigurator, und dessen umgesetzte Funktio- nen zu pr¨asentieren. Dabei wird der Grafikwechsel allein durch den Logic Editor umgesetzt, w¨ahrend die Objekte, wie vorher erw¨ahnt mit einer programmiertechnischen L¨osung, dem dynamischen Laden von Objekten, in Blend4Web realisiert werden. Weitere M¨oglichkeiten diesen Konfigurator zu erweitern sind ebenfalls erw¨ahnt. Abschließend wird gekl¨art ob die Anfangs gestellten Probleme mit Hilfe des Konfigurators beantwortet beziehungsweise gel¨ost werden konnten. Also ob es durch Blender und Blend4Web m¨oglich ist die Visualisierung und Planung von Messest¨anden zu verbessern oder vereinfachen, welches zum Teil gelingt. Eine Verbesserung im Bereich der Visualisierung ist dank Zeitersparnis erreicht, fur¨ Planungen mit Hilfe eines Konfigurators besteht dieser Vorteil eher weniger, da der Aufwand fur¨ die Erstellung ebenfalls sehr hoch ist und ein gewisses Maß an Knowhow ben¨otigt. Auch ein Ausblick uber¨ m¨ogliche weitere Untersuchungen wird get¨atigt.

5

Kapitel 2

Stand der Technik

In diesem Kapitel gilt es erst einmal einen Uberblick¨ daruber¨ zu verschaffen, in welchen Bereichen die computergestutzte¨ Planung uberhaupt¨ verwendet wird, in wie weit dort 3D Modelle angewandt werden und welchen Vorteil man dadurch generieren konnte. Anschlie- ßend wird dann das aktuelle Planungsverfahren im modularen Messebau erl¨autert und erkl¨art wie dieses vonstatten geht. Dafur¨ werden auch zwei Softwarem¨oglichkeiten pr¨asentiert, wel- che im Falle von PS3D1 direkt von einem Systemhersteller zur Verfugung¨ gestellt wird oder im Falle von SketchUp welches mit einem Plugin von Aluvision2 ausgestattet wurde. Neben den Planungsm¨oglichkeiten wird auch der aktuelle Stand von Konfiguratoren dargestellt. Dafur¨ wird ein Blick auf einen bereits erstellten Konfigurator von Blickfang3 geworfen. Um zu zeigen, dass Blend4Web fur¨ das Thema dieser Arbeit geeignet ist, werden auch einige durch dieses Framework umgesetzte Konfiguratoren vorgestellt.

2.1 Planung

Die Planung mit der Hilfe von 3D kann durch unterschiedliche Weisen stattfinden. Zum einen w¨are da spezielle Software welche detaillierte Planungen erm¨oglichen und preislich stark variieren k¨onnen und fur¨ die Bedienung ein gewisses Knowhow erfordern. Fur¨ den Endkunden sind eher sogenannte Konfiguratoren gedacht, welche im Gegensatz zu profes- sionellen Software, meist auch ohne Vorkenntnisse bedienbar sind. Dafur¨ muss man in den meisten F¨allen Abstriche bei den Freiheit in der Planung hinnehmen, da diese meistens nur fur¨ einen Bereich(Kuche,¨ Schaltschrank, Boot, etc.) konzipiert wurden. Drei große Bereiche in welchen die Planung mit 3D umgesetzt wird w¨aren die Automobilindustrie, Architektur und Medizin. Was vielen technisch Interessierten auch bekannt sein sollte, w¨are die Ferti- gung, wo zum Beispiel viel mit CAD4-Programmen gearbeitet wird. In der Medizin werden haupts¨achlich 3D Modelle von Lebewesen dargestellt, welche gerade in der Chirurgie die

1Panoramic Studio 3D 2https://www.aluvision.com/de 3https://konfigurator.blickfang.de/ 4computer-aided design

7 2. Stand der Technik

Abbildung 2.1: 3D Weichgewebepr¨adikation nach simulierter Knochenverlagerung, Quelle: [EGLM99] (zuletzt Aufgerufen: 28.06.19)

Anwendung finden.[EGLM99] Somit k¨onnen zum Beispiel mit Hilfe von 3D Bildern der Kno- chen kunstliche¨ Teile passgenau hergestellt werden, nachdem diese vorher geplant wurden. Einige sind sogar mit Hilfe von 3D Druckern gedruckt worden.[HEP+99] In der Architektur werden gerade Inneneinrichtungen mit 3D Software geplant. Naturlich¨ ist dies auch im Bauwesen m¨oglich, allerdings gibt es dort auch Bereiche, in denen nach wie vor mit 2D-Zeichnungen geplant wird. Diese beinhalten Ansichten, Grundrisse und Schnitte des Bauwerkes. Einer der beiden Hauptgrunde¨ w¨aren, dass eine rechtliche Verbindlichkeit fur¨ Entwurfs- und Auftragspl¨ane existiert. Der andere weitaus trivialere Grund ist, dass schlicht und einfach keine 3D Visualisierungen auf Baustellen erstellt werden k¨onnen, weswegen haupts¨achlich gedruckte Baupl¨ane als Grundlage dienen.[BBE+11] Es ist dennoch m¨oglich im Vorfeld ein grobes Modell mit 3D Software zu entwickeln, welcher als Prototyp dienen kann. Die Vorteile einer kompletten 3D-Modellierung auf Seite der Planung, w¨aren unter an- derem eine gesicherte Konsistenz bei den sp¨ateren Ansichten oder Schnitten des Bauwerkes. Zum anderen k¨onnte dies auch geometrische und semantische Konflikte leichter erkennen lassen, da alle Informationen in einem Modell enthalten sein k¨onnen. Zus¨atzlich k¨onnten auch Simulationen die Planung vereinfachen, da diese dann Visuell darstellbar w¨aren und, abh¨angig vom Ersteller der Simulation, Fehler minimiert werden k¨onnten.

2.2 Planung im Messebau

Der wichtigste Punkt fur¨ den einen Messestand ist die vorhandene Fl¨ache, welche einem die Messe zur Verfugung¨ stellt. Abh¨angig davon kann in darauf folgend mit der Planung fur¨ den Messestand begonnen werden. W¨ahrend sich konventionelle Messebauer genau an die

8 2.2. Planung im Messebau

Abbildung 2.2: 3D Modellierung von Infostrukturbaumaßnahmen als Grundlage einer integrierten digitalen Planung und Ausfuhrung,¨ Quelle: [BBE+11] (zuletzt Aufgerufen: 18.07.19)

Vorgaben der Messe halten k¨onnen, haben Messesysteme noch den Nachteil, dass die diese einigermaßen feste Gr¨oßen fur¨ die Rahmenmodule besitzen. Zus¨atzlich ist wichtig hier zu be- achten, dass wenn Ecks¨aulen im Einsatz sind dennoch die Maße eingehalten werden mussen.¨ Ein kleines Beispiel: Der Messestand hat eine verfugbare¨ Fl¨ache von drei mal drei Metern und ein Rahmen-Modul hat die Maße von 992mm. Nun wurde¨ man naturlich¨ meinen, dass drei 992er Module verwendet werden sollten, allerdings soll der Stand ein Reihenstand (siehe Kapitel3) sein. Dies bedeutet es k ¨onnten zwei Ecks¨aulen hinzukommen um die Seitenw¨ande des Standes aufzubauen und diese besitzen eine Dicke von 62mm. Daraus ergibt sich: 992mm + 992mm + 992mm + 62mm + 62mm = 3100mm Insgesamt wurde¨ also eine Gesamtbreite von 3,1m auf einer verfugbaren¨ Fl¨ache von 3x3m stehen, was nicht umsetzbar ist und man die Planung anpassen musste,¨ indem man zum Beispiel ein 496mm Wandmodul statt eines 992mm Moduls verwendet. Man ist also nicht nur Abh¨angig von Angaben der Messe, sondern auch von jeweils verwendeten System. Neben den Konstruktionen mussen¨ im Messebau auch die Pr¨asentation des Ausstellers geplant werden. Dafur¨ k¨onnte man zum Beispiel Grafiken in die Rahmenmodule platzieren oder mit Hilfe von Werbefl¨achen und Leuchtk¨asten Marken oder Produkte bewerben. H¨aufig wird dies zwar vom Aussteller selbst ubernommen,¨ allerdings muss diesem dennoch mitgeteilt werden wie viel Werbefl¨ache ihm zur Verfugung¨ steht. Neben den optischen Bereicherungen fur¨ den Messestand mussen¨ auch Messem¨obel auf dem Stand verteilt werden. In den meisten F¨allen sind zumindest ein Besprechungspunkt mit gegebenenfalls Sitzgelegenheiten vorhanden. In den meisten F¨allen werden auf einem modularen Messestand nicht alle Objekte in die Szene modelliert, da die Planungszeit dafur¨ meist nur 1-2 Stunden betr¨agt. Konventionelle St¨ande werden meist komplett Visualisiert, da dort die Kosten sowieso weitaus h¨oher sind und die Planung detaillierter Ausfallen muss, da der Stand dann sowieso komplett frei gestaltbar ist. Die Planung wird von zwei Partien ben¨otigt. Zum einen w¨are da der Aussteller, damit dieser

9 2. Stand der Technik

Abbildung 2.3: Black&Decker 16m2 Reihenstand Visualisierung

sich ein Bild von seinem Messestand machen kann. Dafur¨ werden zum einen Visualisierungen ben¨otigt und zum anderen ein Grundriss, mit welchem sich der Aussteller die Dimension seines Standes vors Auge fuhren¨ kann. Die andere Partei w¨are der beauftragte Messebauer, welcher den Stand am Ende auf der Messe aufbaut. Fur¨ ihn sind neben den bereits genannten auch eine Stuckliste¨ der ben¨otigten Materialien wichtig, als auch eine Montage Anleitung, welche ihm zeigt wie der Stand aufgebaut wird.

2.2.1 Panoramic Studio 3D Panoramic Studio 3D (kurz: PS3D) ist eine Planungssoftware fur¨ Messest¨ande vom Her- steller Panoramic5. Diese Software erm¨oglicht es alle von Panoramic verfugbaren¨ Systeme und Objekte fur¨ einen Messestand zu planen. Der wichtigste Punkt ist dabei die Gr¨oße des Messestandes zu wissen, da diese die Planungsfl¨ache vorgibt. Nachdem diese ausgew¨ahlt wurde, k¨onnen die Objekte auf der Fl¨ache frei platziert werden. Wichtig ist hierbei aller- dings zu beachten, dass hier keine Uberschneidungen¨ erkannt werden, es wird also nicht gewarnt oder mitgeteilt, wenn zum Beispiel der Stuhl im Tisch steht. Die Konstruktion des Messestandes wird ausschließlich in der 2D Ansicht (siehe Abbildung 2.7) erfolgen, da im 3D Menu¨ sich keine Objekte verschieben geschweige denn uberhaupt¨ erst ausw¨ahlen lassen. Letztere ist also ausschließlich fur¨ die Visualisierung der einzelnen Ansichten zust¨andig (siehe Abbildung 2.8). PS3D bietet zus¨atzlich zu den bisher genannten noch eine Bauteileliste in welcher alle verwendeten Objekte hinterlegt sind, sowohl mit ihrer Anzahl, als auch mit dem fur¨ diese Objekte eingestellten Preis. Eine Logik im Hintergrund sorgt zus¨atzlich dafur,¨ dass die notwendigen Verbinder fur¨ die einzelnen Rahmen ebenfalls in dieser Liste berucksichtigt¨ werden. Zus¨atzlich bietet PS3D auch einen Export als 3ds-Datei, um das Modell auch in anderen g¨angigen 3D Programmen zu verwenden. Dies ist vor allem dann nutzlich,¨ wenn Objekte verwendet werden sollen, welche sich nicht in der Panoramic Datenbank (Abbildung

5http://www.panoramic-display.com/de/panoramic-h-line.html

10 2.2. Planung im Messebau

Abbildung 2.4: Black&Decker 16m2 Reihenstand Grundriss

Abbildung 2.5: Panoramic H-Line, Quelle: http://www.panoramic-display.com/de/ (zu- letzt Aufgerufen: 18.07.2019)

11 2. Stand der Technik

Abbildung 2.6: PS3D Voreinstellungen

Abbildung 2.7: PS3D Messestandgestaltung

12 2.2. Planung im Messebau

Abbildung 2.8: PS3D 3D Ansicht

Abbildung 2.9: Mobiliar Panoramic Studio 3D

2.9) befinden, denn PS3D erlaubt es nicht andere 3D Objekte oder Modelle zu erstellen be- ziehungsweise zu importieren.

2.2.2 SketchUp/Aluvision Aluvision hat die Planung fur¨ ihre Produkte in SketchUp von Google integriert. Dafur¨ wur- den die Objekte als 3D Version erstellt und dem Warehouse von SketchUp hinzugefugt.¨ Um diese einfacher finden zu k¨onnen, wurde von Aluvision zus¨atzlich noch ein Plugin (siehe Abbildung 2.10) entwickelt, welches unter anderem eine eigene Bibliothek fur¨ die Produkte

13 2. Stand der Technik

Abbildung 2.10: Menuleiste¨ von Aluvision in SketchUp

Abbildung 2.11: Aluvision Sammlung in SketchUp

darstellt. Neben einer Einteilung in Produktionsreihen (Abbildung 2.11), sind hier auch be- reits fertig zusammengestellte M¨oglichkeiten vorhanden (2.12). Neben dieser Ansammlung wird noch eine Liste mit Preisen fur¨ die verwendeten Objekte erstellt und mit einem Konto verknupft.¨ Um eine richtige Zusammensetzung zu gew¨ahrleisten ist noch ein Snapping Tool integriert worden (siehe Abbildung 2.13). Damit k¨onnen die Objekte nur an deren vorge- sehenen Punkten mit anderen verbunden werden und eine integrierte Logik pruft,¨ welche Stelle ausgew¨ahlt wurde und mit welcher diese verbunden werden kann. Somit k¨onnen auch die korrekten Verbinder nur an die fur¨ diese geeignete Stellen angebracht werden. Als letzte Funktion bietet das Plugin eine Art Reinigung fur¨ die aktuelle 3D Szene, um diese von Feh- lern oder ¨ahnlichem zu bereinigen.

2.3 Konfiguratoren

Den meisten werden Konfiguratoren im Bereich der Raumplanung oder fur¨ das individuel- le Gestalten von Autos bekannt sein. Aber auch der Burgerkonfigurator von McDonalds6, welcher es erm¨oglicht seine eigene Kreation aus dem Bestand der Zutaten des Fastfood- Restaurants ins Angebot zu bringen. Konfiguratoren sind also ein Werkzeug, mit dem aus vordefinierten Teilen, der Kunde sein Produkt erstellen kann. Dadurch, dass der Anwender

6https://www.mcdonalds.de/

14 2.3. Konfiguratoren

Abbildung 2.12: Ansammlung fertiger Objekte von Aluvision in SketchUp

Abbildung 2.13: Snapping Tool von Aluvision in SketchUp

nur aus einer Vielzahl an vorgegebenen Entscheidungs- und Kombinationsm¨oglichkeiten sein Produkt konfigurieren kann, ist die Umsetzung des potenziellen Ergebnisses mit einer hohen Wahrscheinlichkeit ohne Probleme zu bewerkstelligen. Kombinationen welche nicht umsetz- bar sind, k¨onnen von vornherein ausgeschlossen werden. Ebenfalls bietet ein Konfigurator die M¨oglichkeit hohe Mengen an potenziellen Kombinationen zu erstellen. Als Beispiel dient die UK-Chipsmarke Walkers, welche mit der Do us a flavour Crowdsourcing-Kampagne, 1.213.853 Vorschl¨age fur¨ neue Chipgeschmacksrichtungen bekommen haben und das in- nerhalb eines Zeitraumes von sechs Wochen.[ref14] Zus¨atzlich bietet diese Masse auch die M¨oglichkeit Informationen uber¨ die Kundschaft, wie etwa die Zielgruppe, zu erhalten.

15 2. Stand der Technik

Abbildung 2.14: Konfigurator fur¨ Mercedes CC 220 d T.Modell, Quel- le: https://www.mercedes-benz.de/passengercars/content-pool/tool-pages/car- configurator.html/carconfig?rccVehicleModelId=2052141&rccVehicleId=de DE 2052141 AU- 301 GC-421 LE-L LU-992 MJ-800 PC-D1I-D1K-D2P-P14-P15-P44-P65 PS-M02%23 SA- 02B-08U-09U-14U-16U-17U-218-235-258-270-274-287-294-345-351-362-428-440-474-475- 485-506-580-58U-620-70B-725-737-739-79B-859-873-876-893-916-927-969-B59-K11-L3E- R01-R66-R69-U01-U10-U22-U60-U79-U85 SC-1P6-2U1-2U6-2U8-3U1-5P6-6P5-8U6-8U8- 998-B09-K13-K27-PZB-V56, (zuletzt Aufgerufen: 18.07.19)

2.3.1 Blickfang Konfigurator von RedPlant Ein Messestand Konfigurator wurde bereits von der Firma RedPlant7 fur¨ den Messebauer Blickfang entwickelt. Dabei handelt es sich allerdings um eine Speziall¨osung, welche von Grund auf programmiert und aufgebaut wurde. Die Bedienung des Konfigurators erfolgt nun folgendermaßen: Nachdem einer der Grundstandarten (siehe Abschnitt 3.1) ausgew¨ahlt wurde, ist die Konfiguration des Messestandes m¨oglich. Die M¨oglichkeiten sind in vier Ober- kategorien (Stand, Kabine, M¨obel und Banner) unterteilt. In der ersten k¨onnen Grundein- stellungen wie die Gr¨oße, der Bodenbelag und die Grafiken der W¨ande angepasst werden. Fur¨ die Kabine gibt neben Einstellungen fur¨ eben diese selbst, auch Auswahlm¨oglichkeiten fur¨ den Inhalt, welcher allerdings nicht visualisiert wird. Die Positionierung erfolgt durchs verschieben in der 3D Ansicht, allerdings gibt es nur feste Positionen an denen sich die Ka- bine befinden kann. M¨obel k¨onnen aus dem dazugeh¨origen Reiter durch Drag&Drop einfach auf den Messestand gezogen und positioniert werden. Eine Kollisionsabfrage gibt es hier nur mit den W¨anden, M¨obelstucke¨ k¨onnen durchaus auch ineinander Platziert werden.

2.3.2 Konfiguratoren mit Blend4Web Es gibt bereits einige Projekte, welche mit Blend4Web umgesetzt wurden. Darunter befin- det sich auch der eine oder andere Konfigurator, fur¨ Fahrzeuge, Accessoires oder sonstige

7https://redplant.de/

16 2.3. Konfiguratoren

Abbildung 2.15: Blickfang Messebau Konfigurator, Quelle: htt- ps://konfigurator.blickfang.de/ (zuletzt Aufgerufen: 18.07.19)

Abbildung 2.16: Brillenkonfigurator von Resch. Manufaktur-Sehen, Quelle: http://www.manufaktur-sehen.de/brillenkonfigurator/ (zuletzt Aufgerufen: 18.07.19)

Alltagsgegenst¨ande8. Wie bei den meisten gilt es erst einmal das Grundgerust¨ zu bestim- men, im Falle des Brillenkonfigurator von der Rensch. Manufaktur-Sehen9 das Gestell oder beim Wanzl Einkaufswagen Konfigurator10 das Fassungsverm¨ogen. Beiden bieten ein Navi- gationsmenu¨ und die M¨oglichkeit in der Visualisierung an bestimmte Stellen zu klicken um diese Bereiche zu konfigurieren. Ebenfalls identisch ist, dass die Einstellungsm¨oglichkeiten durchaus uberschaubar¨ sind und man schnell s¨amtliche Funktionen genutzt hat.

8https://www.blend4web.com/en/demo/ 9http://www.manufaktur-sehen.de/brillenkonfigurator/ 10https://www.wanzl.com/fileadmin/3d product visualization/online/dist/?type=el&lang=en DE

17 2. Stand der Technik

Abbildung 2.17: Wanzl Einkaufswagen Konfigurator, Quelle: htt- ps://www.wanzl.com/fileadmin/3d product visualization/online/dist/?type=el&lang=en DE (zuletzt Aufgerufen: 18.07.19)

18 Kapitel 3

Grundlagen

Die Grundlagen fur¨ diese Arbeit besch¨aftigen sich mit mehreren Bereichen. Zum einen mit der Basis des Messebaus, also wie muss ein Messestand gestaltet sein und wie sind die- se aufgebaut beziehungsweise auf welcher Grundlage werden diese erstellt und eingesetzt. Dabei wird allerdings nicht auf die Pr¨asentation von Waren oder Marken geachtet, sondern vielmehr auf die Konstruktion von Messest¨anden und dem Aufbau, welche interessant fur¨ die Erstellung eines Konfigurators sind. Hier wird auch der Vergleich zwischen konventionellen, modularen und mobilen Messest¨anden erbracht. Darauf folgend wird die Technik, welche hinter WebGL steckt erkl¨art und aufgezeigt wie die Darstellung im Web funktioniert. Was dargestellt wird ist dann Anh¨angig von Blend4Web, weswegen die Funktionen und M¨oglich- keiten die das Framework fur¨ Blender bietet einmal gezeigt wird. Zu guter Letzt werden noch die ben¨otigten Bereiche von Blender erl¨autert, da in diesem Programm s¨amtliche Abl¨aufe vor der Darstellung im Web realisiert werden.

3.1 Messebau

Der Begriff Messestand wird den meisten bekannt sein. Bereits ein Bereich auf einer Messe, welcher mit ein paar Ausstellungssystemen und einigen ausgestellten Produkten gefullt¨ ist, gilt als Messestand und kostet demjenigen der dort seine Firma, Marke oder ¨ahnliches pr¨asen- tiert in den meisten F¨allen Geld. Neben den einfachen Roll-Ups (siehe Abbildung 3.1, zweite von links) welche ziemlich einfach selbst aufgestellt werden k¨onnen gibt es auch noch gr¨oßere St¨ande welche h¨aufig durch Dienstleister aufgebaut werden. Auch dort wird haupts¨achlich unter zwei Arten unterschieden, den modularen und konventionellen Messest¨anden. Unter letzteren versteht man meist die gr¨oßten St¨ande, welche aus Holz, Metall oder anderen Materialien sein k¨onnen. Diese sind dann in den wenigsten F¨allen konfigurierbar sobald sie einmal hergestellt wurden, weswegen man modulare Messestandsysteme entwickelte. Diese erm¨oglichen es nun Messest¨ande auf die unterschiedlichen Bedurfnisse¨ anzupassen, also so- wohl in der Gr¨oße als auch im Design. Laut der Marktstudie Marktthemenradar Messebau 2016 von Uwe Matzner, welche unter anderem die Bedeutung von Themen im Bereich des Messebaus untersuchte (siehe Abbildung 3.2), waren modulare Messest¨ande auf Rang 6 des

19 3. Grundlagen

Abbildung 3.1: Ausstellungssysteme omnia-concepts, Quelle: https://katalog.omnia- concepts.de/ (zuletzt Aufgerufen: 18.07.19)

Abbildung 3.2: Bedeutung Innovationsthemen im Messebau-Themenranking, Quelle: [ref16b] (zuletzt Aufgerufen: 06.07.19)

Rankings und damit h¨oher als wie zum Beispiel mehrgeschossige (Rang 14) oder barrierefreie Messest¨ande (Rang 20).[ref16b] Das modulare Messebausystem bezieht sich in diesem Fall nicht nur auf die Gr¨oße der W¨ande, sondern auch auf die Modifizierbarkeit eben dieser. In manchen F¨allen sollen Be- sprechungstische mit Sitzgelegenheiten auf dem Stand vorhanden sein oder es wird mal ein TV ben¨otigt. Auch Grafiken an den W¨anden mussen¨ austauschbar sein, wodurch neue Produkte, Slogans oder ¨ahnliches pr¨asentiert werden k¨onnen. Ablagefl¨achen, Kabinen, Gar- deroben oder auch Theken sind nichts ungew¨ohnliches auf einem Messestand, weswegen

20 3.1. Messebau

Abbildung 3.3: Beispiel Hallenplan mit Grundarten von Messest¨anden, Quel- le: https://www.clipdisplay.de/messestand-arten-und-funktionsbereiche/(zuletzt Aufgeru- fen: 18.07.19)

auch dies durch das System umsetzbar sein muss. Messest¨ande sind generell sehr frei konfigurierbar und nach den eigenen Vorstellungen ge- staltbar. Allerdings gibt es im Prinzip vier Grundarten von Messest¨anden, welche nach deren Bauform benannt sind. Zum einen w¨are da der Kopfstand (siehe Abbildung 3.4), welcher sich meist am Ende oder Anfang einer Reihe von Messest¨anden befindet. Dieser wird meist nur mit einer Wand am hinteren Bereich des Standes gebaut, damit sowohl von vorne, links und rechts die Interessenten auf diesen Stand gelangen k¨onnen. H¨aufig gibt es fur¨ diese Art von Stand auch Beschr¨ankungen von der Messe selbst, indem zum Beispiel der Messestand an den beiden Seiten nur bis zu einer gewissen Tiefe geschlossen werden darf. Die n¨achste Grundart w¨are der Eckstand (siehe Abbildung 3.5), welcher sich wie der Name schon verr¨at an einer Ecke von Messest¨anden befindet. Dieser Stand hat meist nur uber¨ eine Ecke W¨ande aufgebaut, um von zwei Seiten begehbar zu sein. Ein Eckstand gibt es sowohl mit der linken, als auch mit der rechten Seite ge¨offnet. Die Messest¨ande welche sich im inneren Bereich der gesamten Reihe an St¨anden befinden, nennen sich Reihenst¨ande (siehe Abbildung 3.6) und haben W¨ande an drei Seiten des Standes, weswegen man diesen nur von vorne betreten kann. Die letzte Grundart ist der Inselstand (siehe Abbildung 3.7), welcher von allen Seiten begeh- bar ist und h¨aufig nur im Zentrum bebaut wird und gegebenenfalls an den Seiten vereinzelt mit Messem¨obeln ausgestattet wird. Im Endeffekt kann man also sagen, dass Messest¨ande am liebsten modular verwendbar, individuell einsetzbar und optisch ansprechend sein sollen. Nichtsdestotrotz ist ein wertiger Gesamteindruck wichtig und jeder Stand soll eine gewisse Einzigartigkeit demonstrieren.[ref15]

21 3. Grundlagen

Abbildung 3.4: Beispiel Kopfstand, Quelle: https://expoexhibitionstands.eu/de/blog/messestande- welche-standtypen-und-einteilungen-gibt-es (zuletzt Aufgerufen 18.07.19)

Abbildung 3.5: Beispiel Eckstand, Quelle: https://expoexhibitionstands.eu/de/blog/messestande- welche-standtypen-und-einteilungen-gibt-es (zuletzt Aufgerufen 18.07.19)

22 3.1. Messebau

Abbildung 3.6: Beispiel Reihenstand, Quelle: https://expoexhibitionstands.eu/de/blog/messestande- welche-standtypen-und-einteilungen-gibt-es (zuletzt Aufgerufen 18.07.19)

Abbildung 3.7: Beispiel Inselstand, Quelle: https://expoexhibitionstands.eu/de/blog/messestande- welche-standtypen-und-einteilungen-gibt-es (zuletzt Aufgerufen 18.07.19)

23 3. Grundlagen

Abbildung 3.8:Ruckseite¨ eines Doppelstockes in konventioneller Bauweise, Quel- le: https://www.hallmann-messebau.de/konventioneller-messebau-eine-erklaerung (zuletzt Aufgerufen: 18.07.19)

3.1.1 Konventioneller Messestand Der Begriff konventioneller Messestand ist ein wenig irrefuhrend,¨ da dieser eigentlich nur jene St¨ande beschreibt, die nicht durch Messestandsysteme gebaut werden. Auch wird der Begriff fur¨ individuelle Messest¨ande verwendet. Zumeist besteht die Basis eines solchen Standes aus Holz, wenngleich es durchaus einige Ausnahmen gibt.1 Es besteht naturlich¨ die M¨oglichkeit mehrere unterschiedlichste Materialien miteinander zu kombinieren, wobei man auf die naturlichen¨ Gegebenheiten der einzelnen Stoffe Rucksicht¨ nehmen muss (Belastbar- keit, Dehnbarkeit, etc.). Wie das Wort Individuell schon verr¨at, k¨onnen die konventionellen Messest¨ande so zu hundert Prozent an die Bedurfnisse¨ des Ausstellers angepasst werden. Zus¨atzlich bietet eine Holzbauweise ein gewisses Maß an Stabilit¨at und Hochwertigkeit, wes- wegen genau aus diesen Grunden¨ der individuellen Bauweise nachgesagt wird, dass diese als K¨onigsdisziplin des Messebaus gilt. Woraus sich auch direkt der erste Nachteil erschließt, denn dadurch erfordert die Planung, Vorbereitung und Montage viel Expertise und ben¨otigt einiges an Zeit. Ein weiterer negativer Punkt ist den Materialien geschuldet, welche zwar wie bereits erw¨ahnt Stabilit¨at verleihen, dafur¨ aber auch ein hohes Eigengewicht besitzen, was den Transport nicht nur erschwert, sondern auch den Preis dafur¨ in die H¨ohe treibt. Ein letzter Punkt, weswegen uberhaupt¨ erst der Systembau entwickelt wurde, ist die Wiederver- wertbarkeit. Einzelne Elemente des Messestandes k¨onnen durchaus wiederverwendet werden, allerdings l¨asst sich in vielen F¨allen das verbaute Material nicht zur G¨anze Ab- und wieder

1https://www.hallmann-messebau.de/konventioneller-messebau-eine-erklaerung

24 3.1. Messebau

Aufbauen. Deswegen ist es unumg¨anglich fur¨ Mehrfacheins¨atze einige Nachproduktionen t¨atigen zu mussen.¨ Dies gilt vor allem, wenn ein Stand nicht eins zu eins gleich aufgebaut werden soll oder kann.

3.1.2 Modularer Messestand

Als modularen Messestand bezeichnet man Grunds¨atzlich alle St¨ande welche mit dem sel- ben Material mehrere Gr¨oßen, Formen oder Funktionen in mehrmaligen Gebrauch umsetzen k¨onnen. Dafur¨ gibt es unterschiedliche Hersteller, welche Systeme entwickelt haben, die die- se Funktionen erfullen¨ und zus¨atzlich noch die M¨oglichkeit bieten Grafiken, seien sie aus Stoff oder auf dunnen¨ Platten gedruckt, beliebig auszutauschen. Dies ist notwendig, da die Standpl¨atze sich auf jeder Messe unterscheiden k¨onnen und man somit flexibel auf die erhal- tene Gr¨oße seinen Messestand anpassen kann. Der Grundstein vieler Messesysteme sind die Rahmenmodule, welche die Grenzen des Standes markieren und mit Hilfe von zum Beispiel eingespannten Grafiken ebenfalls als Werbefl¨ache dienen. Durch Verbindungsm¨oglichkeiten unterschiedlicher Objekte des Systems kann so unter anderem auch Stauraum, dank in den Rahmen integrierte Turen,¨ geschaffen werden. Durch Querstreben ist es ebenfalls m¨oglich Halterungen in den Rahmenmodulen zu integrieren und somit, so es die Statik zul¨asst, Objek- te wie einen TV oder ¨ahnliches an den Rahmen zu befestigen. Anstelle einer TV-Halterung k¨onnen aber auch Leuchtrahmen verwendet werden, welche mit Inhalten bespielt diesen ersetzen k¨onnen und in das Rahmenmodul integriert sind und somit nicht von der Wand abstehen. Es gibt auch Systeme die neben W¨anden auch weitere Module zur Verfugung¨ stellen, wie etwa einer Brucke¨ oder B¨oden. Auch ein modularer Boden, auf welchem die Besucher sich befinden, dient als Werbefl¨ache und kann als eine Art erweiterte Leinwand gesehen werden.[ref16a]

3.1.3 Mobiler Messestand

Ein weiterer, wenn auch im Messebau eher kleinerer Bereich, ist das mobile Messestande- quipment. Darunter fallen mehrere Produkte wie Theken, Rollups oder auch Messew¨ande (nicht zu verwechseln mit den W¨anden von Messestandsystemen oder konventionellen Mes- sest¨anden), welche unter Abbildung 3.1 zu finden sind. Einige dieser Produkte werden auch auf den anderen beiden Messestandarten eingesetzt, um den Stand noch weiter aufzuwer- ten. Speziell hier zu erw¨ahnen w¨aren die sogenannten Faltrahmen von Flexi-Line2 (siehe Abbildung 3.10), welche aus einem Aluminiumrahmen und darin verbauten Grafiken be- steht. Hierbei ist dazuzusagen, dass diese zwar eine feste Gr¨oße besitzen, allerdings mehrere aneinander gestellt werden k¨onnen und durchaus etwas an Modularit¨at bieten.

2https://katalog.omnia-concepts.de/messe-systemstaende/flexi-line/flexi-line-messestaende/

25 3. Grundlagen

Abbildung 3.9: ISE Amsterdam 2019 Aluvision Messestand mit LED-Tiles, Quelle: https://www.aluvision.com/de/produkte/produkt%C3%BCbersicht/hi-led-55 (zuletzt Auf- gerufen: 18.07.19)

Abbildung 3.10: Flexi-Line Beispiel, Quelle: https://katalog.omnia-concepts.de/messe- systemstaende/flexi-line/flexi-line-messestaende/ (zuletzt Aufgerufen: 18.07.19)

26 3.2. WebGL

Abbildung 3.11: Blend4Web SDK mit Zugang zu WebGL

3.2 WebGL

WebGL3 ist eine Javascript-API zum Rendern interaktiver 3D und 2D Grafiken mittels eines kompatiblen Webbrowsers ohne Einsatz zus¨atzlicher Plugins. Mit WebGL steht eine API zur Verfugung,¨ die an OpenGL ES 2.0 angelehnt ist und deren Inhalte mittels hcanvasi Elements dargestellt werden. [FSt19]

Die Grundlage der 3D Ansichten durch WebGL ist also das Canvas Element[KNPK18], wel- ches eine Leinwand in HTML4, zum Zeitpunkt dieser Arbeit in der Version HTML5, erstellt und mit Hilfe von JavaScript gesteuert wird. Auch wenn WebGL dafur¨ entwickelt wurde im Webbrowser zu funktionieren, ist die Basis OpenGL[ASa][FSt19], welches fur¨ eine klassi- sche Arbeitsumgebung an einen Computer entwickelt wurde. Dazu sei gesagt, dass weder OpenGL, noch WebGL Objektorientiert sind. Die Grundlage fur¨ das Starten von letzteren ist, dass sich irgendwo im Web ein Server befindet auf welchem die Applikation l¨auft. Der Computer an dem man arbeitet ist dann der Klient, welcher mit Hilfe des Browser uber¨ die URL5 Zugang zu dem Server erlangt. Dieser wird im Falle der Arbeit durch das Starten von Blender, mit Hilfe der Blend4Web Applikation, aktiviert. Ein weiterer wichtiger Punkt zur 3D Darstellung in WebGL w¨are, dass die einzigen Polygone welche unterstutzt¨ werden Dreiecke sind.[ASb] Die Darstellung erfolgt in einer der drei folgenden Arten: Eckpunkte, Kanten oder als Fl¨achen. Soll also ein Polygon erstellt werden, welches zum einen gefullt¨ ist und zum anderen Kanten besitzt, muss dieses in diesem Fall zwei mal gerendert werden. Einmal als gefulltes¨ Polygon und mit exakt den selben Eckpunkten als Linienschleife. S¨amt-

3Web Graphics Library 4Hypertext Markup Language 5Uniform Resource Locator

27 3. Grundlagen

liche Vorg¨ange sind fur¨ das manuelle Zeichnen im Canvas Objekt notwendig[LYW16] und werden im Falle dieser Arbeit beim Export durch Blend4Web durchgefuhrt.¨

3.3 Blend4Web

Blend4Web wird seit 2010 von Triumph LLC entwickelt und wurde am 28. M¨arz 2014 ver¨offentlicht.6 Bei der Ver¨offentlichung handelt es sich um eine webbasierte 3D Umge- bung und ein Framework fur¨ interaktive Renderings von 3D Grafiken und Audioinhalten in Webbrowsern. Ausgelegt ist die Plattform fur¨ Visualisierungen, Pr¨asentationen, Onlineshops, Spiele und weitere Internetanwendungen. Zum Zeitpunkt dieser Arbeit ist das Blend4Web ein integrierbares Framework fur¨ Blender, allerdings wurde bereits von den Entwicklern selbst angekundigt,¨ dass Triumph LLC eine eigenst¨andige Software namens Blend4Web Studio7 entwickelt, um der Abh¨angigkeit von Blender entgegenzuwirken und den Nutzern mehr Frei- heiten in der Verwendung von Software zu bieten. Die Darstellung von durch Blend4Web erstellten Content erfolgt uber¨ WebGL und anderen Technologien fur¨ den Webbrowser, aller- dings ohne die Verwendung von Plugins. Im Prinzip ist Blend4Web also aktuell eine Biblio- thek fur¨ Webseiten, ein Blender Addon und eine Ansammlung an Tools fur¨ das Debuggen und Optimieren. Die Verwaltung der Projekte mit Blend4Web erfolgt entweder eigenh¨andig oder mit Hilfe des Project Managers8. Um diesen zu ¨offnen ist es notwendig Blender vorher einmal auszufuhren,¨ da dieser uber¨ den localhost mit Hilfe eines Webbrowsers erreichbar ist.

3.3.1 Engine Features Blend4Web verwendet sogenannte Engines9, welche separate Abschnitte des Softwarecodes sind, um externe Anwendungen zu implementieren. Der zentrale Aspekt w¨are da die Blender Integration, welche erlaubt, dass dort erstellte 3D Szenen einfach in Blend4Web genutzt wer- den k¨onnen. Dafur¨ wird durch das Plugin ein eigener Szenenexport zur Verfugung¨ gestellt, welche es erlaubt einfach und schnell die Szenen fur¨ Blend4Web vorzubereiten. Weiterhin bietet Blend4Web eine volle Unterstutzung¨ der Blender Umgebungs- und Materialeinstel- lungen, sowie einige Tools fur¨ das Erstellen und Organisieren von Projekten.

Materials Unter Material versteht man in Blend4web wie die Oberfl¨ache eines Objektes auf Licht- einstrahlung reagiert10. Zus¨atzlich sind Einstellungen was Transparenz und Reflexion, sowie einige physikalische Parameter, welche die Oberfl¨achenbeschaffenheit des Materials beschrei- ben, hier zu finden. Ein Mesh kann entweder ein oder mehrere Materialien besitzen. Wird

6https://www.blend4web.com/doc/en/about.html#about-engines 7https://www.blend4web.com/en/community/article/414/ 8https://www.blend4web.com/en/community/article/341/ 9https://www.blend4web.com/doc/en/engine features.html 10https://www.blend4web.com/doc/en/materials.html?highlight=materials

28 3.3. Blend4Web

Abbildung 3.12: Transparenz Ubersicht,¨ Quelle: htt- ps://www.blend4web.com/doc/en/materials.html?highlight=materials mehr als nur eines verwendet, wird im Edit Mode den jeweiligen Polygonen die passenden Materialien zugeordnet. Neben der Farbe und Intensit¨at kann man auch den Shading Algo- rithmus fur¨ jedes einzelne Material einstellen. Fur¨ die Transparenz gibt es sechs verfugbare¨ Transparenztypen (siehe Abbildung 3.12). Der Standard ist Opaque und bedeutet, dass das Material nicht Transparent ist und der Alphawert ignoriert wird. Alpha Sort sortiert die Dreiecke nach Kameradistanz um uberlappende¨ transparente Fl¨achen korrekt zu rendern. Da dieser Vorgang sehr rechenintensiv ist, wird empfohlen diesen nur fur¨ geschlossene und transparente Objekte zu verwenden. Fur¨ den Fall, dass MSAA11 aktiviert ist, kann Alpha Anti-Aliasing genutzt werden. Bei diesem Verfahren wird die Sortierung der Dreiecke nicht ausgefuhrt,¨ sondern nutzt die Alpha to coverage Technik, in welcher der Alphawert einer Textur als eine coverage mask fur¨ das Anti-Aliasing dient. Einen ¨ahnlichen Vorgang l¨ost der Alpha Clip aus, allerdings werden hier Pixel mit einem Alphawert von 0,5 oder geringer verworfen. Beide Varianten werden fur¨ kleinere Details wie Bl¨attern von B¨aumen oder Gras empfohlen. Fur¨ Partikelsysteme oder Lichtstrahlen wird Add verwendet, denn dies sorgt dafur,¨ dass transparente Oberfl¨achen in einer zuf¨alligen Reihenfolge gerendert werden. Der letzte Typ ist Alpha Blend welcher fur¨ Wasseroberfl¨achen angewendet wird. Reflektionen werden entweder als statische, also fur¨ sich nicht ver¨andernde, oder dynamische Umgebungen eingestellt.

Animation Unter einer Animation versteht man die Ver¨anderung von Parametern eines Objektes uber¨ einer bestimmten Zeit12. Blend4Web unterscheidet und unterstutzt¨ mehrere Animations-

11Multisample anti-aliasing 12https://www.blend4web.com/doc/en/animation.html?highlight=animation

29 3. Grundlagen

Abbildung 3.13: Vertex Animation am Beispiel einer Flagge, Quelle: htt- ps://www.blend4web.com/doc/en/animation.html?highlight=animation

arten. Die Objektanimation ist fur¨ die Transformation eines komplettes Objektes, sei es als Translation, Rotation oder als Skalierung. Durch Keyframes k¨onnen diese Animationen reproduziert werden und dadurch sind Loops, ebenfalls m¨oglich. Sollte es sich bei dem ani- mierten Objekt um ein Mesh handeln, ist es notwendig die Option Force Dynamic Object in den Rendering Properties zu aktivieren. Die Skelettanimation ist eine Objekt Deformierung mit Hilfe eines Knochensystems innerhalb des Objektes. Dafur¨ ist neben dem Mesh noch zus¨atzlich ein Armature Objekt notwendig, um dieses Skelett am Ende steuern zu k¨onnen. Auch l¨asst sich hier fur¨ jedes Material der Fresnel13 Effekt einstellen. Uber¨ die Rendereinstellungen ist es m¨oglich weitere Eigenschaften der Materialien zu konfigu- rieren. So k¨onnen diese zum Beispiel nicht im Rendering erscheinen oder etwa die Ruckseite¨ der Polygone wird nicht mit gerendert. Ein weiterer wohl sehr interessanter Punkt ist, dass hier eingestellt werden kann ob das Material von Wettereffekten beeinflusst wird oder nicht. Einige spezifische Parameter die Blend4Web noch bietet ist zum einen das Wasser-14, als auch das Grass-Rendering15. Die Vertex Animation erlaubt es nun alle Anderungen¨ an einem Mesh festzuhalten, wobei jeder Frame dieser Animation als ein einzelnes Mesh z¨ahlt. Daher wird empfohlen, keine langen Animationen fur¨ High-Poly Objekte zu erstellen.

Physics Fur¨ die Umsetzung von Einwirkungen auf die animierten Objekte wird ein Physiksystem angeboten, welches unter anderem Kollisionen erkennen und behandeln kann. Dafur¨ muss

13Benannt nach Augustin Jean Fresnel, Physiker 10.05.1788-14.06.1827 14https://www.blend4web.com/doc/en/outdoor rendering.html#water 15https://www.blend4web.com/doc/en/particles instancing.html#particles-grass

30 3.3. Blend4Web

Abbildung 3.14: Physics Panel Dynamic, Quelle: htt- ps://www.blend4web.com/doc/en/physics.html?highlight=physics die Physik fur¨ jedes einzelne Objekt, welches davon betroffen werden soll, aktiviert werden. Das gilt im ubrigen¨ auch fur¨ Objekte, die zwar nicht durch die Physik beeinflusst werden sol- len, aber bei denen uberpr¨ uft¨ wird, ob diese an ihrer Position mit etwas kollidieren wurden.¨ Diese Option nennt sich Ghost und kann durch eine Collision ID so beeinflusst werden, dass nur gewisse Materialien von dieser Kollisionserkennung betroffen sind. Ist die Physik bei einem Objekt aktiviert, erscheint ein weiterer Menupunkt¨ fur¨ die Objektphysik (siehe Abbildung 3.14). In diesem ist es dann auch m¨oglich einzustellen, ob das Objekt ein Rigid Body (mit Rotation) oder ein Dynamic (ohne Rotation) sein soll. Zus¨atzlich kann hier noch der Kollisionstyp (Box, Kapsel, Kugel, Zylinder oder Kegel) und physikalische Parameter wie zum Beispiel die Masse eingestellt werden.16 Um zusammenh¨angende Objekte zu simulie- ren gibt es sogenannte Constraints, also Abh¨angigkeiten. Dafur¨ wird an einem der beiden Objekte eine Abh¨angigkeit hinzugefugt¨ und das andere dann als Ziel deklariert. Fur¨ mehr als zwei verbundene Objekte muss dann also eine Kette erstellt und festgelegt werden, wel- ches Objekt vom anderen in diesem Fall abh¨angig ist. Zum aktuellen Zeitpunkt werden vier Abh¨angigkeitstypen von Blend4Web unterstutzt¨ (siehe Abbildung 3.15). Fur¨ Fahrzeuge wird eine spezielle Simulation geboten. Dafur¨ muss das Fahrzeug aber aus genau sechs separaten Objekten bestehen. Diese sind zum einen das Fahrgestell, welches auch als Schwerpunkt definiert werden sollte, dem Lenkrad und den vier R¨adern. Die Mittelpunkte dieser funf¨ sich sp¨ater rotierenden Objekte sollten sich logischerweise auf den Rotationsachsen befinden. Ei- ne weitere kleine Anmerkung zum Fahrgestell w¨are, dass das Gewicht von diesem angepasst werden sollte, denn der Standardwert betr¨agt genau ein Kilogramm. Neben der Fahrzeug-

16https://www.blend4web.com/doc/en/physics.html?highlight=physics

31 3. Grundlagen

Abbildung 3.15: Physics Constraints, Quelle: htt- ps://www.blend4web.com/doc/en/physics.html?highlight=physics

physik gibt es in Blend4Web auch noch ein eigene Physik fur¨ schwimmende Objekte und Personen beziehungsweise Charakteren. Das Physiksystem selbst ist durch das uranium.js Modul implementiert und somit nicht Teil des Hauptcodes und ist eine Modifikation der Bullet Physic Engine17.

Sound

Die gewunschten¨ Audioquellen sind Standard-Speaker Objekte18, welche in Blender erstellt werden. Die Einstellungen (siehe Abbildung 3.16) befinden sich dann bei den Objekteigen- schaften, dort werden durch die Audio-Engine von Blend4Web zum einen alle standardm¨aßig in Blender enthaltenen Einstellungen unterstutzt¨ und bieten zum anderen noch weitere spe- zifische Einstellm¨oglichkeiten uber¨ die Engine selbst.

17https://pybullet.org/wordpress/ 18https://www.blend4web.com/doc/en/audio.html?highlight=sound#sound-tab

32 3.3. Blend4Web

Abbildung 3.16: Einstellung der Audioquelle, Quelle: https://www.blend4web.com/doc/en/audio.html?highlight=sound#sound-tab

Logic Editor und Scripting

Um die Kontrolle uber¨ s¨amtliche Logiken innerhalb der Szenen zu behalten wird durch den Logic Editor unterstutzt,¨ welcher die Steuerung der Anzeige bis zu einem gewissen Grad ohne Programmierung erm¨oglicht. Trotzdem k¨onnen programmierte JavaScript Dateien ebenfalls in den Logic Editor eingefugt¨ werden beziehungsweise ist es m¨oglich diesen mit Hilfe von Pro- grammcode anzusprechen. Allerdings sind die M¨oglichkeiten dadurch noch relativ beschr¨ankt und aufwendigere beziehungsweise komplexere Projekte lassen sich nicht zwangsl¨aufig oh- ne Programmierung l¨osen. Der Logikbaum wird im Node Editor von Blender bearbeitet, dieser Baum besteht aus mehreren Logikbl¨ocken, welche durch ein Entry Point gestartet beziehungsweise ausgefuhrt¨ werden k¨onnen. Fur¨ komplexere Logik stehen auch Variablen, entweder Nummerisch oder String, zur Verfugung.¨ Diese k¨onnen fur¨ die Speicherung von be- stimmten sich ¨andernden Informationen, wie zum Beispiel gefahrene Kilometer oder Anzahl von Objekten in der Szene, verwendet werden.19 Direkte Eingriffe in die Blend4Web Applika- tion werden durch JavaScript ausgefuhrt¨ und erm¨oglichen somit uber¨ die API-Schnittstelle20 weitere M¨oglichkeiten. So k¨onnen zum Beispiel auch HTML-Buttons mit den Canvas Ele- menten verknupft¨ werden und haben dadurch direkten Einfluss auf die dargestellte Szene. Daruber¨ hinaus gibt es noch die M¨oglichkeit auch Blender in seinen Funktionen zu erweitern.

19https://www.blend4web.com/doc/en/logic editor.html 20https://www.blend4web.com/api doc/index.html

33 3. Grundlagen

Abbildung 3.17: Beispiel: Logic Editor, Quelle: htt- ps://www.blend4web.com/doc/en/logic editor.html (zuletzt Aufgerufen: 18.07.19)

3.4 Blender

Blender ist eine kostenlose open source 3D Software, welche sich haupts¨achlich an Ein- zelkunstler¨ oder kleinere Studios richtet. Es werden essenzielle Tools fur¨ das Modellieren, Rendern und Animieren geboten.21Zus¨atzlich zu letzterem sind M¨oglichkeiten zum editieren von Audio und Video als auch fur¨ das Riggen von Modellen, fur¨ zum Beispiel Charaktera- nimationen vorhanden und auch ein Physiksystem fur¨ Haare, Flussigkeiten,¨ Stoffe, etc. ist integriert. Ein weiterer Aspekt den Blender interessant macht, w¨are die eigene Blender Game Engine (kurz auch BGE), welche allerdings zum aktuellen Zeitpunkt noch nicht sonderlich nennenswert Unterstutzt¨ wird, weswegen fur¨ gr¨oßere Projekte davon abgeraten wird. Blender ist fur¨ alle g¨angigen Betriebssysteme, also Microsoft Windows, Linux und macOS, verfugbar¨ und um dies zu gew¨ahrleisten ist die Benutzeroberfl¨ache mit OpenGL umgesetzt, welches auf allen Standardsystemen funktioniert. Fur¨ Anpassungen kann Python verwendet werden, welche, im Gegensatz zu Java oder C, als recht einfache Programmiersprache gilt. Einer der gr¨oßten Kritikpunkte von Blender ist die Bedienung, denn diese ist nicht an g¨angige Steuerungen angepasst. So wird zum Beispiel nicht die linke Maustaste, sondern die rechte dafur¨ benutzt Objekte in Szene auszuw¨ahlen um mit diesen zu interagieren. Um den Ein- stieg etwas zu erleichtern bietet Blender selbst ein umfangreiches User Manual an, welches allerdings nur in englischer Sprache vorhanden ist. In den folgenden Abschnitten werden nur die notwendigen Blender Grundlagen erl¨autert, weitere Informationen k¨onnen dem Blender Manual entnommen werden.

21https://docs.blender.org/manual/en/latest/getting started/about/introduction.html

34 3.4. Blender

Abbildung 3.18: Standard Interface von Blender, Quelle: htt- ps://docs.blender.org/manual/en/latest/interface/window system/introduction.html

3.4.1 User Interface Das Standard Interface von Blender beinhaltet funf¨ Bereiche(siehe Abbildung 3.18), welche allerdings man frei gestalten kann und Editoren genannt werden. Diese sind zum einen der Info Editor im oberen Bereich (blau), eine große 3D Ansicht (gelb), ein Zeitverlauf fur¨ etwa Animationen im unteren Bereich (violett/pink), der Outliner im oberen rechten (rot) und zu guter Letzt die Einstellungen der ausgew¨ahlten Objekte, Fl¨achen, Polygone, etc. im unteren Rechten Bereich (grun).¨ 22 Die Funktionen sind gleich anderer 3D Programme, auch wenn die Steuerung von Blender durchaus gew¨ohnungsbedurftig¨ ist. Weitere Fenster k¨onnen uber¨ die Eckpunkte der einzelnen Bereiche hinzugefugt¨ werden.

3.4.2 Editoren Blender bietet einige unterschiedliche Editoren um s¨amtliche Aspekte der Darstellung und Daten zu bearbeiten. Um den entsprechenden Editor auszuw¨ahlen, muss der Editor Type Selector, welcher der erste Button auf der linken Seite des Headers eines der Fenster ist, ausgeklappt werden. Jeder Bereich in Blender besitzt einen eigenen Editor (siehe Abbildung 3.19). Die 3D View wird dazu verwendet um mit der Szene zu interagieren. An dieser Stelle wird modelliert, animiert oder auch texturiert. Unter anderem wird in diesem Bereich auch die Auswahloptionen eingestellt, dies bedeutet also ob das ganze Objekt oder zum Beispiel nur die Fl¨achen ausgew¨ahlt werden. Im Bereich der Animation befindet sich unter anderem der Timeline Editor, welcher im Menu¨ durch ein Uhrensymbol gekennzeichnet ist. Dieser Editor wird fur¨ das Setzen von Keyframes verwendet, so kann zu jedem Frame eine gewisse Pose eingestellt werden und somit eine Animation, welche die Bewegung von einem zum

22https://docs.blender.org/manual/en/latest/interface/window system/introduction.html

35 3. Grundlagen

Abbildung 3.19: Der Editor Type Selector, Quelle: htt- ps://docs.blender.org/manual/en/latest/editors/index.html

n¨achsten Keyframe darstellt, erzeugt werden.23 Ein weiterer Punkt ist der Graph Editor (siehe Abbildung 3.20), welcher dem von Autodesk Maya24 sehr ¨ahnlich ist. In diesem k¨onnen die Kurven der Bewegungen zwischen den einzelnen Keyframes genauer bearbeitet werden.25 Fur¨ nicht lineare Animationen gibt es noch den NLA26 Editor. Zus¨atzlich bietet Blender auch M¨oglichkeiten Bilder auf den Oberfl¨achen genauer zu platzieren. Dafur¨ wird durch den UV/Image Editor eine 2D Ansicht der Objekte angezeigt, mit welcher man nun genauer die Grafiken beziehungsweise Texturen platzieren kann.27 Node- und Logic Editor wurden bereits im Abschnitt 3.3 erw¨ahnt, welcher zus¨atzlich auch noch mit weiteren Funktionen ausgestattet ist. Aus diesem Grund wird dieser nicht weiter ausgefuhrt.¨ Weitere Editoren w¨are zum einen der File Browser, in welchem vor allem speicher und lade Funktionen ausgefuhrt¨ werden. Zus¨atzlich k¨onnen hier auch die Pfade zu Bildern, Videos, etc. ge¨andert werden.28 Zum anderen gibt es noch die Python Console als Editor, mit welcher man Zugang zur

23https://docs.blender.org/manual/en/latest/editors/timeline.html 24https://knowledge.autodesk.com/support/maya/learn-explore/caas/CloudHelp/cloudhelp/2019/ENU/Maya- Animation/files/GUID-6D38EAEA-6032-471E-BD0E-54A74D4443C0-htm.html 25https://docs.blender.org/manual/en/latest/editors/graph editor/introduction.html 26Non-Linear Animation 27https://docs.blender.org/manual/en/latest/editors/uv image/introduction.html 28https://docs.blender.org/manual/en/latest/editors/file browser/introduction.html

36 3.4. Blender

Abbildung 3.20: Der Graph Editor von Blender, Quelle: htt- ps://docs.blender.org/manual/en/latest/editors/graph editor/introduction.html gesamten Python API besitzt. Ge¨offnet wird dieser mit Shift+F4 in egal welchem Editor. Die Basis fur¨ Blender 2.79 ist typischer Weise Python 3.x.29

3.4.3 Modeling Modeling in Blender hat unterschiedliche Formen, je nachdem welchen Typ von Objekt man versucht zu erstellen. In dieser Arbeit wird sich haupts¨achlich mit dem Mesh Modeling besch¨aftigt. Diese Art des Modellierens beginnt typischerweise mit einem primitiven Ob- jekt wie einem Wurfel,¨ Zylinder etc. Aus diesen beginnt man dann gr¨oßere und komplexere Formen zu erschaffen. In der 3D Ansicht in Blender gibt es drei Modi fur¨ die Erstellung, Bearbeitung und Manipulation von Objekten. Diese sind einmal der Object Mode, in wel- chem das gesamte Objekt beeinflusst wird. Darunter fallen unter anderem Translationen, Rotationen und auch Skalierungen. Um die Geometrie eines Objektes zu ver¨andern wird der zweite Modus, der Edit Mode verwendet. In diesem kann das vorher im Object Mode ausgew¨ahlte Objekt im Mesh modifiziert werden. Dafur¨ gibt es drei weitere Hauptunter- punkte fur¨ die Auswahl von Eckpunkten, Kanten oder Fl¨achen, um diese nach den eigenen Bedurfnissen¨ anzupassen. Der letzte Modus ist der Sculpt Mode, welcher zwar ¨ahnlich dem Edit Mode ist, aber die Modifizierung des Meshes durch einen sogenannten Brush, also ei- nem Pinsel erm¨oglicht. Mit diesem wird an der gew¨ahlten Stelle die Geometrie des Objektes ver¨andert, ohne vorher eine Gruppe an Punkten, Kanten oder Fl¨achen ausw¨ahlen zu mussen.¨

29https://docs.blender.org/manual/en/latest/editors/python console.html

37

Kapitel 4

Anforderungs- und Vorlagenanalyse

In diesem Kapitel geht es darum welche Anforderungen an einen Konfigurator fur¨ modulare Messest¨ande gestellt werden. Dafur¨ muss als aller erstes gekl¨art sein welchen Einsatzbereich der Konfigurator besitzt. Fur¨ den Aufbau bietet, der in Abschnitt 2.3.1 vorgestellte Konfigu- rator von Blickfang, eine gute Grundlage. Nichtsdestotrotz ist dieser haupts¨achlich fur¨ den Vertrieb eines Systems ausgelegt, welches von Blickfang zur Verfugung¨ gestellt wird. Dort liegt auch das erste Problem, die Systeme der unterschiedlichen Hersteller haben zum Teil auch andere Maße oder Bauteile im System welche nur in diesem einem vorhanden sind. Zus¨atzlich muss untersucht werden, welche M¨oglichkeiten an Konfigurationen essenziell und notwendig fur¨ die Umsetzung der Planung fur¨ einen Messestand sind. Blend4Web bietet einige Beispiele fur¨ die Interaktion im Web mit der 3D Szene. Diese werden nach m¨oglichen Funktionen fur¨ die Umsetzung des Konfigurators untersucht und gegebenenfalls angepasst.

4.1 Anwendungsbereich

Zu beginn muss festgelegt werden fur¨ welchen Verwendungszweck der Konfigurator am Ende dienen soll. Dabei w¨are einmal zu Unterscheiden, ob er frei fur¨ jeden zur Verfugung¨ steht oder aber zum Beispiel nur fur¨ Kunden einer Agentur. In beiden F¨allen muss der Proto- typ aber naturlich¨ erweiterbar sein, ebenso das Kontingent welches fur¨ die Konfiguration zur Verfugung¨ gestellt wird. Der Unterschied zwischen beiden ist, dass im einen Fall Gra- fiken fur¨ zum Beispiel die W¨ande zur Verfugung¨ gestellt werden k¨onnen. Dies ist auch der Grund weswegen sich diese Arbeit mit einer solchen Konstellation besch¨aftigt. Es wird davon ausgegangen, dass dieser Konfigurator seinen Kunden zur Verfugung¨ gestellt wird, je nach Kunde werden andere Objekte im Konfigurator aktiviert, damit diese nicht ihre gegenseitigen M¨oglichkeiten einsehen k¨onnen.

4.2 Abh¨angigkeiten von Systemherstellern

Wie bereits in der Einleitung des Kapitels erw¨ahnt, gibt es unterschiedliche Hersteller der modularen Messebausysteme. Um einen geeigneten Konfigurator zu erstellen, muss man

39 4. Anforderungs- und Vorlagenanalyse

entweder fur¨ jedes einzelne System einen eigenen angepassten Konfigurator erstellen oder aber man findet Gemeinsamkeiten und geht gewisse Kompromisse ein. Im Falle dieser Arbeit wurden ja haupts¨achlich die beiden modularen Messesysteme von Aluvision und Panoramic verwendet, weswegen diese auch hier als Beispiel dienen. Das wohl gr¨oßte Problem bei den beiden Systemen w¨aren die unterschiedlichen Maße der Rahmenmodule. W¨ahrend ein Stan- dardrahmen von Aluvision 992mm als Maß besitzt, haben die von Panoramic 960mm. Eine L¨osung des Problems w¨are zum Beispiel zu sagen, dass einfach ein Standardmaß fur¨ die Mo- dule in der Visualisierung dargestellt wird und erst in der Planungsdokumentation, wie dem Grundriss und den Montagepl¨anen, die Maße vom jeweiligen System dargestellt werden. Des weiteren sind auch die Verbindungen zwischen den einzelnen Modulen bei beiden Systemen unterschiedlich, auch wenn diese nicht Visualisiert werden und erst in den Montagepl¨anen sichtbar sind. Panoramic bietet nur zwei Verbinder, zum einen Einzel- und zum anderen Doppelverbinder. Aluvision hat w¨ahrenddessen mehrere unterschiedliche M¨oglichkeiten zum verbinden der Module. Warum das Ganze trotzdem fur¨ die Anzeige im Konfigurator inter- essant sein k¨onnte erkl¨art sich an der Befestigungsart von zum Beispiel Fernwirkungslogos, da diese durchaus auf unterschiedlichen H¨ohen sich dann befinden k¨onnten. Die Grafiken werden in den meisten F¨allen an Frontseite des Rahmens eingespannt, weswegen sich diese an jener Stelle befinden. Eine zus¨atzliche M¨oglichkeit auch Grafiken an der Ruckseite¨ zu befestigen ist vorerst nicht vorgesehen. Ein weiteres Problem sind auch die unterschiedlichen Kontingente der Hersteller, zwar sind einige Produkte nahezu identisch, aber zum Beispiel bietet Aluvision spezielle LED-Tiles an, welche in deren System integriert werden k¨onnen. Um dieses Problem zu umgehen, musste¨ man fur¨ die einzelnen Hersteller eigene Abschnitte in der Objektubersicht¨ erstellen, was im Grund wieder zu herstellerspezifischen Konfigurato- ren fuhrt,¨ je nachdem wie viele Objekte nur einer der Hersteller besitzt, von welchem man das Material fur¨ den Nutzer zur Verfugung¨ stellt.

4.3 Konfigurationsm¨oglichkeiten von Messest¨anden

Die Grundlage der M¨oglichkeiten zur Konfiguration bieten die Systeme selbst, weswegen die- se den Ausgangspunkt darstellen. Das gr¨oßte Problem dabei ist allerdings, dass die M¨oglich- keiten an Kombinationen der Rahmenmodule schlichtweg Grenzenlos ist. So k¨onnte man einen Meter auch mit zwei halben Meter Rahmen zusammen bauen oder ¨ahnliches. Da dies allerdings nicht gerade Zielfuhrend¨ ist und nur in wirklich wenigen Situationen sich als nutzlich¨ erweisen k¨onnte, wurden¨ solche Einstellungsm¨oglichkeiten nicht nur den Nutzer uberfordern,¨ sondern auch den Aufwand fur¨ diesen Konfigurator erh¨ohen. Als erste sinn- volle Konfigurationsm¨oglichkeit bietet sich die Gr¨oßeneinstellung der St¨ande an. Abh¨angig ist das Ganze von den Wandmodulen des verwendeten Messesystems, welche es eventuell auch St¨ande mit halben Metern realisierbar machen. Zus¨atzlich w¨are die Art der W¨ande ebenfalls modifizierbar, bedeutet ob unter anderem Leuchtw¨ande oder Standardrahmen ein- gesetzt werden. Eine weitere wichtige Konfiguration neben der Gr¨oße des Standes ist auch die Bauform. Darstellbar sein mussten¨ mindestens der Eckstand, Reihenstand und Kopfstand von den in Abschnitt 3.1 vorgestellten Grundformen. Diese gibt es im Prinzip fur¨ jede Gr¨oße

40 4.4. Blend4Web Referenzmaterial und Vorlagen die realisierbar ist. Der Inselstand wurde¨ sich, im Gegensatz zu den anderen, in der Mitte der Standfl¨ache befinden. Ein weiterer Aspekt, welcher mit den Rahmenmodulen zu tun hat, w¨are die Kabine. Dabei muss unterschieden werden ob eine vorhanden ist, an welcher Position sich diese befindet und welche Gr¨oße notwendig ist. Auch interessant w¨are dabei die Platzierung der Tur¨ und deren Anschlag. Ein weiterer sehr wichtiger Punkt in der Standgestaltung sind die Grafiken welche in den Rah- menmodulen angebracht sind. Nicht nur muss uberlegt¨ werden, ob unterscheide im Material sinnvoll erscheinen, sondern auch die Auswahl der Motive. Fur¨ ersteres kann es durchaus Sinn ergeben eine Unterscheidung zu machen, wenn Preise im Konfigurator angezeigt wer- den sollen und es Differenzen zwischen den einzelnen Materialien gibt. Fur¨ die Visualisierung wurde¨ dies allerdings nichts ¨andern und w¨are ausschließlich in der Auswahl oder in der Be- zeichnung zu erkennen. Eine M¨oglichkeit eigene Grafiken auf die W¨ande zu setzen w¨are naturlich¨ Wunschenswert,¨ ist aber auch mit einigen Problemen verbunden. Zum einen muss dafur¨ sichergestellt sein, dass diese auch vernunftig¨ dargestellt werden. Insbesondere muss die Textur ordentlich auf der Fl¨ache abgebildet und die Grafik muss richtig skaliert werden, sodass Muster sich nicht zu h¨aufig wiederholen. Dafur¨ w¨aren Einstellungen im Konfigurator mit zum Beispiel Schiebereglern wie bei Blickfang eine m¨ogliche L¨osung. Die letzte Kategorie w¨aren Objekte welche zus¨atzlich auf den Stand gestellt werden. Dabei kann es sich um Objekte welche sich im Kontingent des Systemherstellers befinden handeln, oder auch um zus¨atzliche Objekte die rein gar nichts mit diesem System zu tun haben (zum Beispiel Pflanzen). Hier ist die Vielfalt naturlich¨ unbegrenzt, da durchaus auch gr¨oßere Ob- jekte wie Fahrzeuge oder ¨ahnliches auf Messest¨anden zu finden sind, solange diese auf die Standfl¨ache passen.

4.4 Blend4Web Referenzmaterial und Vorlagen

Bei der Installation von Blend4Web fur¨ Blender werden mehrere Beispiele ebenfalls instal- liert, welche einige Vorlagen fur¨ Interaktionsm¨oglichkeiten mit der Szene im Web bieten. Diese befinden sich wie das Meiste im Project Manager (siehe Abbildung 4.1). Neben einer Vorschau wird auch der dafur¨ ben¨otigte JavaScript Code zur Verfugung¨ gestellt. Weitere Informationen k¨onnen im Browser, mit Hilfe der Entwicklungsansicht, entnommen werden. Code Snippets und Cartoon Interior sind die beiden Beispiele welche fur¨ diese Arbeit als interessant erscheinen und deswegen genauer unter die Lupe genommen werden. Zus¨atz- lich bietet Demo Interactivity - Inherit Material einen interessanten L¨osungsansatz fur¨ den Wechsel der Grafiken.

4.4.1 Cartoon Interior Das Beispiel Cartoon Interior bezeichnet eine Szene, welche sich mit dem dynamischen La- den von Objekten und der Interaktivit¨at von diesen besch¨aftigt. Dies k¨onnte fur¨ Theken, Stuhle,¨ Tische, etc. bei Messest¨anden interessant werden. Auch w¨are durch das Austau- schen von Grafiken ebenfalls dieses Problem l¨osbar. Das dynamische Laden von Objekten

41 4. Anforderungs- und Vorlagenanalyse

Abbildung 4.1: Blend4Web Project Manager

Abbildung 4.2: 3D Szene Cartoon Interior, Quelle: htt- ps://www.blend4web.com/en/community/article/63/ (zuletzt Aufgerufen: 18.07.19)

42 4.4. Blend4Web Referenzmaterial und Vorlagen

Abbildung 4.3: JavaScript Code zum dynamischen Laden von Objekten, Quelle: htt- ps://www.blend4web.com/en/community/article/63/ (zuletzt Aufgerufen: 18.07.19) setzt voraus, dass es eine Hauptszene gibt, in welche die neuen Objekte geladen werden k¨onnen. Im Beispiel ist dies der leere Raum, in welchen das Mobiliar hinzugefugt¨ werden kann. In dieser Szene wird auch festgelegt welche Hervorhebung ein Ausw¨ahlen eines Ob- jektes zur Folge hat. Dafur¨ muss in der Blender Datei sowohl einmal das Outlining als auch die Selektion erlaubt sein. Fur¨ die nun einzufugenden¨ Objekte muss jeweils eine eigene Blender Datei erstellt werden und dort mussen¨ gewisse Einstellungen fur¨ das 3D Objekt aktiviert werden. Unter anderem muss das Outlining und die M¨oglichkeit des Ausw¨ahlens der Objekte aktiviert werden, zus¨atzlich sollte die Option Force Dynamic Object ebenfalls ausgew¨ahlt werden, um sp¨ater die Objekte auch bewegen zu k¨onnen. Im Anschluss wird in der JavaScript Datei des Projektes das dynamische Laden, mit Hilfe der JavaScript-API von Blend4Web, programmiert. Dafur¨ mussen¨ die anderen Szenen beim Klick auf einer der Symbole geladen und in die Hauptszene importiert werden (Abbildung 4.3). Darauf folgend muss noch die Position an welcher die Objekte erscheinen festgelegt werden. Dafur¨ gibt es einen Spawner, an dessen Ort die geladenen M¨obelstucke¨ sich dann bewegen. Das Entfer- nen dieser erfolgt durch einen L¨osch-Button, mit welcher das ausgew¨ahlte Objekt aus der Hauptszene mit Hilfe einer unload-Funktion gel¨oscht wird.1 Um mit den in die Szene gela- denen Objekten zu interagieren sind allerdings noch weitere Vorkehrungen notwendig. Zum einen muss dafur¨ in der Hauptszene die Physik erlaubt sein und zum anderen muss fur¨ jedes Objekt, fur¨ welches eine Kollisionsabfrage eingestellt werden soll, eine Collision Box existie- ren. Dies erlaubt es nun auch Objekte uber¨ eine Schaltfl¨ache, welche vorher zum Beispiel mit Hilfe von HTML erzeugt wurde, zu rotieren. Notwendig ist dafur¨ ein EventListener der dafur¨ sorgt, dass das aktuell markierte Objekt beim Klick auf die Rotationsschaltfl¨ache sich in die entsprechende Richtung dreht. Fur¨ das Bewegen von Objekten sind drei Funktionen notwendig. main canvas down ist fur¨ das Aufheben zust¨andig, welche zus¨atzlich noch die Position des ausgew¨ahlten Objektes zwischenspeichert. main canvas move sorgt dann dafur,¨ dass sich das Objekt mit dem Mauszeiger mitbewegt und die Kamerasteuerung unterbindet,

1https://www.blend4web.com/en/community/article/63/

43 4. Anforderungs- und Vorlagenanalyse

solange die entsprechende Taste (zum Beispiel die linke Maustaste) gedruckt¨ gehalten wird. Beim loslassen dieser wird die Funktion main canvas up dafur¨ sorgen, dass die Kamerasteue- rung wieder fur¨ den Nutzer zur Verfugung¨ steht und dieser sich damit erneut in der Szene umschauen kann.2

4.4.2 Code Snippets Code Snippets ist eine Ansammlung an Beispielen fur¨ die Umsetzung von 3D Webinhal- ten mit der JavaScript-API (siehe Abbildung 4.4). Dazu muss allerdings angemerkt werden, dass im Browser keiner Einsicht uber¨ die 3D Modelle beziehungsweise Szenen m¨oglich ist. Dies kann dann durch einen Blick in den Ordner von Blend4Web durchgefuhrt¨ werden. In diesem sind s¨amtliche Daten vom Project Manager hinterlegt. Fur¨ jedes einzelne Beispiel gibt es eine 3D Ansicht in welcher die Steuerung der Szene ausgefuhrt¨ wird, indem man mit dieser interagiert. Wie diese funktioniert ist entweder durch Text oder Kontrollsymbole gekennzeichnet. Einige erfordern allerdings auch eine Eingabe durch bestimmte Ger¨ate wie zum Beispiel einem Gamepad oder dem Smartphone. Neben der Ansicht gibt es noch ein Menu¨ in welchem man zwischen den Beispielen hin und her wechseln kann, dabei wird immer der Ausgangszeitpunkt dieser Szenen geladen. Anderungen,¨ welche beim Testen durchgefuhrt¨ wurden, sind somit wieder zuruckgesetzt.¨ Unterhalb des Menus¨ befindet sich der wohl mit Abstand interessanteste Button. Dieser zeigt den Aufbau der verwendeten HTML und Ja- vaScript Dateien. Dabei wird nicht nur Szenen spezifischer Code angezeigt, sondern auch s¨amtliche Imports, Variablen, etc. die notwendig sind. Das fur¨ diese Arbeit interessante Bei- spiel w¨are das Change Image (Abbildung 4.5), welches zwei M¨oglichkeiten darstellt ein Bild oder Textur zu ver¨andern. Diese Funktion k¨onnte ihren Einsatz beim wechseln der Grafiken auf den W¨anden oder fur¨ die Anderung¨ der Farben vom Boden finden. Eine M¨oglichkeit des Beispiels w¨are, dass sich durch einen Klick auf das Objekt beziehungsweise die Textur selbst sich eben diese ¨andert. Dabei wechselt sich die Schrift auf dem Tischtuch zwischen zwei vorher vorgegeben Schriftzugen.¨ Die andere M¨oglichkeit erlaubt es, durch einen Klick auf eine der beiden Kugeln, den Hintergrund in die entsprechende Farbe zu ver¨andern. Das in- teressante dabei ist, dass beide F¨alle in einem switch-case realisiert wurden (siehe Abbildung 4.6). Dafur¨ wird zu aller erst das Objekt, welches sich beim Klick unter dem Mauszeiger befindet, anhand der Koordinaten ermittelt. Mit Hilfe des Objektnamens wird dann der ent- sprechende Case ausgefuhrt.¨ Im Falle einer der Kugeln wird eine Funktion zum ersetzen der Grafik von vorher festgelegten Objekten aufgerufen und ausgefuhrt.¨ Sollte ein Klick auf das Tischtuch vollzogen werden, wird zwar ebenfalls die gleiche Funktion aufgerufen, allerdings nicht an festgelegten Objekten, sondern an dem gerade angeklickten Objekt. Durch eine Variable wird dessen aktuelle Textur erfasst und zwischengespeichert.

4.4.3 Demos Interactivity - Inherit Material In dieser Demo geht es darum ein Material, nur mit Hilfe des Node Editors von Blender, in der Szene bei Blend4Web zu ¨andern. Dafur¨ werden in der Szene weitere Objekte erstellt, welche

2https://www.blend4web.com/en/community/article/66/

44 4.4. Blend4Web Referenzmaterial und Vorlagen

Abbildung 4.4: Beispiele Code SnippetsQuelle: htt- ps://www.blend4web.com/apps/code snippets/code snippets.html (zuletzt Aufgerufen: 18.07.19) beim Klick auf diese eine Textur auf ein anderes Objekt ubertragen.¨ Um es ubersichtlicher¨ zu gestalten wird empfohlen, die Objekte ebenfalls mit der gleichen Textur, auf der sichtbaren Seite, zu versehen. Dieses Vorhaben muss allerdings fur¨ jedes einzelne sich ver¨anderbare Objekt einzeln durchgefuhrt¨ werden. Im NodeTree wird dann ein Select Block erstellt, von welchem im Beispiel drei Inherit Materials Bl¨ocke abgehen. Diese sind dafur¨ zust¨andig, dass ein Objekt eine Textur auf ein anderes ubergibt.¨

45 4. Anforderungs- und Vorlagenanalyse

Abbildung 4.5: Code Snippets Image Change BeispielQuelle: htt- ps://www.blend4web.com/apps/code snippets/code snippets.html (zuletzt Aufgerufen: 18.07.19)

Abbildung 4.6: Code Snippets Code anzeigen lassenQuelle: htt- ps://www.blend4web.com/apps/code snippets/code snippets.html (zuletzt Aufgerufen: 18.07.19)

46 4.4. Blend4Web Referenzmaterial und Vorlagen

Abbildung 4.7: Inherit Material NodeTree

Abbildung 4.8: Inherit Material Szene

47

Kapitel 5

Umsetzung Prototyp

In diesem Kapitel gilt es nun den Prototypen fur¨ einen Messestandkonfigurator umzusetzen und festzuhalten welche Schritte dafur¨ n¨otig sind. Zu Beginn werden deshalb alle n¨otigen Vorbereitungen von Szenen oder auch Objekten, welche sp¨ater genutzt werden sollen, abge- schlossen. In der Folge wird die Logik implementiert um die vorher vorbereiteten Elemente im Konfigurator nutzen zu k¨onnen. Darunter z¨ahlt zum einen das Ver¨andern der Standgr¨oße oder Standform, die M¨oglichkeit Grafiken der W¨ande auszutauschen als auch Objekte in die Szene zu laden und an der gewunschten¨ Position zu platzieren. Dafur¨ sollen Haupts¨achlich die in Abschnitt 4 gezeigten M¨oglichkeiten verwendet und gegebenenfalls modifiziert werden. Fur¨ jede darzustellende Szene wird im Project Manager von Blend4Web ein eigenes Projekt angelegt und somit auch direkt die entsprechende blend-Datei erstellt.

5.1 Vorbereitung der Szenen und Objekte

An erster Stelle steht die Vorbereitung der Szenen und Objekte, welche im Konfigurator genutzt werden sollen. Die Messest¨ande wurden mit Hilfe von Panoramic Studio 3D (siehe Abschnitt 2.2.1) erstellt. Im Anschluss wurden diese als obj-Dateien exportiert und mit einer Clampsize von 10.0 in Blender importiert. Allerdings gibt es in dieses Szenen noch einige Fl¨achen, wie zum Beispiel die Grafikfl¨ache direkt vor den Rahmenmodulen, welche noch in ein Volumen umgewandelt werden mussen,¨ um eine vernunftige¨ Darstellung in Blend4Web zu gew¨ahrleisten. Anschließend werden Texturen auf eben diese Grafikfl¨achen gelegt, welche beim Laden der Szene direkt angezeigt werden sollen. Damit sind zumindest die W¨ande als Grundlage schon einmal vorhanden und k¨onnen durch ein Export einer json-Datei direkt im Browser angeschaut werden. Diese Szenen gelten als die in Abschnitt 4.4.1 benannten Hauptszenen. Fur¨ die einzelnen Objekte, welche sp¨ater der Szene hinzufugbar¨ sein sollen, ist es nicht notwendig ein eigenes Projekt anzulegen und jeder Hauptszene hinzuzufugen.¨ Hier ist es ausreichend, wenn eine neue blend-Datei mit nur diesem Objekt erstellt wird. In diesen sind allerdings die Vorbereitungen fur¨ Physik, Selektierung und Kollisionsabfrage durchzufuhren.¨ Dafur¨ mussen¨ diese Optionen in den entsprechenden Reitern aktiviert werden (Abbildung 5.1). Damit die Position beim laden festgelegt werden kann, ist zus¨atzlich noch

49 5. Umsetzung Prototyp

Abbildung 5.1:N¨otige Einstellungen fur¨ Interaktion

Abbildung 5.2: Aktivieren der Physik fur¨ Kollisionsabfrage

50 5.2. Implementierung der Logik

Abbildung 5.3: Aufruf Szenen in HTML-Datei ein Empty notwendig, welches im sp¨ateren Verlauf noch in den Quellcode der JavaScript Datei eingebunden wird. Um eine geeignete Kollisionsbox zu erstellen, sollte es sich bei dem Objekt um ein einzelnes Mesh handeln, weswegen mit einem Join alle einzelnen Teile von den Objekten zu einem Mesh zusammengefugt¨ wurden. W¨ahrend der Einstellungen fur¨ die Kollision, muss man darauf achten, wie die Collision Bounds von Blender erstellt werden. W¨ahrend der Vorbereitungen ist es h¨aufiger der Fall gewesen, dass diese gedreht waren. Dies gilt auch bei einer Box als Bound, was sp¨atestens beim Rotieren des Objektes auff¨allt.

5.2 Implementierung der Logik

Um nun in der Szene von Blend4Web die Interaktion zu erm¨oglichen und somit einen Kon- figurator statt einer Ansicht zu erschaffen, muss jetzt die Logik implementiert werden. Zum einen fur¨ das Wechseln der Szenen, also das Andern¨ der Bauform, Gr¨oße oder Marke und zum anderen das Interagieren mit den Objekten. Dafur¨ ist es Notwendig in der JavaScript Datei mit Hilfe der API Funktionen hinzuzufugen¨ und diese mit dem vorher erstellten User Inter- face zu verknupfen.¨ Um auch eine m¨ogliche Umsetzung ohne Programmierung darzustellen, wird das Austauschen der Grafiken nur mit Hilfe des Logic Editors in Blender realisiert.

5.2.1 Szenenwechsel Wie in Abschnitt 5.1 beschrieben sind alle Szenen als eigene Projekte mit eigener HTML- Datei erstellt worden. Aus diesem Grund ist es nur notwendig die in der HTML-Datei er- stellten Buttons mit dem Link zur neuen Szene zu verknupfen¨ (Abbildung 5.3). Im Falle dieser Arbeit l¨auft alles uber¨ den Localhost, es ist allerdings auch ohne weiteres m¨oglich diese auf einem Server laufen zu lassen. Der einfachheitshalber ist das Ganze auch nur mit Buttons umgesetzt und nicht etwa mit einem Schieberegler fur¨ die Standgr¨oßen, was aller- dings ebenfalls machbar w¨are, wenn je nach Stellung des Reglers eine andere HTML-Datei geladen wird. Nachteil daran ist allerdings, dass bei jedem Wechsel der Szene der Standard geladen wird und s¨amtliche Anderungen¨ zuruckgesetzt¨ werden, selbst wenn man wieder auf die vorherige Szene zuruck¨ wechselt.

5.2.2 Grafikwechsel Der Wechsel von Grafiken wird bei dieser Arbeit allein durch den Logic Editor von Blender realisiert. Dafur¨ wird in jeder Szene mit sich zu ver¨andernden Grafiken ein Node Tree er- stellt. Im Anschluss mussen¨ Objekte geschaffen werden, welche die zu Verwendende Textur

51 5. Umsetzung Prototyp

Abbildung 5.4: Buttons zum Szenenwechsel

Abbildung 5.5: Parenting von Objekten an die Kamera in Blender

beinhaltet. Diese k¨onnen beliebig in der Szene positioniert werden, auch wenn empfohlen wird diese an einer leicht zug¨anglichen Position zu setzen. Es ist ebenfalls m¨oglich diese an die Kamera zu binden, damit diese immer an der gleichen Position sich befinden. Dafur¨ ist es notwendig das Objekt als Kind der Kamera zu setzen (siehe Abbildung 5.5). Nachdem die Objekte nun erstellt wurden und die richtige Textur beinhalten, wird nun im Node Editor die Logik fur¨ alle aufgebaut. Damit nicht alle Objekte immer sichtbar sind und damit die Szene unubersichtlich¨ wird, werden alle Objekte zum Start, mit Hilfe der hide object Funk- tionen, unsichtbar gemacht. Im Anschluss wird es erm¨oglicht, dass die W¨ande selektierbar sind. Dafur¨ wird ein Select-Baustein genommen, in welchem alle ausw¨ahlbaren Objekte fur¨ den Grafiktausch hinzugefugt¨ werden. Dann wird jedes mit zwei call-Funktion Bausteinen verbunden. Diese sind zum einen ein show-object fur¨ die m¨oglichen Grafiken des ausgew¨ahl- ten Wandmoduls, damit diese wieder angezeigt werden solange das Objekt ausgew¨ahlt ist. Und zum anderen eine inherit material Funktion um die Grafik, des Buttons welcher dann Angeklickt werden kann, auf die ausgew¨ahlte Wand aufspielt beziehungsweise die aktuelle Grafik mit der neuen uberschreibt.¨

5.2.3 Objektmanagement Um die einzelnen Objekte in die Szenen zu laden wird nun Programmcode verwendet. Als Hauptgrundlage dient hier das Beispiel 4.4.1, welches das dynamische Laden von Objekten in eine Szene darstellt. Neben der M¨oglichkeit die Objekte zu laden und platzieren ist es auch m¨oglich diese zu drehen oder gar ganz zu l¨oschen. Sollte ein Objekt bereits markiert sein, soll dieses ersetzt werden. Dies erspart dem Nutzer Zeit, da dieser nicht mehr ben¨otigte Objekte einfach ersetzen kann und diese nicht noch zus¨atzlich l¨oschen muss. Mit Hilfe des in Abbildung 5.10 gezeigten Code ist es m¨oglich die ben¨otigten Objekte in die Szene zu laden.

52 5.2. Implementierung der Logik

Abbildung 5.6: Select Funktion um das Ausw¨ahlen der W¨ande zu erm¨oglichen

Abbildung 5.7: Einblenden der Grafikm¨oglichkeiten fur¨ die ausgew¨ahlte Wand

53 5. Umsetzung Prototyp

Abbildung 5.8: Funktion fur¨ den Wechsel der Grafiken

Abbildung 5.9: Gesamt NodeTree fur¨ Grafikwechsel von Lorenz 4x3m Reihenstand

54 5.2. Implementierung der Logik

Abbildung 5.10: Laden von Objekten

Abbildung 5.11: Spawnerposition laden

Der Code unterscheidet sich leicht von dem im Beispiel vorgestellten, da in diesem Fall der Pfad zum assets-Ordner fur¨ die Texturen und notwendigen Dateien mit angegeben werden. Dies geschieht uber¨ den Befehl APP ASSETS PATH, solange dieser in der vom Project Manager von Blend4Web erstellten Struktur bleibt. Um nun die Position des geladenen Objektes zu bestimmen wird das in 5.1 erw¨ahnte Empty, hier als spawner benannt, in einer Variable gespeichert und die Position dieses Emptys ebenfalls. (siehe Abbildung 5.11). Diese Variable, mit den Daten zur Position, kann nun zum Beispiel ebenfalls modifiziert werden. Dies ist notwendig um ein Objekt an einer anderen Stelle erscheinen zu lassen, wie zum Beispiel beim Ersetzen von Objekten. Dafur¨ wird uberpr¨ uft¨ ob ein Objekt ausgew¨ahlt wurde und wenn nicht wird das neue weiterhin an der Stelle des Spawners geladen. Ist allerdings nun etwas ausgew¨ahlt, werden die Positionsdaten von diesem ausgelesen und die Variable, in welcher die Position des Spawners gespeichert ist, uberschrieben¨ und das neue Objekt nun an dieser neuen Position eingefugt.¨ Im Anschluss wird der markierte Gegenstand noch aus der Szene entfernt und die Variable des ausgew¨ahlten Objektes auf NULL gesetzt (Abbildung 5.12). Ein hier ebenfalls wichtiger Punkt ist es darauf zu achten, auf welchen beiden Achsen sich ein Objekt bewegen soll. Dafur¨ mussen¨ die Werte in der FLOOR NORMAL PLANE angepasst werden. Eine Platzierung der Objekte im dreidimensionalen Raum ist aktuell nicht notwendig, da diese bisher nicht aufeinander gestapelt werden sollen.

55 5. Umsetzung Prototyp

Abbildung 5.12: Programmcode fur¨ das Ersetzen von Objekten

56 Kapitel 6

Ergebnisse

Es stellt sich nun allerdings die Frage, ob mit Hilfe des Prototypen eine Verbesserung der Planung und Visualisierung von Messest¨anden erreicht wurde oder nicht und in welchem Bereichen weiterhin Verbesserungsbedarf besteht. Dafur¨ werden die M¨oglichkeiten, welche der Prototyp bietet mit denen der bisherigen Planung verglichen und geschaut ob Probleme damit gel¨ost wurden und ob weitere deswegen hinzugekommen sind.

6.1 Ergebnisse fur¨ den Bereich der Visualisierung

Fur¨ den Teil der Visualisierung ist ein ganz eindeutiges Ergebnis. Der Vorteil einen Mes- sestand nun als 3D Objekt aus allen Richtungen sich anschauen zu k¨onnen ohne lange Renderzeiten fur¨ die Darstellung bietet viele M¨oglichkeiten. Auch k¨onnen Anderungen¨ so direkt sichtbar gemacht werden mit einem einfachen weiteren Export der HTML Datei und dem erneuten Laden der Webseite. Zus¨atzlich w¨aren mehrere Alternativen von einem Stand, welche man allein durch kurze Zeilen von HTML Programmcode, hin und her schalten lassen k¨onnte, schnell zu ubersichtlich¨ dargestellt. Auch hier h¨alt sich der Aufwand in Grenzen, da selbst ohne 3D Ansicht die St¨ande erstellt werden mussten.¨ Allerdings gibt es hier genau eine Sache die beachtet werden muss. Diese ist, dass alle Objekte ein Volumen sein sollten, da Blend4Web Fl¨achen h¨aufiger mal nicht richtig darstellt. Dafur¨ ist allerdings schon aus- reichend, wenn zum Beispiel die Grafik eine 1mm dicke Fl¨ache ist.

6.2 Ergebnisse bei der Umsetzung durch den Logic Editor

Im Falle der Planung mit Hilfe eines Konfigurators sieht die Sache allerdings nicht mehr so eindeutig aus. Der Aufwand um den Konfigurator aufzustellen ist weitaus gr¨oßer wie nur die einfache 3D Ansicht zu erstellen. Dies gilt sowohl fur¨ die Umsetzung mit dem Logic Editor, als auch fur¨ die programmiertechnische Variante. In jeder Grundszene muss die Logik fur¨ den Wechsel der Grafiken eingestellt werden, sowie eine die fur¨ das Ein- und Ausblenden der Objekte. G¨abe es eine M¨oglichkeit den NodeTree von einer Szene in die andere zu kopieren

57 6. Ergebnisse

Abbildung 6.1: Visualisierung eines Messestandes in Blend4Web

und dort zu modifizieren w¨are es m¨oglich die Arbeit zu beschleunigen. Der Vorteil, den eine Umsetzung mit dem Logic Editor bringt, ist dass dafur¨ keine gesondert geschulte Person mit Programmierkenntnissen von N¨oten ist. Deshalb bietet sich das Ganze naturlich¨ an zumindest einmal zu testen und somit den Kunden eventuell kleine Anderungen¨ an den Vorlagen fur¨ Messest¨anden zu erm¨oglichen. Fur¨ eine Erweiterung mit Hinterlegung von Preislisten etc. ist aber sp¨atestens an diesem Zeitpunkt Programmcode notwendig und wenn es sich nur um die Anbindung an eine Datenbank handelt.

6.3 Ergebnisse durch die Umsetzung mit Hilfe der JavaScript-API

Die L¨osung rein basierend auf den Programmcode hat nun weitere Vorteile, gegenuber¨ der Umsetzung durch den Logic Editor. Zwar muss auch hier fur¨ jede Szene einzeln mit dem entsprechenden Code modifiziert werden, allerdings ist es hier m¨oglich durch das Kopieren und Einfugen¨ viel Zeit zu sparen. Anderungen¨ mussen¨ hier nur in Namen und den flexiblen Werten, wie etwa die Standgr¨oße, nur der neuen Szene angepasst werden. Grundvoraus- setzung ist dafur¨ allerdings, dass die Grundstruktur von Szenen und Projektordnern gleich aufgebaut sind und somit keine Anderungen¨ an Quellpfaden vorgenommen werden mussen.¨ Ebenfalls ist es m¨oglich vieles mit der gleichen Art umzusetzen. Nicht nur k¨onnen mit Hilfe des dynamischen Ladens Objekte beliebig oft in die Szene geladen werden, sondern kann mit Hilfe der Ersetzen-Methode auch ein Grafikwechsel vollzogen werden. Viele Optionen sind also mit den gleichen Mitteln umsetzbar, auch dank einer ubersichtlichen¨ JavaScript-API fur¨ Blend4Web. Weiterhin ist es Vorteilhaft, dass sich das Ganze selbst mit wenigen Personen

58 6.4. Ungel¨oste Probleme

Abbildung 6.2: Buttons in der Szene zum Wechseln der Grafiken in zweier P¨archen einigermaßen Vernunftig¨ umsetzen l¨asst und nicht ein ganzes Entwicklerteam dafur¨ ben¨otigt wird. Zus¨atzlich w¨are das Projekt dennoch Erweiterbar und man k¨onnte somit Preislisten oder Stuckzahlen,¨ ¨ahnlich wie in den Abschnitten 2.2.1 und 2.2.2 erw¨ahnt, mit Hilfe einer Datenbankabfrage zus¨atzlich hinterlegen. Das Problem bei dieser L¨osung ist aber, dass fur¨ alles jemand mit Programmierkenntnissen n¨otig ist. Dies gilt fur¨ s¨amtliche Anderungen¨ oder auch Erweiterungen aller Art, sprich nicht nur Code oder Funktionserweiterungen sonder auch wenn neue Messest¨ande hinzugefugt¨ werden sollen, muss dafur¨ ja ebenfalls wieder je- mand mit Programmierkenntnissen sich damit auseinander setzen.

6.4 Ungel¨oste Probleme

Es gibt naturlich¨ noch ungel¨oste Probleme mit dem Prototypen. Zum einen w¨are da die Kabine welche nicht integriert wurde. Zwar k¨onnte man diese ebenfalls durch dynamisches

59 6. Ergebnisse

Abbildung 6.3: Objekte in der Szene mit den unterschiedlichen Buttons

Laden in die Szene setzen, allerdings wurde¨ sich dadurch auch der Aufbau des Standes ver¨andern. Daher w¨are entweder eine L¨osung mit eigener Szene, also fester Position der Kabine denkbar. Allerdings musste¨ dafur¨ s¨amtliches Prozedere, welches auch fur¨ die anderen Szenen notwendig war, hier ebenfalls angewendet werden. Auch sind noch einige Fehler beim L¨oschen von Objekten, welche sich von Anfang an in der Szene befinden. Sollte man zum Beispiel eine Wand ausw¨ahlen und den L¨oschen Button bet¨atigen, verschwindet die gesamte Szene.

60 Kapitel 7

Zusammenfassung und Ausblick

Zu guter Letzt gibt es noch eine Zusammenfassung der Arbeit und einen kleinen Ausblick fur¨ weitere m¨ogliche Untersuchungen im Bereich der Messeplanung und Visualisierung. Zum Start dieser Arbeit ging es darum die Probleme zu identifizieren, welche in der aktu- ellen Planung von Messest¨anden existieren und wieso diese angegangen werden mussen.¨ An dieser Stelle wurde festgestellt, dass die Planung große Mengen an Ressourcen ben¨otigt. Dies gilt vor allem in den Bereichen der Zeit und des Knowhows. Um den Aufwand zu ver- ringern war dann die Idee mit Hilfe eines Konfigurators den Kunden eine M¨oglichkeit zu geben deren Messest¨ande anzupassen und so die Ideen, unter gewissen Einschr¨ankungen, selbst umsetzen zu lassen. Um genauer die Probleme zu erl¨autern werden in dieser Arbeit die aktuell verwendeten Planungsm¨oglichkeiten fur¨ Messest¨ande aufgezeigt. Damit der Leser auch weiß worum es sich bei der Planung fur¨ Messest¨ande handelt, muss dieser auch die Grundlagen dafur¨ besitzen. Aus diesem Grund sind sowohl fur¨ Messest¨ande selbst, als auch fur¨ spezielle Varianten eben dieser in den Grundlagen vermerkt. Fur¨ die Umsetzung eines Konfigurators werden mehrere Beispiele dargestellt, unter anderem ein bereits entwickelter Konfigurator fur¨ Messest¨ande von RedPlant fur¨ die Firma Blickfang. Dieser wurde allerdings eigenh¨andig von Entwicklern programmiert und den Wunschen¨ des Kunden angepasst, wes- wegen zus¨atzlich einige Konfiguratoren, welche mit der gewunschten¨ Software Blend4Web umgesetzt wurde, ebenfalls vorgestellt werden. Da die Arbeit auf Blender und Blend4Web basiert, gibt es einige Grundlagen fur¨ eben diese. Zus¨atzlich wird die Technologie, welche die Darstellung im Web realisiert, vorgestellt. Diese ist WebGL. Um einen Uberblick¨ daruber¨ zu erhalten, was ein Konfigurator fur¨ Messest¨ande liefern sollte, wird eine Analyse dieser Anforderungen durchgefuhrt.¨ Dabei stellen sich zwei Hauptmerkmale heraus. Zum einen die m¨oglichen Konfigurationen, welche dieser bieten sollte und zum anderen Abh¨angigkeiten von den Herstellern solcher Messesysteme. Zus¨atzlich werden die Beispiele, welche Blend4Web zur Verfugung¨ stellt, auf m¨ogliche Funktionen zur Umsetzung eines Messestandkonfigura- tors untersucht. Dort gibt es drei interessante Optionen, welche sowohl zum einen Objekte durchs dynamische Laden in die Szene bringen k¨onnen und zum anderen M¨oglichkeiten um Grafiken auf den unterschiedlichen Modulen ersetzen zu k¨onnen. Im folgenden geht es dann an die Umsetzung von eben diesen Konfigurator, und dessen umgesetzte Funktio- nen zu pr¨asentieren. Dabei wird der Grafikwechsel allein durch den Logic Editor umgesetzt,

61 7. Zusammenfassung und Ausblick

w¨ahrend die Objekte, wie vorher erw¨ahnt mit einer programmiertechnischen L¨osung, dem dynamischen Laden von Objekten, in Blend4Web realisiert werden. Weitere M¨oglichkeiten diesen Konfigurator zu erweitern sind ebenfalls erw¨ahnt. Abschließend wird gekl¨art ob die Anfangs gestellten Probleme mit Hilfe des Konfigurators beantwortet beziehungsweise gel¨ost werden konnten. Also ob es durch Blender und Blend4Web m¨oglich ist die Visualisierung und Planung von Messest¨anden zu verbessern oder vereinfachen, welches zum Teil gelingt. Eine Verbesserung im Bereich der Visualisierung ist dank Zeitersparnis erreicht, fur¨ Planungen mit Hilfe eines Konfigurators besteht dieser Vorteil eher weniger, da der Aufwand fur¨ die Erstellung ebenfalls sehr hoch ist und ein gewisses Maß an Knowhow ben¨otigt. Auch ein Ausblick uber¨ m¨ogliche weitere Untersuchungen wird get¨atigt.

Ein fur¨ die Zukunft interessanter Aspekt w¨are unter anderem das aktuell von Blend4Web entwickelte Programm Blend4Web Studio, welches unabh¨angig von Blender funktionieren soll. In wie weit es dann m¨oglich ist eine Umsetzung ohne Programmierkenntnisse, also mit einem Logikeditor, zu erreichen ist aktuell nicht bekannt. Des weiteren ist der Konfigurator noch lange nicht beim Ende der M¨oglichkeiten angelangt. Ein Blick auf den bereits vorhan- denen von Blickfang verr¨at, eine Preisliste, Bestellungen oder allgemein die Anbindung an eine Datenbank erweitert die m¨oglichen Funktionen, welche der Konfigurator ubernehmen¨ kann, um ein vielfaches. Ebenfalls w¨are der Ausbau von bereits umgesetzten Funktionen, wie etwa die fur¨ Grafiken, erw¨ahnenswert. Ein Beispiel liefert auch hier der Konfigurator von Blickfang, welcher es erm¨oglicht eigene Grafiken hochzuladen und diese auf den Fl¨achen zu skalieren. Auch eine Umsetzungsm¨oglichkeit fur¨ Montagepl¨ane oder Grundrisse w¨aren denkbare Erweiterungen die einen Fortschritt fur¨ die Planung erm¨oglichen. Eine weitere M¨oglichkeit w¨are zum Beispiel andere Umsetzungen fur¨ Konfiguratoren von Messest¨anden, abseits von Blender und Blend4Web, zu untersuchen und diese gegebenenfalls mit dieser hier zu Vergleichen. Auch w¨are eine Untersuchung fur¨ die M¨oglichkeit einen systemunabh¨angigen Konfigurator umzusetzen einer Intensivierung durchaus erstrebenswert.

62 Anhang A

HTML-Code der Startszene

< t i t l e >Abschlussarbeit