Spirit Plant Software and Network Architecture: a technical case study.

As the signature art installation of the Poland Pavilion at Expo 2025 Osaka, "Spirit Plant" presented a significant technical challenge in terms of network and data architecture.

Featuring 14 tablet interfaces, 9 projectors, and 3 GPU-heavy computers split across 2 floors, the installation needs to function flawlessly to support thousands of daily visitor interactions over a 6-months period.

The user journey first invites the visitors to pick cards on a tablet, in order to customise their own unique plant, seeing it evolve in realtime on fabric projections. Their plant can be immediately collected and saved as a picture on their phone via a combination of a QR Code and a website. To make this a greater communal experience, their plant is then released in a meadow–manually with another QR Code or automatically on the day–alongside others people creations on a 9x3 meters projection wall.

As a champion of Web technologies, and having pushed the boundaries of what’s possible both in term of rendering (see IBM Technology Garden) and display scale (see H&M Infinite Dreams), Variable’s favourite tool belt keeps JavaScript, WebGL and Electron at hand.

WebGL in Nodes: rendering and optimising in pex-renderer

We used our in-house rendering engine pex-renderer to achieve the desired visual style and quickly go from prototype to production.

Rendering one single 3D object on a web page sounds like a simple task. Rendering thousands of intricate flower parts with realistic wind simulation is another feat. Now multiply this by 60 plants in our final generations projection to really define what needed to be achieved.

In order to keep the polygon count low, we carefully designed each plant part (stems, flower, petals, leaves, buds, fruits, pistils, etc.) procedurally in Nodes. This ensured minimal memory usage and made these plants viable for web use where download speed is primordial.

Nature is also efficient with copy-pasting, as many plants share similar parts or simply repeat elements at different scales and angles. We mimicked this behaviour and used WebGL instancing, allowing us to further reduce the amount of geometry data needed.

Now rendering millions of polygons is not really useful if you can’t do it at 60fps, so we also optimised the amount of calls to the GPU. What gives us a significant edge is using a technique called “Multi Draw” and in particular its subset: the “Multi draw instanced base vertex base instance” extension. Since it is still a draft specification, browser support varies but Chromium has it implemented under the “WebGL Draft Extensions” flag. And that is good news because Electron is based partly on Chromium.

Electron app

On top of ensuring fidelity of what we see in our browsers during development, Electron simplifies the deployment process of our content on the installation environment: everything is neatly packaged in a single Executable to run on 17 Windows 10 machines.

The Electron app needs to show different content depending where it is running. The tablets show a HTML/CSS/JS User Interface with one plant while the other computers are used by the projections to show plants: either a single plant being created or several plants as part of the final meadow. To tell each instance of the Electron app what it should show, we go through an initial setup to refer to simple JSON config files that are synchronised on Dropbox.

As the projection computers are running multiple projection “views”, this config file also indicates the screen size/position for each of them.

{
  "views": [
    {
      "id": "projection-1",
      "type": "spirit-plant",
      "screen": {
        "index": 0,
        "x": 0,
        "y": 0,
        "width": 1920,
        "height": 1200
      }
    },
    {
      "id": "projection-2",
      "type": "spirit-plant",
      "screen": {
        "index": 1,
        "x": 0,
        "y": 0,
        "width": 1920,
        "height": 1200
      }
    }
    // ...
  ]
}

Under the hood, since Electron is basically Chromium + Node.js, we run a basic HTTP server with WebSockets to serve these views locally and communicate over the network.

So how do we actually make all these separate applications speak together.

WebSocket

One of the instance acts as the central hub for the installation: it spins a WebSocket server that coordinates which view should update in response to user interactions and time based events. It also periodically pings every clients to ensure they are alive.

For instance, the totem tablet are synchronised with the fabric projection so every time a visitor is customising their plant by selecting cards on the UI, a socket message is sent across for the computers running the projection to display the exact same plant. The message contains both a seed for our pseudo-random number generator to create the plant structure and components values to display the associated plant elements.

Debugging and installation status dashboard

To help with debugging, we created a dashboard view which logs all the sockets events.

The view shows the current build version and IP of all connected views and gives a simple UI to reload them individually or send a WebSocket message to display a debug view. This view is also responsible for reloading the app everyday to ensure proper functioning over the course of the Expo.

Data storage and analytics

Most socket events tangentially record user interactions. We store all these interactions in JSON files on Dropbox to detect any anomaly and analyse people’s decisions.

Combined with website data, we are able to “replay” a day of Spirit Plant at Osaka Expo and visualise their creation in a dashboard.

We are also able to recreate and render all plants ever created during the span of the Expo.

Combining Web technologies in Nodes and Electron, we brought the Spirit Plant installation to life: we connected all the clients together with no latency, displayed striking visuals of algorithmically generated plants, streamlined the deployment process, and bundled everything into a reusable setup. The result is both a communal and personal experience for visitors of the Osaka Expo 2025.

For more details and stunning pictures of the installation, see our case study on variable.io.