2018年02月17日にHack To The Future (#HTTF)というマラソン形式の競技プログラミングコンテストの予選が開かれました。
参加していただいた皆さんありがとうございます。

今回、この#HTTF向けにビジュアライザーをつくりました。

ビジュアライザー

問題が「山型足し算」という縦・横・高さの解が求められるものだったため、ビジュアライザーも3次元の方が見やすいなと思い、こんな感じで作ってみました。
ピラミッドを積み上げて正解データに近づけてね。赤が正解と合致したところ、白が足りないところ、青が多すぎるところだよ、という感じです。

青と白（過剰・不足分）だとの描画モードもあります。

構成要素

Webで3Dということで、Three.jsというWebGLが手軽に扱えるようになるライブラリを使っています。というかほぼThree.jsママ。
5年ぶりくらいにThree.jsを触ったのですが、メソッド名で検索したときに日本語ドキュメントと日本語のブログが沢山出てきて感動しました。ホントありがたい。

配置したオブジェクトも、赤・白・青の直方体、カメラ、ライト、座標の文字、補助線くらい。

軽量化

予想される回答は 10010020000くらいのモデルなのですが、構築開始直後はボクセルで表現しようとしてメモリ不足でブラウザが落ちました。2億個のMeshをIntel HD Graphicsで描画できるわけ無いです。

いろいろ調べた結果、こちらの記事を参考にしまして、最終的には赤・白・青ごとにGeometryで固めて描画しました。2億Meshが3つまで減りました。すごい。

あとはデータを入れ替えるごとの初期化処理の見直しやメモリ解放等で動作の軽量化を図っています。
とはいえ頑張ればまだ軽量化できる気がする。

参加者の反応

ビジュアライザが3Dでグリグリできてすごい #HTTF
— odan (@odan3240) 2018年2月17日

ビジュアライザでいくつかテストして全部形一緒なことに気付いてからは割と早かった
— ㅤ (@my316g) 2018年2月17日

#HTTF ビジュアライザのおかげで「丸み」がすごく良く分かりました
— fal_rnd@崖 (@fal_rnd) 2018年2月17日

思ってた以上に好評だったようでホッとしました。

とはいえ、いくつかのバグ報告や描画が重たいという意見も頂いたので今後に活かしたいところです。

次回

2018/03/03（土）に、同コンテストHack To The Futureの本選が開催される予定です。
えっ… 来週末ですか。ビジュアライザーの実装間に合うかな…。