Google VR Viewでホットスポットを使ってみる(on the web)


VR Viewには、ホットスポットを表示する機能が(一応)あります。

これはパノラマビューの任意の場所にマーカーを置いて、いろいろなリンク機能を提供するものです。

Pitchパラメーターなどに不具合もあるようですので、WisteriaHillではコードを修正してやってみます。(2017/03/22時点の記述です、現時点でPitchパラメータが機能しているかはGoogleサイトでご確認ください)

このホットスポットを使えば、

例えば、情報ウィンドウを表示したり、他のURLに遷移したり、ストリートビューみたいに別のVR Viewに移動したりできます。

また、マーカーを文字にしてリンク無しにすれば中空に浮かぶ看板にもなりますね。

ただ残念なのは、ホットスポットマーカーは白い丸一択なので、マーカーの見た目で差別化できないということです。

このへんは課題としてなんとかしていく予定。

なんとかしてみました。

 

白い丸がホットスポット(Google公式サイト)

うっすら色の付いているところがホットスポット

こんな感じのもんですよ、というサンプル

ホットスポットごとに画面中央に来た時の透過度を0.2~1.0の範囲で変えてみました。

画像はネットにあったMMDのパノラマを使ってみました。

ミクさんの透過度は0.2、右周りに不透過度数は上がっています。

VR Viewにパラメータを追加したり、ライブラリとのデータ交換のやり方などはまた改めてということで….。

 

360°パノラマ動画のサンプル

ホットスポットでパノラマ動画と静止画を行ったり来たりします。

静止画のホットスポットは劇場入り口あたり、動画のホットスポットはコースターの座席の下(M|X|O)あたりにあります。

 

パノラマ動画にスタートボタンを付けてみました

 

初動が若干重いですが、エアバス320のコックピットでフライトする動画はこちら

cockpitview SWISS Airbus A320 Geneva-Zurich

 


目次

VR View 表示用アーカイブファイル作成ページ

アーカイブファイルについて

VR View表示ページ

ホットスポット用コード例

課題の解決

課題

WebVRについて(ITmedia NEWS)

Google Earth VR のご先祖(Liquid Galaxy)


Googleのreferenceページを見てみると、1個のホットスポットのハードコードの例がありますが、

ここではハードコードするのではなく、表示用のファイルを作って、これで1つのパノラマ画像に複数のホットスポットを表示してみます。

表示用のファイルは、パノラマ画像とホットスポット設定ファイルをアーカイブしたファイル(zip・kmz)にします。

ファイル作成ページと表示ページの2つを用意しました。

yawの精度は高くないですが、だいたいの位置は取れると思います。


VR View表示用アーカイブファイル作成ページ

Google VR ViewでHotSpotを使ってみる(作成編)

パノラマ画像を読み込みます。「Panorama」のエリアにドラッグドロップしてもOK。

画像名は全角に対応していません、半角でお願いします。

Panoramaを囲っている枠が消えたら、開始できます。

サイズの大きな画像は縮小表示します。

(HotSpotの座標指定は軸周りの角度と原点からの距離なので、画像のサイズは関係しません)

読み込んだら、画像中央に青い丸が表示されます。

背後の画像をぐりぐりと動かして、ホットスポットを置きたい場所を青い丸に合わせます。

ホットスポットの色と形状を指定します。

色はカラーピッカーが表示されますので、クリックして指定。

形状は丸(デフォ)・四角・三角・六角の4種類。

透過度も追加する予定

クリック時に表示するコメントを入力。

ホットスポットは複数設定できるので、コメントなどを記入したら追加をクリックします。都度IDが付加されます。

セルフホストする場合は、URLを入力。Googleのライブラリのフォルダー名はデフォルトで「vrview-master」です。変更する場合は書き換えてください。

URLが入力されていたら、アーカイブファイルに公開用のHTMLファイルが同梱されます。

最後にファイル作成ボタンをクリックすると、ダウンロードフォルダーに「panorama.zip」という名前で保存されます。

これにはjpgのExif解析も付けてますので、ジオタグが見つかればアーカイブファイルは「panorama.kmz」という名前で保存されます。マイマップやEarthで使えます。セルフホストされていれば、パノラマ表示用のリンクが使えます。

現在は単なるハイパーリンクだけですけど……..。

 


アーカイブファイルについて

アーカイブファイルは「panorama.zip(panorama.kmz)」というファイル名で作成されます。

ここには3つのファイルが同梱されています。

1:imagesというフォルダーにパノラマ画像

2:doc.xml(doc.kml)

3:panorama.html

VR View表示ページで使用されるファイルは、1と2です。

VR Viewで360°パノラマを公開する場合

セルフホスト用になっています。本来はGoogleサーバーにリンクするはずなのですがGoogleコードの具合がよろしくないのでこうしています。

公開の仕方を少々詳しくかいてみました

ご自分のサーバーをお持ちの場合、1と3を使って、VR Viewパノラマを公開できます。

セルフホストに必要なライブラリなどはこちら(GitHub)からダウンロード。

解凍したら、build/embed.jsとvrview.jsを以下のファイルで置き換え。

embed.js    vrview.js

フォルダー構造

+vrview-master – build – embed.js,vrview.js

+images

+panorama.html

 


VR View表示ページ

Google VR ViewでHotSpotを使ってみる(表示編)

アーカイブファイル(zip・kmz)を読み込みます。「Panorama」のエリアにドラッグドロップしてもOK。

Panoramaを囲っている枠が消えたら、開始できます。

 

サンプル

ホットスポットは白い丸で表示されています。丸の大きさは設定の半径・距離で規定されます。もう少し大きくする場合は距離より半径で設定したほうが有効なようです。

ホットスポットはパノラマの中央あたりではかなり薄く表示されます。

クリックすれば、コメントを表示。

 

 


ホットスポット用コード例

セルフホスティングして、複数のホットスポットをハードコードする例です。

セルフホストに必要なライブラリなどはこちら(GitHub)を参照。

この中のbuild/vrview.min.jsを引っ張ってくることになります。

ご注意

HotSpotのPitchパラメーターを機能させる場合、コードを若干修正する必要があります。

下記の「課題の解決」を参照してください。

 

xxx.jpgがパノラマ画像名、サーバーに置いておきます。

zzz.jpgはVRView表示の待機時に表示する画像、サーバーに置いておきます。

Pitchなどのパラメータを配列に入れておき、 set_vrview()で表示します。

vrviewを表示するコンテナは、<div id=”vrview'”></div>というDOM要素です。

 

var vrView;
var panorama_image_url = “xxx.jpg”;//必須
var panorama_image_w = www;//画像の幅
var panorama_image_h = hhh;//画像の高さ

var preview_image_url = “zzz.jpg”;//絶対必要というわけではない

var hotspot_id = [];
var hotspot_pitch = [];
var hotspot_yaw = [];
var hotspot_radius = [];
var hotspot_distance = [];
var hotspot_comment = [];

function set_vrview(){

vrView = new VRView.Player(‘#vrview’, {

image: panorama_image_url,
width: panorama_image_w,
height: panorama_image_h,
preview: preview_image_url,
is_stereo: false

});

vrView.on(‘ready’, onVRViewReady);
vrView.on(‘click’, onVRViewClick);

}

function onVRViewReady(e){

for(var i = 0;i < hotspot_id.length;i++){

vrView.addHotspot(hotspot_id[i],{

pitch:hotspot_pitch[i],
yaw:hotspot_yaw[i],
radius:hotspot_radius[i],
distance:hotspot_distance[i]

});

}

}

function onVRViewClick(e){

var id = e.id;
if(id != null){

for(var i = 0;i < hotspot_id.length;i++){

if(id == hotspot_id[i]){

alert(hotspot_comment[i]);
break

}

}

}

}


課題の解決

Pitchパラメータが機能していなかった件

GoogleのVB view on the web ライブラリはApache2でライセンスされています。

Googleのコードでは回転は主にクォータニオンを使っています。

build/embed.jsに回転を制御するquaternion廻りの関数がいくつかあります。

quaternionに値を渡しているthree.jsのEuler関数に設定する引数を以下のように変更します。

THREE.Euler(THREE.Math.degToRad(pitch), THREE.Math.degToRad(yaw), 0)

修正

THREE.Euler(THREE.Math.degToRad(pitch), THREE.Math.degToRad(yaw), 0,’YXZ’)

*minifyされたembed.min.jsは端から読む気がしなかったので無視していたが、気になって調べてみたらちゃんと書かれている、元になるはずのembed.jsでは落ちている……。どういうこっちゃろう?

で、ちゃんと書かれているにも関わらずembed.min.jsは正常に機能しているとは言い難い。面妖じゃのう。

 

パラメーターの追加

追加する場合は、vrview.jsとembed.jsの2つに変更を加えます。

vrview.jsからbuild内のhtmlを経由してembed.jsを読み込んでいます。

addHotspotをキーワードにすればいいです。

Google VR Viewでホットスポットまわりのコードをいじってみる(パラメータを追加)

Pitchの範囲を拡張

Google VR Viewでホットスポットまわりのコードをいじってみる2

透過度の調整

Google VR Viewでホットスポットまわりのコードをいじってみる2

Exifのジオタグ取得

詳細は後ほど記述する予定です

パノラマからのデータ取得

パノラマはvrviewのDOM要素にアペンドされるiframeで表示されているようです、このへんをいじってみます。

以上


課題

Pitchパラメーターがどうしたら有効になるのか調査

現行セルフホスティングで実行していますが、他の場合(iframeやAndoid)でも同じなのか?

オリジナルコードに手を加えることで実行可能になるのか? (済)

 

vrviewオブジェクトが古いパノラマを表示してしまう場合がある

どうもキャッシュが影響しているような気がする。vrviewオブジェクトがどのように使われているのかが分かれば初期化できるような……。  (済)

 

Googleのコードでは、HotSpotの色は白一択ですが、色を指定できるようにする

パラメーターにcolorを追加してみる(こんなことしていいのか?)

試しにcolorというパラメータを作って、やってみました。

ついでに形状も変えてみました。全部CircleGeometryのバリエーションです。

こんな感じ。やっていいかどうか調査中。もしよければリリースします。ダメならボツ。  (済)

Googleが正式アップデートをやってくれれば問題ないんだけど…………..。

クリックでサンプルに遷移

 

 

ホットスポットの形状は丸形一択だけど、四角形にもしたい

領域を指定したい場合に使う、やってみましょう

GoogleのコードではHotSpotを描画するのにCircleGeometryを使っているので、四角形を描くこと自体は難しくないのですが、四隅の位置決めが面倒です、なのでこの案は凍結。

 

Pitchの範囲が少し狭い(25度)、もっと広くしたい

画像の上の方にマーカーを置くと見えなくなるので変更  (済)

45度に広げました。

HotSpotの透過度を少し下げたい

はっきり見え過ぎ。例えば顔を覆うようなマーカーにすると顔が見えなくなる。

パノラマの周辺にある場合は見えているが、中央付近にくると薄くなる感じにしたい。  (済)

こういう風にしてみました。

 

HotSpot設定の精度をもうちょい上げる(coming  soon)

ちょっと修正してみました 

高Pitch、低Pitchでの精度が悪すぎるので、全面的に見直します。

こういう感じで、Pitch・Yawの値を取得します。

クリックしてターゲットの座標を取得。

設定したホットスポットをいちいち確認できるようにしてみました。

こんなもんでよかろうという精度になったので、これでリニューアルします。

 

jpgのパノラマ画像にExifのジオタグが見つかった場合はKMZで保存するようにする

この場合はGoogle MapsやGoogle Earthとの連携ができるようになりますなぁ。  (済)

ちなみにテストではjpgにジオタグを埋め込むのにGeoSetter無料版のカシミール 3Dを使っていますが、いい感じです。

読み込みにはexif.jsを使っていますが、これはジオタグの値を「ddd°mm.mmmm′」というフォーマットで返してくるので、ご注意です。もっぺん60で割んないと……………。

 

このコードがちゃんと機能するかどうか確認

こんな関数、どこを探してもなかった……..

setContent()の間違いじゃなかろうか?
vrView.setContentInfo({
  image: '/url/to/amazing-4096.jpg',
  preview:'/url/to/amazing-512.jpg',
  is_stereo: true
});
 (済) 

Googleのストリートビューにホットスポットを埋め込んでみたい

オーバーレイを使ってホットスポットみたいなもんを表示してみる

マーカーを文字にしたい

Three.jsのTextGeometryを試してみる
Googleが提供している現バージョンのライブラリにはTextGeometryは実装されていないみたい。
どうしようか?
r84からコードをもってきても大丈夫みたい。
Googleのライブラリには長方形を描くPlaneGeometryもなかったけど、実装してみたらこうなった。

Google VR Viewのコードに変更をかけてみる(PlaneGeometryの実装)

ズーム機能を付けたい

Three.jsを直接さわる

 

画像の鮮明さの確認

ぼけぼけ感をなんとかしたい

VR View on the webが元々こんなもんなのか、それともなんとかなるものなのか、調査 (済)

画像をPanoweaverと比較。

パノラマ VR View自体が元々こんなもんなのね、と納得しました。元画像が低画質なだけでした。

Google VR Viewではこんな感じ

Panoweaverならこんな感じ

 

Streetviewのように、Google MapsやEarthと連携させたい

とにもかくにもパノラマからPitchとYawの値を取得しないと…………。 (済)

パノラマ動画の確認

videoパラメーターのチェック(Youtubeの360 VR で見つけたもので試してみました)

●やや重いです、カクカクしてます

●サウンドは普通に再生

●デフォルトでループ再生してくれます

でもloop属性の設定にはバグがあるようです

●ホットスポットは普通に使えてるようです

●vrviewのplayerオブジェクトの中で、videoとimageのパラメータは共存できるようです。vrview.jsの中では、image,preview,videoのパラメータは、何かあれば実行するけど、無ければ何もしないようになっているので、両方記述しておいても問題ないみたい。ただし両方にデータがあったらダメでしょう。

例えばパノラマ動画の中にホットスポットを置いておいて、そこからsetContentで静止画のパノラマを表示できるということです

サンプル(画質:480p)

ホットスポットでパノラマ動画と静止画を行ったり来たりします。

静止画のホットスポットは入り口あたり、動画のホットスポットはコースターの座席の下(M|X|O)あたりにあります.

VR Viewのvideoはデフォルトではデータがロードされた時点ではplayモードになっています。

ちょっと変更して、ロード時はpauseモードにしてスタートボタンを付けてみました。ボタンクリックでplayモードになってボタンは見えなくなりますが、画面中央で有効ですので、再度クリックすればplay/pauseが切り替わります。

これはVideoで時間要素を操作したいためですが、どう反映させるかは検討中。

例えば、

現在embed.jsには1つ1つのHotSpotのvisibleを制御する関数はないですが、

HotspotRenderer.prototype.setVisibility = function(isVisible)を参考にすれば作れると思います。(現在この関数はhotspotRootのvisibilityのみ設定できます)

パノラマ動画は基本後戻りできません。なのでタイムラインは前方のみ有効。

で、個々のhotspotにパラメータでshow・hideのライフサイクルを設定すれば動画の中で時間に応じて見える範囲にhotspotを出現させることができると思います。

hotspotはTHREE.Object3Dでできているのでdisplay visible属性(boolean)が使えます。

編集はアバウトでよければMovieMakerあたりでもできるようです。

気になったのは、前後の不要なフレームを削除した時、パノラマの両端のつなぎ目がうまく合ってないのか、線が入ってしまう。

複数の動画の連結もできることはできるのですが、サイズが合っていないと、球面へのマッピングがうまくいかないようです。

保存する場合はビットレート2.19Mbpsのもの(Flickrなど)を選ばないと、とんでもないサイズになります。

Youtubeあたりにアップする場合はメタデータをインジェクトしないといけないようですが、VRViewでは必要ないです(たぶん)。

別ページの準備

そろそろWisteriaHillの管理人のリクエストやらなんやらが本来のホットスポットがらみから逸脱してきているので、別ページを準備していくつかのアーテュクルは移行します(リクエストを出す方も対応する方も両方同じ人なんですけど…….)。


 

360°パノラマ画像を表示

Google Streetview API

 


パノラマ画像作成

カメラ

RICOH THETA S (SC、m15)、Insta 360 Nano

スマホ・タブレット

Google Photo Sphere

アプリ

Photoshop

CG・CAD

調査中

Sketchup + plugin (64bit)

Blender(Cycles)

MMD + MME

なんか知らんが本格派

 

Youtubeの360 VR 3D からダウンロード

4K Video Downloaderのスマートモード

 


 

Be the first to comment

Leave a Reply

Your email address will not be published.


*