トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

360度映像を見るアプリを作る(Unity2019.4)

既にアセットとかあるのだろうか?

ハコスコとかYoutubeみたいに360度映像を見るアプリをUnityで作りたい

bibinbaleo.hatenablog.com

360度動画流す

とりあえずUnityのSkyboxに360度動画を流す

oitsmalab.hatenablog.com

動画をシーンにおいて、VideoPlayerのRenderModeをRenderTextureにする

f:id:bibinbaleo:20201109160704p:plain

RenderTextureを作って、Sizeを動画のサイズにする。あとNoDepthBufferにする

f:id:bibinbaleo:20201109160756p:plain

レンダーテクスチャ - Unity マニュアル

VideoPlayerのTargetTextureに作ったRenderTextureをセットする

f:id:bibinbaleo:20201109161058p:plain

新しいマテリアルを作り、ShaderをSkybox>Panoramicにして、RenderTextureをセット

f:id:bibinbaleo:20201109161221p:plain

LightingのSkyboxに今作ったSkyboxマテリアルをセット

f:id:bibinbaleo:20201109161319p:plain

これでいい感じにSkyboxに動画再生される

f:id:bibinbaleo:20201109161418p:plain

最初、動画が変に表示されてた気がするけど、Skyboxの設定とかいじってたら治った。(原因よくわからん)

2年前にやった時と違うのはSkyboxのシェーダーが最初から入っていることぐらい。

bibinbaleo.hatenablog.com

もっといいやり方とかあるのかな?

カメラの向きをジャイロ&ドラッグで動かす

GoogleVRの記事にスクリプトがある。そのまま使えた

developers.google.com

ジャイロのあるスマホで実行したらYoutubeとかと同じようにちゃんと向いている向きに動いた。

ドラッグでもY軸回転だけはできた。

でも他の360度Viewerだと上下もドラッグで変えられるけど・・・

 

あとPCのマウスドラッグだと動かない

 

ジャイロでの変更だけならこちらとかもシンプル

Unityメモ – ジャイロでカメラを動かす方法ookumaneko.wordpress.com

Cardboard

上で参考にしたGoogleVRは古い

Cardboard for UnityのSDKがある

github.com

導入方法

Quickstart for Google Cardboard for Unity  |  Google Developers

PackageManagerにgitのURLを入れてダウンロード(はじめてやった!)

Import into Projectでサンプルシーンが入る

f:id:bibinbaleo:20201119154718p:plain

ただ、すぐに参考になりそうなスクリプトは見つけられなかった。zyroで検索しても出てこないよ~

カメラをマウスドラッグで動かす

マウスでカメラの角度を変えるのはこちらを参考にした

qiita.com

こちらでも良さそう

http://corevale.com/unity/2346

スマホかPCかで分けるのってどうやるんだろう?これでいいのかな?

#if UNITY_EDITOR || UNITY_STANDALONE

#if UNITY_ANDROID || UNITY_IOS

docs.unity3d.com

上のままだとうまくいかなかったのでこうした

#if UNITY_EDITOR || UNITY_STANDALONE

 PC向け処理

#else

 スマホ向け処理

#endif

bibinbaleo.hatenablog.com

ジャイロオフと正面向く

他の360度ビューワーアプリだとジャイロでの動きをオフにする機能と正面を向かせる機能があった

UI

マテリアルデザインからコンパスとスマホの回転アイコンをとってきた。

回転アイコンはそういう回転じゃない!って感じだけど一番近いのがこれだったからとりあえず。

f:id:bibinbaleo:20201112111401p:plain

ジャイロがスマホアイコン、正面向くのがコンパスにしたけど、ジャイロもコンパスっぽいし

VRSQUAREのUIが分かりやすい。そのうちちゃんと作ったほうが良さそう

f:id:bibinbaleo:20201112111309p:plain

ジャイロオフ

Input.gyro.enabled=false;

でオフにできる

docs.unity3d.com

Toggleを使った

f:id:bibinbaleo:20201112111555p:plain

BackGroundとCheckMarkに同じ画像をセットして、Checkmarkのほうをオンの色にしたら、オンとオフで色が変わるボタンみたいに使える。

f:id:bibinbaleo:20201112111553p:plain

正面リセット

エディタのほうはできたけど、スマホ版どうやればいいんだろう

エディタと同じ

    public void ResetCameraRotation()
    {
        this.gameObject.transform.rotation = _initialCamRotation;
        Debug.Log("Cam Rotate : " + _initialCamRotation.ToString());
    }

を呼び出しているけどなぜかリセットされない。

Update内でのジャイロの動きが優先されている気がする

アセット

assetstore.unity.com

これはHMDを被った状態で2Dや360の映像を見るアセット。Oculusでの映像再生UIなどに似ている

assetstore.unity.com