Processing.js で射影変換

！今日の日記は Internet Explorer ではご覧いただけません！

---

ここ最近、Processing で 3D なプログラムをちょこまかと作っているたーせるですこんにちは。

ぼくはこれまで Applet をべたべた貼っていましたが、動作させるためには Java プラグインが必要だったり起動が若干重かったりと、そろそろ不満な点が出てきました。

せっかくなので、インタラクティブな 3D 絵をなんとかして超ナウい HTML5 として吐き出してみようというのが本日のテーマです。

こういった不満を解消する一つの選択肢として Processing のプログラムを HTML5 の canvas で動作させてしまえるライブラリ「Processing.js」が存在します。

次期 Web 標準と目される技術ですから前途有望ですし、今後さらなる普及が期待できるスマートフォンにも対応可能。

ここまでいい事ばかり書いてきましたが、実は一つ大きな問題があるのです。

---

【Processing.js では、3D が使えない】

否、使おうと思えば使えるのですが、P3D モードで作成した 3D のスケッチは WebGL ベースでレンダリングされる事になるため、対応している環境がまだまだ少なかったり、そもそもセキュリティ的にアレだったりと不安要素が非常に多いのです。

こういった理由から、今のところ WebGL 技術は使うべきではないとぼくは考えています。

とはいえ、一般的には 3D のグラフィックスだってレンダリングパイプラインをくぐり抜けて 2D の絵に変換されるわけですから、それを疑似的に再現すれば、理論上、 2D の Canvas に 3D っぽい絵を出す事が可能なはずです。

そして、レンダリングの一プロセスである射影変換に関して言えばユニバの中の人が既にモジュール化して下さっている上、『皆さん使ってね。』と気前のよい事を仰っています。

---

【これは負けてはいられない】

ユニバのデモはたいへん素晴らしいですが、カメラが固定的だったり、各オブジェクトの直接的な基準がすべて世界座標系だったりと、かゆいところに手が届かず残念なところがありました。

そこで、それらを踏まえ、ぼくは以下の点にこだわってシンプルなレンダリングパイプラインを実装してみました。

• 任意の位置に任意の姿勢のカメラを設置できる（カメラの位置・姿勢は cam() メソッドで指定）。
• 並進・回転運動は trans() / rot() メソッドによって、オリジナルに近い記述が可能。
• 行列スタックの採用によって、階層的なモーションにも対応（スタック操作は pushMat() / popMat() メソッドで可能）。 

これらのお陰で、P5 オリジナルに近い記述で 3D の柔軟な制御ができるようになっています。

ひとつデモを載せておきますね。

これは、以前ご紹介した White Cube という作品を移植したものです。もともと複雑なアフィン変換の練習のために作ったデモですが、HTML5 版でも特に問題なく動いている事が判ります。

というわけで、Zソートやライティング・テクスチャマッピングといった 3D に不可欠な処理は未実装ですが、Processing.js でピクセル操作を行うと CPU に相当な負荷がかかりますので、このくらいがほどほどなのかも知れません。

例によってソースはこちらに置いておきました。