トップ > HTML > 「マンデルブロ集合を鑑賞するツールを作成した」開発日記

「マンデルブロ集合を鑑賞するツールを作成した」開発日記

HTML JS CSS JavaScript Typescript WebGL webpack プログラミング 設計 Web Unity three.js マンデルブロ集合

f:id:shogonir:20200527021027p:plain

マンデルブロ集合を鑑賞するツールを作成した

youtu.be

先日動画を公開しました。
マンデルブロ集合を鑑賞するツールを作成しました。
Unity や three.jsなどは使わずに、ゲームエンジン部分も自作です。
よかったら上記の動画も確認してみてください。

また、Web上で公開しておりますので触ってみてください。
WebGL2 と Web Worker が動く環境で試してください。

http://shogonir.jp/mandelbrot-map/

このブログでは、開発日記を紹介したいと思います。

開発日記

開発期間は約2.3ヶ月間でした。
2019年12月23日にベースプロジェクトを作成しました。
2020年1月30日にWeb上で公開しました。

2019年12月24日

マンデルブロ集合を2次元の画像で描画しました。

2019年12月27日

描画ロジックを改善して、白黒からグレースケールに変更しました。

2020年1月6日

UnityのGameObjectのような設計で、正方形を描画しました。
少しバグはありますが、オブジェクトをQuaternionで回転させました。

2020年1月9日

マウスのドラッグアンドドロップで移動できるように実装しました。
複数のGameObjectを描画できるようになったのもこの日です。

2020年1月10日

画面内に見えているx軸方向の広がりを計算できるようになりました。
辺の長さが2の青の正方形が、視界をx軸方向に埋め尽くすようになっています。

2020年1月15日

視野の端に赤い正方形を配置することに成功しました。
また、視野の端にある青い正方形だけ、緑になるようにしています。

2020年1月16日

視野の中にあるタイルを全て描画するように変更。
まだマンデルブロ集合の描画はしておらず、タイルは一律緑にしています。

2020年1月21日

マンデルブロ集合のテクスチャを反映しました。
この時点ではパフォーマンスが悪く、動作はガクガクです。

テクスチャの描画も少し改善を試みています。

2020年1月26日

テクスチャを反映する部分をリファクタしました。
まだパフォーマンスの改善はされていません。

2020年1月27日

ラスタライズしたテクスチャをプールするようにしました。
少しだけパフォーマンスは少し改善されました。

だいぶ動くようになってきたので、自分でも鑑賞して、
気に入った景色があったのでスクショを何枚か残しています。

2020年1月29日

現在の中心座標とズームレベルを画面の下に表示するようにしました。

また絶景を見つけてスクショをとっています。

2020年1月30日

不具合の修正を一気に行いました。
* タイルの境界に線がチラつく問題を修正 * パフォーマンスチューニング * x方向に世界がループする

Web上にあげて公開しました。
10リツイート、20ライクいただけて嬉しかった思い出。

2020年1月31日

HTML, CSSを整えてデザインを整えました。

2020年2月1日

画面の中央のテクスチャから優先して描画するよう修正しました。
パフォーマンスは変わりませんが、体感では速く描画できるようになりました。

2020年2月10日

四元数 (Quaternion) のクラスにバグがあったので改修しました。
特定の角度に回転するとオブジェクトが平面に潰れる不具合でした。
四元数を行列に変換するメソッドに間違いがありました。

振り返って

以上が開発日記でした。

今までUnityとかがどのように実装されているのか全くわかりませんでした。
しかし今回のゲームエンジン部分を実装してみて、少しだけわかるようになりました。
結局は行列で空間を写像で飛ばして、デバイス正規座標にしているんだなと思いました。

いまは画像をテクスチャに描画するか、頂点に色を持たせるぐらいしかできないので、
もっと高度なゲームエンジンの機能を実装できるのか気になります。
引き続きグラフィックについては勉強していきたいです。

読んでいただきありがとうございました。