Unity 3D: How VFX can bring life to UI and data visualisation

It’s inevitable. Whenever a new technology is out, our techno creatives get eyes light up. Whether software or hardware, they always love to try it out, discover new use possibilities and - if the chance appears - bring it on to our projects. One recent example comes from the then-brand-new VFX Graph package for Unity 3D.

Since the release of this extension to our favourite real-time game engine, we’ve successfully implemented this technology in multiple projects, nominating and winning us international design awards along the way. Who will share a bit of this exploring adventure is our Digital Product Designer Jonas Lindberg.


It started with passion

The first seed to this journey came back in 2018, straight from the get-go when Unity published its first information and examples of this new system. It created stunning visual effects by controlling huge amounts of particles, something previously not possible in real-time visualisations. We were instantly hooked by the examples provided and thought of ways to utilise them ourselves.

It took us some time to get along with this new add-on, how to share the setups in collaborative projects and implement it together with Unity’s 2D UI and other interactive elements of the system, especially early on with limited documentation available. We pushed through these issues by putting our heads together and exhausting a lot of options. So we started with some spare time try-out projects such as a particle-based test HMI and a holographic vehicle visualisation to get a feel for the workflow and possibilities.

While both our workflow and the first beta implementations of the VFX Graph were a bit rough around the edges, this type of no-pressure project was great for finding potential, inspiration, and figuring out a workflow in preparation for sharp projects.

Below are some early experiments coming out of the Techno Creatives' workshop

Particle-based vehicle hmi
Holographic vehicle visualisation

Resulting in design awards

After getting into the software, it didn’t take too long for the first opportunity to utilise this new toolset. Two fantastic projects in collaboration with Veoneer and Faurecia allowed us to demonstrate the capabilities we had gathered through our explorations.

Data visualisation for Veoneer at CES 2020
VFX for data visualisation at CES 2020

Ahead of the 2020 instalment of CES, we again got the opportunity to support our long-term partner Veoneer by portraying their continuous efforts to push traffic safety to the next level. This includes not only state-of-the-art technology, but also research and data analysis, a topic sometimes harder to visualise to their existing and potential customers. 

We portrayed some of their research progress in an interactive demo titled “Data Generator”. Unity’s VFX system enabled us to visualise the hundred of thousands of data points that make up such studies, subject to the exploration and manipulation of any visitor or presenter, all rendered in real-time.


Animated popup visualisations for Faurecia CES Demo

For Faurecia CES 2020 HMI interface project, the VFX Graph served more as a detail, bringing life to parts of the UI. The client had a vision of complex visualisations promoting a key hardware feature in the interior controlling functionalities such as media equalizer, HVAC control, and even massage and relaxation modes.

These visualisation would previously have to be time-consumingly designed and pre-rendered through e.g. Adobe After Effects, but luckily we had this new tool on our side.

Unity’s VFX Graph let us set up the visualisation in its node-based UI and from there on, with the client literally looking over our shoulders, we could tweak every parameter, and see the results in real-time in front of us. This virtually non-existent iteration loop time let us perfect the visualisations to their liking and contributed to the very polished end-result of the full experience and successful demonstration.

Allowing for rapid iterations
Node-based setup to control the popup visualisation
Showcasing some of the popup functionality

Sharing our learnings

Below are some bullet points about our learnings with the VFX Graph package. A few of them were presented at the local Unity Meetup, hosted at our Studio. We received a lot of interest in this fairly new technology and hopefully inspired some to go ahead with trying it out themselves.

Here are our quick tips to get started:

  • Read up on the basics - If this is your first time working with node-based tools, it will be a lot to take in. By spending some time looking at the setup with Initialize, Spawn, Update & Render modules, you will be able to grasp how other examples are put together quickly.
  • Utilise the "blend to" functions - It's built-in for most functions and operators and makes whatever you're transforming or rendering fade nicely from one state to another.
  • Experiment! - Go crazy! Copy what others have done, rebuild your previous project replacing every mesh with shaded particles. With iterations comes experience, and with that, the possibilities to next time create something even better.
  • Get creative with the .pcache format - this is a little bit of a narrower tip, but still something we have utilised a lot. The human-readable .pcache files can be a great way of storing the data you want to visualise - with multiple fields per data point that each can affect your visualisation's final rendering.
We were excited to share our findings during Unity Meetup at our Studio

>> Are you interested in learning about how we can utilise Unity’s many functions, VFX Graph or other, to bring your product’s UI to the next level? Or to prototype a product idea quickly? Contact us and we will be happy to help you out.


Related content

- The Techno Creatives and Veoneer win Red Dot award

- Techno Creatives is the only Swedish company in the global UX Design Awards