DIVX テックブログ

webアプリでの3Dモデルのプレビューを見越したAutodesk Platform Serviceを使ったデータ管理方法

webアプリでの3Dモデルのプレビューを見越したAutodesk Platform Serviceを使ったデータ管理方法

前置き

1. イントロダクション

1.1 背景と目的

こんにちは、エンジニアの阿部です。今回は、Autodesk Platform Service(APS)を活用した 3D モデルプレビューのデータ管理の設計についてお話しします。

最近、Autodesk Platform Serviceを使った 3D モデルプレビューを見越した CAD ファイルの管理を担当したのでどのような設計を行なったかなどを簡単に紹介させていただきます。

本記事では、「3D モデルプレビューの実装方法」ではなく、「3D モデルプレビューに向けてのデータ管理方法」について概要をお話しします。

担当案件では React を使った実装をしています。もし「3D モデルプレビューの実装方法」に興味がある場合は以下の記事や公式ドキュメントが参考になると思いますのでご活用ください。

今後また記事を書かせていただける機会があれば、実装内容などさらに掘り下げた内容も記載できればなと考えております。

1.2 どんな人に向けた記事か

  • APS に興味がある
  • APS を使った 3D モデルプレビュー機能を作りたいけど設計に悩んでいる

1.3 APS の特徴

魅力

3D モデルプレビューを実装するにあたってまず立ちはだかるのが、「どのファイル形式まで対応するか」という部分です。特定のファイル形式に対応した無料のライブラリも存在します。ただファイル形式を制限させたくないという要望がある場合、APS が有力な選択肢の一つとなる可能性があります。他にも選択肢が存在するかもしれませんので、最新の情報を確認することをお勧めします。

私も CAD の知識が少なかった中で、Autodesk Platform Service(APS)の機能に挑み、API ドキュメントやチュートリアルを活用して実装を成功させました。

難点

結論、特定の言語に対するライブラリや SDK のサポートが限定的な場合があるため独自の実装が必要になる場合があります。そのため、APS で利用予定の API の I/O や URL をしっかり把握し、独自のパッケージやシステムに APS を統合するための処理を作る必要があります。

1.4 前提

詳細部分には言及しないため、以下の部分を把握していると当記事が読みやすくなると思います。

  • React の基本的な構築方法と API との連携についての知識
  • APS の基本的な使い方についての理解(以下の項目が分かれば読みやすくなると思います)
  • APS のアカウントをすでに持っている or もしくは登録方法を知っている
  • APS 用のアプリケーションをすでに作っている or 登録方法を知っている
  • API の認証フロー
  • Autodesk のアカウント登録・システム用の Autodesk OSS(APS App-Managed Bucket)バケットの作成はすでに済んでいる(公式ドキュメント)
  • 3D モデルプレビュー処理は APS の「Viewer」というサービスを利用する前提で話を進めていきます
  • AWS S3 にファイルをアップロードするための事前署名付き URL の発行方法。
  • マスターデータは S3 で管理する設計になるためこちらもわかっておくと良いです。

前置きが長くなりましたが、そろそろ本題に入らせていただきます。

2. 準備

2.1 仮想要件

実際にありそうな要件を立てて設計を考えてみます。

  1. 画像、動画や CAD などの 3D モデルも含めたファイル管理システムを作りたい
  2. アップロードしたファイルのプレビューもしたい
  3. 3D プレビューに対応できるファイル形式に制限をなるべく設けたくない
  4. アップロードしたファイルは基本そのアカウント本人のみしか閲覧できない
  5. アップロードしたファイルを再度ダウンロードすることもある

上記 1 ~ 4 に関しては Autodesk の以下 API を活用すれば実現できる認識です。

Viewer / 無料

  • 公式ドキュメント
  • Viewer は SVF 形式ファイルを表示するためのサービス(他の形式のファイルも一部サポートしています。)
  • React 側で使用する想定
  • Authentication API で生成したトークンによる認証がないと実行不可

Authentication API / 無料

Data Managemanet API / 無料

  • 公式ドキュメント
  • バケットの作成やオブジェクトの登録・参照を行うための API
  • Authentication API で生成したトークンによる認証がないと実行不可

Model Derivative API / 有料

  • 公式ドキュメント
  • ファイルの変換処理を行う API
  • ユーザーがアップロードしたマスターデータを SVF 形式に変換するなどに利用する
  • Authentication API で生成したトークンによる認証がないと実行不可

ただし、「アップロードしたファイルを再度ダウンロードする」という要件には注意が必要です。Viewer でのプレビューを行うためには、アップロードされたファイルを SVF 形式に変換してから Viewer に渡す必要があります。そのため、前提で触れた APS OSS にアップロードしたマスターデータを一度 SVF に変換して保存しなおす作業が必要になります。

PDF, PNG など一部 SVF 形式ファイルに変換せずともプレビューできるファイルとの共存も踏まえると、二重管理にはなりますがマスターデータは保守運用のしやすさやダウンロードにも対応できるように S3 で管理を行い、3D プレビュー用の変換後ファイルを APS OSS で管理するのが今回の要件にはマッチしそうです。

3. 設計

仮想要件を踏まえて簡単なシーケンス図を用意しました。手順としては以下になります。※ エラーハンドリングなどの詳細な処理は省いております。

3.1 ファイルの登録まで

  1. S3 に対してファイル(マスターデータ)をアップロードするための事前署名付き URL の発行
  2. 発行された事前署名付き URL をもとに S3 にアップロード
  3. ファイルを登録する API をリクエスト
  4. アップロードしたファイルのメタデータをデータベース登録
  5. Autodesk OSS に対してファイルをアップロードするための認証トークン生成
  6. 上記認証トークンを用いた事前署名付き URL を発行
  7. 事前署名付き URL をもとにファイルをアップロード
  8. アップロードしたファイルに対して、SVF 変換 API を実行




3.2 ファイルの参照まで

  1. 対象ファイルの参照 API をリクエスト
  2. データベースから対象のファイルを取得
  3. マスターデータを参照するために S3 に対して事前署名付き URL を発行
  4. Autodesk OSS に対して対象ファイルのみ閲覧可能な制限付き認証トークンを発行
  5. 認証トークンを用いて Autodesk OSS から対象ファイルを参照し URL を取得
  6. 2つの URL をフロントエンドなどに返却




4. 結果

APS を活用したことで、3D ファイルを多様な形式で管理し、プレビューすることができるシステムを構築できました。特に、対応可能なファイル形式を幅広くカバーできたのは大きなメリットです。


  ご相談フォーム | 株式会社divx(ディブエックス) DIVXのご相談フォームページです。 株式会社divx(ディブエックス)



お気軽にご相談ください


ご不明な点はお気軽に
お問い合わせください

サービス資料や
お役立ち資料はこちら

DIVXブログ

テックブログ タグ一覧

人気記事ランキング

関連記事

GoTopイメージ