MMD-PVから作詞作曲までやる、ボカロPしんりんの製作ノート

ボーカロイド、VRなど音楽と映像の作成方法と講座

【簡単】Unityで360度の画像を作る方法【球にセットするだけです】

投稿日:2019年7月30日 更新日:

Unityで360度の画像を作る方法は球に写真をセットするだけって本当?
歪みの少ないICO球を利用してシェーダーや裏表を調整するだけって本当?
床や家具を配置すればVRのワールドの背景に最適って本当?
こんな疑問に答えます。

僕はVRoidで漫画が作れるiPhoneアプリComicamを開発して公開中です。
そんな僕が解説していきます。

Unityで360度の画像を作る方法【ICO球に写真をセットするだけです】

360度の画像を貼るための球の3Dモデルを用意する

ICO球で作ると歪まずに綺麗です

メリット デメリット
多面体によるICO球
(ICO Sphere)
テクスチャが均一に綺麗に貼れる 変形する場合は工夫が必要
Unityデフォルトの6面球体
(Unity Sphere)
Unityのパノラマビデオ機能に使用 境目でテクスチャが歪みがち
一般的な地球型UV球
(UV Sphere)
変形する時に楽 上下の面が集約している部分で
テクスチャが歪みがち

球の3Dモデルは大きく3タイプあります。
今回はテクスチャをなるべく歪めずに貼りたいのでICO球を使います。

ICO球はアセット素材を使った方が早いです。
自分でBlenderでICO球を作ってインポートしても、Unity内で球を作ってもデフォルトのメッシュに変換されてしまいます。
ICO球の作成はメッシュフィルター機能でスクリプト定義する必要があり大変です。

ICO球のAssetを入手する

こちらのサイトでICO球をAseetとして配布してくださっています。
一番下のoctahedron-sphere-meshes.unitypackageをダウンロードします。
» 参考:Octahedron Sphere

作者さんの詳細な解説ページはこちらです。
» 参考:Creating an Octahedron Sphere in Unity

規約についてはチュートリアルコードの商用利用も可と書かれています。
PatreonやPaypalによって寄付ができると案内されています。
» 参考:Can I use your tutorial code for commercial projects?(C# and Shader Tutorials for the Unity Engine)

360度の画像の素材を用意する

この写真を使います。
iPhoneのGoogleストリートビューアプリで合成する方法、RICOH THETAシリーズで撮影する方法、素材サイトでゲットする方法などがあります。

Googleストリートビュー

Googleストリートビュー

Google LLC無料posted withアプリーチ

Unityで球を配置しマテリアルに写真を適用する

ICO球のアセットを配置する

先ほどダウンロードしたICO球のアセットをインポートします。
Octahedron Sphereのフォルダの中から「Octahedron Sphere 5 D1」を選んでドラッグして配置しました。

メッシュがわりと細かい5番目のファイルが良さそうです。
Diameter(直径ベース)とRadius(半径ベース)はスケールの指定方法が2倍になるだけなのでDでもRでもいいと思います。

念のためワイヤーフレームでも見て確認すると、きちんと三角形メッシュのICO球になっています。

スケールを15倍に調整する

スケールを15倍にしました。
バーチャルキャストのワールドを作るなら15くらいでいいかなと思います。

360度写真の画像をマテリアルとして設定する

プロジェクト内のMaterialフォルダの中で右クリックで新規マテリアルを作成します。
名前を「SphereMaterial001」にしました。

自分で作ったマテリアルのAlbedoの部分に360度写真を指定します。

シェーダーはUniGLTFを選びました。
バーチャルキャストにも対応している形式です。

裏表を決めるCull ModeをBackからOffに変更します。
これで球の内側からテクスチャが見えるようになります。

今設定した「SphereMaterial001」をICO球のElement 0の部分にドラッグします。

Element 0はここです。

このようになればOKです。

これで中に入れるようになりました。
これで完成です。

Unityで360度の画像をさらに使いこなすコツ【床や家具を配置すればVRに最適】

360度の画像を背景に家具を置くといい感じです

家具と床を配置してみるとこんな感じです。
VR空間内の遠くの背景としていい感じですね。

家具の3D素材サイトはこちらの記事にまとめています。
» 3Dモデルの家具のフリー素材サイト一覧まとめ【VRワールド作成向き】

床がないと地面は丸まって見えます

床が消えると地面が丸まってるので少し違和感があります。

床部分も写真を利用するには地面を平らにしたドーム状に画像を貼ればいけると思って試しましたが、上手くいきません。
やはりメッシュフィルターのスクリプトの部分もドーム状に変更して記述しなければならないようです。

360度の画像を実際に利用しよう

バーチャルキャストのワールドに利用する

バーチャルキャストのワールドの背景に最適です。
バーチャルキャストの全般的な使い方についてはこちらの記事に書いています。
» バーチャルキャストのやり方を解説【キャプチャで放送・機能も豊富】

VRChatのワールドに利用する

VRChatのワールドの背景にも最適です。

Unityでそのまま動画を撮影する時に使う

Unty内でFainal IKやMecanim IKを使ってMusic Video撮影やVTuberをする時の背景にも最適です。

スマホアプリで閲覧する

不動産物件の内覧のように360度写真を手軽に見せたい時にも最適です。
カメラ位置などをスクリプトで記述してアプリとしてビルドすればいけそうです。

参考:
https://docs.unity3d.com/Manual/class-Cubemap.html
https://tutorialsforvr.com/creating-virtual-tour-app-in-vr-using-unity/
https://www.binpress.com/creating-octahedron-sphere-unity/

というわけで今回は以上です。
簡単にVR内にリアル空間を表現できて超便利です。

関連記事VRoidの完全マップ【入門・基礎・中級・上級を徹底解説】

関連記事VRChatの完全マップ【入門・基礎・中級・上級を徹底解説】

-Unity

Copyright© MMD-PVから作詞作曲までやる、ボカロPしんりんの製作ノート , 2019 All Rights Reserved.