layerの研究(3)

今回は「layer(レイヤー)」を画面内で動かせるようにして、レイヤー構造を調べます。 準備 とりあえず、前回と同様な下地レイヤーを配置します。 レイヤーをマウスで動かせるようにする 元のコードは、krpano19の中、viewer>examples>dragable-layers サンプルにありますが、下記の必要な部分だけ、レイヤーを記述しているxmlにコピーします。 action というのは、その名の通り、動作を指定する記述になります。この場合は、名前が「draglayer」で、大まかには下記のような動作をします。 1)レイヤーの元座標(x,y)を、それぞれ、drag_currentx と drag_currenty にコピーする。 2)ステージ(ブラウザウインドウ)内のマウス座標を、drag_stagex と drag_stagey にコピーする。 3)レイ...
Read More

layerの研究(2)

さてさて「layer(レイヤー)」をパノラマに貼り付けて、その特徴を調べていきます。 以前も紹介したよう、レイヤーは、ブラウザ画面に対して位置を固定したボタン類です。ですから、画面下に配置されている上下左右ボタンなどもレイヤーです。 準備 何も配置されていないパノラマを用意し、layer.xmlをインクルード指定して読み込ませ、ここにいたずら書きをしていきます。 メインxml(pano.xml)で、layer.xmlをインクルード。 layer.xmlは空っぽでスタート。 コンテナタイプのlayerを加える まず、こんな感じに記述します。それぞれの属性の意味は前回を参照してください。 bgborder="2 0xff0000 0.5" これは、幅2ピクセル、色は赤、透明度は0.5 です。 画像を配置 ここで画面下にあるボタンを別に配置してみます。...
Read More

パノラマ製作セミナー開催について

googleインドアビューの講習を受けられた方もどうぞ! パノラマ製作セミナーはスタジオ「写真道場」にて、個別にスケジュールを調整して開催しています。受講生のスキルや機材、パノラマの仕上げや用途に合わせた内容にできます。最近は、googleインドアビューの講習を受けられた方が、よりクォリティの高い撮影・ステッチを行い、クライアントに応じたオーサリングを行うために受講される方が増えています。 拙著「360度VRパノラマ制作 パーフェクトガイド」もご参考に。  2011年末に出版した、日本初、現在もこれ一冊しかない、日本語のVRパノラマのテキストです。カメラの初歩、ステッチやプログラムの初歩から応用まで、一通りの技術を紹介しています。  ソフトウェアや機材、VRパノラマをとりまく環境は、驚くほどの速さで変化し続けていますので、情報はかなり古くなっていますが、基本的な技術とノウハウについは...
Read More

歯科医で治療中(webVR対応)

見どころと操作方法 VRゴーグルで見られます!(スマホのみ) 医師の右手にあるスピーカーアイコンで嫌~な音が鳴ります。 患者の視点で撮影しました。真下も見えます。 ↓この画像は、マウスで動かせます。(VRゴーグルで見る方法は、下の解説をご覧ください。) 解説 上の「ブラウザ全体表示」ボタンか、コチラをタップして、全画面表示に切り替えてください。 スマホで見ると、このような表示になります。 「このまま見る」で、普通のスマホ表示になります。 「VRモードに切替」で、画面が分割します。スマホを横位置にしてください。 VRゴーグルを使うか、裸眼で立体視します。 医師の右手にあるスピーカーアイコンを、画面中心の十字に合わせてしばらくすると音が鳴ります。 その他の説明 虎ノ門「天野歯科医院」のご協力で撮影さ...
Read More

layerの研究(1)

「layer(レイヤー)」は、パノラマの画面に貼り付けるボタン類のことです。かつては「plugin(プラグイン)」と呼ばれていましたので、古いコードを見るとpluginになっています。今は、どちらの表記でも使えます。ただ、現在では基本的にlayerはボタンなど、pluginは付加機能として使い分けられていますので、これに準じる方がわかりやすいと思います。 layerという名の通り、層(レイヤー)構造を持たせることができます。また、レイヤー同士に親子関係を作ることもできますので、同類のボタンを並べたりするのに役立ちます。 どこを調べる? Documentation(メインメニュー)→XML Reference(左メニュー)→The krpano XML structure(本文ウインドウ)→と進めば、詳しい説明が見られます。今回をここを解読しています。読んでもあんまり面白くないかもしれ...
Read More

iPhone-ipad-simulatorを使う

今回は「iPhone-ipad-simulator」。PCローカル上の画面で、iPhoneやiPadでパノラマを見たらどう見えるか、動作はどうか? を確認するためのシミュレーターがあります。v19版はまだ作られていませんので、v18版を使う方法を紹介します。便利ですよん。 1)どこにある? 2)カスタマイズの仕方。 3)使い方。 1)どこにある? 「iPhone-ipad-simulator」のv19版があれば話が速いのですが、どこを見ても見つかりません。v19の正式版にはついてくるかな? そんなわけで、krpano-v18をダウンロードして、探し出します。v18には、現在のv19ではなくなってしまったサンプルがいくつもあります。xmlの勉強には大変役立つものですので、ダウンロードしておいて損はありません。 Download→Archive と進み、Version 1.18.6...
Read More

「オプション」と「エディタ」を使う(2)

今回は「エディタ」プラグインの使い方。これを使うと、画像を貼り付けるホットスポットを簡単に配置し、座標を記したコードを取得することができます。また、多角形(ポリゴン)のホットスポットを描いてコードを得ることもできます。これらの手順を紹介していきます。 他に、レンズフレアーを設置することもできるのですが、これは現状html5に対応していないので説明は略します。 1)エディタの使い方。 2)画像(イメージ)ホットスポットの設置。 3)多角形(ポリゴン)のホットスポットの設置。 4)xmlコードの取得。 1)エディタの使い方 エディタプラグインをパノラマに組み込むと、画面下に「editor」ボタンが表示されます。 これをクリックすると、メニューが表示されます。 左から hotspots・・・・ホットスポットを加える時に使います lensflares・・・レンズフレアを加える時に使...
Read More