Azure Digital Twins Explorer と 3D Scenes Studio を試してみる

# はじめに
Azure Digital Twins のクイックスタートを試したので、
手順とスクリーンショットを備忘録としてまとめておきたいと思います。
基本 Microsoft 公式のドキュメント通り進めていますが、重複する箇所については省略をしています。


- [クイックスタート - Azure Digital Twins Explorer でサンプル シナリオを使用して作業を始める](https://learn.microsoft.com/ja-jp/azure/digital-twins/quickstart-azure-digital-twins-explorer)
- [クイック スタート - Azure Digital Twins の 3D Scenes Studio (プレビュー) の使用を開始する](https://learn.microsoft.com/ja-jp/azure/digital-twins/quickstart-3d-scenes-studio)

# Azure Digital Twins  (ADT) とは
環境全体 (建物、工場、農場、エネルギー ネットワーク、鉄道、スタジアム、さらには都市全体など) のデジタル モデル に基づいてツイン グラフを作成できるようにするサービス ( PaaS ) です。Azure Digital Twins には、デジタルツインの定義や編集に使用する Azure Digital Twins Explorer や、ローコードで 3Dビューワー を作成できる 3D Scenes Studio などのツールが含まれています。

> <img width="600" alt="image.png (755.4 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/0655a6fb-030d-4673-9e58-8f02165a0b46.png">
> 
> [Digital Tiwns - モデリングとシミュレーション | Microsoft 公式ドキュメント](https://azure.microsoft.com/ja-jp/products/digital-twins/#overview)

## リリース情報
ざっと、Microsoft から公開されているアナウンス情報をもとに、
パブリックプレビューから GA までの流れは、以下の通りです。

Azure Digital Twins 自体は、2020年12月に一般提供を開始していますが、3D Scenes Studio は、今年の Microsoft Build 2022 内でパブリックプレビューとして公開された比較的新しいツールです。

| 年月 | 発表内容 |
| --- | --- |
| 2018/10  | [Azure Digital Twins パブリックプレビュー開始](https://azure.microsoft.com/ja-jp/blog/announcing-the-public-preview-of-azure-digital-twins/) |
| 2020/12  | [Azure Digital Twins  GA (正式リリース)](https://azure.microsoft.com/en-us/blog/azure-digital-twins-now-generally-available-create-iot-solutions-that-model-the-real-world/) |
|  2022/5 | [3D Scenes Studio パブリックプレビュー開始](https://azure.microsoft.com/en-us/updates/public-preview-azure-digital-twins-3d-scenes-studio/) |

※ Announcement というキーワードをつけて検索すると、Microsoft 公式のアナウンスメント情報、Blog  記事が見つけやすいです ( Tips )

## Azure Digital Twins 技術用語

クイックスタートを進める上で、事前に理解しておきたい Azure Digital Twins 用語をご紹介します。

| 技術用語 | 解説 |
| --- | --- |
| モデル (Model) | ビジネス環境内の場所、モノ、人を表すデジタルエンティティ (実体) が持つ、プロパティ、テレメトリメッセージ、リレーションシップを定義したもの。モデルは Digital Twins Definition Language (DTDL) と呼ばれる JSON に似た形式の言語で定義することができ、この Model を実体化したものを ツイン (Twin) と呼びます。  |
| ツイン (Twin) | ビジネス環境内の場所、モノ、人を表す特定のエンティティ(実体)。e.g. 例えば、Building というモデルを使用して、ビル1 や ビル2 といった特定の建物のツイン ( Building の実体 ) を生成することができます。  |
| グラフ (Graph) | 各ツインの関係性 (リレーションシップ) を視覚的に表現したもの。Azure Digital Twins Explorer を使用して、可視化することができます。 |
| Azure Digital Twins Explorer (Preview) | モデルやツイングラフなど、Azure Digital Twins インスタンス内のデータを視覚化、および操作するための開発者ツール。モデル、ツイン、リレーションシップの表示、クエリ実行、プロパティの編集等を行うことができます。 |
| 3D Scenes Studio (Preview) | 現場担当者がビジュアルコンテキストを使用して、Azure Digital Twins ソリューションの業務データを利用及び、調査できる没入性の高い 3D 環境です。``Build`` と ``View`` と呼ばれるシーンがあり、Build は開発者が 3D シーンを構築するための主要なインターフェースになっています。View はエンドユーザー (オペレーターなど) が、3D シーンを探索する際に使用するシーンです。   |
| オントロジ (ontology) | 製造、ビルの構造、IoT システム、スマートシティ、エネルギーグリッド、Web コンテンツなど、特定のドメインのモデルセット。( ※ 業界別のモデル定義のテンプレートのようなもの ) 独自モデルをゼロから作成するよりも、既に存在している業界特有の一連のモデルセットを使用することで、効率的に Azure Digital Twins サービスの利用を開始できます。  |

※ Azure Digital Twins Explorer の公式ドキュメントを見ると、
Preview 表記がある箇所とない箇所があるので、念のため、Preview をつけています。

# クイックスタート
クイックスタートは、以下2つのシナリオが用意されています。

1. Azure Digital Twins Explorer でサンプルシナリオを使用して作業を始める
2. 3D Scenes Studio (プレビュー) の使用を開始する

## 1. Azure Digital Twins Exploer でサンプルシナリオを使用して作業を開始する
Web ブラウザ上で Azure Digital Twins データを視覚化して操作することができるツールです。

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/8345ffe8-bc1c-96c5-6389-821d73b6ca94.png">

### 事前準備
公式サイトから、以下ファイルをダウンロードします。

- **モデルデータ :**
ツインを生成するためのモデルデータ

  - [Building.json](https://raw.githubusercontent.com/Azure-Samples/digital-twins-explorer/main/client/examples/Building.json)
  - [Floor.json](https://raw.githubusercontent.com/Azure-Samples/digital-twins-explorer/main/client/examples/Floor.json)
   - [Room.json](https://raw.githubusercontent.com/Azure-Samples/digital-twins-explorer/main/client/examples/Room.json)

- **グラフ :**
ツインのインスタンスとリレーションシップを定義するファイル
  - [buildingScenario.xlsx](https://github.com/Azure-Samples/digital-twins-explorer/raw/main/client/examples/buildingScenario.xlsx)

  > <img width="300" alt="image.png (39.4 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/a22248f4-1d1e-4023-9229-f84e5fe35061.png">

### Azure Digital Twins を設定する
まず Azure Portal 上から [リソース作成] ボタンを押して、
Azure Digital Tiwns のインスタンスを新規作成します。

<img width="600" alt="image.png (119.2 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/7b82f497-83e3-479e-8b65-5095b0fd019b.png">

Azure Digital Twins を検索後、[作成] ボタンを押します。

<img width="600" alt="image.png (458.6 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/808d4723-4e83-48cf-9d90-deac4da1da99.png">

サブスクリプション、リソースグループ、リソース名、リージョンを指定した後、[Azure Digital Twins データ所有者ロールを割り当てる] にチェックを入れ、[確認および作成] ボタンを押します。

<img width="600" alt="image.png (172.0 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/b5c33bf0-375d-4f90-af7a-35e6fbce32df.png">

Azure Digital Twins インスタンスのデプロイが開始されます。

<img width="600" alt="image.png (168.0 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/a8828fd7-87f4-4fb4-86e5-9bf4ab253458.png">

デプロイが正常終了すると、Azure Digital Twins インスタンスの概要ページを開くことができます。続いて、ページ上部の [Azure Digital Twins Exploer を開く (プレビュー)] を押します。この操作によって、Azure Digital Twins Exploer が新しいタブで開きます。

<img width="600" alt="image.png (401.2 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/a2e6ea21-6c30-4f1d-aae4-eeb3aa1d0479.png">

Azure Digital Twins Exploer を初めて開く場合は、ウェルカムモーダルが開かれるので、スキップします。( ※ 通常、Azure Digital Twins Exploer は前述の Azure Digital Twins インスタンスと自動接続しますが、もし自動接続されない場合は、別途 Azure Digital Twins Exploer 上で Azure Didital Twins インスタンスのホスト名を入力する必要があります。)

<img width="600" alt="image.png (125.3 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/f7484cfe-9bc5-4591-a847-5b9766ae53ec.png">

### サンプルシナリオを構築する
Azure Digital Twins Explorer を使用して、サンプルモデル と ツイングラフ を設定します。Azure Digital Twins グラフを作成する最初の手順は、対象となる環境を定義することです。

**サンプルモデル**

[MODELS] パネルを開き、[モデルアップロード] アイコンをクリックし、事前準備でダウンロードした、``Building.json``, ``Floor.json`` , ``Room.json`` をアップロードします。

<img width="600" alt="image.png (107.8 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/338980c4-5ccd-416f-8b1e-ff1c1ceab7ad.png">

Azure Digital Twins Explorer 経由で、Azure Digital Twins インスタンスへモデルファイルをアップロードすることができました。

<img width="600" alt="image.png (116.0 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/81bb2cb4-c40a-4c08-84b6-dced3202a89d.png">

**ツイングラフ**

上記手順によって、モデルデータ (モデル定義) を  Azure Digital Twins インスタンスへアップロードできたので、これらのモデル定義を使用して、環境内の要素のデジタルツインを生成することができます。

[Twin Graph] パネルを選択して、[Import Graph] アイコンをクリックします。``buildingScenario.xlsx`` を選択して、ファイルをアップロードします。

<img width="700" alt="image.png (148.4 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/f793628e-9a11-4d01-8853-7240127d3668.png">

アップロードが完了すると、自動的に [IMPORT] パネルが開き、読み込まれたグラフのプレビューが表示されます。グラフのインポートを完了するには、画面右に表示される [Start Import] ボタンを押す必要があります。

<img width="700" alt="image.png (182.1 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/67751ffa-a92d-4567-8161-89c7605d2e9f.png">

インポートが完了すると、以下の画面が表示されます。

<img width="700" alt="image.png (145.0 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/facdd66e-cb50-4140-a2c0-f2694a7338e4.png">

グラフデータが Azure Digital Twins Explorer にアップロードされると、Twin Graph パネルが再読み込みされます。[IMPORT] パネルで表示されていたグラフが消えてしまいますが、Azure Digital Twins Explorer の右上にある [Run Query] ボタンをクリックし、``SELECT * FROM digitaltiwns`` クエリを実行することで、グラフを表示することができます。 

<img width="700" alt="image.png (179.5 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/9cf30ac5-acc8-4235-a064-042f90a7eb2b.png">

<img width="700" alt="image.png (135.3 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/57a8e794-bcde-4905-a79b-4123643c13ab.png">

**[TWIN GRAPH] パネルに表示されている 円 (グラフのノード) は、デジタルツインを表します。円をつなぐ線は、デジタルツインのリレーションシップ (関係) を表します。**

Building A ツインには、Floor 0 と Floor 1 のデジタルツインが含まれており、Floor 0 のデジタルツインには、Room 1 が含まれています。各デジタルツインをクリックすることで、詳細データを確認することができます。

<img width="700" alt="image.png (83.6 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/2d0c9658-a367-4cda-8648-71a12cf9a190.png">

**別のツインを追加する**

デジタルツイングラフを作成した後でも、デジタルツインの構造 (グラフ) の編集をすることができます。例えば、Floor 1 上に、別の新しい部屋が追加されたと仮定して、作業を進めてみます。

まず、作成したいデジタルツインの種類を定義するモデルを選択します。( ※ 今回のケースでは、Floor 1 に新しい部屋 (Room) を追加したいので、Room モデルを使用します)

[MODELS] パネルを選択して、Room モデルのオプションメニューを開き、[Create a Twin] ボタンを押して、新しいインスタンスを作成します。

<img width="500" alt="image.png (156.1 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/08f9e85d-9761-4919-9139-a7d1a9beba90.png">

新しい Room のインスタンス (デジタルツイン) 名に ``Room 2`` と入力して、[Save] ボタンを押します。

<img width="500" alt="image.png (106.1 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/eb5e0842-4b65-48e6-8130-962501635423.png">

※ インスタンス名に半角スペースを入れると、バリデーションエラーが発生するので、注意。

<img width="500" alt="image.png (80.6 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/a4fbc36a-cd0e-4127-9b04-bfae3e77b5ea.png">

気を取り直して、``Room2`` と入力して、[Save] ボタンを押すと、
新しいツイン (Room2) が生成されます。

<img width="500" alt="image.png (69.5 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/1077c7e7-bb2b-45bd-be24-9aca0fa34a0a.png">

新しく生成したツイン (Room2) は、さきほどインポートしたデジタルツインとリレーションシップが確立されていないので、``Floor1`` とのリレーションを追加していきます。

[TWIN GRAPH] パネルを開き、``Floor1`` と ``Room2`` を SHIFT キーを押しながら、同時に選択します。2つのツインを選択したら、``Room2`` のツイン上で、右クリックをして、[Add relationships] ボタンを押します。

<img width="500" alt="image.png (75.5 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/a58ff430-6493-4966-9520-9da334fec723.png">

Create Relationship ダイアログが表示されるので、
Relationship プロパティに ``contains`` を選択して、
[Save] ボタンをクリックします。

<img width="500" alt="image.png (58.0 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/b97d8da8-d928-4e05-b264-b1032ea588b6.png">

``Room2`` と ``Floor1`` のリレーションを作成することができました。ツインをドラッグすると、好きな場所に配置を変更することもできます。

<img width="511" alt="image.png (77.2 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/e4a21052-e996-43c8-a754-8219d33d4ff9.png">

**ツインのプロパティを表示する**

[TWIN GRAPH] で特定の ツインを選択すると、[ツインプロパティ] パネルが表示されます。``Room0`` のプロパティを見ると、温度 が ``70`` 、湿度が ``30`` であることが確認できます。

<img width="800" alt="image.png (162.2 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/de9519d1-9d41-43b9-9edb-a3372c46d0b1.png">

続いて、``Room1`` のプロパティを確認すると、温度が ``80``、湿度が ``60`` であることが分かります。

<img width="800" alt="image.png (161.6 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/9bb9b1c0-e397-43bf-a13c-f2bdbb7b818f.png">

``Room2`` のプロパティを見てみると、値が設定されていません。
プロパティ値を、湿度が ``50``、温度が ``72`` になるようにフィールドを編集して、[Save] ボタンを押します。

<img width="800" alt="image.png (171.1 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/ec1b4b6c-1dac-4167-b1cb-4d3b4c2452aa.png">

変更が正常に反映されると、Patch Information が表示されるので、[Close] ボタンを押して、閉じます。

<img width="800" alt="image.png (148.8 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/52e452e6-3a53-4998-a409-4b41f3db4ad3.png">

**ツインのプロパティに対してクエリを実行する**

Azure Digital Twins では、SQL スタイルの "Azure Digital Twins クエリ言語" を用いて、ツイングラフのクエリを実行して、環境に対する洞察をえることができます。グラフ内のツインに対してクエリを実行する方法の1つは、ツインのプロパティを条件にする手法です。

今回は、環境内の湿度が ``75`` を超えているツインの数を確認するクエリを実行してみたいと思います。

[QUERY EXPLORER] パネルに、以下のクエリを入力して、
[Run Query] ボタンをクリックします。

``SELECT * FROM DIGITALTWINS T WHERE T.Temperature > 75``

クエリが実行されると、温度が ``75`` 以上である、Room1 のツインのみが表示されます。

<img width="800" alt="image.png (108.5 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/120c700a-fffa-44a3-9057-eccde6565868.png">

今回はプロパティのデータが固定ですが、物理環境とリアルタイムで接続したツインにクエリを投げることで、環境に対する洞察を得たり、環境内の異常値などを特定することができます。

## 2. 3D Scenes Studio (プレビュー) の使用を開始する
Azure Digital Twins 用 3D Scenes Studio (プレビュー) は、企業と現場担当者がビジュアルコンテキストを使用して Azure Digital Twins ソリューションの業務データを利用、調査できる没入度の高い 3D 環境です。

> <img width="1200" alt="image.png (818.9 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/51a86a3d-7fea-4c18-8648-4e6b3bd83947.png">
>  
> [クイック スタート - Azure Digital Twins の 3D Scenes Studio (プレビュー) の使用を開始する](https://learn.microsoft.com/ja-jp/azure/digital-twins/quickstart-3d-scenes-studio) より引用

このクイックスタートでは、工場内のロボットアームの運搬効率を監視します。ロボットアームは1時間に一定数のボックスを拾い、ビデオカメラは各アームを監視して、アームが箱を拾い損なったかどうがを検出します。Azure Digital Twins には、各アームに関連するデジタルツインが存在し、アームが箱を拾い損なうたびにデジタルツインのデータが更新されると同時に、視覚的なアラートを表示する手順についてサンプルシーンを用いて、紹介したいと思います。

### Azure Digital Twins とサンプルデータを設定する
Azure Digital Twins インスタンスは、1つの目のクイックスタートで使用したインスタンスを再利用するので、手順は省略します。

次の手順で Azure Digital Twins インスタンスのホスト名が必要となるので、ホスト名のみコピーをしておきます。

<img width="1200" alt="image.png (335.6 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/15/10862/af71906e-6b57-4808-adc5-4f66ed4134d9.png">

続いてのセクションでは、Azure Digital Tiwns データシミュレーターを使用して、Azure Digital Twins インスタンスへ読み込むためのサンプルモデルとツインを生成します。その後、シミュレーターを用いて、グラフ内のツインにサンプルデータをストリームします。

Web ブラウザで [データシミュレーター](シミュレーターを使用します。) を開きます。

[インスタンスURL] スペースにさきほどの手順でコピーした、Azure Digital Twins インスタンスのホスト名を入力し、[シミュレーションの種類] に ``ロボットアーム`` を選択した後、[環境の生成] ボタンを押します。

<img width="1200" alt="image.png (229.7 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/005570ed-5bb7-4e0c-9313-8871e0690358.png">

画面を下にスクロールして、[シミュレーションの開始] ボタンをクリックすると、Azure Digital Twins インスタンスへシミュレートされたデータの送信を開始します。※ シミュレーションが実行されるのは、このウィンドウが開き、[シミュレーションの開始] オプションが有効になっている間に限られます。

<img width="500" alt="image.png (194.9 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/e196dd64-846c-415e-877e-bd486eb5ba0e.png">

左側のタブから Azure Digital Twins Explorer の Graph ツールを開き、作成されたモデルとグラフを確認します。Graph アイコンをクリックすると、新しいウィンドウで Azure Digital Twins Explorer が開きます。

<img width="500" alt="image.png (207.2 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/695e55cb-ed21-4ee4-8044-abf06527efad.png">

Azure Digital Twins Explorer 上で [Run Query] を実行します。
インスタンスに作成されたすべてのツインとリレーションシップに対して、クエリを実行します。

<img width="1200" alt="image.png (171.9 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/39947dcc-ea14-455f-a386-62ee4972af08.png">

各ツインを選択して、詳細を表示することができます。

<img width="1200" alt="image.png (297.5 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/eb49c71f-b5d5-4058-93e7-25fd77b5fe9b.png">

アップロードされたモデルと、それらにどのような関係性があるのかを確認するためには、[MODEL GRAPH] を開きます。

<img width="1200" alt="image.png (311.2 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/fae66269-a039-48b3-a6e6-aaf150238bec.png">

### ストレージリソースの作成
Azure Cloud Shell を使用して、新しいストレージアカウントと、ストレージアカウント内のコンテナを新規作成します。3D Scenes Studio では、このストレージコンテナを使用して、3Dファイルと構成情報を格納します。

**まず Azure Storage アカウントを作成します。**

```
az storage account create --resource-group <リソースグループ名> --name <ストレージアカウント名> --location <リージョン名> --sku Standard_RAGRS
```

コマンドが実行され、アカウントが生成されると、新規作成されたストレージアカウントの詳細が出力されます。出力の中から、``ID`` を探し、コピーします。

<img width="811.1999999999999" alt="image.png (161.4 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/63446d80-a530-42f7-b0fe-148895872272.png">

**自分のアカウントへ ストレージ Blob データ所有者 のロールを割り当てます。**

```
az role assignment create --role "Storage Blob Data Owner" --assignee <ObjectId> --scope <コピーしたID>
```

コマンドが正常に完了すると、ロールの割当の詳細が出力に表示されます。

<img width="959.9999999999999" alt="image.png (114.0 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/66978788-0b02-4358-bf4d-df5dc45e05c9.png">

**ストレージアカウントの CORS を構成します**
※ 3D Scenes Studio からストレージコンテナへアクセスするための設定です。このコマンドには出力がありません。

```
az storage cors add --services b --methods GET OPTIONS POST PUT --origins https://explorer.digitaltwins.azure.net --allowed-headers Authorization x-ms-version x-ms-blob-type --account-name <ストレージアカウント名>
```

**ストレージアカウント内のプライベートコンテナを作成します。**
※ 3D Scenes Studio ファイルはここに保存されます。

```
az storage container create --name <コンテナ名> --public-access off --account-name <ストレージアカウント名>
```

コマンドが正常終了すると、以下のメッセージが表示されます。

```
{
  "created": true
}
```

### 3D Scenes Studio 環境を初期化する
このセクションでは、3D Scenes Studio を使って 3D シーンを作成していきます。

まず、[3D Scenes Studio](https://explorer.digitaltwins.azure.net/3dscenes) を開きます。インスタンス名の横にある [編集] アイコンを選択して、3Dシーン環境の構成 ダイアログを開きます。

<img width="700" alt="image.png (129.0 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/d6de7d10-9477-42d8-91d7-778dba8ac199.png">

Azure Digital Twins instance URL, Azure ストレージアカウントの URL, Azure Storage コンテナー名を選択して、[セーブ] ボタンをクリックします。※ なぜか権限エラーが発生していますが、一旦飛ばします。

<img width="700" alt="image.png (196.3 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/365a14ca-ec7c-4aeb-8eb7-9f6299432858.png">

3Dシーンで使用するサンプルの3Dモデル (glTF) ファイルをダウンロードします。

- [RobotArms.glb](https://cardboardresources.blob.core.windows.net/public/RobotArms.glb)
※ クリックすると、ダウンロードが開始します

3D Scenes Studio へ戻り、[3Dシーンの追加] ボタンを押します。

<img width="700" alt="image.png (156.3 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/8760e37a-0d1f-41dc-b549-299c95de2957.png">

シーンの名前、形容 (説明)、RobotArms.glb をアップロードして、
[創造する] ボタンをクリックします。

<img width="700" alt="image.png (134.4 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/7a9e1a0d-1882-4854-96ba-4d4bb0802199.png">

3D Scenes Studio のメイン画面の一覧に新しく作成されたシーンが表示されるので、クリックします。読み込みには、少し時間が掛かります。(1分程度)

<img width="1000" alt="image.png (150.6 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/36af5d41-6354-4e52-b17d-a318b142911a.png">

読み込まれると、``Build`` モードでシーンが表示されます。

**全体**
<img width="1000" alt="image.png (626.6 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/81b23065-257e-44d5-af66-75d48fda8037.png">

**拡大**
<img width="1000" alt="image.png (714.8 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/772d0e09-5c40-40d1-a2aa-894597b1c23f.png">

3D Scenes Studio では、3Dモデルのスタイルやカラー、背景色等を編集することができます。

| 3D model style | スクリーンショット |
| --- | --- |
| デフォルト | <img width="400" alt="image.png (249.8 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/9de1809e-f9fe-4172-8783-73b1160aab07.png">  | 
| 透明 | <img width="400" alt="image.png (327.0 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/f2206fbd-df01-4a28-b843-faa24ad0a8a0.png">  |
| ワイヤーフレーム |  <img width="400" alt="image.png (989.2 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/43f17492-c3f7-45e7-a0bb-7c383dd9cd94.png"> |

### シーン要素を作成する
シーンの視覚化で任意のロボットアームを選択します。クイックスタートドキュメントでは、アーム全体を選択されていますが、実際に試してみると、アームが細分化されていて、アーム全体を選択することはできないようでした。

ひとまず、アーム上部を選択して、要素アクション [+新しい要素を作成する] ボタンを押します。

<img width="500" alt="image.png (207.7 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/a203875a-c26d-4d33-b007-b0dc02919d40.png">

[New element] パネルの [Primary twin] ドロップダウンリストを展開して、[Arm1] を選択します。さきほど選択できなかったメッシュの一部も、このパネルを開いた後にメッシュをクリックすることで追加することができました。

<img width="500" alt="image.png (310.9 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/382e2871-528d-4ba3-906c-f65771cb7936.png">

[Create element] ボタンをクリックすると、新しい要素が追加され、
一覧に表示されるようになります。

<img width="500" alt="image.png (248.1 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/5d2dc641-d5fa-4f49-be03-30fd48210171.png">

### 動作を作成する
次に、作成した要素の Behaviour (動作) を作成します。
Behaviours を追加すると、要素のデータビジュアルおよび関連するビジネスロジックをカスタマイズできます。

[Behaviour] リストに切り替え、[New behaviour] ボタンをクリックします。

<img width="200" alt="image.png (36.5 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/5aa1582d-a899-4f99-82cb-b54046315bf1.png">

Display name を入力して、Element タブの ``Arm1`` にチェックを入れます。

<img width="700" alt="image.png (358.4 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/e16fd24d-9c98-4a36-9f94-3a99087c7ed5.png">

[Visual rules] タブを切り替えます。ビジュアル規則は、各要素に適用されるデータドリブンのオーバーレイで、要素の正常性、または状態を示すために構成されます。今回のシナリオでは、要素のプロパティについて問題のある値の範囲を特定し、この範囲の値であればビジュアルが赤色に変化するように指定します。

[Visual rules] タブの [Add Rule] ボタンをクリックします。

<img width="300" alt="image.png (132.2 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/89010578-b829-44db-a709-aa832704cd84.png">

ビジュアル規則のルール名 (display name) と プロパティを選択して、
[Add condition] ボタンを押して、条件を追加します。

<img width="300" alt="image.png (120.7 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/645d34b7-2eb3-42bc-9715-4d6c570cbc50.png">


このシナリオでは、アームが1時間以上に3回以上ピップアップを失敗すると、メンテナンスが必要とフラグを立てます。ラベルと閾値、視覚タイプを編集して、[Save] ボタンを押します。

<img width="500" alt="image.png (293.3 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/0211e9c4-fac5-4e06-99ad-f56ea74851e5.png">

[Widgets] タブに切り替え、[Add Rule] ボタンをクリックします。

<img width="300" alt="image.png (134.6 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/78e4d810-997c-4249-ac5c-c5177d120800.png">

Widget library から Gauge (ゲージ) を選択して、[Add widget] ボタンを押します。

<img width="700" alt="image.png (363.3 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/bf287459-f391-4cca-b0db-9a40fb2ca21e.png">

油圧 ( Hydraulic pressure ) の値に関するウィジェットを作成します。
ウィジェットの表示名、単位、プロパティ、閾値等を設定して、
[Create widget] ボタンを押します。

<img width="700" alt="image.png (371.2 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/7b90fa20-2264-42b5-85fd-5a3b76035b1c.png">

さらに、アームのライブカメラのストリームへのリンクを含むウィジェットを作成していきます。

[Widgets] タブから [Add widget] ボタンをクリックして、
Widget library から Link を選択します。

<img width="700" alt="image.png (369.7 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/1c39f075-2774-4b89-bb38-94bdb2a72e80.png">

ラベル名と URL を入力して [Create widget] を押します。
※ このリンクはサンプルのため、動作しません。
 
<img width="500" alt="image.png (281.1 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/24829cf9-5411-4c73-8b5a-c12b1d874109.png">

以上にて、動作オプションの設定が完了しました。
最後に設定を保存するために、[Create Behaviour] ボタンをクリックします。

<img width="500" alt="image.png (309.2 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/b6bf3e2c-47fe-4ae3-aca0-1ef1aa5a355f.png">

保存が完了すると、Behaviour 一覧に表示されます。

### シーンを表示する
  ここまでは ``Build`` モードを使用して、シーンを構築してきましたが、ここからは ``View`` モードで実際のシーンを確認してみたいと思います。

<img width="800" alt="image.png (532.1 kB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/dec25c60-e449-4de9-906b-419deac97b3a.png">

実際の動作の様子は YouTube にアップロードしたので、
気になる方はこちらをご覧ください。

> <img width="800" alt="image.png (1.8 MB)" src="https://img.esa.io/uploads/production/attachments/3505/2022/12/16/10862/20ee47f0-e78f-4e7d-ab92-195ff09de9e0.png">
>
> [Azure Digital Twins 3D Scenes Studio クイックスタートを試してみる](https://www.youtube.com/watch?v=20ERset2lW4)

3D Scenes Studio を使用すれば、ローコードで ビジュアル規則 や ウィジェット を追加することができます。

# 参考文献
[Azure Digital Twins のドキュメント](https://learn.microsoft.com/ja-jp/azure/digital-twins/)