Simulation meets gamification: The story behind BIFROST.
With Siemens BIFROST, scenarios for energy and data supply are simulated in a playful web interface. A tool for experts, planners, researchers, and anyone who enjoys a bit of gaming.
- Concept development
- UX & UI Design
- Design system
- 3D modeling
- Frontend development
- WebGL (three.js)
- React
- Node.js
- Figma
- Cinema 4D
Start
The starting point
In a world increasingly shaped by renewable energy, decentralized power grids, and smart data communication, energy providers and urban planners face ever more complex challenges. To address these, simulations are used to test different approaches in advance. Making these simulations tangible and understandable requires innovative solutions that combine technology with user interaction.
This is exactly where BIFROST comes into play. Originally developed as a technical experiment, it has since evolved into an intuitive yet powerful interface that can answer pressing questions in fields such as energy, environment, IT, and many others. For example:
What happens if a power line in the urban grid is interrupted?
How quickly is the outage detected and compensated? What impact does it have on households, businesses, or critical infrastructure, and how stable does the overall grid remain?
How do weather conditions affect the generation of renewable energy?
How stable does the grid remain with fluctuating production, and what storage solutions or alternatives could compensate for bottlenecks?
How can a hacker attack on a data center be managed?
How quickly can backup systems be activated, and how reliable are the security measures? What manual interventions or emergency plans are in place to maintain operations?
The 3D world
The visual style is simplified yet expressive. The focus is on modern low-poly design to ensure usability and optimal web performance. Styled in Siemens' blue-green and gray corporate colors, the tool reinforces strong brand awareness. The unique design of buildings and elements allows users to create their ideal future urban space.
A complex, state-of-the-art development can only succeed with a fully integrated team of professionals. With the support of pixelart, we are pushing the boundaries of what is possible with BIFROST.
The simulation
Whether precomputed (e.g., for a day) or in real-time like a livestream, the simulation processes data for a specific scenario and transmits it directly to the application via an interface. The results are visualized in a 3D view, as well as through charts and graphs. Every user interaction influences the calculations in real time, making dynamic changes immediately visible and analyzable.
Step 1: Construction
With over 150 unique 3D elements, an impressive selection is available to create a customized world. Whether buildings, roads, power lines, or renewable energy facilities—every detail can be freely designed and placed. This allows for a personalized environment tailored to the desired scenario, forming the foundation for realistic simulations.
Step 2: Configuration
In various views, events such as a cable break, global changes like weather conditions, or connections between objects—such as in a smart grid—can be flexibly defined. This allows scenarios to be customized and built in detail, enabling precise and dynamic simulations.
Step 3: Presentation
Simulations can be directly compared to identify the most effective solution for a given problem. The results are presented in an innovative way: like an interactive PowerPoint presentation, they appear as clear and structured cards. These allow scenarios to be visually engaging and easy to understand—perfect for workshops, decision-making, or presentations to stakeholders.
The technology
The web application integrates cutting-edge technologies to ensure a seamless and high-performance user experience. A Node.js server delivers real-time data, which is efficiently processed using Web Workers and seamlessly rendered in a React app. The impressive 3D visualization is powered by Three.js, utilizing the high-performance WebGL technology to render objects. This combination enables a dynamic and interactive representation of complex scenarios directly in the browser—without compromising speed or quality.
