アスキーアートな描画エンジンをなんかわからんけど作った【日記】
えぇ...
こんにちは、箱詰九分です。
Twitter で「サイコロを振るプログラム」の募集があって、楽しそうだったので作るかーしたところ、なんか描画エンジンを作ってしまったっぽいです。1日しか作る時間無かったけど、やればできるもんだ。
この記事は、作ったソースコードの供養が主な目的です。仕組みは解説しません。ごめんね。ソースコード見るとだいたいわかるんじゃないかな...
HTMLとJavascriptでできていて、500行くらいのソースで実現されています。WebGLやライブラリは使っていなくて、自作です。
物理エンジンを作成するのは...少し考えましたが、時間が足りんかった...
（※サイコロ、回ってるけど、振ってはなくね感ある。まあいいか。）
動画
サイコロの回転を止めたり始めたり、カメラの移動ができます。
ソースコード
ソースを丸ごとダウンロードして、インターネットブラウザで開くと、運がよければ動きます。パソコンでしか動かないよ。ウィンドウサイズを小さくするとまともに表示できないので、広げてください。
Codepenも貼っときます。
カメラ操作 :
・ドラッグ : ぐるぐる見回し
・ホイール：ズームイン・ズームアウト
・Shift +ドラッグ：上下左右にシフト移動
問題
・ポリゴンがでかいと表示がバグる
たぶんクリッピング処理をサボったせい。処理が難しくなるので放置。
・カメラ操作がわりとおかしい
適当に作ったからだと思う...直し方わからん。
仕組み（簡単に）
1. 3D空間上の頂点の位置を計算
2. 透視投影（カメラ上の座標に変換する）
3. ラスタライズ（キャンバス上の画素に変換する）
4. 深度バッファ使って重なりを計算
5. テクスチャ貼る
たぶんこんな感じだった記憶。私自身は詳しくなかったので、いろいろ調べました。ソースの中身、もしかしたらなんか間違ってるかも...
終わりに
よくわからなかったと思いますが私もよくわからないのでお揃いですねやったぜ。描画エンジンを作ってみての感想は、「めんどいし既存の描画エンジン使えばいいじゃん」です。そりゃそうか。なんかこんな記事ですまん。
著者 twitter :