360度viewer

Question

http://www.alpinef1status.com/j/special/future/index.html

の中にある、製品をグルグルまわすのを同じように表現したいのですが、どのような方法があるでしょうか？

DPE · Accepted Answer

まず、車内の映像ですが。
このムービー、よく見てみてください。
視点が回っているように見えますが、実は、マウスカーソルの位置に応じて１枚の写真が上下左右に動いているだけに過ぎません。


車の中央あたりにカメラを置き、このカメラが回転して運転席から後部座席まで写した映像だとするなら、被写体は円弧を描いて移動します。
また、視点が上を向いた時は、被写体にも角度が付いて見え方が変わるはずです。
しかし、この映像は被写体の動きが直線的である上に、視点を上に向けても見え方は一定です。
全体を見ていると騙されてしまいますけれど、ルームミラーなどの１点に注目して観察するとよく分かります。ミラーは直線的に真横に移動していくので、車の中央に置かれたカメラが回転しているような映像としては少々不自然です。
つまりこれは、３次元的な処理をしているのではなく、２次元の写真が単純に上下左右に移動しているだけのことなのです。

それでも、ちょっと見たくらいでは分かりませんよね。本当に視点が回転しているようにも見えます。
それは、この写真の撮り方にポイントがあります。
この写真は、ビデオカメラで運転席から後部座席までを連続的に撮ったような写真になっています。
もともとが視点を回転させた時の視界と同じになっているので、単純に横移動するだけでも、あたかも視点が回転しているようにも見えるというわけです。
この写真を調達してくるのが難しいだけで、Flash の技法としてはあまり難しくはないと思います。


まず、写真の上にマスクを重ね、写真の一部分だけを表示します。
あとはマウスカーソルの位置を見て、画面の右側にある時は写真を左に、画面の上側にある時は写真を下に・・・といった具合に、写真を動かします。
マスクの範囲を超えて写真が移動すると何も表示されなくなりますから、ある範囲以上は移動しないといった制限も必要です。
360°回転させることも可能ですが、写真のつなぎ目が不自然になるなどでボロが出やすくなります。
このカタログでは 360°車内を見回す必要もないことから、半円くらいの視界に限定している点も、かっこよく見せるポイントになっていると思います。

----------------------------------------------

車内のシーンにあるボタンをクリックすると、各装備品の細かい説明が出てきます。
その中に製品を 180°および 360°回転させて確認できるパネルがありますが、今回の本題は、こちらの制作方法ではないでしょうか？


この回転は、座標軸（ＣＧの世界では、画面水平方向がＸ、垂直方向がＹ、奥方向がＺ）で言うとＹ軸回りの回転にあたります。いかにも３Ｄらしく見える回転で、ロゴのちょっとした演出などに使われることもあります。
Flash などの２Ｄのグラフィックを扱うソフトでの回転は、Ｚ軸を中心にした回転になります。
つまり、２Ｄの絵として扱う限り、Ｙ軸回りの回転は不可能です。

ロゴやイラストのようなものなら、Ｙ軸回りに回転させた時の見え方の特徴を利用し、縮小や反転等を駆使してそれらしく見せることができます。
ただし、これは所詮、対象が平面の画像であるのをいいことに錯覚させているだけの、ごまかしに過ぎません。
しかし、この３Ｄビューでは、回転した時に製品の背面や側面がはっきりと映っています。
つまりこれは、平面の切り抜きに小細工を施したインチキではなく、正真正銘の立体を回転させて撮影した映像だということです。


３ＤＣＧは、ポリゴンという小さな多角形の平面を組み合わせて立体的なモデルを作り、それをある視点から見た時の見え方を計算して描画します。
モデルを構成するポリゴン１つ１つが、３次元の座標（ｘ，ｙ，ｚ）を持っています。この点を移動・拡大・回転した時にどの座標になるかは、数学的に計算できます。
つまり、絵のデータを座標値にして持つことで、変形後の座標を計算して求められる仕組みになっている点が、３ＤＣＧ技術のミソなのです。
ですが、モニターの座標は２次元です。ｘとｙの２つのパラメータにしないと、画面には表示できません。
３ＤＣＧは最終的には、３次元の座標を２次元の座標に直す計算をし、画面に表示できるようにしています。

この変換の計算式は知られていますから、Flash でも関数やクラスとして作ることは不可能ではありません。
ただ、ポリゴン１枚を表示するだけならまだしも、今回のように製品を回転させて見ることができるようにするとなると、大量のポリゴンの情報を読み込めるようにする処理や、ポリゴンに模様（テクスチャ）を付ける処理なども必要になります。
この処理を作るのは大変な手間になり、一介の個人レベルではまず無理です。


そこで発想を変えまして、Flash で３Ｄのモデルを使って表示するのではなく、本職の３ＤＣＧ作成ソフトの力を借りることにします。
３ＤＣＧ専門のソフトには最初から、ポリゴンを２次元の座標に直して表示したり、テクスチャを貼り付ける機能が備わっています。
製品のモデルを作り、Ｙ軸回りに少しずつ回転させて見え方を計算し、この映像をそれぞれ静止画にして書き出します。
JPEG や PNG などの静止画なら、Flash に読み込んで利用できます。
Flash ではこの画像を１フレームに１枚ずつ配置し、フレームアニメにします。要するに、パラパラマンガの原理ですね。
ご質問文のサイトのムービーですと、これをムービークリップとして作り、拡大してズームにしたり、ドラッグを可能にしているものと思われます。

フレームアニメであれば、あとは、製品を回転させるスライダの位置に応じて、該当する角度から見た絵が配置されているフレームを表示するだけです。
これなら難しい３Ｄの処理関数を Flash で用意することなく、Ｙ軸回りの回転を表現できます。
読み込みに時間がかかることから見ても、様々な角度から見た時の見え方を、静止画として予め読み込んでいるのではないかと思います。

Ken-G · Answer

これはFlashで作られているようですが、QuickTime VR Authoring Studioというソフトを使っても作れると思います。
が製品の撮影が大変だと思います。
制作したことがないので方法までは分かりません。

QuickTime VR Authoring Studio
http://www.apple.com/jp/datasheet/software/qtvr.html

ちなみにこんなのが作れるようです。
http://www.apple.com/jp/hardware/gallery/ipod_jul2004_480.html
右下の手のひらツールにすると360度マウスでぐるぐる回せます。

回答になっていなくてすみません。

参考URL：http://www.apple.com/jp/datasheet/software/qtvr.html

nyanko_2003 · Answer

ここにアドバイス頂けただけでは、満足ではないと言うことですか？

http://www.gac.jp/article/index.php?stats=question&id=15061&command=msg

参考URL：http://www.gac.jp/article/index.php?stats=question&id=15061&command=msg

360度viewer

まず、車内の映像ですが。

これはFlashで作られているようですが、QuickTime VR Authoring Studioというソフトを使っても作れると思います。

ここにアドバイス頂けただけでは、満足ではないと言うことですか？

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング