Verse Engine で作った空間を Cloudflare Pages にホスティングする
自分の推しの VTuber 事務所の運営をしているアップランドさんから、誰でも簡単に Web メタバースを作成・公開できる Verse Engine というものが1ヶ月前ぐらいにリリースされたので、ちょっと触ってみました。
今回は Get started (Three.js) をそのまま実装して、 Cloudflare Pages にホスティングします。
また、ストレージサーバーは Cloudflare R2 を使います。
Cloudflare R2 にコンテンツをアップロード
Get started で用いるファイルは verse-threeのexample にあるものをダウンロードして使用します。
example ではこれらのファイルも Git で差分管理するようにしていますが、サイズが 10 MB を超えるファイルもあるので、本来 Git で差分管理を行いたくはありません。
なので、 CORS の設定が可能な無料のストレージサービスである Cloudflare R2 を使いました。
エグレス料金も無料というのが魅力的です。
バケットを作成・公開設定
にあるファイルをダウンロードして、それをそのままアップロードします。
次に「設定」を開き、 r2.dev サブドメインを許可にします。
このパブリック r2.dev バケット URL はこの後に使います。
そして、 CORS ポリシーを編集します。ひとまず、 localhost だけ許可しておきます。
[
{
"AllowedOrigins": [
"http://127.0.0.1:8080"
],
"AllowedMethods": [
"GET"
]
}
]
ソースコードの変更
ANIMATION_MAPが相対パスでリソースを選択されているので、パブリック r2.dev バケット URL でファイルの URI に書き換えます。
const ANIMATION_MAP = {
- idle: "./asset/animation/idle.fbx",
- walk: "./asset/animation/walk.fbx",
+ idle: "https://pub-[random-numbers].r2.dev/idle.fbx",
+ walk: "https://pub-[random-numbers].r2.dev/walk.fbx",
};
同様にPRESET_AVATARSも書き換えます。ファイル名が${n}.vrmとかなので、ファイル名を変更せずにそのまま R2 にアップロードすれば問題ないはずです。
export const PRESET_AVATARS = [
...range(3).map((i) => `f${i}`),
...range(3).map((i) => `m${i}`),
].map((n) => ({
- thumbnailURL: `./asset/avatar/${n}.png`,
- avatarURL: `./asset/avatar/${n}.vrm`,
+ thumbnailURL: `https://pub-[random-numbers].r2.dev/${n}.png`,
+ avatarURL: `https://pub-[random-numbers].r2.dev/${n}.vrm`,
}));
localhost で動かしてみると、正常に VRM ファイルや fbx ファイルが読み込まれている事が確認できます。
Cloudflare Pages にデプロイ
デプロイといっても、ビルドコマンドなどは実行せず、そのまま index.html を公開するだけです。
GitHub から自動デプロイするようにする
まずは、 Cloudflare のダッシュボードから「アプリケーションを作成する」を選択して、 Pages を作成します。
Push した GitHub のリモートリポジトリを選択し、ビルド設定はそのまま何もしません。
（ただし、index.htmlが/publicとかにある場合は、ビルド出力ディレクトリに/publicを設定する必要があります。）
保存してデプロイを押すと、デプロイが開始されます。これで、 GitHub の main ブランチに push されたタイミングで自動的にデプロイが実行されます。
R2 の CORS 設定
デプロイされたサイトにアクセスしても動きません。理由はこのホスティングされた URL が R2 のバケットの CORS で許可されていないためです。
先程編集した CORS ポリシーにサイトの URL を追記します。
[
{
"AllowedOrigins": [
- "http://127.0.0.1:8080"
+ "http://127.0.0.1:8080",
+ "https://try-verse-engine-example.pages.dev"
],
"AllowedMethods": [
"GET"
]
}
]
これで正常にファイルが読み込まれ、 Cloudflare Pages 上に表示する事が出来ました。
終わりに
ただチュートリアルを触ってデプロイしただけという簡単な記事になりましたが、今はまだこのような記事すら無いぐらい Verse Engine に関する情報が少ないのでいいのかなと思っています。
また、まだ試せていないですが、 R2 はカスタムドメインを設定する事でキャッシュを有効に出来るようです。正直 R2 が色々便利過ぎて驚いています。
Discussion