3DデータをIIIFで表示させる方法

文責 : 篠田浩輔

2020-04-18 建設開始

2020-04-22 更新

使用したPCスペック

CPU : Core i9-9920X

GPU : Geforce RTX2070 SUPER 8GB

RAM : Crucial DDR4-2666 64GB

OS : Windows 10 Pro 64bit

プログラムとそのバージョン

three.js version cd9bbcf

OBJをJSONに変換するコード

Node.js version 12.16.1

esm version 3.2.25

three.jsに必要なモジュール

開発者コマンド プロンプト for VS 2017

目的

3DモデルをIIIFで表示させてみたい。

3Dモデルをオープンソースで・アプリを使わず・スマホでも見られるようにしたい。

IIIF以外にも3Dモデルを見る方法はあるが…

table:比較表

IIIF Sketchfab Wikimedia Commons

オープンソース 〇 × 〇

アプリ不要 〇 △ 〇

スマホで3Dモデル閲覧 〇 △ ×

アノテーション付与 非公式対応 課金額による ×

最大ファイルサイズ サーバーによる 課金額による 100MB

Sketchfabはできる範囲がプランによって変わる。例えば、BASICプランでは、ダウンロードできないようにする3Dモデルは月1個まで、最大ファイルサイズは50MBまで、アノテーション付与は5個まで、パスワードを知っている人のみ閲覧できる3Dモデルはアップロードできない。

table:個人プラン比較表

BASIC PLUS PRO

月々(ドル) free 7 15

ダウンロード制限付き3Dモデル(upload/month) 1 10 30

最大ファイルサイズ(MB) 1 10 30

アノテーション(個) 5 10 20

閲覧制限付き3Dモデル × × 〇

Wikimedia Commonsは最大ファイルサイズが100MBに制限されている。

ワークフロー

1. 3DモデルのThree.js用jsonファイル作成

1. Node.jsをインストールする。

2. Windowsキー+「R」を押し「ファイル名を指定して実行」ダイアログ・ボックスを開き「cmd」と入力して開発者コマンド プロンプト for VS 2017を起動させる。

3. three.jsリポジトリをクローンし解凍する。

code: コマンド

4. three.jsディレクトリ内のconvertersディレクトリへカレントディレクトリを変更する。

code: コマンド

D:\>cd three.js-dev\three.js-dev\utils\converters

D:\three.js-dev\three.js-dev\utils\converters>

5. three.jsディレクトリ内に必要なモジュールをインストールする。

code: コマンド

D:\three.js-dev\three.js-dev\utils\converters>npm i esm

6. JSONファイルに変換するOBJファイルをconvertersディレクトリに保存する。

7. 「node -r esm obj2three.js XXX.obj」でOBJファイルをJSONファイルへ変換する。(XXXにJSONファイルへ変換したいOBJファイル名を入力する。今回はOBJtoJSON_koshinto_meguro_1_raw.objとする。)

code:コマンド

D:\three.js-dev\three.js-dev\utils\converters>node -r esm obj2three.js OBJtoJSON_koshinto_meguro_1_raw.json

8. 成功すればconvertersディレクトリにJSONファイルが生成される。

9. GitHubにJSONファイルを保存するリポジトリを作成する。(今回は「iiif-3d」とする。)

10. カレントディレクトリをDドライブへ移動する。

code: コマンド

D:\three.js-dev\three.js-dev\utils\converters>d:

10. iiif-3dリポジトリをクローンする。

code:コマンド

11. iiif-3d内のJSONファイルを保存するディレクトリへカレントディレクトリを変更する。

code:コマンド

D:\>cd iiif-3d\docs\OBJtoJSON_koshinto_meguro_1_raw

D:\iiif-3d\docs\OBJtoJSON_koshinto_meguro_1_raw>

12. 生成したJSONファイルをiiif-3dディレクトリに保存する。

13. OBJtoJSON_koshinto_meguro_1.jsonファイルをインデックスする。

code:コマンド

D:\iiif-3d\docs\OBJtoJSON_koshinto_meguro_1_raw>git add OBJtoJSON_koshinto_meguro_1_raw.json

14. 編集内容を書き、OBJtoJSON_koshinto_meguro_1_raw.jsonファイルコミットさせる。

code:コマンド

D:\iiif-3d\docs\OBJtoJSON_koshinto_meguro_1_raw>git commit -m "OBJtoJSON_koshinto_meguro_1_raw.jsonをアップロードする。"

15. リポジトリに反映させる。

code:コマンド

D:\iiif-3d\docs\OBJtoJSON_koshinto_meguro_1_raw>git push

16. GitHub Pagesを作る。

17. GitHub PagesでOBJtoJSON_koshinto_meguro_1_raw.jsonファイルを表示させる。

2. Presentation API作成

1. 神崎正英氏作成のmanifestをコピーする。

2. Image APIを生成したJSONファイルに変更する。

code: manifest

3. メタ情報やアノテーションを加える。

4. manifestをGitHub Pagesで表示させる。

3. Webビューアで表示させる

1. 神崎正英氏作成のビューアに表示させる。

課題

「データの置き場」問題

大容量になりやすい3DデータはIIIFに関わらず、データの置き場が常に課題となる。

Git LFSを試してみたが、Webビューアにエラーが表示されてしまう。

アノテーションの座標の与え方についての公式がない

手探りで座標を探るしかない。

今後

低精細になってしまうが、MeshLabを用いて3Dモデルの形状を崩さずMesh減しデータ量を減らす。

大容量データが置けるサーバを検討する。

アノテーション等の公式が発表されるまでSketchfabで代替する。

年会費15ドルほどかかる。

オープンソースで・アプリを使わず・スマホでも見られるメリットは大きい。

3Dモデルを見られるアプリはあるが、アプリは通信量及びデータ容量を圧迫するため、3Dモデルを気軽に見られない。

「あつまれ どうぶつの森」で表示できるか。

Animal Crossing Art Generator

エラーが表示されてしまい、QRコードを手に入れられず。

謝辞

質問に答えてくださった神崎正英氏にお礼申し上げる。

参考情報

永崎研宣2017「国際的な画像の相互運用規格IIIF」『入門　デジタルアーカイブ―まなぶ・つくる・つかう』54-59p、勉誠出版