Example4 – 擬似的3Dグラフィックス

Fig1-450

HTML5のCanvasでは、描画コンテキストを得るために、canvas.getContext(contextId)という関数を使います。ところが現在、引数として有効なcontextId'2d'だけなのです。それに対する戻り値は、2次元描画コンテキストです。

2次元描画コンテキストは、2次元の図形描画や変換(回転・並進)を行うことができますが、3次元立体の描画や変換を行うことはできません。そこで、3次元表現を擬似的に実現する(3次元のように見せる)方法が開発されています。jsdo.itに紹介されている「楕円描画だけでトーラス七変化」も、そのひとつです。

Example 4では、このプログラムを参考にして、擬似的3Dグラフィックスのひとつを解説します。なお、サンプルコードは、完全にスクラッチから作成しました。Example 1と同様、プロトタイプオブジェクトを使っています。

ここで扱うのは、回転体です。回転体とは、図形を軸の周りに回転してできる立体ですが、この特徴のために、擬似的3次元表現がたいへん易しくなります。傾いた楕円を描くだけで、それらしい3次元表現が可能なのです。以下の構成で解説します。

  1. 回転体の表現
  2. 隠線処理と色空間
  3. 回転体の描画オブジェクト
  4. 様々な回転体