Anwendungsgebiet
Prüfung von Bauteilen und Qualitätssicherung
Zeitraum
Januar - Dezember 2022
Technologien
Zusammenfassung
Unsere Agentur wurde von einem großen Kunden beauftragt, eine Web-Benutzungsoberfläche für deren automatisiertes Analyse-Tool für 3D-gescannte Bauteile zu entwickeln (Frontend und UI/UX). Unsere Lösung stellt eine benutzerfreundliche, funktional-aufgewertete und performante Alternative dar, die wir iterativ und in enger Absprache mit dem Kunden ausgearbeitet haben. Durch das Projekt haben wir unsere Kompetenz in der Programmierung von 3D-Szenen auf ein neues Level gehoben. Der Erfolg des Projektes zeigte sich in der Zufriedenheit des Kunden, welche letztendlich in der Beauftragung für ein weiteres Projekt mündete.
Hintergrund und Entstehung des Projektes
Der Einsatz von Künstlicher Intelligenz (KI) bei der automatisierten Analyse 3D-gescannter Bauteile hat in den letzten Jahren die Qualitätssicherung in der Fertigungsindustrie revolutioniert. Durch den Einsatz fortschrittlicher Algorithmen kann die KI feinste Abweichungen und Unregelmäßigkeiten in den 3D-Scans erkennen, die dem menschlichen Auge oft entgehen. Diese Technologie ermöglicht eine präzise und effiziente Überprüfung der Bauteilqualität in Echtzeit, minimiert Fehlerquoten und trägt somit zu einer signifikanten Steigerung der Produktionsstandards bei. Allerdings muss der Algorithmus für eine wirkungsvolle Nutzung der automatisierten Analyse individuell auf die speziellen Anforderungen eines Bauteils abgestimmt sein. Dies erfordert eine benutzerfreundliche Konfigurationsoberfläche, anhand derer der Algorithmus beispielsweise die zu analysierenden Merkmale definieren und deren Toleranzen markieren kann. Für die Entwicklung dieser Web-Benutzungsoberfläche wurden wir von Helm & Walter IT Solutions engagiert.
Die Abbildung zeigt den dreistufigen Prozess der Qualitätsprüfung von Bauteilen: Zunächst wird ein Laser-Scan vom Bauteil durchgeführt, dessen erzeugtes 3D-Modell in einem zweiten Schritt üblicherweise als Punktwolke präsentiert wird. Im letzten Schritt können Benutzende die Analysewerkzeuge konfigurieren, die vom Algorithmus der künstlichen Intelligenz ausgeführt werden sollen. So können beispielsweise Bereiche markiert werden, in denen die KI das Werkstück auf Mängel prüfen soll. Im Fall unseres Kunden lagen bei Projektauftakt sowohl der Scanning-Vorgang durch die Industriekamera als auch die KI nur rudimentär vor. Die Bedienung des lokal installierten Tools erfolgte ausschließlich über die Kommandozeile, was sich negativ auf Benutzerfreundlichkeit und Flexibilität auswirkte. Eine Hovering-Funktion zur tieferen Analyse von Bauteilmakeln gab es zudem ebenso nicht, was den Arbeitsprozess verlangsamte. Zunächst galt es, eine angemessene Projektverwaltung für das Webtool zu implementieren. Im Anschluss sollte eine interaktive Darstellung der Punktwolke durch z.B. Hovering oder Markierung realisiert und die Anwendung im web-basierten Format umgesetzt werden.
Unsere Leistungen
UI/UX-Design
Wie bereits beschrieben war der Ausgangspunkt für die Entwicklung der Benutzeroberfläche eine kommandozeilenbasierte Anwendung, die als Technologiedemonstrator in einem Forschungsprojekt diente. Unser Ziel war, eine bessere Alternative in Form einer benutzerfreundlichen Weboberfläche zu schaffen. Diese ermöglicht es, Analysetools zu konfigurieren und Analyseergebnisse in einer 3D-Punktewolkendarstellung visuell auszuwerten. Um dieses Ziel zu erreichen, haben wir uns auf einen iterativen Designprozess mit Feedback-Loops konzentriert, bei dem ein High-Fidelity-Prototyp von mir in AdobeXD entwickelt wurde. Dieser Prototyp wurde dem Kunden bereits während der Entwicklung zur Verfügung gestellt, damit der Kunde den Algorithmus und dessen Anwendungsschnittstellen (APIs) für die Datenübertragung weiterentwickeln konnte.
Dieser iterative Ansatz ermöglichte es uns, die Konfigurationsschritte für die Verarbeitungs- und Analysetools sorgfältig zu entwickeln und dabei die Benutzerfreundlichkeit stets im Blick zu behalten. Besonderes Augenmerk legten wir auf die verständliche Darstellung der Reihenfolge, in der die Analysetools durch den Algorithmus abgearbeitet werden, um die Abhängigkeiten zwischen den Ergebnissen der einzelnen Tools zu verdeutlichen. Um zudem die Wartezeiten bei der serverseitigen Datenverarbeitung zu verringern, integrierten wir eine Vorschau der Tool-Konfigurationen in der 3D-Visualisierung, noch bevor die eigentliche Verarbeitung auf dem Server stattfindet. Somit können wiederholte, ressourcenintensive Verarbeitungsprozesse zum Fine-Tuning der Konfigurationen vermieden werden. Die 3D-Visualisierung folgt bewährten UI-Konventionen von 3D-CAD- und Modellierungsanwendungen und bietet Nutzern eine intuitive Steuerung der Ansicht für eine effiziente Bewertung der Analyseergebnisse.
Entwicklung Webfrontend
Meine Aufgabe war die Frontend-Entwicklung der Benutzeroberfläche als Web-Anwendung, welche die Interaktion mit der Punktewolke ermöglicht. Ziel dabei war Transformation der ursprünglichen Software mitsamt der bestehenden und neu-geforderten Funktionalität in die Webanwendung. Dafür musste die nahtlose Integration der 3D-Library in das Vue-Framework sichergestellt und Änderungen an den Daten in die Library zurückgegeben werden. Mittels eines programmierten Controllers konnte die Interaktion von Vue und ThreeJS abstrahiert und erleichtert werden, was die Reaktivität zwischen der 3D-Komponente und dem Framework sicherstellte. Darüber hinaus war ich für die Lösung von Performance-Problemen verantwortlich, um eine reibungslose User Experience zu gewährleisten. Von mir umgesetzte Features waren beispielsweise die Funktionsauswahl, die Navigation der Kameraansicht im virtuellen Raum, Mouse-Hover-Informationen für jeden Punkt der Wolke oder das Selektieren von Objekten.
Besondere Herausforderungen
Import von vielfältigen Dateiformaten
JavaScript basiert auf einer Single-Thread-Architektur, was bedeutet, dass die JavaScript-Engine den Quellcode in nur einem Ausführungsstrang abarbeitet. Um die Performance der Anwendung auch beim Einlesen großer Datenmengen zu erhalten, haben wir einen Web Worker implementiert. Dieser unterstützt das Parsen und Einlesen der Daten in Arrays in einem extra Thread im Hintergrund. Dadurch bleibt die Anwendung reaktionsfähig und kann gleichzeitig andere Aufgaben parallel ausführen. Trotz des Einlesens der riesigen Datenmenge bleibt die Benutzeroberfläche weiterhin benutzerfreundlich.
Reaktionsschneller Umgang mit tausenden von Datenpunkten
Eine weitere Besonderheit des Projekts war die Implementierung der Bounding Volume Hierarchy (BVH) für eine schnelle Verarbeitung der Datenpunkte. Diese Datenstruktur organisiert große Mengen an 3D-Daten hierarchisch, indem sie Objekte in einfache geometrische Formen, sogenannte Bounding Volumes, aufteilt. Mathematisch wird dies als geometrische Raumaufteilung bezeichnet. Wir haben die Komplexität bei der Berechnung der Hover-Information zu einem Punkt deutlich reduziert. So war war der Berechnungsaufwand ursprünglich linear, wohingegen dieser nach der Hierarchisierung mittels Bounding Volumes lediglich logarithmisch ausfiel. Konkret bestand die Lösung mittels Hierarchisierung darin, große Bereiche auf Kollisionen oder Sichtbarkeit zu prüfen und erst danach detailliertere Berechnungen durchzuführen. Dadurch wird der Rechenaufwand erheblich reduziert und die Performanz der Anwendung verbessert. Bei jedem Mouse-Move-Event erfolgt ein Vergleich mit einer großen Anzahl von Datenpunkten im 3D-Raum. Hier hat sich die Bounding Volume Hierarchy (BVH) besonders bewährt. Durch die hierarchische Struktur kann schnell ermittelt werden, welche Datenpunkte für das Mouse-Event relevant sind. Im Kontext der Kollisionserkennung im 3D-Raum reduziert dies die Notwendigkeit, eine Vielzahl von Datenpunkten direkt zu überprüfen, indem nur die Bereiche untersucht werden, die tatsächlich mit der Cursor-Position in Berührung kommen.