nino_eye130625.png

Three.jsで360°パノラマ動画を表示する

VRのコンテンツを作る場合はUnityを利用する事が一般的になっていますが、InstaVRの登場で変わるかもしれません。
動画や画像をプレビューするだけであれば必要ありませんが、インタラクティブな要素を含んだコンテンツを作成する場合はUnityなどでプログラミングする必要があります。しかしInstaVRはプログラミングなしでインタラクティブなVRコンテンツの作成ができてしまいます。
まだ複雑な物はできませんが、操作が非常に簡単なので低コスト且つ短時間で作れるのが魅力です。
youtubeやfacebookにvr動画・画像をアップロードすると、自動で最適化という名の画質劣化が起きてしまいますが、InstaVRはweb上でプレビューする場合でも劣化がありません。
<iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/kKin8a2nrU4?feature=oembed" frameborder="0" allowfullscreen></iframe>
<h2>InstaVRの無料版を使ってみる</h2>
続いてシーンとなる360度の画像または動画を追加します。 
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-12834" src="/admin/wp-content/uploads/2017/05/4.jpg" alt="" width="720" height="355" srcset="/uploads-archive/2017/05/4.jpg 720w, /uploads-archive/2017/05/4-300x148.jpg 300w, /uploads-archive/2017/05/4-228x112.jpg 228w" sizes="(max-width: 720px) 100vw, 720px" />
シーンを選んで360度のどこを正面とするかという事も調整します。これはユーザーにフラストレーションを与えないために重要な要素ですが、調整は非常に簡単です。 
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-12835" src="/admin/wp-content/uploads/2017/05/5.jpg" alt="" width="720" height="357" srcset="/uploads-archive/2017/05/5.jpg 720w, /uploads-archive/2017/05/5-300x149.jpg 300w, /uploads-archive/2017/05/5-228x113.jpg 228w" sizes="(max-width: 720px) 100vw, 720px" />
他のシーンへのリンクを設定します。リンク先となるシーンを選択して、必要であればアイコンのサイズを調整したり、画像を設定できます。 
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-12836" src="/admin/wp-content/uploads/2017/05/6.jpg" alt="" width="720" height="350" srcset="/uploads-archive/2017/05/6.jpg 720w, /uploads-archive/2017/05/6-300x146.jpg 300w, /uploads-archive/2017/05/6-228x111.jpg 228w" sizes="(max-width: 720px) 100vw, 720px" />
音楽やナレーションを追加する事もできます。 
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-12837" src="/admin/wp-content/uploads/2017/05/7.jpg" alt="" width="720" height="780" srcset="/uploads-archive/2017/05/7.jpg 720w, /uploads-archive/2017/05/7-277x300.jpg 277w, /uploads-archive/2017/05/7-228x247.jpg 228w" sizes="(max-width: 720px) 100vw, 720px" />
2つ目のシーンにも1つ目のシーンへのリンクを設定します。これで2つのシーンを行き交う事ができるコンテンツが完成です。 
シーン内には「Hot spot」を追加する事で動画や画像を設置する事もできます。 
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-12838" src="/admin/wp-content/uploads/2017/05/8.jpg" alt="" width="720" height="352" srcset="/uploads-archive/2017/05/8.jpg 720w, /uploads-archive/2017/05/8-300x147.jpg 300w, /uploads-archive/2017/05/8-228x111.jpg 228w" sizes="(max-width: 720px) 100vw, 720px" />
続いてアプリにする場合のロゴやホーム画面を「Branding」から設定します。有料プランからInstaVRのロゴを外すことが可能です。 
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-12839" src="/admin/wp-content/uploads/2017/05/9.jpg" alt="" width="720" height="208" srcset="/uploads-archive/2017/05/9.jpg 720w, /uploads-archive/2017/05/9-300x87.jpg 300w, /uploads-archive/2017/05/9-228x66.jpg 228w" sizes="(max-width: 720px) 100vw, 720px" />
あとはpackageでビルドするだけです。 
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-12840" src="/admin/wp-content/uploads/2017/05/10.jpg" alt="" width="720" height="175" srcset="/uploads-archive/2017/05/10.jpg 720w, /uploads-archive/2017/05/10-300x73.jpg 300w, /uploads-archive/2017/05/10-228x55.jpg 228w" sizes="(max-width: 720px) 100vw, 720px" />
完成したアプリはQRコードからもダウンロードできます。 
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-12841" src="/admin/wp-content/uploads/2017/05/11.jpg" alt="" width="720" height="162" srcset="/uploads-archive/2017/05/11.jpg 720w, /uploads-archive/2017/05/11-300x68.jpg 300w, /uploads-archive/2017/05/11-228x51.jpg 228w" sizes="(max-width: 720px) 100vw, 720px" />
アプリができるまでに15分もかかりませんでした。
<h2>spatial audio　360度音声も設定できる</h2>
試験導入中という表記はあるものの、spatial audio（360度音声）の設定項目も存在していて、どの方角からどんな音がするかを音声ファイルを追加する事で演出可能です。 
無意識に音がなっている方を人は見るので、見せたい方向に効果音や音楽を設定する事でガイドとしても利用できます、没入感を損なわないガイドとして活用できると思います。
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-12842" src="/admin/wp-content/uploads/2017/05/12.jpg" alt="" width="507" height="429" srcset="/uploads-archive/2017/05/12.jpg 507w, /uploads-archive/2017/05/12-300x254.jpg 300w, /uploads-archive/2017/05/12-228x193.jpg 228w" sizes="(max-width: 507px) 100vw, 507px" />
<h2>VRコンテンツのWeb配信</h2>
個人的にはデバイスを限定しないという意味でVRはWebブラウザ上で活用するのが一般化する早道だと考えています。 
無料版では利用できませんが、InstaVRは作成したコンテンツをWeb配信するのも非常に簡単みたいです。
pakegeからwebを選んでビルド（pablish to web）するだけで、InstaVRのストレージ上にVRにアクセスできるURLが生成されます。
web配信したコンテンツのデモです。
<a href="http://www.too.com/product/software/vr/instavr/embed01.html">http://www.too.com/product/software/vr/instavr/embed01.html</a>
<a href="http://www.too.com/product/software/vr/instavr/embed02.html">http://www.too.com/product/software/vr/instavr/embed02.html</a>
<a href="http://www.too.com/product/software/vr/instavr/embed03.html">http://www.too.com/product/software/vr/instavr/embed03.html</a>
Webページに埋め込むこともコードを書き出してくれるので簡単にできるようです。
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-12822" src="/uploads-archive/2017/05/2.jpg" alt="" width="720" height="246" srcset="/uploads-archive/2017/05/2.jpg 720w, /uploads-archive/2017/05/2-300x103.jpg 300w, /uploads-archive/2017/05/2-228x78.jpg 228w" sizes="(max-width: 720px) 100vw, 720px" />
埋め込みの例がこちらです。
<a href="http://jp.instavr.co/#section-f_5c2451ca-6c49-434b-81de-de930925c07f">http://jp.instavr.co/</a>
<iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/ajkLvFsfiTw?feature=oembed" frameborder="0" allowfullscreen></iframe>
<h2>まとめ</h2>
VRがいわゆるキャズムに落ちてしまわないためには、豊富なコンテンツ量が必要だと考えます。InstaVRはVRコンテンツ制作のハードルを下げるという意味で、コンテンツ量の増加に一役買ってくれそうです。

instaVRでコンテンツを作ってみる

先日Nikonのkeymission360を購入して早速動画を撮影してみました。youtubeにアップする際にさすがに素材そのままはよろしくないので編集しようと思い、Nikonが提供しているKeyMission360/170 Utillityをダウンロードしてみました。
<a href="/uploads-archive/2016/11/3.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-12325" src="/uploads-archive/2016/11/3.jpg" alt="3" width="400" height="358" srcset="/uploads-archive/2016/11/3.jpg 400w, /uploads-archive/2016/11/3-300x269.jpg 300w, /uploads-archive/2016/11/3-228x204.jpg 228w" sizes="(max-width: 400px) 100vw, 400px" /></a>
しかし、私が想像していたアプリケーションとはシーケンスに素材を並べるような編集はできませんでした、残念。（使い方が分からないだけかもしれませんが。）そこでいつも編集に使っているPremiere Proに素材を突っ込んでみたところ、何の問題もなく編集できました。CC 2015から当たり前のように編集可能になっていたとは…。詳しくはこちらで<a href="https://helpx.adobe.com/jp/premiere-pro/using/VRSupport.html">https://helpx.adobe.com/jp/premiere-pro/using/VRSupport.html</a>
シーケンスとフッテージどちらも右クリックからVRビデオを有効にするとモニターがyoutubeのそれのようになります。
毎度、切り替えるの面倒な場合はモニター右下の+ボタンからVR切り替えボタンを追加できます。
<a href="/uploads-archive/2016/11/4.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-12326" src="/uploads-archive/2016/11/4.png" alt="4" width="570" height="302" srcset="/uploads-archive/2016/11/4.png 570w, /uploads-archive/2016/11/4-300x159.png 300w, /uploads-archive/2016/11/4-228x121.png 228w" sizes="(max-width: 570px) 100vw, 570px" /></a>
さらにPremiere Proだけでテロップも360度動画に入れる事ができました、さすがに立体感はでませんが、今まで3Dソフトを使用していた作業が相当楽になりました。
編集をする上でどこを正面にするかというのは非常に重要ですが、これもPremiere Proだけで解決できます、エフェクトのディストーションからオフセットを適用して0度に欲しい位置を持ってくればＯＫです。
<iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/yUMYc5u0m70?feature=oembed" frameborder="0" allowfullscreen></iframe>
&nbsp;

Premiere Pro CCで360度動画を編集してみる

10月28日にNikonから360度撮影が可能なアクションカメラのkeymission360が発売されました。当初の予定からかなり遅れての発売となってしまいましたが、コンシューマ向けの価格帯では4Kで360度撮影ができるそれなりのスペックという事で期待していました。
samsungのGear 360とどちらにすべきか悩んだのですが、Gear 360はレビューで厳しい意見もあり、いつもお世話になっているカメラ屋さんが安くしてくれるというのでkeymission360を購入する事にしました。
<a href="/uploads-archive/2016/10/1.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-12302" src="/uploads-archive/2016/10/1.jpg" alt="1" width="666" height="375" srcset="/uploads-archive/2016/10/1.jpg 1200w, /uploads-archive/2016/10/1-300x169.jpg 300w, /uploads-archive/2016/10/1-768x432.jpg 768w, /uploads-archive/2016/10/1-1024x576.jpg 1024w, /uploads-archive/2016/10/1-228x128.jpg 228w" sizes="(max-width: 666px) 100vw, 666px" /></a>
使用の主な目的は3Dのライティングに使用するHDRIを作成する事なのですが、動画も4Kで撮れるなら少しは使い物になるかなと期待。
という事で購入した足でそのまま渋谷のハロウィンを撮影しにいってみました。
<iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/yUMYc5u0m70?feature=oembed" frameborder="0" allowfullscreen></iframe>
isoは1600までなので夜はやはり厳しいですが、1920サイズの360°動画よりは多少見れるかなという感じです。没入感を求めると、やはり４Kでは画質が足りません。現場にはGoproをこれでもかというほどリグに付けたNHKさんの姿もありました、おそらく画質は遥かに良いとはずですので、そちらを見て違いを検証してみたいです。
撮り方の反省としては、手ぶれ補正の機能はあると言ってもやはりスタビライザーを使用しないと長いカットは見てられないですね。。。
題材のせいなのか、360度動画だからなのか、youtubeにアップしてから2日ほどですぐに1000PVを超えましたアナリティクスを見ると結構海外から見てくれてました、ハロウィンってすごいですね。今度は紅葉でも撮ってみようと思います。

やっと発売された！Nikonのkeymission360　渋谷のハロウィンを撮影してみた

autodeskのremakeを使って、フォトスキャンで3Dオブジェクトを作成してみました。
今回はさほど複雑でない形が良いと思ったので、栄養ドリンクで実験してみました。
<a href="/uploads-archive/2016/06/3-1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11115" src="/uploads-archive/2016/06/3-1.jpg" alt="3" width="640" height="353" srcset="/uploads-archive/2016/06/3-1.jpg 640w, /uploads-archive/2016/06/3-1-300x165.jpg 300w, /uploads-archive/2016/06/3-1-228x126.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a>
撮影した写真は約100枚、高さは３段階、回転台を使用して約5度ずつずらして撮影しました。remakeでは最大125枚までしか読み込んでくれないようです。
使用する写真を選別して、create modelをクリックすればオブジェクト作成が開始されます。
<a href="/uploads-archive/2016/06/2.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11119" src="/uploads-archive/2016/06/2.jpg" alt="2" width="408" height="218" srcset="/uploads-archive/2016/06/2.jpg 408w, /uploads-archive/2016/06/2-300x160.jpg 300w, /uploads-archive/2016/06/2-228x122.jpg 228w" sizes="(max-width: 408px) 100vw, 408px" /></a>
あとはひたすら待つのみ
20分ほどまってモデルがついに完成しました！エクスポートから3dファイルとして出力してSketchfabにアップロードしてみました。
<h2>完成</h2>
<iframe loading="lazy" width="100%" height="480" src="https://sketchfab.com/models/0be825a650904e9a9ee4c211222442ed/embed" frameborder="0" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" webkitallowfullscreen="webkitallowfullscreen" onmousewheel=""></iframe>
<a style="font-weight: bold; color: #1caad9;" href="https://sketchfab.com/models/0be825a650904e9a9ee4c211222442ed?utm_medium=embed&amp;utm_source=website&amp;utm_campain=share-popup" target="_blank">メガシャキ</a> by <a style="font-weight: bold; color: #1caad9;" href="https://sketchfab.com/launchmovie?utm_medium=embed&amp;utm_source=website&amp;utm_campain=share-popup" target="_blank">launchmovie</a> on Sketchfab
<h2>反省点</h2>
remakeに限らないのかもしれませんが、フォトスキャンは光の反射があるとメッシュをうまく生成できないようです。
今回は回転台で被写体を回しながら撮影したので、光が反射している部分（缶のくびれの部分）が全て方向に存在するというようなオブジェクトになってしまいました。被写体の鏡面反射がある場合は被写体を回す事はNGで、カメラが動いて各方向から撮影する必要がある事に気づきました。
もしくはライティングを工夫して反射しないようにするという考え方もありますが、質感を失うとフォトスキャンをする意味が薄れてしまう気がするのでカメラ側を動かす方が良さそうです。制度の高いフォトスキャンをする為の設備は複数のカメラをリグを使って被写体を囲うように設置しているもそのためなのだと思います。
反省点を踏まえて、次回もう一度やってみたいと思います。

フォトスキャンで3Dオブジェクトを作成する

無料で3Dファイルをアップロードして公開する事ができる<a href="https://sketchfab.com/">Sketchfab</a>というサイトがあります。
かなりシンプルな手順で公開ができる上に、VRでのプレビューもできるので、動画ファイルでいうところのyoutubeと言った方が伝わりやすいかもしれません。
<a href="/uploads-archive/2016/06/1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10963" src="/uploads-archive/2016/06/1.jpg" alt="1" width="640" height="384" srcset="/uploads-archive/2016/06/1.jpg 640w, /uploads-archive/2016/06/1-300x180.jpg 300w, /uploads-archive/2016/06/1-228x137.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a>
今回はこのSketchfabにデモファイルをアップロードしてみたいと思います。
<a href="/uploads-archive/2016/06/3.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10966" src="/uploads-archive/2016/06/3.jpg" alt="3" width="640" height="277" srcset="/uploads-archive/2016/06/3.jpg 640w, /uploads-archive/2016/06/3-300x130.jpg 300w, /uploads-archive/2016/06/3-228x99.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a>
アップロードの仕方は、これもyoutubeに似ていて右上のUPLOADをクリックしてファイルを選択するだけ、とてもシンプルです。
<a href="/uploads-archive/2016/06/4.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10968" src="/uploads-archive/2016/06/4.jpg" alt="4" width="640" height="383" srcset="/uploads-archive/2016/06/4.jpg 640w, /uploads-archive/2016/06/4-300x180.jpg 300w, /uploads-archive/2016/06/4-228x136.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a>
アップロードしたページがこちらです。
<a href="https://sketchfab.com/models/3df5dc1deeae41cf8f9d850ba184435d">https://sketchfab.com/models/3df5dc1deeae41cf8f9d850ba184435d</a>
3dモデルについての説明なども入力できます。
記事に埋め込むとこんな感じになります。
<iframe loading="lazy" width="640" height="480" src="https://sketchfab.com/models/3df5dc1deeae41cf8f9d850ba184435d/embed" frameborder="0" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" webkitallowfullscreen="webkitallowfullscreen" onmousewheel=""></iframe>
<a style="font-weight: bold; color: #1caad9;" href="https://sketchfab.com/models/3df5dc1deeae41cf8f9d850ba184435d?utm_medium=embed&amp;utm_source=website&amp;utm_campain=share-popup" target="_blank">Sterfield</a> by <a style="font-weight: bold; color: #1caad9;" href="https://sketchfab.com/launchmovie?utm_medium=embed&amp;utm_source=website&amp;utm_campain=share-popup" target="_blank">launchmovie</a> on <a style="font-weight: bold; color: #1caad9;" href="https://sketchfab.com?utm_medium=embed&amp;utm_source=website&amp;utm_campain=share-popup" target="_blank">Sketchfab</a>

<iframe loading="lazy" width="600" height="400" frameborder="0" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" src="https://sketchfab.com/models/3df5dc1deeae41cf8f9d850ba184435d/embed?autostart=1&amp;transparent=1&amp;autospin=0.2&amp;controls=1&amp;watermark=1"></iframe>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #VR

2018/07/11

2017/05/10

2016/11/02

2016/11/01

2016/06/22

2016/06/08