Praktikumsbericht mal anders: IOT Projekt mit Three.JS Web Anwendung
Als Praktikantin bei LimeSoda durfte ich diesen Sommer einen Einblick hinter die Kulissen von LimeSoda machen. Erste Challenge, neue Web Technologien ausprobieren und ein kleines Projekt umsetzen. Aus diesen Recherchen entstand Lime3D, eine Interaktive 3D Web Anwendung, die als IoT Projekt auch in der Realität zum Leben erweckt wurde. Ziel war es, durch die Interaktion mit einem 3D-Modell in einer Web-Anwendung, gleichzeitig eine reale Limette auf einem Schrittmotor bzw. einem Servomotor zu bewegen.
3D Web Anwendungen mit Three.js und Babylon.js
Was ist das? War mir in der ersten Woche meines Praktikums auch noch nicht bekannt. Three.js und Babylon.js sind die am meisten verwendete Möglichkeiten für die Implementierung von Web Anwendungen, die 3D Inhalt verwenden und anzeigen. Es sind JavaScript Libraries, welche die Arbeit mit WebGL erleichtern. WebGL, die Web Graphics Library, ist ein JavaScript API mit der interaktive 3D sowie 2D Grafiken im Webbrowser angezeigt werden können. WebGL stellt alleine jedoch nur wenige Basisfunktionen zur Verfügung, wodurch die Programmierung von 3D Anwendungen nur damit sehr aufwendig sein kann. Three.js und Babylon.js erweitern WebGL mit zusätzlichen Funktionen und ermöglichen die einfache Erstellung von kompakten 3D Web Applikationen.
Das JavaScript API Three.js wurde erstmals 2010 veröffentlicht und wurde seitdem laufend verbessert und erweitert. Babylon.js ist etwas jünger und wurde erst 2013 veröffentlicht. Der größte Unterschied zwischen den beiden APIs ist – neben Aufbau und Syntax – dass Babylon.js vorrangig als 3D Game Engine gedacht ist, wobei man auch mit Three.js Spiele implementieren kann.
Prototyping und 3D Modellierung
Als nächstes habe ich zwei Prototypen, einmal mit Three.js und einmal mit Babylon.js, umgesetzt, um die Unterschiede in der Praxis zu sehen. Für die passende graphische Darstellung haben noch die 3D Modelle gefehlt. Dafür habe ich Autodesk Maya gewählt, da ich diese Software bereits aus meinem Studium kenne.
Die 3D Modelle ins Projekt einzufügen war jedoch problematischer als erwartet, da man mit Three.js eigene Loader benötigt um fbx, obj oder mtl Dateien importieren zu können. Wir entschieden uns für das File-Format fbx, da man hier die Textur und BumpMap direkt in Three.js hinzufügen kann, vorausgesetzt die UV-Map wurde in der fbx-Datei mitgespeichert. Nach ein paar (hundert) Anläufen hat es dann gut funktioniert. Bei Babylon.js gibt es zusätzlich noch das gltf bzw. glb Format, welches alle nötigen Information gleich in einer Datei speichert. Um meine Modelle in dieses Format zu konvertieren habe ich das Tool Sandbox von Babylon.js verwendet (sandbox.babylonjs.com). Hier kann man obj-Modelle bearbeiten, Texturen hinzufügen und diese dann als fertige Modelle im glb Format speichern.
Im Code habe ich dann noch die Interaktion mit der Limette implementiert und schon waren die Prototypen funktionsfähig.
Was ist nun besser, Three.js oder Babylon.js? Das kann man nicht so einfach sagen. Grundsätzlich können die beiden APIs die selben Ergebnisse erreichen, jedoch ist der Aufbau des Programms, sowie die Funktionsweise unterschiedlich. Mir persönlich war Three.js sympathischer, da die Syntax mit meinen Vorkenntnissen intuitiver ist. Was besser ist, muss also jeder für sich selbst entscheiden.
3D Druck
Passend zur Web Anwendung musste eine Limette her und damit wirklich alles zusammenpasst haben wir sie drucken lassen. Dazu mussten die Modelle vorbereitet werden. Die Größen mussten in den richtigen Maßstab gebracht werden und entsprechend des Servos skaliert werden. Außerdem benötigten wir auch eine Möglichkeit das Modell am Servo anzubringen. Die Halterung musste genau zum Aufsatz des Servos und zur Limette passen.
Für den Druck haben wir die 3D-Fabrik beauftragt. Dort kann man ganz einfach das Modell hochladen und, schneller als gedacht, wurde unser Modell schon geliefert.
Socket.io und Raspberry PI
Um nun die Interaktion mit der Limette auf mehrere Browser-Fenster und später den Schrittmotor zu übertragen, musste ein Server her. Wir haben uns für Socket.io entschieden, eine Javascript Library, die Echtzeit Kommunikation zwischen Server und Clients ermöglicht. Zusätzlich kann man Socket.io auch mit Python verwenden, was die Steuerung des Motors stark vereinfacht.
Den Server haben wir auf einem Raspberry PI eingerichtet, der gleichzeitig auch den Motor steuert. Anfangs haben wir versucht einen Schrittmotor für die Drehung der Limette zu verwenden. Dieser kann sich 360° drehen, aber ohne Sensor kann man nicht feststellen an welcher Position sich der Motor befindet. Dadurch war eine synchrone Bewegung mit der Web Anwendung unmöglich. Deshalb sind wir auf einen Servomotor umgestiegen, dieser kann sich nur 180° drehen, ist jedoch sehr genau.
Schlussendlich läuft nun also ein Python Server, der den Servomotor anhand der Interaktion im Browser steuert und die aktuelle Position der Limette auch mit anderen Browsern synchronisiert.
Demonstration der synchronen Bewegung der Limette
Alles in allem ein cooles Projekt, an dem ich hier im Rahmen meines Praktikums mitarbeiten durfte. Ich bekam viel Unterstützung von hilfsbereiten und erfahrenen Kollegen und konnte dabei viel lernen. Vielen Dank für die tolle Zeit!
Passende Projekte
