回転体を回そう ／ 透視変換

第3章 No.3 ／ Sample4–8、回転と遠近感

あれ?

と思った人も多いだろう。「回転体」が回転してないじゃないかと…。では、つぎに回転体を回転してみよう。このプログラムは、Sample 1 を参考に簡単に変更することができる。

いかがでしょう。また、データを少し変えてみよう。

さらに、ダブルバッファリングという機能を使うと、すこし回転体がスムーズに回転する (Canvas の場合は標準でダブルバッファ済み)。

透視変換

つぎに 透視変換 を考えよう。平行変換では図形の歪みがなく、平行な光を当ててみえる図形を表現したが、透視変換ではいわゆる 「遠近感」 をつけることである。

x-y 平面に図形を投影するとき、z 軸上で z 座標が −Z の位置から図形をみることを考える。そのとき、実際の図形の点 (x₄+xx, y₄+yy, z₄+zz) を比により変換することにより、Z / (Z + z₄ + zz) (x₄ + xx) が x-y 平面上の座標となる。

ここでわかるように、透視変換をすると図形が少し歪になる。視点 (-Z) を調節することにより解決することが可能であるが、コンピュータグラフィックスでは、透視変換を使わなくても (「遠近感」をそれほどつける必要がないので) よい場合が多い。そのため、通常は 全体を拡大、縮小 するだけでよい。

ソースコード: samples.js の SoR / FreeSoR / PerspectiveSoR 部分。