js+canvasでレイトレーシング

レイトレーシングというのは3DCGの描画アルゴリズムの1つ。 鏡といった光を反射する物体の描画に強い。

大学時代僕は3DCGに興味を持っていて下記の本を読みながら実際にCでレイトレイシングをコーディングしてみたことがある。

CによるCGレイトレーシング (Information & computing (54))

CによるCGレイトレーシング (Information & computing (54))

何か明確に目に見える成果ができるのでレイトレーシングをコーディングするのはとても楽しい。更に、レイトレーシングと一言でいっても様々な高速化手法や描画手法があるので、プログラムを作りこんでくことができる。作りこむ過程で行き詰まるとスクラッチから書きなおすということを何度も繰り返し、良いプログラミングの勉強になる。そんな訳でjsで何か作ろうと思った時にレイトレーシングをやってみる。

前置きが長くなったけど今回はjs + canvasを使って。簡単な球のレイトレーシングを描いてみた。 簡単な命令プログラミングでちゃちゃっと描いてしまったけど、そこそこ動くもんだ。

f:id:fakeyakuza:20130519102838p:plain

実際のデモ

描画までに時間かかるけどiPhooneやアンドロイドのブラウザ上でも動く。 これはそこそこ嬉しい。 もうちょい複雑なことをできるようにして。 大域照明レンダラまで書けたらいいなぁ。 今日はここまで〜。