360度全天球でVR表示＆ちょこっとAR

<img width="754" alt="スクリーンショット 2019-10-15 1.07.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/3cfd7ed2-d897-877f-7f1b-010febff4d76.png">

# アジェンダ
360 度全天球は、360度カメラで撮影された写真やイラストを上下左右360度空間を全方位に見渡す事ができます。
スマートフォンを介してWebのサービスに簡単にアップできて、とても綺麗なVR空間を楽しむ事ができます。
では、今回、実際に、とても綺麗なVR空間を一緒に体験してみましょう。


1. 360 度全天球カメラ
360度カメラで撮影された写真を見てみよう！

2. 360度全天球の画像
360度カメラで撮影された写真をVRで見てみよう！

3. 360度全天球イラスト
360度全天球のイラストをVRで見てみよう！

4. 360度全天球の実装（A-frame）
360度全天球の実装はとても簡単♪♪

5. VRで３Dモデルアニメーション表示
360度全天球のVR空間の中に３Dモデルアニメーション表示を見てみよう。

6. ARからのVR３Dモデルアニメーション表示
ARとVRの融合


# 1. 360 度全天球カメラ
360 度全天球カメラは、上下左右全方位の360度ぐるっと全て見えるものを1枚の写真や動画が撮れる撮影カメラです。

360度カメラで撮影された写真は「360度カメラTHETA（シータ）」のサイトで見ることができます。


THETA（シータ）のサイト
THETA site
https://theta360.com/ja/
<img width="914" alt="pic027-001.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/a83f7e8d-8373-1572-9369-30923a524ea8.png">

<img width="936" alt="pic027-002.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/659dcd8c-44d5-140e-cafe-c2d70ba42486.png">

# 2. 360度全天球の画像
360度全天球は「全天球イメージ」としてVR空間で再生します。

VRとは「Virtual Reality（バーチャル・リアリティー）」の略で、「仮想現実」とも言われます。
VRの特徴は「目の前にある現実とは違う現実を体験できる」ということです。

VRアプリケーション開発はゲームエンジンの使用が基本で、VRゲームやVRアプリケーションの大多数が、ゲームエンジンのUnityやUnreal Engineを使用して作られています。

今回は「WebVR」というA-FrameというカスタムHTMLを使って、ブラウザ上で360度全天球を表示してみます。

まずは、実際に体験してみましょう。

360度全天球の画像は、「360度パノラマ写真」という検索キーワードで、見つける事ができます。

今回は、「slBL Archive」というサイトから無料でダウンロードしてみました。


slBL Archive
http://www.hdrlabs.com/sibl/archive.html
<img width="966" alt="pic027-003-1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/6d8f6150-397e-fd1d-4c95-14b7e04508d4.png">

<img width="635" alt="pic027-003-2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/0cb7c390-772e-50f2-586d-065256983b4e.png">

<img width="608" alt="pic027-003-3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/4c75e7db-6172-e971-a8f1-a6ae53c3c091.png">

この画像を、VR表示できるようにA-Frameで実装します。（実装方法は後ほど）
<img width="250" alt="pic027-005-10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/32cfd2a4-815d-90c2-119e-9ab8b60df886.png">

まず、事前準備として、上下左右全方位の360度ぐるっと移動できる為には、「モーションと画面の向きのアクセス」をONにします。

後ほど、AR表示でも使用するので「使用するブラウザのカメラのアクセス」をONにします。
ここでは、iPhoneのSafariで説明します。
<img width="996" alt="pic027-012.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/fdb83407-cdc1-4e77-e1f7-8466fafdc3bc.png">

<img width="979" alt="pic027-013.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/c6ce67bb-bb71-5508-358e-45bee0f51201.png">

事前準備は、これで完了です。
パソコンで見る場合は、マウスドラッグでぐりぐり動かせます。
<img width="344" alt="pic027-005-2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/505a74df-cf15-9914-2671-d089e3740b12.png">
![pic027-005-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/95a85775-d7a2-d087-4c86-6506f7995a62.png)

IOS（iPhone、iPad、Mac）のブラウザはSafariのみ。
Android、WindowsPCのブラウザはGoogleとFireFoxで見る事ができます。

<img width="757" alt="スクリーンショット 2019-10-15 1.23.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/6f8dcba2-5777-9e42-5fc8-7a7be45e96d5.png">


では360度全天球を実際に見てみましょう。
表示するのに少し時間がかかります。

WebVRで表示：https://beach.netlify.com
QRコード
![qrcode_beach.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/a2e22a8c-a0ac-7638-e7cd-d4f3f8da061c.png)

↓↓実際に動かした動画はこちらになります。
https://youtu.be/nHAu6dYhaQw

トロピカルビーチが見えましたでしょうか？

# 3. 360度全天球イラスト

今度は、360度全天球のイラストを表示してみます。


360度全天球のイラスト お城
<img width="1435" alt="pic027-006.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/5fc37e04-3cd4-2560-05a5-75db75d68f83.png">


360度全天球を実際に見てみましょう。
表示するのに少し時間がかかります。

WebVRで表示  https://noncastle.netlify.com

QRコード
![qrcode_noncastle.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/0c00cd40-63ca-eb51-619c-d53c09ae4d9a.png)

４つのお城が見えましたでしょうか？

↓↓実際に動かした動画はこちらになります。
https://twitter.com/nonnonkapibara/status/1181247388872130560
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🕌🕌WebVR🕌🕌<br>🎉360度🌎全天球🌎の絵を描いてみたよぉ😍<br>🍫🍫WebブラウザでVR表示してみた👯‍♀️👯‍♀️<br>📲IOSはSafariのみ。🐸AndroidはChromeとFireFox<br>💻パソコンで表示可能だよぉん⛱️<br>✨(o￣▽￣o) わ～い ✨✨<a href="https://twitter.com/hashtag/VR?src=hash&amp;ref_src=twsrc%5Etfw">#VR</a> <a href="https://twitter.com/hashtag/WebVR?src=hash&amp;ref_src=twsrc%5Etfw">#WebVR</a> <a href="https://t.co/6f3A7D0IqQ">pic.twitter.com/6f3A7D0IqQ</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1181247388872130560?ref_src=twsrc%5Etfw">October 7, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


右端にVRゴーグルボタンのマークが出ています。スマホの場合、このボタンを押し、横に傾けると、VRゴーグルで見れるように２眼表示となります。
<img width="792" alt="スクリーンショット 2019-10-15 1.31.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/416d8df3-8ca8-75f1-671c-55078064a795.png">


360度全天球のイラストは、テンプレートや「360度パノラマ写真」をベースにお絵かきしました。

テンプレート
![template.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/41bfd673-3f10-642a-7764-ffab269601bf.png)

テンプレートに沿って、イラストを描きます。

テンプレートとイラストを重ねた図
<img width="1110" alt="pic027-007.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/ee215219-6684-df5f-9a48-a757ad0222ed.png">

道が長く続くような感じにしたい場合は、「360度パノラマ写真」をベースに、絵を描いていきます。
slBL Archive
http://www.hdrlabs.com/sibl/archive.html

<img width="637" alt="pic027-008-2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/dc3a4eca-b2fc-5fbb-87cd-51c97489aec5.png">

「360度パノラマ写真」道が長く続く写真
<img width="840" alt="pic027-008.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/33ef4444-3526-78b1-0afc-1a432212c497.png">


では360度全天球を実際に見てみましょう。

WebVRで表示　https://load.netlify.com

QRコード
![qrcode_load.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/c2870403-4f99-25e5-ee07-07a68e00b3ac.png)

↓↓実際に動かした動画はこちらになります。
https://youtu.be/Aomyq3sCKtY

道が見えましたか？


「360度パノラマ写真」をベースに、ステンドグラスが続くような絵を描いてみました。

360度全天球のイラスト　ステンドグラス
<img width="1426" alt="pic027-009.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/f2ab4348-95a1-cf8f-e953-22eb21603db8.png">

では実際に見てみましょう。

WebVRで表示　https://skystainedglass.netlify.com

QRコード
![qrcode_ stainedglass.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/167d56bb-ece3-8367-03c9-859034ab4d78.png)

↓↓実際に動かした動画はこちらになります。
https://youtu.be/hpQVIfsZCXY

# 4. 360度全天球の実装（A-frame）
360度全天球の実装は、CDN経由でA-frameのjsを読み込みます。
表示する画像をa-ceneに実装して、終わりです。
これだけで、360度全天球の表示ができます。
<img width="767" alt="pic027-010.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/c3f445a5-0a94-1178-06f4-35b84aaaaac6.png">

# 5. VRで３Dモデルアニメーション表示
A-frameは、３Dモデルも表示する事ができます。
ここでは、「ジンジャーブレッドマン」の３Dアニメーション表示をVRの中で表示してみました。

<img width="780" alt="スクリーンショット 2019-10-15 1.40.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/b61fba31-5cb4-c7f1-4fd3-2c178356a8a7.png">

「ジンジャーブレッドマン」をVRの中で表示
<img width="1139" alt="pic027-011-3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/080724f2-5322-745e-070a-7196752f2bb8.png">

では、実際に見てみましょう。

WebVRで表示　https://noncookie.netlify.com

QRコード
![qrcode_noncookie.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/34e65bbc-c855-c2a5-2d0b-978a2f7e5dc1.png)


↓↓実際に動かした動画はこちらになります。
https://youtu.be/Neb_kDYua9E


# 6. ARからのVR３Dモデルアニメーション表示 
ARとは「Augmented Reality」オーグメンテッド・リアリティの略で、実在する風景にバーチャルの視覚情報を重ねて表示することで、目の前にある世界を「仮想的に拡張する」というものです。


ここでは、
３DモデルのアニメーションをAR表示して、その後「VRボタン」でVR表示します。
ただし、「VRボタン」でVR表示は、スマホの機能になります。パソコンでは全画面表示となります。
AR表示するには、カメラのアクセスが必要となります。
（設定済み）
<img width="996" alt="pic027-012.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/fdb83407-cdc1-4e77-e1f7-8466fafdc3bc.png">

<img width="979" alt="pic027-013.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/c6ce67bb-bb71-5508-358e-45bee0f51201.png">

ここでは、スマホを縦の状態で使用してください。
<img width="253" alt="sumaho2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/a014f376-1e45-0700-2a2a-866d8e16271d.png">

起動するとカメラ許可のダイアログが表示されます。

カメラを許可します。


<img width="902" alt="pic027-014.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/5cc0097c-9070-df1f-a86c-388ffe3820b0.png">


では、実際に見てみましょう。


WebARからVRで表示　https://noncookiearvr.netlify.com

QRコード
![qrcode_noncookiearvr.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/05764ab2-45fd-1005-7f65-2864b1ab89a6.png)

↓↓実際に動かした動画はこちらになります。
https://twitter.com/nonnonkapibara/status/1181588409053106177
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">📲WebAR🍬と📲WebVRの融合✨<br><br>🧸ジンジャーブレットマンをアニメーションAR表示して、その後「VRボタン」でVR表示したよぉ😍<br>❤️ARと😍VRの融合だ✨🧸🎀<br>(☆▽☆) 楽すぅ〜い💕💕<br>📲iPhoneでも🐸Androidでも見れるのがうれしぃ🤩<a href="https://twitter.com/hashtag/WebAR?src=hash&amp;ref_src=twsrc%5Etfw">#WebAR</a> <a href="https://twitter.com/hashtag/WebVR?src=hash&amp;ref_src=twsrc%5Etfw">#WebVR</a> <a href="https://twitter.com/hashtag/VR?src=hash&amp;ref_src=twsrc%5Etfw">#VR</a> <a href="https://t.co/zG9x8VDL7m">pic.twitter.com/zG9x8VDL7m</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1181588409053106177?ref_src=twsrc%5Etfw">October 8, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

カメラの前に、「ジンジャーブレッドマン」が表示されます。
今回は、ARの認識画像（ARマーカー）は
使用していません。
<img width="355" alt="スクリーンショット 2019-10-15 1.47.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/9e03244b-953b-6bc2-adec-38f14c7158a1.png">


ここからは、スマホのみの動きとなります。
次にVR表示するには、「VRボタン」を押します。

<img width="429" alt="pic027-016.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/d57fa8c8-78f4-554a-eed8-3610e0d77293.png">

スマホを横に傾けます。
<img width="418" alt="pic027-006-2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/b999d46e-bb3b-66ed-e011-8b57d8f6ab84.png">

スマホでVR表示しました。
<img width="585" alt="スクリーンショット 2019-10-15 1.52.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/75142229-d3b6-a48d-634e-1316a1d60142.png">

ARは、IOSでは「ARKit」Androidでは、「ARCore」などが使用でき、Unityにも「Vuforia」や「ARKit」「ARCore」を使用して実装する事ができます。

今回、紹介したWebARは、アプリケーションをインストールせずに、気軽に、ブラウザ起動によりARが使えて便利です。


360度全天球は、WebAR以外でも、Unityのゲームの中での背景として設定する事ができます。
360度全天球のステンドグラスをUnityのゲームの中での背景として設定しています。

<img width="1178" alt="pic027-018.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/987e1ae7-9a62-eeee-aaa8-d26dfaee1914.png">



https://twitter.com/nonnonkapibara/status/1171022411581423616
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【VR】Androidアプリ💕リリース<br>😍VR Diamond Crash Game💎<br>リリースしました✨VRゴーグルで遊びます👯‍♀️<br>とっても✨弾けて💎気持ちいいです🤩<br>↓↓📱Google Play 無料Free<a href="https://t.co/fiqJKtFmo7">https://t.co/fiqJKtFmo7</a><br><br>🖥️パソコンで遊ぶ（UnityRoom）無料Free<a href="https://t.co/CK47FkXiN6">https://t.co/CK47FkXiN6</a><a href="https://twitter.com/hashtag/unity3d?src=hash&amp;ref_src=twsrc%5Etfw">#unity3d</a> <a href="https://twitter.com/hashtag/VR?src=hash&amp;ref_src=twsrc%5Etfw">#VR</a> <a href="https://t.co/jF7FWv4Yjw">pic.twitter.com/jF7FWv4Yjw</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1171022411581423616?ref_src=twsrc%5Etfw">September 9, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


今回、360度全天球は、WebARでの紹介となりましたが、他にも、いろいろなシーンで使う事ができます。


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">💖【VR】Androidアプリ💖リリース<br>😍ピヨくまちゃん💫シューティングVRゲームリリースしました。😊VRゴーグルであそびます。🍩<br>💎とっても💎キレイで🤩楽しいです👍<br>↓↓Google Play 無料Free<a href="https://t.co/DmkV8ltaCD">https://t.co/DmkV8ltaCD</a><a href="https://twitter.com/hashtag/Piyo_Kuma_chan_Shooting_VR_game?src=hash&amp;ref_src=twsrc%5Etfw">#Piyo_Kuma_chan_Shooting_VR_game</a> <a href="https://twitter.com/hashtag/VR?src=hash&amp;ref_src=twsrc%5Etfw">#VR</a> <a href="https://twitter.com/hashtag/Unity3d?src=hash&amp;ref_src=twsrc%5Etfw">#Unity3d</a> <a href="https://t.co/fFVADdAiDV">pic.twitter.com/fFVADdAiDV</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1127938600501334016?ref_src=twsrc%5Etfw">May 13, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


勉強会発表用SliderShare
https://www.slideshare.net/fujitanoriko/360vrar-182060748