By bridging the gap between design and usage, digital twins enable companies to unlock the full power of their data to better understand the past, view present conditions, and prevent future issues of their physical assets.
Industries that once heavily relied on in-person resources are now able to accelerate their digital transformation strategy and build and deploy dynamic, connected digital twins using Unity’s flexible creation tools and tailored professional services.
Many companies have already taken the step towards creating a connected future for their operations and have deployed Unity-powered digital twins to improve operational efficiency, visualize concepts in real-time for better decision making, and provide enhanced workforce training.
Beyond transforming operations, companies across various industries are also turning to digital twins to reimagine how they approach their sales and marketing strategies.
With consumers’ buying behavior changing, companies are realizing that they not only need high-quality marketing materials and visuals, but that they must also provide their customers with the ability to explore a product from any vantage point and discover, choose, and purchase features that matter most to them.
Using real-time 3D digital twins, companies can now leverage existing product data to create digital assets, such as 3D product configurators, and create marketing content more efficiently, drive faster time to market, and increase consumer engagement.
Using Unity tools to create an immersive product experience
Unity Industry enables industry customers to build custom applications for augmented reality (AR), virtual reality (VR), mobile, desktop, and web. A team of Unity senior technical specialists, software developers, and technical artists created our own fictional brand, TIMI, using Unity Industry as well as specialized Unity products, including our data prep tool Pixyz and our 3D marketing solution Unity Forma.
TIMI is an end-to-end experience of a GX7 skid loader, showcasing an interactive 3D configurator that runs on the web. It also includes:
- A hybrid configurator with a Universal Render Pipeline (URP) basic spline design
- High Definition Render Pipeline (HDRP) render build that generates all the imagery on the interactive website
TIMI allows users to customize by modifying details like the wheels, front tool, body color, and tool color – all in real-time.
| Check out TIMI |
In this guide, we’ll take a look under the hood of TIMI to learn about the technicalities of how to build a best-in-class real-time 3D industrial product experience.
Product configurators go beyond industrial machinery and are being deployed across an array of industries, from manufacturing, luxury furniture, and more.
For a deeper dive into this project, watch the “How it’s made – TIMI skid loader demo” webinar, featuring John Futscher, Senior Technical Specialist, Unity.
Inside the guide
- Leveraging your existing data
- User interface and adding variants
- Managing environments
- Creating camera options
- Getting started with rules
- Setting up hotspots
- Exploring the build tab
- Web integration
Leveraging your CAD/3D data
Unity makes it easy to import the product data you already have, along with their variants, to create configurator assets and experiences. The TIMI skid loader started as a computer-aided design (CAD) model that included different variant data like the bucket, tracks, and sweeper.
You can import more than just CAD models. Using Pixyz Plugin, a data preparation tool for transforming 3D product data, you can import more than 40 different 3D file formats to leverage your existing data.
User interface and adding variants
Designed for users with little-to-no coding experience, the product configurator solution is a simplified mode of working in Unity that removes the complexities of its interface.
To access it, open the Unity Editor, go to the Forma tab, then select Switch Mode.
Now, you have a much simpler view, along with helpful buttons and features designed to simplify developing and deploying your product configurator.
To your left is the Configurator window, your one-stop shop for all the things you’ll need for your product configurator.
Let’s start with the Product Tab.
Here, we can create variant options and manage visibility variant data such as the wheels, tracks, fork, or bucket on our TIMI skid loader. We can also explore material variants like colors and reflections.
You can also create new variants in this tab. To do this, right-click on an existing visibility variant, and select Add Variant. Then, navigate to the populated window on the bottom left of the interface. Here, you can rename your variant, change the thumbnail, and select a material.
Next, click the Play button, and you will see that the new option you just created has already been integrated into the UI. It’s as easy as that – no need to bring in a UI designer or write any code.
All of this UI is being generated with the product configurator solution’s runtime UI. This allows the UI to expand and contract dynamically, and it will pull from all of the variants that were created to build the buttons and options, as well as hide them, based on your customer’s configuration.
Managing environments
Next, let’s look at the Environments tab. Here, we can add environments, allowing your product to be showcased in a scene that makes most sense to your customer. In this example, we have our TIMI skid loader sitting in a construction zone.
To create a new environment, click Add. In the populated window, a various number of scenes that have already been built out in the project will become available.
Tip: You’re not limited to just adding one environment. The runtime UI will pick up additional scenes as options, allowing you to display your product in a variety of scenes.
Creating camera options
Now you’ve added your product and an environment. Next is managing how your customer sees your product with the Cameras tab.
Here, you can add various camera settings with different appearances and settings, like an interior view or side view.
Tip: Unity’s configurator solution ships with several different camera functionalities, like free cameras, pan and orbit, and lock cams. Each works out of the box without any additional code required and comes with many customization options.
Getting started with rules
The Rules tab allows you to set up simple logics for interactive experiences without coding.
To add a new rule, select Add > Rule, then set up your logic.
Example: To avoid offering a blue color option for the brush cutter on our skid loader, we would set up the following logic:
IF > Material Variant > Tool Cutter > Matte Blue
THEN > Hidden > Visibility Variant > Front Tool > Brush Cutter
This rule is now automatically applied to the logic in our product configurator scene.
Setting up hotspots
Hotspots are free-floating UI that enable you to showcase key features of your product while letting your customers easily toggle through a variety of options.
To set up a hotspot, navigate to the hotspot window at the top left of the interface. Select Add > Hotspot, and choose a location where you’d like your hotspot to be, then click Confirm.
Exploring the build tab
Finally, let’s take a look at the Build tab. This is where we can publish WebGL configurator data to be embedded in an interactive website experience.
To do this, navigate to the window on the bottom left of the interface. Review the settings in this window, and select Build.
It’s also possible to create a standalone application to generate high-resolution materials quickly.
It allows you to create images and videos manually or automatically, then export all your materials in various ways such as 360 degree outputs, splitting layers for external composition, and turntable renders.
The Forma Render build may look familiar, but it isn’t actually running in the Unity Editor. It’s a standalone build and can be shared or adapted to create design or marketing materials.
On the left hand side of the application, you can find options within your product tab to select options and see them applied in real-time. You can also move freely throughout the scene to view your product configurator from all angles.
When your configurator is “picture ready,” simply press the Take Shot button at the top of the application to produce photorealistic marketing materials.
Navigate to the top left of the application and select the Gallery tab to view your captured images.
Web integration
The next step is to integrate assets into a live website. From a single master scene, Unity’s configurator solution enables you to publish your configurator to multiple channels including mobile devices and web browsers via cloud streaming or WebGL.
For our TIMI skid loader, JavaScript API was integrated to create an interactive user experience. The API is used to listen to events, make dynamic changes to the page, or create personalized UI around the configurator.
When there’s a change made inside the configurator, it sends an event that’s captured by the JavaScript API. For example, if the user selects the color red for the brush tool, the JavaScript code will receive a matte red brush tool material variant as a parameter.
For more information, check out Unity’s JavaScript API for WebGL User Guide.
Also, head over to our demo page to discover how the API brought this product experience to life.
Looking for the right tools to take your sales and marketing strategy to the next level? Learn more about our data prep tool Pixyz, our 3D marketing solution Unity Forma, and Unity Industry. You can also connect with an Unity expert to get answers to your questions.
