| |
|
|
I. Panotour Proの入手
|
| |
今回は、Kolor Panotour
Pro 2.5.8, 64ビット体験版（こちらから入手)
をWindows10（QSWIN)マシンで試用した。体験版は、えげつない透かし/ロゴが入ってしまうがフル機能使える。
|
| |
|
| |
製品は、Flashback Japanから￥61,770で販売（本家
399ユーロで 1万円強高い)。
Panotour（pt: 99 € )と Panotour Pro（Pptp: 399 € )との相違点は、本家サイトの下方を参照。通常版（価格1/4)は、動画を読み込むことすら出来ず、以下の手順の如く基本的なカスタマイズもほとんど出来ない。
Panotour Proのバージョン履歴とダウンロードは、こちらを参照/入手。
|
|
II. Panotour Proの使用方法
|
| |
|
| |
|
| |
本ソフトについて、現在のところ日本語で解説されている記事を見いだせないが、著書「これからはじめるバーチャルツアー
Panotour Pro 2 & krpano完全入門」は 5,000円と高価だ（こちらを参照)。
使用方法の詳細は、本家の Panotour
Documentation（英語)を参照。
|
| |
|
| |
＝操作手順＝
(1) ソフトを起動すると、Home, Tour, Style, Buildの4つのタブがあり、順に設定。
先ず、Homeタブで新規プロジェクトを作成：[Create an empty Panotour project]ボタンをクリックして、プロジェクト名を適当に指定。
(2) 素材シーン（動画、画像)の読み込み
画像は、ギガピクセルパノラマ (1G＝10億＝100,000万ピクセル以上)に、動画は 4K (3,840x2,160＝829万ピクセル)以上に対応。読み込むシーン数に制限無し、とある。
今回は、360度動画・写真混在アルバム 10シーン（動画：1920x960, 8Mbps、写真：3008x1504)と
PowerDirectorで結合した動画 1ケを登録。
Tourタブの [Add Panorama]ボタンから、Pictures or Videos (*.png *.jpg
*.jpeg *.kro *.psd *.psb *.tif *.tiff *.rw2 *.mp4
*.m4v *.webm)を読み込む（ドラッグにも対応。通常版は Videoの読み込み不可)。
＜動画素材について＞
Insta360 Airによる動画撮影は、960P（1920x960 pixel, 8Mbps)の他に、2.5K
（2560x1280 pixel, 16Mbps)も可能で、Galaxy S7等では 3K （3006x1504
pixel, ?Mbps)も可能となっている。しかし、ウェブ配信用途としては最小の 960Pでも容量が大き過ぎるが、原則圧縮する事なくをそのまま用いた（しかし、動きの大きい箇所ではボケる)。
|
| |
|
| |
オープニング用の普通画像は画像を選択して
Output projectionで  [Planar]を選択すればよい。但し、普通画像の最適アスペクト比は、2/3(0.66)～3/4(0.75)の間で不自然だ。
シーンの Default viewを、[Set default view]ボタンで目的の視野の向きに指定する事が簡単に可能だ（下図は、360度動画の初期視野を設定する場合を示す)。
|
| |
|
| |
(3) Orderで再生順を設定
複数のシーンをプレイリストに追加する場合には、Tour> Orderで ドラッグしてして順序を入れ替える。
|
| |
|
| |
(4) ツアー Start
parametersの設定
(4-1) リトルプラネットでスタート
シーン切り替え時にトランジションとして、リトルプラネットLittle Planet効果を使うと見栄えが良い（PRO版のみ)
⇒ Tour> Start parameters> Little Planetで Start tour
with little planet effect、Apply the effect on each panoramaにチェック。
(4-2) 自動ツアーAutotourの設定
更に、ビュー開始とともに自動ツアー：Start tour with [Autotour] とした（通常版はAutorotationのみ可)。
PCでは、自動回転後次シーンへ自動切り替え（Autorotation後 Load next panorama...
)が実行される！！
＜注意＞残念ながら、スマートフォン、タブレットでは作動しない（スマートフォンと
iPad mini/ Puffinでは [PC版サイト...]にすれば自動ツアーは可能となる)。
|
| |
|
| |
(4-3) Splash Screenの搭載
Splash Screenは起動した際に表示させるロゴや画像のことで、案内表示として利用。Close automatically
after n seconds: Duration 15sとした。
(4-4) Navigation modeの設定
マウスも「ムーブ」タイプではなく、「ドラッグ」タイプに変更した方がよい。
「ムーブ」タイプは、カーソルを少し動かすと連続して動くので、慣れないと目的の位置で止める事が難しい。
(5) 自動回転の設定を調整
⇒ Tour> Autorotationで、Right, Delay：1s, Speed： 1（~26)°/sに変更。
Autotour：Load next panorama after 15 又は 20secondsに設定（PRO版のみ)。
＜注意＞手動操作を中止した後、15又は20秒後に次のパノラマを読み込むという事だ。
前項 Start tour with [Autorotation]だけでは作動しない。
|
| |
|
| |
(6) コントロールバー Control Barの設定
Classic Control Barを使用。他のバーとの関係から最終的には 後記
6-2のように設定。
(7) サムネイルバーには、Classic Thumbnails Barをスライドリストとして使用。
リスト表示が邪魔なら、サムネイルの積み重ね ⇔ 展開が可能な Thumnails Stackを（サイズ、例えば
120x60で）使用。
(8) ビデオコントロールバー Video Control Bar（PRO版のみ)
Header barの Display the video nameと
Display a headerは未チェックとした。
今回は利用可能な Projections全てにチェックを入れてみた。
[Source]ボタンをクリックすれば、2:1の元画像エクイレクタングラーのムービーとして再生される。
＜注意＞ ツアー最初の動画は、再生時のProgress barが表示されない不具合がある（2番目以降に再生されれば作動する)。従って、単体の動画ではダミーのスタート画像を作成して移動ホットスポット（ 後記)から再生する必要がある（ こちらを参照)。
(9) ジャイロ機能の搭載
スマートフォンで端末の傾きに追従して視点が移動するジャイロ機能を搭載するには、
⇒ Style> User input> Gyroscopeを有効化する（PRO版のみ)。 |
| |
|
| |
＜注意＞ジャイロ機能を有効化すると、スマートフォン、タブレットのモバイルモードでは自動ツアーが作動しなくなる。
(10) Style> Controlsの設定
(10-1) パノラマ切り替えボタンを左右に設置
Style> Controls> Previous/Next Dotsを挿入
(10-2) カードボードモード VR Modeの搭載（PRO版のみ)
スマートフォン端末でカードボードモードへ変更して 3D視聴出来るようにするには、
Style> Controls> WebVR Buttonを有効化する。表示する位置を変更し、Sizeを
Width: 50 pixel位に調整した。
|
| |
|
| |
＜参考＞ PCでもカードボードモードを表示してプレビュー（PRO版のみ)
Tour> VR Mode> Behaviersで、「Enable VR Mode on desktop」を有効にすると、PCでも[カードボードモード変更]ボタンが表示され
Side by Sideで視聴可能となるが、今回はチェックしない。
＜注意＞スマートフォンでは [PC版サイトを表示]などで視聴すると、加速度センサーによる視点の追従移動（ジャイロ機能)が作動しなくなってしまうので、カードボードモードに変更する意義が無くなってしまう。
(11) Descripton（説明画面)の設定： Tour>Descriptonで説明文を入力。
Style>Text zoneの Descriptionで、配置位置（ [Previous/Next
Dots]と重ならないように上へ -50 pixel)、サイズ（heightは
66、widthは種々)、Background colorを設定し [Show overlay]は未チェック、Behaviorの
[Start opened]にチェック。
|
| |
|
| |
更に、
＝機能搭載てんこ盛りツアー： Googleマップとフロアマップを追加搭載＝
(12) Googleマップの表示（PRO版のみ)
Style> Maps> PanotourMapsで Above the Virtual tour→Apart
from the Virtual tourへ変更。マップの表示位置とサイズを適当に変更。
|
| |
|
| |
マップは Layers>Main
map layer：Google Maps/ Bing Maps/ OpenStreetMap/ Yandexから選択
・Google Mapsを選択。しかし、何時の間にか
不完全読み込みとダメになった為
・「201709京都散策」以降は ⇒ OpenStreetMap に変更
Radarsで色を赤～ピンクに変更。
残念ながら、Insta360 Airで撮影した動画には位置情報は無いようだ（PotPlayer 1.7、GOM
Player 2.3.17でも、GPS情報を確認できない)。
⇒ Geolocalisationに「Google
Maps 位置情報取得ページ」（ここからアクセス)から取得した緯度、経度を入力すればよい。
|
| |
|
| |
(13) フロアマップFloor
planrの組み込み（PRO版のみ)
Tour> Floor planからマップ画像を読み込み、[Add point]でホットスポットを追加してPropertiesのAction
Paremetersにてリンク先を指定する。これを繰り返す。
|
| |
|
| |
Style> Maps> Floor
planで、位置と大きさを変更。
|
| |
|
| |
更に、Overlay style： Show
overlayにチェック。Selected spot animationをBouncing animationに変更。Behaviors：
Start openedのチェックを外し、Respond to show/hide controls requestsにチェック。
なお、コントロールバーの Show/hide floorplanを チェック
ボタンデザインを Style> Spots styleで変更：Custom colorで色調を変更した。
|
| |
(14) リンク付き自前ロゴ画像の配置
この Virtual tour generated by Panotour.htmlファイルが迷い子にならないように、配信ページに戻れる自前のロゴ画像を挿入した。
Style> Image zoneの「Logo」でロゴ画像を読み込み、
ウェブリンク先を指定する。配置位置は下図の如く右下（Offset y: 10→26)に指定し、Behaviorの
Respond to show/hide controls requestsにチェック。
|
| |
|
| |
(6-2) コントロールバー Control Bar設定の最終確認
最終的には配置をビデオコントロールバーと重ならないように Position： Offset:Y 30へ上げたが、 Behavior>
[Hide the control bar on panoramamic video display]にチェックを入れた。
Available controlsの [ Fullscreen], [ Start/stop
autorotation], [ Start/stop automaic tour], [ Show/hide
thumbnails], [ Enable/disable gyroscope], [ Show/hide
map], [ Show/hide controls]は、チェック。 |
| |
|
| |
[Previous/Next panorama],
[Home], [Show/hide floorplan], [Show/hide information]は、用に応じてチェック。
以下は未チェックとした。[Play/Pause a panoramic video], [Zoom], [Move
horizontally], [Move vertically], [Start/stop sounds], [Show/hide
hotspots], [Share the tour], [Show/hide help screen], [Enter
VR mode], [Change mouse navigation mode]
Workspaceの序列は、最終的には上図のように上・下整列した。
以上、設定が完了したら、
(15) Buildで、エクスポートするフォルダとファイル名を指定して、[Build]ボタンをクリック。
|
| |
|
| |
すると、htmlファイルとデータフォルダが、動画は単にコピーされるだけなので
24秒の短時間に生成される。
データフォルダ内には、パノラマ画像、動画の他にボタン/スキン/アイコン画像や設定ファイル（XML, JS, SWF)などが入っている。
|
| |
|
| |
| |
なお、静止画の場合は各種デバイス用に各種サイズの画像が用意されているが、
|
| |
|
|
| |
一方、動画の場合は（大容量の)オリジナル素材のみが用意されるにすぎない。
＜注意＞出力後、設定を大きく変更したら上書き保存はしない方がよい。
⇒ 左上の緑色の再生ボタン [View last build tour]をクリックして、ウェブブラウザが起動して仮想サーバー経由で出力したファイルを確認出来る（http://localhost:31415/ファイル名.htmlでブラウス出来るが、生成されたHTMLファイルを直接開こうとするとエラーとなる)。
(16) 任意のサイト（今回は レンタルサーバー Xserver)に htmlファイルとデータフォルダをアップして、ページに埋め込む。
<iframe src="panotour_komaga/panotour.html"
width="540" height="404" allowFullScreen></iframe>
＜備考1＞何故か？シーン「かんてんパパ駒ヶ岳ガーデン」以降の動画がターゲットフォルダに上手く生成出来ない：生成されても（途中迄しか)再生出来ない不具合があった！・・・が、手動で元動画をコピーして事無きを得た。
|
| |
|
| |
この不具合は、AVS
Video ReMaker等で編集した後の動画を素材とした場合に起こるようだ。 単にコピーされるだけなのに、不思議だ
┓(´_`)┏
⇒ Panotour Pro 2.5.9では、解消した（発生しなくなった)。Panotour Pro 2.5.11,
2.5.12でも起らない。
なお、MPEG Streamclipで編集後の動画は、不具合が発生（こちらを参照)。
＜備考2＞Panotour Viewerについて
Build時 Panotour Viewer> Export to PTV fileで出力すれば、オフラインでも
Panotour Viewer 1.10（ここから入手)で閲覧可能と云うが、
This is a very old post dating back to 2014! Panotour Viewer
is a very limited offline testing tool.とあり、残念ながら一部の機能が動作しないなど不具合が多く、動画には未対応。
|
| |
＜備考3＞その他、設定のプラグインからアニメーションの追加やソーシャルメディアボタンの埋め込みやOpenStreetMap追加など多彩な機能を搭載している（本家：英語の
Featuresページ,
YouTubeの Documentationを参照)。
|
| |
|
|
III. 成績
|
| |
1) 本ソフトは、
360度動画・写真混在アルバムを簡単に見栄えの良いツアー作品としてウェブサイトに公開出来る優秀なソフトだ。
しかし、日本語版は無く 高価すぎる。
体験版は、画面全体にこれでもか！というくらいの透かし/ロゴが入ってしまう（ マップ未搭載
サンプルへ) ┓(´_`)┏
|
|
| 2) 不具合・不都合 |
(1)
ツアー最初の動画は、再生時の Progress barが表示されない不具合がある。
(2) 不確実だが動画が上手く作成出来ない（生成されても再生出来ない)場合がある。
(3) 自動ツアーは、ジャイロ機能を有効化するとスマホのモバイルモードでは作動しない
。
(4) 用いた動画は大容量（今回の場合は 1920x960, 8Mbps)で、圧縮されずに配信されるのだ！！
・・超高解像度パノラマ用技術マルチレゾリューションのような技術開発が望まれる。
(5)
自動切り替えの時間を受信側で指定出来る仕様だとよいのだが、無理な注文か？
|
|
|
追記（2018.04.26)
(6) Androidの Chromeは、v65以降ジャイロスコープの仕様が変更されたようで、Panotour
Pro 2.5.9で作成した作品ではジャイロ機能が上手く作動せす、スッチャカメッチャカに動いてしまう
┓(´_`)┏
⇒ 仮想パノラマツアー「 日本散策シリーズ」のうち
「201709京都散策」以降のタイトルを Panotour Pro バージョン 2.5.11にて出力したところ、改善した。
|
|
|
追記（2018.06.23)
(7) MacOSの Safari11.1や iOS 11.3の Safari11.0は、数ケ連続再生後は描画出来なく（black
renderingと)なってしまう不具合が、 Panotour
Pro 2.5.9及び 2.5.11で作成した作品では発生していたが・・・
⇒ Panotour Pro 2.5.12にアップして出力したところ
回避された！
但し、デスクトップ版 Chrome, Opera, Safariは 最初の動画のみ自動再生出来なくなってしまった？
|
|
|
|
| |
|
|
|
|
|
|
|
| |
医院の各部屋のパノラマ写真 5箇所間を回遊するルートを設定
|
| |
|
| |
|
| |
|
ホットスポットエディタの「Add Point」で位置を指定し、そのポイントをドラッグして行き先を決定する。これを繰り返して全パノラマを回遊出来るようにルートを設定した。
移動した時の視野を右下の如く設定した。
|
|
|
|
ホットスポットのデザインを Style>
Spot style> Pointの Default Point
Spot Styleで、IconをDiscus-Directionへ、Advanced>
Rotation angleを270°へ変更した。
|
|
|
|
なお、移動した時の視野を上々図の如く設定したが・・・何故か？機能しない。
そこで、写真の Default viewを目的の視野に指定Set default
viewしたところ、
|
|
|
|
[PC版サイト...]で閲覧すれば目的の視野で移動するが、残念ながらモバイルモードでは作動しない！
＜フロアマップの設定＞
Tour> Floor planで、用いるマップ画像を読み込んで名前をつけ、[Edit
hotspots] で上記と同様にホットスポットを追加してリンクを設定。
|
|
|
|
Style>
Maps> Floor planで、位置と大きさを変更。Overlay
style: Show overlayとBehaviors: Start
openedにチェック、Behavers：Close floor
plan on clickとClose on new panoにチェック。
＜その他＞
Simple Thumbnaile Bar, Classic Controll
Bar等を適当に付けて提示した。
|
| |
|
|
| |
＜成績＞「Insta360
Airで360度全天球の静止画と動画を撮影」の 比較成績を参照。
|
| |
|
|
|
| |
画像内のある領域へ 3D（Side by
Side)動画を貼り付けてみた。 |
| |
|
| |
＜操作方法＞  |
| |
| |
貼り付けた動画は、ホットスポットの非表示で隠れます。Androidブラウザ、iOSのSafariは自動再生しないので、四角の範囲部分をタップして開始して下さい。
|
|
| |
| 動画を貼り付けるには、Tourタブで目的の画像（通常の静止画)を選択して
[Add Video]ボタンを使う。画像は Output projectionで「平面(Planar)」に変更しておいて、貼り付けたい範囲を右上からスタートし時計回りにクリックして四角く囲み、貼り付ける動画ファイル（MP4,
WebM, OGVに対応)を指定する。今回は Side by Sideの
3D MP4動画を指定した。 |
|
|
|
Style>
Spots styleの Video> Default video Spot
Styleでスポットの詳細設定をする。今回は、Loop when reaching
endと Display Play and Pause buttons over
the video...をチェックした以外は初期設定とした。
|
|
|
|
適当に
Docked Thumbnaile & Controll Bar,
Video Contoll Bar等を付けて提示した。
|
| |
|
|
| |
＜成績＞四角の範囲を微調整しても、大きくなり過ぎたり小さくなったりで上手くピッタリと動画が貼り付いてくれない！
ホット（ビデオ)スポット内で、次々と動画を読み込む仕様にはなっていない。
残念ながら 360度動画を貼り付けても 360度ビューで表示させることは出来ない。
|
| |
|
|
|
|
|
|
但し、1920x960,
8Mbpsの動画２ケの同時再生はキツイです。
|
|
|
| |
|
| 補足C)
一つの動画を提示 |
| |
最初の動画の再生では Progress barが表示されない不具合がソフトにあるので、ダミーのスタート画像を示した後に再生するようにする必要がある。
その際に自動再生させる場合（但し、IE/ MS Edge, Firefoxのみ可能)、自動回転せずに「Autotour
」を設定する
|
| |
|
| |
|
でして下さい
：自動回転を開始すれば、自動ツアーが実行される)。
：フロアマップを表示/非表示、
：Googleマップを非表示/表示、
：コントロールバー等を非表示/表示
