昨日は立方体に風景画を貼り付ければ奥行きのある3Dの背景になり得るかを実験しましたがテクスチャの作成をうまくやらないとイカンという当然の結論を得て終了しました笑。
本日は「天球」に画像を貼りつけるというパターンで、心地よい背景ができるかチャレンジしてみます。
背景とする画像は「専用のカメラ」で撮った写真を使います。
専用のカメラとはRICOH Thetaのような360度天球画像がとれるデバイスです。
実際撮れる画像はこのようなの歪んだJPEG画像です。
この歪みは、球面の地球から平面の世界地図を起こす方法でお馴染みの正距円筒図法によるものと思われます。このような画像でないと面に貼り付けた時に破綻してしまいます。
実装
このThetaでとった写真の天球への貼り付けはThree.jsのサンプルで公開されている通りやれば実現はラクです。
しかし、こうしてできあがった背景は奥行きを持ったように見えますが、3D座標系とは全く異なり実際は単なる球状に配された写真であるというところが味噌です。
なので、例えば別のオブジェクトを呼び出した時、パースペクティブや奥行きがあわず不自然になります。
それがどの程度不自然なのか確かめるため作ったのが今回のデモです。
できあがったものが以下です 。
（リロードすると立方体の位置が変わります。fovとは視野角です。）
立体が球面と交差して切れてしまっているのもありますし、やはりドラムや譜面台との距離感に違和感を感じます。
違和感を狙ってやる分には良いですが、3Dはパースペクティブが破綻した瞬間、気持ち悪さしか感じなくなりますね。。
ただその不自然さを意図して演出の妙として捉えるとそれはそれでなしではないと思います。以下の動画のように、視点移動をダイナミックに加えてあげると少し面白い絵ができあがります。
背景を画像データからつくるときの方法と注意のまとめ
立法体に背景テクスチャをマッピングする
- 6面必要
- 360度のパノラマ画像、天の画像、地の画像を描き（撮り）、そこから6面切り出す必要がある
- 素材の建物の位置などで、遠近感の印象が変わる。注意しないと破綻する
天球に背景テクスチャをマッピングする
- 正距円筒図法で引き伸ばされた画像が必要
- Thetaで撮ることはできる（絵から作成する方法は…あるのか…）
- 背景はワールド座標とは全く別物で存在しているため、他のオブジェクトとの距離感が不自然になりやすい。