Robloxで360度画像を表示する
Contents
Robloxで360度画像を表示してみました。
360度画像は、360度カメラで撮影した写真でも、画像生成AIで作成した画像でもいいです。
- 360度写真
- 360度生成AI画像
処理の概要は以下となります。
- 360度画像の入手
- 立方体画像に変換
- 立方体画像の貼り付け
360度画像の入手
360度画像
360度画像は、生成AIで作成できます。詳細は別記事をご参照ください。
- 別記事：360度生成AI画像の作り方
ここでは、パブリック3Dアセットライブラリを利用しました。
- パブリック3Dアセットライブラリ：Poly Haven
poly havenから360度写真を選びます。
画面右上にある「4K」「EXR」を選び、「ダウンロード」をクリックします。
- 4K, EXR → ダウンロード
今回は4Kにしましたが、8KでもRobloxのアップ画像制限をクリアできるかも知れません。
ここは試していないので、どなたか挑戦してみてください。
- 8Kそのままでクリアできるかも
- 8Kを少しサイズダウンすればクリアできるかも
EXRをPNGに変換
ダウンロードしたexrファイルをpngに変換します。やり方は色々とあると思います。
- steinbach_field_4k.exr → steinbach_field_4k.png
Adobe Photoshop
ダウンロードしたexrファイルを、Photoshopで開き、別名保存でpsdファイルにします。
- 「ファイル」-「別名で保存」-「ファイルの種類：Photoshop(*.PSD;*.PDD;*.PSDT)」
- steinbach_field_4k.exr → steinbach_field_4k.psd
Adobe Bridge
Adobe Bridgeを起動し、作成したpsdファイルを探し右クリックします。
そして、書き出し先をクイック書き出しにしてpngを選びます。
- psdファイルを右クリック
- 「書き出し先」-「クイック書き出し」-「画像形式：PNG」
- 「書き出しを開始」をクリック
- steinbach_field_4k.psd → steinbach_field_4k.png
立方体画像に変換
png形式になった360度写真を立体画像に変換します。これもやり方は色々とあると思います。
Panorama to Cubemap
Panorama to Cubemapは、360度画像を6面立方体に変換するWebサイトです。
ここに、360度画像（steinbach_field_4k.png）をアップロードすると立方体に変換してくれます。
下図（Output）の各画像をクリックして、各々ダウンロードします。
デフォルトで、左から以下のファイル名になります。
- nx.png, py.png, pz.png, ny.png, px.png, nz.png
Qbit – The Pragmatic Skybox Generator
Qbitも360度画像を立方体に変換してくれます。QbitはアプリなのでPCにダウンロードして使用します。
使い方は、下記サイトで詳細に説明されています。
立方体画像の貼り付け
最後は、６枚の画像をRobloxのSkyboxに貼り付けていきます。
- nx.png, py.png, pz.png, ny.png, px.png, nz.png → Skybox
画像のアップロード
クリエイターハブにログインし、６枚の画像をアップロードします。
- クリエイターハブ：https://create.roblox.com/
クリエイターハブのトップ画面の左側メニューから「作品」をクリックします。
作品画面の「開発用アイテム」をクリックします。
開発用アイテムタグから「デカール」をクリックします。
「アセットのアップロード」をクリックして、６枚の画像をアップロードします。
プロパティの設定
アップロードした６枚の画像は、Roblox Studioのツールボックスで確認できます。
エクスプローラのLightingにあるSkyをクリックします。
そして、Skyのプロパティに値を設定していきます。
- ツールボックスのマイ画像にいく
- 画像「px」を右クリック
- 「アセットIDをコピー」を選択
- プロパティのSkyboxFtにペースト
画像のアセットIDをSkyのプロパティに、コピー＆ペーストします。
画像とSkyboxプロパティの対応は以下となります。
- px → SkyboxFt
- py → SkyboxUp
- pz → SkyboxRt
- nx → SkyboxBk
- ny → SkyboxDn
- nz → SkyboxLt
Skybox：画面クリックで画像拡大
６枚の画像をSkyboxに張り付けると完成です。
参考
- Convert a 360 Photo into a Skybox
- Panorama to Cubemap
- Tutorial: How to make good, round, seamless skyboxes
- Poly Haven
- Qbit – The Pragmatic Skybox Generator
