Podiumパノラマの紹介               English

Podium正距円筒レンダリング

Podiumの最新機能を使って、レンダリングに360°インタラクティビティを追加

<

  SU Podiumパノラマとは?

SU Podiumパノラマ機能 は、レンダリングした正距円筒イメージの360° X 180°のパノラマ球形(パノラマVRとも呼ばれる) を作成します。これで最終パノラマVR(仮想現実)をどのデバイスの仮想360°球形環境でもクライアントと共有できるようになります。パノラマVRは、Internet ExplorerやSafari、Chrome、Firefox、iOS、Androidデバイスをサポートするどのブラウザでも表示できます。また、Google Cardboardを使った表示も可能です。さらに、パノラマはお使いのローカルドライブに保存でき、インターネットを使用しなくても表示できる他、Cadalogの無償パノラマサーバーにアップロードしたり、URLをクライアントと共有できます。また、自身のウェブサイトでパノラマファイルをホストすることも可能です。

  Podiumパノラマギャラリーでパノラマサンプルをご覧ください。

イメージをクリックするとPodiumパノラマのサンプルが表示されます。

 どうやってパノラマを作るの?

ビデオ閲覧: 作業開始から完成までの全過程をお見せするパノラマ紹介ビデオを用意しました。ビデオの閲覧はこちらまたは、下方向にスクロールしてパノラマドキュメンテーションをお読みください:

パノラマレンダリングの紹介

上の埋め込みビデオを閲覧、または ここをクリックして新しいウィンドウを開いてください。

仮想パノラマエクスペリエンスを作成するには、3つの大きなステップがあります。

  1. 正距円筒イメージをレンダリング: 最初のステップは、正距円筒イメージと呼ばれる球の平らな投影をレンダリングすることです(このページの一番上のイメージを例として参照してください)。これを行うには、SU Podium V2.5 またはV2.6が必要です。

    高解像度の正距円筒イメージを作成する際に活用できる事例がいくつかあります。これらのステップは、このガイドの次のセクションで概説していますが、プロセスは非常に簡単な上、楽しいものです。楽しみながらすばらしい結果を得ることができるでしょう。

  2. PIEかPanorama Serverでイメージを球形パノラマに返還: PIE、あるいはPanorama Server (www.panopdm.com)を使って正距円筒イメージを360° X 180° 球形パノラマに自動的に変換します。PIEは、正距円筒イメージを360° X 180° 球形 パノラマに自動アップロード/変換できるCadalogのパノラマサーバー(www.panopdm.com)への無償アクセスを提供します。パノラマサーバーがイメージを球形パノラマに自動的に変換し、URLを作成します。URLはクライアントに送付でき、クライアントはあらゆるデバイス(Windows, Mac, iOS, Android)を使用してデザインの360° X 180°エクスペリエンスを表示できます。

    イメージが変換されると、カメラをあらゆる方向に回転/傾斜可能になり、360°の球形エクスペリエンスを作成できます。最終パノラマは、Internet ExplorerやSafari、Chrome、Firefox等のどのHTML5ブラウザ、およびiOSや Androidデバイスでも表示できます。また、パノラマはGoogle CardboardといったVRデバイスでも表示できます。

 V2.5、または V2.6を使って正距円筒イメージをレンダリング

パノラマオプション

パノラマVRを作る最初のステップは、SU Podium V2.5またはV2.6を使って正距円筒イメージをレンダリングすることです。このプロセスはSketchUpシーンのレンダリングとほぼ同じです。ただし、イメージサイズにはパノラマモードを使用するところが違います。レンダリングする正距円筒イメージは球形の平たい投影です。

正距円筒パノラマとしてシーンをレンダリングするにはオプションウィンドウで「パノラマ」を選択するだけです。

その後、正距円筒イメージは、Podium Image Editorのパノラマ機能、あるいはwww.panopdm.comサーバーを使ってHTMLファイル上の3D球に「マッピング」しなければなりません。これは、自動のワンステッププロセスです。粗い継ぎ目が現れることはありません。変換プロセスは非常に単純です。

下図は、レンダリングした正距円筒イメージの例です。Podiumで作られたまま、平たい

この正距円筒イメージは、PIEあるいはPanopdm.comサーバーの3D球に変換され、作成された.htmファイルを作者とそのクライアントが表示し、360°パノラマバーチャル球上でレンダリングを検証できます。また、Google Cardboardを使ってVRを体験することもできます。

  トップに戻る

 イメージ設定

1. イメージ解像度とアスペクト比:

オプションで「Panorama」を選んだ場合、幅/高さのアスペクト比は自動的に2:1に変換されます。幅ピクセル解像度は変更可能ですが、高さは常に幅の50%になります。これは、パノラマ球体の視野が360° X 180°だからです。これと異なるアスペクト比だと、最終パノラマ球体にねじれが生じます。

最終パノラマがどのようになるかをいろいろ試すうちに、ピクセル解像度が高いほど、最終パノラマVRの品質が高くなることに気づくでしょう。ただし、解像度が高いほど、レンダリング時間が長くなることを忘れないでください。また、解像度が高いほど、最終パノラマVRファイルが大きくなり、これがクライアントにパノラマ参るを送付する際の問題点になります。

2. 推奨プリセット

処理結果を最高品質にするには、interior_highか、exterior_high、さらには新しいbright 2.0_highをお勧めしますが、どのプリセットでもうまく動作します。ただし、注意すべき点が2つあります。

  1. 正距円筒イメージはレンダリングするのに、標準の遠近静止イメージより4~6倍の時間を要します。レンダリングされているビューが360° X 180°のため、Podiumはカメラの前と後ろにあるすべてのものを計算します。
  2. _highプリセットは処理に、_defaultプリセットより3~4倍の時間を要します。さまざまな結果を試すために高速でレンダリングしたい場合には、もっと低い解像度とプリセットを試した方が良いでしょう。最終正距円筒イメージ用に品質の高いプリセットをとっておきます。

3. イメージフォーマット - JPG、またはPNG

正距円筒イメージを保存するのにもっとも適したイメージフォーマットは、.pngまたは.jpgです。PNGだと、品質は上がりますが、ファイルが大きくなります。現時点では、Podium Image Editorは.hdrを読み込めないので、パノラマサーバーは.hdrイメージを球形パノラマに変換することはできません。

4. 正距円筒イメージの保存場所

正距円筒イメージ(または球形の平らな投影)は、他のレンダリングイメージが保存されるのと同じ場所です。

デフォルトでは、SU Podium最終レンダリングイメージを、そのSketchUpモデルが保存されている場所と同じフォルダに保存するようになっています。ただし、Customを選んで任意のフォルダに保存することも可能です。Customを選択後、Browseボタンをクリックし、最終レンダリングイメージを保存したいコンピュータ上のフォルダを選びます。

レンダリングしたイメージをカスタムフォルダに保存する再に問題が生じる場合は、このFAQ項目をお読みください。

重要事項: お使いのローカルフォルダに保存するためにパノラマを作成する場合、これは球形パノラマ.htmファイルが保存されるのと同じフォルダになります。お使いのコンピュータでパノラマを表示したい場合、あるいは自身のウェブページを作りたい場合は、これらの2つのファイルは同じフォルダに残さなければなりません。パノラマサーバーの使用を選択した場合、htmファイルを保存する場所について考慮する必要はありません。

  トップに戻る

 良いパノラマのレンダリングのヒント、カメラ配置と傾斜

最終パノラマVRを作り出す最良の方法を見つけるのは経験しかありません。けれども、とても役立つ重要なヒントが2つあります- A シーンとBの中央にカメラを配置 Reset Tilt(傾斜をリセット)

  1. 1. SketchUpシーンにカメラを配置:

    シーンをレンダリングする前に、SketchUpカメラをどこに配置するべきか考えます。最終パノラマVRは仮想球体なので、SketchUpカメラはシーンの中心付近になくてはなりません。これはインテリアシーンに特に当てはまります。360°の球形パノラマを2つ3つ作るだけでよく分かるはずです。

    球体の内部から映さずにカメラの位置を視覚化するのは困難です。けれども、パノラマ球体の中でカメラを回転させても、ビューが壁やその他オブジェクトによる障害にならないように、カメラが中央になる位置を時間を割いて見つけてください。

  2. 2. カメラ傾斜を0にリセット

    カメラの傾斜角度は、SketchUpカメラの垂直上下の角度です。パノラマVRは球形環境を模倣するので、ねじれを最小化するためにレンダリングする前に、SketchUpカメラの傾斜角を0にするのが一番です。傾斜角0とは、SketchUpカメラが地面に対して水平かつ垂直に向いている位置です。これまでに上級カメラツールを使ったことのない方は、SketchUpでカメラの傾斜を制御する方法をご存じないかもしれません。SketchUp カメラの傾斜角を0にリセットする方法は3つあります。

    1. Reset Tilt(傾斜をリセット: これは、カメラの傾斜を0にリセットするために作ったユーティリティプログラムです。「Reset Tilt」を実行すると、カメラの傾斜角が0にリセットされます。変化がすぐ分かるはずです。「Reset Tilt 」は、SU Podiumツールプルダウンメニューにあります。これが傾斜をリセットするベストチョイスです。
      カメラ/傾斜をリセット
    2. 2点遠近法: SketchUpの2点遠近法はカメラの傾斜角を0に変えます。このオプションの問題点は、SU Podiumに2点遠近法のバグがあることです。いったん2点遠近法から出なくては、1つの2点遠近法シーンから他の2点遠近法シーンに移ることができません。
    3. 上級カメラツール: SketchUpの上級カメラツール(ACT)を使ってカメラを作成する場合、カスタムカメラの傾斜角が表示されます。ACT機能を使って傾斜角を0に変更することができます。ACTについてはSketchUpのヘルプページをご覧ください。

  トップに戻る

パノラマサーバーを使って球形パノラマVRを作成

レンダリングした正距円筒イメージが完成したら、360 X 180の球形パノラマへの変換が必要になります。これを実行するもっとも簡単な方法は、無償パノラマサーバー www.panopdm.com を使用することです。

www.panopdm.comパノラマサーバーにはPodium Image Editorから直接アクセスできます。

また正距円筒イメージを、SU Podiumプルダウンメニューにある Panorama serverメニューに直接ロードすることもできます。どのブラウザからでも www.panopdm.com にアクセスできます。

さらに、Podium Image Editorを使って球形パノラマを、お使いのハードドライブにローカルに作成することもできます。これは、パノラマを自身のウェブサイトに埋め込みたい時に便利です。

1. Podiumレンダリングマネージャにある「編集」ボタンからPIEを起動します。

Podium Image Editor

正距円筒イメージをレンダリングしたら、Podium Render Manager、またはOOPRからPIEを起動できます。OOPRでレンダリングイメージの名前をハイライト表示し、編集をクリックします。

SU PodiumのToolsメニューからPIEを起動することもできます。これはPIEを他に依存させずに起動する方法です。PIEを開き、「ファイルを開く」メニューを使い、パノラマVRに変換したい正距円筒イメージをロードします。

2. 必要に応じて、フィルタを調節します。

Podium Image Editor(PIE)は、シンプルなPhotoshopのような「ビルトイン」イメージ編集ツールです。他のレンダリングイメージ同様、pのラマHTMLファイルを作成する前にどのフィルタでも正距円筒イメージに適用できます。新機能についてはこちらをお読みください。

照明レベル等のフィルタを適用する場合は、「適用」をクリックしてイメージを保存することを忘れないでください。PIE調整は、ファイルを保存するまでシステムメモリに格納されます - パノラマHTMLファイルを作成する前に保存しない場合、変更はパノラマ上に反映されません。

3. 正距円筒イメージをアップロードすれば、残りはパノラマサーバーがやってくれます - もっとも簡単なチョイスです。

パノラマを作成する準備ができたら、PIEのFileメニューに進み、「Panorama」を選択するか、PIEのツールバーにあるパノラマアイコンをクリックします。

球形パノラマを作成し、クライアントと共有するもっとも簡単な方法は、「Upload to web server」ボタンを使用することです。

これでUpload Panoramaダイアログボックスに進みます。www.panopdm.comの無償アカウントをすでにお持ちの方は、ログインしてイメージをアップロードします。

アカウントをお持ちでない方は、 このセクションを飛ばしてwww.panopdm.comの無償アカウント新規作成方法をお読みください。

パノラマサーバーへのアクセスを入手したら、イメージは自動的にロードされ、球形パノラマが作成されます。また、ユニークなURLも作成され、ブラウザ、またはiOSやAndroidといったデバイスを使ってパノラマを開けるように、このURLをクライアントに送付します。

  トップに戻る

 パノラマサーバーを使ってパノラマを共有

フォトリアリスティックレンダリングのパノラマ作成の目的の1つは、同僚やクライアントに自分のデザインをよく理解してもらうことにほかなりません。ですので、他者へのパノラマの配信は非常に重要になります。Cadalog, Incの無償パノラマサーバー(www.panopdm.com)は、球形パノラマ作成/クライアントとの共有の最速・最良の方法です。

panopdm.comで作成したパノラマは実質的にどのデバイス、コンピュータ、モバイルでも表示できます。パノラマは、iPhoneのジャイロスコープ機能の他、ダイナミックVRエクスペリエンスを作るGoogle Cardboardにも対応しています。

PIEからまたはウェブページからパノラマサーバーに直接アップロード - Podium Image Editorに、パノラマレンダリングをPodiumパノラマサーバー(上記参照)に直接アップロードするオプションが含まれます。これでPodiumを終了することなく、球形パノラマ用のユニークなURLを自動的に作成できます。また、パノラマサーバーPanopdm.comに SU Podium の プルダウンメニューから直接アクセスすることも可能です。

  1. www.panopdm.comに進み、登録します(無料です!)。ユーザー名とパスワードを作成します。

  2. 次に新しいユーザー名とパスワードを使ってログインします。
  3. カテゴリを新規に作成します。

  4. アップロードを開始すると、Podiumが正距円筒イメージを作成します。

  5. 正距円筒イメージがアップロードされたら、「View Panorama」をクリックします。これで球形パノラマが作成されます。作成されたURLはその後、コピーされてクライアントにE-メールにて送付されます。
  6. 球形パノラマURLの送信方法を調べ、Google Cardboard またはその他VRデバイスで表示する.
  7. Facebookを介してパノラマをアップロード/共有する方法について
  8. 当社のパノラマビデオチュートリアルをご覧ください。

  パノラマツアー:

これでPano serverに埋め込まれたホットスポットを介して、複数のパノラマをリンクし、パノラマ「ツアー」を作成できます。この機能を使えば、1つのパノラマURLで全部の部屋を見渡したり、インテリア/エクステリアイメージ間をつなぐことが可能になります。パノラマツアーについての詳細は こちらをお読みください


 パノラマサーバーに代わる手段

上記が、正距円筒イメージや球形パノラマVR作成、およびクライアントとパノラマを共有する方法に必要な情報のすべてです。けれども、Cadalog, Incのパノラマサーバーに代わる手段を使用したい場合も多くあります。これは、このセクションで触れています。

SU Podiumは、球形の平らな投影であるフォトリアリスティックな正距円筒イメージを作成できます。これらのイメージを、Podium Image Editorを介して、あるいはSU Podium V2.5プルダウンメニューから直接、パノラマサーバー(www.panopdm.com)を使って球形パノラマに変換します。

ただし、パノラマサーバーに代わる手段もあります。

  1. たとえば、パノラマを使って自身のウェブページを作る、あるいは.htm や.jpgファイルをE-メールでクライアントに送付できるように、パノラマをローカルドライブ上に作成したい場合や、
  2. Sphercast.orgといったその他サービスを利用してフォトリアリスティック正距円筒イメージをアップロードしたい場合等。

1. ローカルドライブにパノラマVR HTMLを作成

パノラマ PIE リンク

球形パノラマをお使いのローカルコンピュータに作成したい場合が時々あります。たとえば、自身のウェブサイトにパノラマを表示したい時などです。この場合、パノラマ .htmファイルと元の正距円筒イメージファイルが必要になります。

ウェブサーバーにアップロードする代わりにPodium Image Editorで 「Create panorama file」を使用する場合、これはパノラマ .htmを作成し、正距円筒イメージファイルと同じフォルダに保存します。処理に数秒を要しますが、360°の球がお使いのWindows、またはMacコンピュータのデフォルトブラウザに表示されます。デフォルトのブラウザをお持ちでない場合は、OSがいずれかを選ぶようにプロンプトを表示します。

HTML 5に対応しているブラウザ、つまり現在あるブラウザのほどんどで動作します。Internet Explorerや Safari、FireFox、Chrome等です。パノラマファイルを作成し、お使いのローカルドライブに保存すると忌めた場合は、下記事項にご注意ください。

  1. ローカルファイルの保存場所 - .jpg や.pngファイルと同じフォルダ

    「Create panorama file」を使用すると、その.htmは、.jpg または.png 正距円筒イメージが入っているのとまったく同じフォルダに自動的に保存されます。この.htmファイルには、「BARCELONA2-SCENES-WITH-CLOUDS2_supodium-pano.htm」のような名前が付きます。.htmファイルは、正距円筒イメージファイルの名前を使用し、supodium-pano.htmをファイル名の末尾につけます。

    球形パノラマを作成するのにどちらも必要なので、イメージファイルと .htmファイルは同じフォルダに入っていなければなりません。パノラマプログラムは、正距円筒.jpg、または.pngファイルを読み込み、これを360°仮想球体にマッピング後、HTML (.htm)ファイルに保存します。そのため、両方のファイルが同じローカルフォルダになければなりません。これは、パノラマを使用して自身のウェブページを作らなければならない場合に知っておくべき重要事項です。

  2. トラブルシューティング:ローカルブラウザでローカルパノラマを表示

    1. HTML5 canvas要素を使用するWebGLを使っているので、パノラマは可能です。Safari 6(またはそれ以上)、Internet Explorer 11、Chrome、FireFoxなど現在あるほぼすべてのブラウザがWebGLとHTML5に対応しています。ChromeやSafariが搭載された最新のAndroidやiOSでさえWebGLに対応しています。

      ローカルコンピュータ上でパノラマ .htmファイルを作成することを選択したのに、パノラマ.htm ファイルが開く問題が生じる場合は、古いブラウザを使用している可能性があります。iOSデバイス問題については、パノラマファイルの配信についてのセクションで触れています。

    2. Internet Explorerでは、「Internet ExplorerはこのウェブページがActiveXコントロール上でスクリプトを実行するのを制限しています」という内容のメッセージが表示される場合があります。 「Allow Blocked content(ブロックされているコンテンツを許可)」を選択します。

  トップに戻る

2. E-メールを使ってクライアントにパノラマを送付

メモ: .htmや .jpg /.pngファイルを添付し、E-メールで送付するのは、クライアントとのパノラマ共有の推奨方法ではありません。共有のもっとも簡単な方法はパノラマサーバー(上記参照)を使用することです。けれども、パノラマファイルをE-メールで送付したい場合もあります。

e-メールにzipファイルを添付

クライアントがWindows PC、あるいはMacを使用しているなら、おそらくもっとも単純な方法はパノラマHTMLファイル( .htmファイル )と正距円筒.jpg、または.pngファイルの両方をe-メールすることです。クライアントは両方必要です。下記は推奨手順です。

  1. zipプログラムを使ってイメージファイルと.htmファイルの両方をジップします。
  2. その後、.htmファイルとイメージファイルを同じフォルダから取り出せるようにzip解除の手順を付けてこのzipファイルをクライアントにe-メールします。
  3. これで、クライアントは.htmファイルを開いてパノラマVRを表示できます。より良い解像度で表示するためにクライアントが自身のブラウザを調節しなければならない場合もあります。
  4. クライアントがInternet Explorerを使用している場合は、上述した問題を伝え、ブロックされたコンテンツを許可するように頼みます。

3. ウェブサイトへのアップロード

パノラマVRをクライアントと共有するさらなる方法は、パノラマをウェブサイトでホスティングすることです。

パノラマVRを含んだウェブページの作成方法はたくさんあります。パノラマHTML(.htmファイルと)正距円筒イメージファイルの両方がご使用のウェブサーバー上の同じフォルダにアップロードされなければなりません。下の2つの例では、単純な方法とiFrameの方法を使用しています。iOS上のSafarとiFrameはうまく動作しないことに注意してください。

A. 単純な方法:

パノラマファイルとイメージをサーバー上のディレクトリにアップロードし、これをイメージやテキスト等からリンクさせるだけです。たとえば、次のイメージはパノラマファイルにリンクします。

自動車ショールームパノラマ

これは標準のアンカーリンクだけを使用します。コードは次のようになります。

<a target="blank" href="http://suplugins.com/pano/your-panorama-file.htm">
     <img src="http://suplugins.com/pano/pano-image-file.png" />
</a>

B. iFrameを使ってパノラマをウェブページに埋め込む

パノラマをウェブページに埋め込み、クリックした静止イメージと同じサイズで表示させるためにiFrameを使うこともできます。ただし、iFramesはパノラマ.htmファイルと正距円筒イメージファイルをロードします。そのため、クライアントのインターネット接続が遅いと、iFramesが埋め込まれたウェブページがクラッシュする場合があります。イメージをクリックすると、iFrameギャラリーページが開きます。埋め込みイメージの例を参照できます。低解像度のJPEGイメージを意図的に使用した例

この方法は、JavaScriptの付いた静止イメージを使用します。iFrameを起動するにはイメージをクリック:

埋め込みPodiumパノラマ

<div onclick="panoImage=document.getElementById('panoEmbed');
panoImage.style.display='block'; this.style.display='none'"><img src="http://www.suplugins.com/pano/Bathroom800-400.png" width="800" height="400" style="cursor:pointer" />
</div>

<div id="panoEmbed" style="display:none">
<iframe src="http://www.suplugins.com/pano/Podium Bathroom -cadalog-2500_supodium-pano.htm" width="800" height="400" scrolling="auto" frameborder="0"></iframe>
</div>

メモ: .htmファイルは、同じPanoフォルダに入っている正距円筒イメージを使用しています。

  トップに戻る

 その他ソフトウェア/サービス

  1. Spherecast.org アップロード

    Spherecast.orgは、正距円筒イメージを球形パノラマに自動変換してくれる(現在のところ)無償ウェブサービスです。パノラマサーバー( www.panopdm.com)と非常に似ています - ユーザーは、SU Podium V2.5.x.で作成した.jpgまたは.pngイメージをアップロードするだけでよいのです。あとはSpherecastが行い、ユニークなURLを作成します。このURLはクライアントと共有できます。

    下図は、SU Podiumで作成した正距円筒イメージを使ってSpherecastで作成したパノラマのです。Spherecastは、現在ベータ段階です。唯一の難点は、水平エッジが少し曲がって表示されるところです。

  2. Androidデバイス対応TurnMePano

    これは、Android携帯/タブレット用の無償アプリです。動作は非常に優秀です。Google Playからダウンロードします。お使いのコンピュータから正距円筒イメージをクライアントや自分自身にE-メールします。E-メールを開き、イメージを携帯やタブレットのギャラリーに保存します。次にTurnMePanoを開き、その正距円筒イメージをを選択します。高解像度の球形パノラマに心から満足するでしょう。タブレットや携帯の動きに応じてパノラマも移動します。

  3. Easy Pano

    Easy Panoは、SU Podiumで作成された正距円筒イメージからさまざまなパノラマVRを作成できる市販のソフトウェアプログラムです。Panoweaverは、WindowsとMacの両方に対応したスタンドアロンプログラムです。これは、パノラマHTMLファイルの他、Quick TimeやFlashのパノラマも作成します。また、写真をパノラマビューに縫い込むといった機能等、さまざまな機能が装備されています。

    Panoweaverにあり、Podium Image Editorにないのは、平らな球形イメージ(正距円筒)をShockwave Flashにパブリッシングする機能です。.SWFファイルは、現在あるほとんどのブラウザが対応しています。

    また、Easy PanoにはVirtual Tour という興味深いプログラムが添付されています。これは、Panopdm.comのPano Tourによく似ています。

  4. Pano2VR

    このソフトウェアプログラムは、Easy Panoに似ています。HTMLや Quick time、Flash等、さまざまな出力オプションが用意されています。Panoweaverよりやや複雑ですが、ドキュメンテーションは充実しています。これは、SU Podiumを使って作成した正距円筒イメージファイルを球形パノラマに変換します。Pano2VRは、iOSデバイスにも対応していると言っています。

  5. What's New SU Podium What's New 配信申し込みはこちら

  トップに戻る

SU Podium V2.6 & Plugins

SU Podium Help ホーム

無償トライアルダウンロード

SU Podium What's New?

Podium Browser最新情報

フォーラム

問い合わせ