ArtemisでBANGEOの3Dモデルを表示してみた──公開URLからSpatial Fabricの配置まで

この記事は前後編の後編です。

• 前編：ネイティブメタバースブラウザ「Artemis」v0.3.0公開──Spatial FabricとJWS署名を整理
• 後編（この記事）：BANGEOにSpatial Fabricを置き、Artemisで実際に表示する

まずArtemisで開いてみてください

この記事の結論から始めます。

Artemis v0.3.0を起動し、アドレス欄へ次のURLを入力してみてください。

https://www.bangeo.net/spatial/bangeo/bangeo-test.msf

これは、BANGEOで公開しているJWS署名済みのSpatial Fabricです。URLを通常のWebブラウザで開くのではなく、Artemisのアドレス欄へ貼り付けてEnterキーを押します。

1. Artemis v0.3.0を起動する
2. 上のURLをアドレス欄へ貼り付ける
3. 読み込みが終わるまで少し待つ
4. マウスドラッグで周囲を回り、ホイールで距離を調整する

署名していないFabric JSONを直接試す場合はこちらです。

https://www.bangeo.net/spatial/bangeo/bangeo.json

どちらも現在公開中で、同じBANGEOの3D空間を開きます。

結果：ブラウザのURLから自作の3Dモデルを表示できた

実際に署名済みの.msfを開くと、BANGEOの3DモデルがArtemis上に表示されました。

上の画面では、アドレス欄にもBANGEOの公開URLが入っています。つまり、ローカルに置いたGLBを単体で見ているのではなく、www.bangeo.netからSpatial Fabric一式を取得して、Artemisが3Dシーンとして組み立てています。

今回できたことを一言でまとめると、次のとおりです。

自分のWebサイトにArtemis用のURLを用意し、そのURLから自作の3Dモデルを開けるようにした。

ただし、BANGEOの記事ページそのものが3D化されたわけではありません。通常のHTML記事と、Artemis用のSpatial Fabricを同じドメインで別々に配信しています。

BANGEO
├─ /tech-articles/...                 通常のWebブラウザで読むHTML
└─ /spatial/bangeo/bangeo-test.msf   Artemisで開く3D空間

前回、BANGEOの通常URLをArtemisへ入力したときにエラーになったのは、この入口を分けていなかったからです。HTMLを返すURLではなく、Artemisが解釈できるFabric JSONまたは.msfを返すURLが必要でした。

この違いと、JWS署名・HTTPS/TLSの整理は前編で詳しく説明しています。

公開URLの裏で読み込まれるもの

今回のSpatial Fabricは、4つのファイルで構成しています。

public/spatial/bangeo/
├─ bangeo.json
├─ bangeo-test.msf
├─ assets/
│  └─ bangeo-spatial-guide-v3.glb
└─ wasm/
   └─ map.wasm

読み込みの流れは次のようになります。

ArtemisへURLを入力
  ├─ bangeo-test.msf：署名を含むFabric JSONのペイロード
  └─ bangeo.json：未署名のFabric JSON
          ↓
     wasm/map.wasm を読み込む
          ＋
     assets/bangeo-spatial-guide-v3.glb を読み込む
          ↓
     Artemis内に3Dシーンを構築する

.msfから別ファイルのbangeo.jsonを再取得しているわけではありません。.msfのJWSペイロードにFabric JSONの内容が入っており、そこに書かれた相対URLからWASMとGLBを取得します。

3Dモデルを表示するまでの具体的な手順

ここからは、表示できた状態を小さな作業単位に分解します。中心になるのは、GLBを公開ディレクトリへ置き、Fabric JSONから参照する部分です。

1. 表示するGLBを用意する

今回は、BANGEOの3Dモデルを1つのGLBとして用意しました。この記事ではモデルの制作工程には立ち入らず、完成したGLBをArtemisから読み込める状態にする部分へ絞ります。

2. GLBを公開URLになる場所へ置く

作成したGLBを次の場所へ置きました。

apps/blog/public/spatial/bangeo/assets/bangeo-spatial-guide-v3.glb

BANGEOではpublic以下がサイトのルートから配信されるため、公開URLは次のようになります。

https://www.bangeo.net/spatial/bangeo/assets/bangeo-spatial-guide-v3.glb

GLBだけをこのURLで公開しても、Artemisにとってはまだ「3Dファイルが1つある」状態です。どの空間として読み込むかを伝えるために、次のFabric JSONを用意します。

3. Fabric JSONからGLBを相対URLで参照する

3Dモデルを指定している中心部分は、Data.Scene.Resource.sReferenceです。

{
  "Container": "bangeo-spatial-guide",
  "Modules": [
    {
      "sUrl": "wasm/map.wasm",
      "sHash": "sha256-a7b9b03a6bf7e88a3cd3dd65fff6dae263f7c8ad61864dbd6aedcadfbcf66718"
    }
  ],
  "Data": {
    "Scene": {
      "Name": "BANGEO Spatial Guide",
      "Resource": {
        "sReference": "assets/bangeo-spatial-guide-v3.glb"
      }
    }
  }
}

bangeo-test.msfまたはbangeo.jsonが置かれているディレクトリを基準に、次のURLへ解決されます。

基準：https://www.bangeo.net/spatial/bangeo/
参照：assets/bangeo-spatial-guide-v3.glb

結果：https://www.bangeo.net/spatial/bangeo/assets/bangeo-spatial-guide-v3.glb

map.wasmも同じ仕組みで/spatial/bangeo/wasm/map.wasmへ解決されます。Fabricファイルだけを別のディレクトリへ移動すると相対URLの基準も変わるため、この4ファイルはディレクトリ構成ごと公開するのが分かりやすいです。

4. ライトをFabric JSONで指定する

GLBが正しく置けても、暗すぎると形を確認できません。今回のFabric JSONでは、環境光と平行光を次のように指定しています。

{
  "Primary": {
    "Ambient": {
      "fBrightness": 0.2,
      "fColor": "0xDDEEFF"
    },
    "Directional": {
      "fBrightness": 0.9,
      "fColor": "0xFFFFFF",
      "Rotation": [0.0, 0.5808, 0.6663, 0.468]
    }
  }
}

ここで調整しているのはシーンの照明です。モデル自体の配置とは分けて考えると、原因を追いやすくなります。

Inspectorで3ファイルの読み込みを確認する

ArtemisでF12を押すと、組み込みのInspectorを開けます。

ローカルで構成を確認したときは、Networkに次の3ファイルが表示され、すべてHTTP 200になりました。

OriginsにはSneeze/Rootと/bangeo-spatial-guideが表示されています。画面にモデルが出ただけでなく、Fabric、WASM、GLBが取得され、Artemis内で1つのシーンとして構築されたことを確認できました。

公開後も、Fabric JSON、.msf、WASM、GLBの4つのURLがBANGEOから取得できる状態になっています。

署名済み.msfと未署名JSONを分けた理由

最初に未署名のbangeo.jsonで、JSONの形式、相対URL、WASM、GLBの読み込みを確認しました。その後、同じJSONをArtemisのコマンドでJWS署名し、bangeo-test.msfを作りました。

Artemis.exe --sign `
  --payload bangeo.json `
  --key provider-key.pem `
  --cert provider-cert.pem `
  --out bangeo-test.msf

検証には次のコマンドを使います。

Artemis.exe --verify bangeo-test.msf --trust ca-cert.pem

結果はSignature: VERIFIEDになり、署名済みURLからも同じ3Dモデルを表示できました。

今回の署名者表示はTest Provider、発行者はOMBI Test Root CAです。Sneeze公式リポジトリの公開テスト用証明書を使った検証であり、BANGEOの正式な公開者IDを証明するものではありません。公開URLの名前にもtestを残しています。

テスト用の秘密鍵はBANGEOのリポジトリへ追加していません。将来、正式なFabricとして公開する場合は、本番用の証明書と秘密鍵の発行・保管・更新方法を別途決める必要があります。

.msfのContent-Typeには注意

現在のBANGEO配信環境では、.msfが汎用MIMEデータベースの判定によりapplication/vnd.epson.msfとして返されています。これはSpatial Fabric用に定義されたMIME型ではありません。

Artemis v0.3.0では今回のファイルを内容から読み込めましたが、この判定に依存しない方が安全です。

現在の.msfの内容はJWS Compact Serializationなので、RFC 7515に登録されているapplication/joseが内容に合います。本番向けにはRP1 / Sneeze側の最新仕様も確認し、配信ヘッダーを明示する予定です。

今回分かったこと

最初に公開URLを開いてもらったとおり、BANGEOのSpatial FabricはすでにArtemisから表示できます。

• Artemisへ入力するのは、HTMLの記事URLではなくFabric JSONまたは.msfのURL
• sReferenceから公開中のGLBを相対URLで読み込める
• ライトの指定とモデルの配置は分けて確認する
• InspectorでFabric、WASM、GLBのHTTP 200を確認できる
• 未署名JSONで構成を確認してから、JWS署名済み.msfへ進める
• 今回の.msfは公式テスト証明書による検証用で、本番署名ではない

通常のWebブラウザで記事を読み、そこに書かれたSpatial FabricのURLをArtemisへ貼り付けると、同じBANGEOドメインから3Dモデルが開く。前回は概念だった「3Dブラウザ用のURL」を、今回は実際に動く形まで持っていけました。

前編から読み返す

ArtemisとSneezeの関係、通常のWebサイトが読み込めなかった理由、JWS署名とHTTPS/TLSの違いは前編で整理しています。

前編「Artemis v0.3.0とSpatial Fabric・JWS署名を整理」を読む

参考リンク

• BANGEO：Artemis v0.3.0とSpatial Fabric・JWS署名を整理
• Sneeze：A Simple Stool
• Sneeze：Publishing a Signed Spatial Fabric
• Sneeze GitHub Repository
• RFC 7515：JSON Web Signature（JWS）
• RP1：Developers
• RP1 Developer Center