NIRVANA改SECCONカスタムを作る
これはCTF Advent Calendar 2016の14日目の記事です。今日になって何故か急に@potetisenseiがポエムを投稿したので被って最悪。抜けた3日目と25日目を足して2で割って14日ってなんじゃそりゃ。
お気持ち表明
CTFの可視化って流行ってますよね。 最近SECCON本戦だけでなく、地方大会やCTF for Girls、更にはSECCON系ではないTrendMicroCTFでもCTFの可視化が行われていて「いいなー」って思うわけです。同じ感じに作っても面白くないので、ブラウザ上で動くthree.jsを使ったらどこまで行けるんだろうと勢いがあるだけやってみることにしました。
NIRVANA改SECCONカスタム (2013)
2013年のNIRVANAですが記憶に残っている人も多いと思います。これだけイケてるCTFの可視化システムは世界中を探してもSECCONくらいですね。
と、見とれるのはこれくらいにして、どうすればこれを手抜きして作れるかを考えます。パッと見て特徴的な点を挙げていくと、
- 六角形
- 回る
- パケットっぽいものが飛んでる
- 透けてる
終わり。
「突破」が足りない？問題を解いてから言いなさい。とまぁ、動画を見て抱く印象としてはだいたいこんな感じでしょう。
作ってみる
three.jsの学習にゆるゆる1週間と本体の実装に2日なのでガバガバコードです。飛んでる物体の削除が雑。3Dがよくわからん。ChromeとFirefoxで描画のされ方が違うなど。
前述した4つの要素を使ってそれっぽいものを作ってみました。今のところ通信を拾ってアレコレするのが面倒だったので乱数で適当に飛ばしてます。透けてる六角柱が回ってパケットっぽいものが飛んでるだけでなんとCTFの可視化っぽくなります。
WebGLとは言えまぁまぁ重い。MBPだとRetinaでGPUがファーでファンもファー。MBPはGPUを酷使すると離陸することで知られていますがTouchBarが付いたMBPはどうなんですかね。
実装的には六角柱を並べてパケットを飛ばし合う様子をカメラを回しながら見てるだけです。パケットは雑な放物線を書いたのでそれに合わせて飛ばしてます。他に書くこともあんまりないんですが乱数によりスコアっぽいものが決まって六角柱の高さが変わります。
終わりに
NIRVANA改SECCONカスタムはすごい。透ける六角柱が回ってパケットを飛ばすくらいなら簡単なのに、これをCTFの状況に応じて細かく制御したり、複数モードとその間の画面遷移を実装したり軌道を綺麗に表示したりと異常な挙動がたくさん見られるのでプロフェッショナルは強い。
CTF for ビギナーズでも可視化をやりたい気分があるのでJeopardyの可視化に自信のある人は連絡ください。
