Simulation trifft Gamification: Die Geschichte hinter BIFROST
Mit Siemens BIFROST werden Szenarien zur Energie- und Datenversorgung in einem spielerischen Web-Interface simuliert. Ein Tool für Expert:innen, Planer:innen, Forscher:innen und alle, die gerne ein bisschen zocken.
- Konzeption
- UX & UI Design
- Designsystem
- 3D-Modellierung
- Technische Umsetzung Frontend
- WebGL (three.js)
- React
- Node.js
- Figma
- Cinema 4D
Start
Die Ausgangslage
In einer Welt, die zunehmend von erneuerbaren Energien, dezentralen Stromnetzen und smarter Datenkommunikation geprägt ist, stehen Energieversorger und Stadtplaner vor immer komplexeren Herausforderungen. Um diese zu lösen, setzt man darauf, Ansätze in Simulationen vorab zu testen. Um diese Simulationen greifbar und verständlich zu machen, braucht es innovative Ansätze, die Technologie und Nutzerinteraktion miteinander vereinen.
Und genau hier kommt BIFROST ins Spiel. Aus einem technischen Experiment heraus entstanden, hat es sich mittlerweile als spielerisch einfaches, aber äußerst mächtiges Interface etabliert, das aktuelle Fragen aus den Bereichen Energie, Umwelt, IT und vielen anderen Themen beantworten kann. Zum Beispiel:
Was passiert, wenn eine Stromleitung im städtischen Netz unterbrochen wird?
Wie schnell wird der Ausfall erkannt und kompensiert? Welche Auswirkungen hat dies auf Haushalte, Unternehmen oder kritische Infrastruktur, und wie stabil bleibt das Gesamtnetz?
Wie wirken sich Wetterverhältnisse auf die Erzeugung erneuerbarer Energien aus?
Wie stabil bleibt das Netz bei schwankender Erzeugung und welche Speicherlösungen oder Alternativen könnten Engpässe ausgleichen?
Wie kann ein Hackerangriff auf eine Datenzentrale bewältigt werden?
Wie schnell können Backup-Systeme aktiviert werden und wie zuverlässig sind die Sicherheitsvorkehrungen? Welche manuellen Eingriffe oder Notfallpläne greifen, um den Betrieb aufrechtzuerhalten?
Die 3D-Welt
Die Bildsprache ist vereinfacht, aber dennoch ausdrucksstark. Der Schwerpunkt liegt auf modernem Low-Poly-Design, um eine gute Benutzbarkeit und Web-Performance zu gewährleisten. In den blau-grünen und grauen Unternehmensfarben von Siemens gehalten, sorgt das Tool für eine hohe Brand-Awareness. Der Stil der Gebäude und Elemente ist absolut einzigartig und gibt dem Nutzer die Möglichkeit, seinen idealen zukünftigen Stadtraum zu schaffen.
Eine komplexe Entwicklung am neuesten Stand der Technik gelingt nur mit einem voll integrierten Team von Profis. Mit der Unterstützung von pixelart loten wir mit BIFROST die Grenzen des Machbaren aus.
Die Simulation
Ob vorausberechnet (z.B. für einen Tag) oder in Echtzeit wie ein Livestream – die Simulation berechnet Daten für ein bestimmtes Szenario und leitet sie direkt über eine Schnittstelle an die Applikation weiter. Die Ergebnisse werden in der 3D-Ansicht sowie mit Diagrammen und Graphen visualisiert. Jede Nutzerinteraktion beeinflusst die Berechnungen in Echtzeit, sodass dynamische Veränderungen sofort sichtbar und analysierbar sind.
Schritt 1: Konstruktion
Mit über 150 einzigartigen 3D-Elementen steht eine beeindruckende Auswahl zur Verfügung, um eine individuelle Welt zu erschaffen. Ob Gebäude, Straßen, Stromleitungen oder erneuerbare Energieanlagen – jedes Detail kann frei gestaltet und platziert werden. So entsteht eine personalisierte Umgebung, die perfekt auf das gewünschte Szenario abgestimmt ist und die Grundlage für realistische Simulationen bildet.
Schritt 2: Konfiguration
In verschiedenen Ansichten können Ereignisse wie ein Kabelbruch, globale Veränderungen wie Wetterbedingungen oder Verbindungen zwischen Objekten – etwa in einem Smart Grid – flexibel definiert werden. So lassen sich Szenarien individuell anpassen und detailliert aufbauen.
Schritt 3: Präsentation
Simulationen lassen sich direkt miteinander vergleichen, um die effektivste Lösung für ein bestimmtes Problem zu identifizieren. Die Ergebnisse können auf innovative Weise dargestellt werden: Wie eine interaktive PowerPoint-Präsentation erscheinen sie in Form von übersichtlichen Cards. Diese ermöglichen es, die Szenarien anschaulich und verständlich aufzubereiten – perfekt für Workshops, Entscheidungsfindungen oder Präsentationen vor Stakeholdern.
Die Technologie
Die Web-Applikation vereint modernste Technologien für eine reibungslose und performante Nutzererfahrung. Ein Node.js-Server liefert die Daten in Echtzeit, die mithilfe von Web Workers effizient verarbeitet und nahtlos in einer React-App dargestellt werden. Für die beeindruckende 3D-Visualisierung sorgt Three.js, das die Objekte mit der leistungsstarken WebGL-Technologie rendert. Diese Kombination ermöglicht eine dynamische und interaktive Darstellung komplexer Szenarien direkt im Browser – ohne Kompromisse bei Geschwindigkeit oder Qualität.
