2013/11/07

WebGLのカメラを使いこなす!カメラの設定方法と考え方

WebGLのカメラを使いこなす!カメラの設定方法と考え方

WebGLを簡単に利用できるthree.jsでは,カメラを利用して描画した物体を捉えることができます.しかし,カメラに馴染みがない初心者には,カメラのパラメータ設定が少し難しく感じてしまうと思います.そこで今回は,カメラのパラメータ設定方法とそれぞれのパラメータの考え方について解説します.

目次

WebGLで利用できるカメラは?

まず,WebGLを利用できるthree.jsのカメラには透視投影カメラ正投影カメラ複合カメラの3つが利用出来ます.

透視投影のカメラは,映画やアニメーションのCGで使用され,遠近感を表現できます.また,正投影のカメラは製図やCADなどで使用され,描画した図形や物体が,視点からの距離によって歪むということはありません

three.jsを使用する場合は3Dで,映画やアニメーションのCGに近い演出を行いたい場合が多いと思うので,透視投影カメラについて説明していきます.

透視投影カメラのパラメータと考え方

透視投影カメラにはパラメータが4つあります.

THREE.PerspectiveCamera(画角(視野角),縦横比(アスペクト比),カメラから手前(ニアクリップ面)までの距離,カメラから奥(ファークリップ面)までの距離)

となっています.
透視投影の場合は,以下の図のような視点を頂点とした四角錐が基本となります.

透視投影カメラの基本概念

ではそれぞれのパラメータについて詳しく見ていきます

画角(視野角)

カメラに写る光景の範囲を角度で表したもの

縦横比(アスペクト比)

画面の長辺対短辺(横対縦)の比率を表したもの

カメラから手前(ニアクリップ面)までの距離

視体積の四角錐の頂点に近い部分を切り,視点からその切断面までの距離を表す.

カメラから奥(ファークリップ面)までの距離

視点から最も遠い距離の面を表します.すなわち,カメラで見ることの出来る距離を制限するために設定します.

※ニアクリップ面からファークリップ面までの領域が描画されます.よって,カメラで写すことの出来る領域は.ニアクリップ面からファークリップ面までの距離の間に描画されている物体となります.

実際に変更して体験しよう

大体のイメージはつかめたと思いますが.実際に値を変更して確認してみましょう.
※スライダーでの値の調整を急激に行うと描画が間に合わないため,ゆっくり行ってください.また値を変更しても変化がなくなってしまった場合はページのリロードを行ってください.

視野角

アスペクト比

ニアクリップ面までの距離

ファークリップ面までの距離

視野角
アスペクト比
ニアクリップ面までの距離
ファークリップ面までの距離

まとめ

カメラのパラメータを設定する場合は,描画する物体の大きさや量,精度などによって変化するため.慣れや経験が必要となりなすが,考え方自体は上記の内容が基本となります.

値を様々に変更してどういった挙動をするのか是非目で見て確認し,コツを掴んでみてください.