Visualizing Azure Digital Twins in 3D (2023)

3D visualization of a real-world environment with all the things, people, business processes in it is no longer found only in science fiction movies! Digital Twins is a term describing digital representations of environments, things, people and their relationship, and Azure Digital Twins (ADT) is a platform that allows creating and interacting with such digital representations. Not only does it allow to create models but also offers a graph API to query and interact with its twins. ADT Explorer is a tool allowing users to visualize ADT models and Twins and explore the relationship between different things, people, and processes. ADT Explorer is useful for visualizing this graph and exploring the relationship between different objects.

Visualizing Azure Digital Twins in 3D (1)

But these 2D graphs don’t resemble the actual objects’ size, shape, color, or location. A flexible 3D representation is extremely helpful to navigate, understand, monitor, and react to changes in this information. Operators who have to interact with Digital Twins need to do so in a way that is simple and intuitive for them.

The HOOPS Web Platform is a set of software development kits that can complement ADT by providing a web-based 3D viewer that can import CAD models and connect to data and events stored in ADT. Using HOOPS and ADT we can create a 3D Digital Twin of a factory with an intuitive interface that allows operators to easily see the state of each machine.

Visualizing Azure Digital Twins in 3D (2)

Let's walk through how you can bring a 3D visualization to life by connecting it to Azure Digital Twins. We’ll start with what you need to follow along and how to import 3D models into HOOPS. Then we’ll connect the 3D models to ADT nodes, display markup, react to events, and learn how to edit the 3D world we’ve created.


The repository at shows a simple example of combining these two frameworks. We’ll use this project to highlight essential ideas and integration points.This sample project includes a front-end client that displays 3d data and information from a connected Azure Digital Twin instance. This project also includes a simple back-end Node.js server that facilitates authentication and secure communication to ADT. For more information, refer to the readme in the sample project.

Visualizing Azure Digital Twins in 3D (3)

DTDL is the language used in Azure Digital Twins to describe models and twins. Learn more here. We use a DTDL graph based on this ADT Learning Module. You need to connect to a hosted ADT graph similar to this one.

To use custom 3D data from CAD models, you will need the HOOPS Web Platform.

Importing Data

We must first create or source 3D data. Many times, 3D models of the devices, machinery, infrastructure, and buildings already exist. Other times, they need to be created using a CAD package like SOLIDWORKS or Inventor for mechanical design or AutoCAD, Revit, or SketchUp for building design. A 3D model close to the original may suffice. Numerous 3D model libraries like GrabCAD, TurboSquid, and SketchFab provide ready-made 3D models that can be used or adapted.

Each 3D model can be converted into a stream cache file using the HOOPS Converter command-line application.

> converter --input factory-floor.skp --license_file license.txt --output_scs factory-floor.scs

These optimized files can be combined and loaded into the HOOPS Web Viewer for visualization.

Note: There are two main variants of stream cache data:

  • Stream Cache Standalone (SCS) - These singular files can be easily loaded with REST API functions, just as you would some other file. The entire file must be downloaded before visualizing. In this article, we use this approach to manage 3D data.
  • Stream Cache Compressed (SCZ) – These compressed files are streamed using an instance of the HOOPS SC Server app, which establishes a WebSocket connection between server and client. 3D model data is progressively streamed through this connection and can be instantly interacted with. This format helps visualize very large models.

A complete file list of supported file formats can be found here. In most cases, formats not supported by HOOPS Converter can be saved to a neutral format, like STEP, STL, or FBX, and then converted to a stream cache file.

Some nodes in the ADT graph may have associated 3D data, including the physical building or site, machines, sensors, and additional objects, both IoT enabled or not. For ADT nodes that have 3D data, you can save the associated model name as a property. Although the model file names are saved within ADT, the model files themselves should be saved elsewhere, possibly in a /scs_models directory on the server that hosts your backend.

The DTDL we use:

{ "@id": "dtmi:com:microsoft:iot:e2e:digital_factory:model_metadata;1", "@type": "Interface", "displayName": "Model Metadata - Interface", "@context": "dtmi:dtdl:context;2", "contents": [ { "@type": "Property", "name": "SCSFile", "schema": "string" }, { "@type": "Property", "name": "Transformation", "writable": true, "schema": { "@type": "Map", "mapKey": { "name": "index", "schema": "string" }, "mapValue": { "name": "value", "schema": "double" } } } ]}

In addition to the SCSFile path, we also save a transformation matrix that helps us place the object in 3D space. The transformation matrix is a 4x4 matrix that encodes its location, rotation, and scale in the 3D scene. Because DTDL does not support array as a property, this matrix is stored as a map. Index “1” through “16” represents each of the 16 elements in the matrix. It's recommended that the SCSFile name and transformation be saved as part of the ADT graph but they can also be hardcoded in your specific application, kept in a JSON file or saved in an external database. This sample assumes that it is present and will use these properties to load the associated 3D data automatically.

Visualizing Data

The HOOPS Web Viewer (HWV) is a browser-based application for viewing and interacting with 3D data. It is configurable through an extensive JavaScript API. hoops_webviewer_sample.html shows how to configure the WebViewer and connects a toolbar and other commonly used tools to the viewer. This sample serves as the basis for our sample project.

Instantiate the WebViewer using the client code served from hoops_web_viewer.js. We begin by loading an empty viewer attached to a named HTML <div>, which the WebViewer will control and render into.

 window.onload = function () { hwv = viewer = new Communicator.WebViewer({ empty: true, containerId: "viewerContainer", streamingMode: 1 }); viewer.start(); }

Next we query ADT for all nodes that have "SCSFile" and "Transformation" defined and load these into the WebViewer using loadSubtreeFromScsFile().

query_twins("SELECT * FROM digitaltwins T WHERE IS_DEFINED(T.SCSFile) AND IS_DEFINED(Transformation)").then(result => { let resultData = JSON.parse(result); resultData.forEach(twinData => { twins[twinData["$dtId"]] = {}; let scsFile = './scs_models/' + twinData["SCSFile"] + ".scs"; let array = []; for (let i = 1; i <= 16; i += 1) { array.push(twinData["Transformation"][i]); } let transformationMatrix = Communicator.Matrix.createFromArray(array); hwv.model.loadSubtreeFromScsFile(-2, scsFile, transformationMatrix); });});

Connecting ADT Twins to 3D Objects

Each model loaded into the WebViewer has a unique node Id. We can capture this when loading and store in a map indexed by the ADT Id.

hwv.model.loadSubtreeFromScsFile(-2, scsFile, transformationMatrix).then((nodeIds) => { let twin = twins[twinData["$dtId"]]; twin.nodeId = nodeIds[0];});

This creates a binding between objects in the WebViewer and ADT. When something changes in ADT, we use the ADT Id to lookup the WebViewer node Id, and then use the node Id to change the 3D representation in the WebViewer. We use this binding to display metadata and react to events.

Alternatively, interaction with objects in the 3D viewer can impact the ADT graph by using this array to look up the associated ADT Id from a WebViewer Node Id. For example, this is done when repositioning objects or changing the 3D model associated with an ADT node.


Displaying static or real-time information next to 3D objects is commonly needed. Each entity in ADT can have metadata associated with it. The WebViewer can show this as text in several ways. One way is through a piece of markup.

Visualizing Azure Digital Twins in 3D (4)

In our sample, when we load a 3D model into the WebViewer, we also create a piece of markup to display its properties. To place it properly, we take into account the bounding box of the entire 3d scene.

function createMarkup(twinData) { let twin = twins[twinData["$dtId"]]; hwv.model.getNodesBounding([twin.nodeId]).then((box) => { var markup = new CustomMarkupItem(hwv, -5, "", new Communicator.Point3((box.max.x - box.min.x) / 2 + box.min.x, 2500, 0), new Communicator.Point3(0, 1, 0), 0); var uid = hwv.markupManager.registerMarkup(markup); hwv.markupManager.refreshMarkup(); twin.markup = markup; updateMarkup(twinData); })}

A reference to the JavaScript markup object is saved alongside the WebViewer node Id in our twinMap. To update the metadata for each object we query the ADT graph:

query_twins("SELECT * FROM digitaltwins T WHERE IS_DEFINED(T.SCSFile) AND IS_DEFINED(Transformation)").then(result => { let adtData = JSON.parse(result); adtData.forEach(twin => { updateMarkup(twin); });});

Then within updateMarkup(), we use the ADT twin Id to find the associated JavaScript markup object and update its text with the correct properties parsed from ADT. Finally, calling markupManager.refreshMarkup() automatically updates the text in the 3d view.

Reacting to events

Another typical workflow is to react to events, especially error states for individual nodes or propagated errors within the ADT graph. We treat event states as just another piece of metadata. We don’t display it as text but instead highlight the entire object in an error state.

Our ADT instance sets an alert when the grinding vibration goes above 300. The “Trigger” button in the UI automatically sets vibration above 300 in the ADT graph for testing.

During our polling function we check to see if an alert has been set on a node and then highlight:


Visualizing Azure Digital Twins in 3D (5)

Repositioning Objects

Each object’s location, rotation, and size are stored as a 16-element float array representing a 4x4 transformation matrix ( This helps place each object in 3D space. Leaving a transformation matrix empty will place the objects at the center of the 3D scene (x=0, y=0, z=0).

We’ve set appropriate transformations for each node in our graph. Use geometry handles if a new object is added or you want to reposition an existing object. These can be enabled within the demo by right-clicking on an object and selecting “show handles” from the context menu. Once done repositioning, the new matrix will be output to the console and can be used to update the ADT graph.

Future work

Several initiatives that would make an integration between ADT and HOOPS more developer-friendly:

  • Authoring Tool – We assume that 3D model data (name, location, and orientation) already exist within the ADT graph. Sample code and accompanying UI that allows authoring and editing of this data both within the 3D scene and then saved to the ADT graph would be beneficial.
  • IFC to ADTL – IFC is a standard open-source building and construction file format that naturally lends itself to hierarchical object organization. IFC files are commonly organized by building domain (architecture, mechanical, electrical, plumbing), floor, space (room), and object. HOOPS Exchange provides API access to the IFC data and can prepopulate an ADTL representation of a building.
  • SignalR – The reference implementation uses a restful API to query the ADT graph on a five-second timer. The preferred way to get real-time data is through SingalR, a wrapper for WebSocket data transfer.
  • Object Instancing – An instance of each 3D object referenced in ADT is loaded into the 3D scene. This is inefficient if the same object is loaded multiple times in different locations. Instead, a single instance of the 3D object can be streamed, loaded to memory, and drawn multiple times. Instead of using loadSubtreeFromScsFile(), create a shattered SCZ file.

Make Your Own 3D Digital Twin

There are endless possibilities when combining HOOPS with ADT. What will you create? Start with a copy of this project at or the numerous tutorials within the HOOPS Web Platform.

Please keep the discussion going. Leave your questions and comments below.


Are Digital Twins 3D models? ›

Is a digital twin a 3D model? A digital twin is an immersive, photorealistic 3D model of a physical asset. Digital twins can be captured quickly using even the phone in your pocket — and can then be edited and shared with your team to improve decision-making and collaboration.

What format is Azure digital twin? ›

Digital twin data and relationship data are both stored in JSON format, which means that when you query the twin graph in your Azure Digital Twins instance, the result will be a JSON representation of digital twins and relationships you've created.

What is the difference between property and telemetry in Azure Digital Twins? ›

Properties are expected to have backing storage, which means that you can read a property at any time and retrieve its value. If the property is writable, you can also store a value in the property. Telemetry is more like a stream of events; it's a set of data messages that have short lifespans.

How to model a digital twin? ›

Building and scaling a digital twin requires a three-step approach: creating a blueprint, building the initial digital twin, and then boosting its capabilities.
  1. Create a blueprint. Aligning stakeholders on a clear vision of digital twins is a crucial first step. ...
  2. Build the base digital twin. ...
  3. Boost capabilities.

Is digital twin 2D or 3D? ›

A Digital Twin is a three-dimensional (3D) virtual representation of an object or system that deliver real-time insights into the performance, operation, or profitability of a physical object—even a city.

What is the difference between 3D model and digital twin? ›

The (huge) difference between the 3d model and a digital twin can be expressed in two words: dynamic data. Unlike static data, dynamic data changes and updates in real-time on the 3d model as soon as new information becomes available.

What is the difference between D and DS in Azure? ›

But in a nutshell, D-series VMs are designed to run apps that demand higher compute power and temporary disk performance. DS-series VMs are able use Premium Storage, that provides high-performance, low-latency storage for I/O intensive scenarios.

What is digital twin visualization? ›

A Digital Twin is a virtual model that is an exact copy (twin) of a physical object or system which represents its entire lifecycle. This could be a building, HVAC system, bridge, transit system, etc... Connected sensors monitor the physical asset, collect data, and map it directly onto the virtual model.

What are the advantages of Azure digital twin? ›

Azure Digital Twins is an Internet of Things (IoT) platform that enables you to create a digital representation of real-world things, places, business processes, and people. Gain insights that help you drive better products, optimize operations and costs, and create breakthrough customer experiences.

Is Azure Digital Twins a PaaS? ›

Azure Digital Twins is a platform as a service (PaaS) offering that enables the creation of knowledge graphs based on digital models of entire environments. These environments could be buildings, factories, farms, energy networks, railways, stadiums and more—even entire cities.

What is AWS equivalent of Azure monitor? ›

Azure's native monitoring service, Azure Monitor, and AWS' equivalent, Amazon CloudWatch, are both transforming the way cloud teams are detecting and remediating issues with applications and infrastructure resources.

Which Azure Monitor allows you to visually analyze telemetry data? ›

Azure Monitor is a comprehensive monitoring solution for collecting, analyzing, and responding to telemetry from your cloud and on-premises environments. You can use Azure Monitor to maximize the availability and performance of your applications and services.

What are the three types of digital twins? ›

Generally speaking, there are three types of digital twin – Product, Production, and Performance, which are explained below. The combination and integration of the three digital twins as they evolve together is known as the digital thread.

Can a digital twin be 2D? ›

A digital twin is a 2D or 3D digital representation of a physical asset, service, or process.

What is a digital twin also known as? ›

The term "device shadow" is also used for the concept of a digital twin.

Is digital twin a simulation model? ›

The difference between digital twin and simulation is largely a matter of scale: While a simulation typically studies one particular process, a digital twin can itself run any number of useful simulations in order to study multiple processes.

What is a digital 3D model? ›

3D modelling is the process of creating three-dimensional representations of an object or a surface. 3D models are made within computer-based 3D modelling software, which we'll explore a little later. During the 3D modelling process, you can determine an object's size, shape, and texture.


Top Articles
Latest Posts
Article information

Author: Fr. Dewey Fisher

Last Updated: 11/23/2023

Views: 6039

Rating: 4.1 / 5 (62 voted)

Reviews: 85% of readers found this page helpful

Author information

Name: Fr. Dewey Fisher

Birthday: 1993-03-26

Address: 917 Hyun Views, Rogahnmouth, KY 91013-8827

Phone: +5938540192553

Job: Administration Developer

Hobby: Embroidery, Horseback riding, Juggling, Urban exploration, Skiing, Cycling, Handball

Introduction: My name is Fr. Dewey Fisher, I am a powerful, open, faithful, combative, spotless, faithful, fair person who loves writing and wants to share my knowledge and understanding with you.