たまには自分の話でもするか！ Tokyo Demo Fest 2017 に WebGL デモを出品してきましたな話
大興奮の二日間！ Tokyo Demo Fest 2017
今回は、当サイトを運営している私自身のプロダクトをご紹介するというなんとも恥ずかしい試みをお届けします。
2/18、2/19 の二日間に渡って開催された Tokyo Demo Fest 2017――このサイトをご覧のみなさんの中にも、もしかしたら参加された方がいらっしゃるかもしれません。
年に一回開催されている日本で唯一のデモパーティ・イベントである TDF に、昨年に引き続き、今年も参加してきました。今回は簡単なその参加レポートと、私自身が出品した WebGL 作品の、ちょっとした技術解説などを交えつつご紹介しようと思います。
優勝作品も WebGL 製という快挙！
先日、Tokyo Demo Fest について紹介する記事を当サイトに掲載しました。そこでの内容と若干重複する部分もあるかと思いますので、まずこのイベントがどんなイベントなのか知りたい！ という人は、過去の記事のほうを先に見てみてください。
デモパーティという名前のとおり、単にデモ作品を見せ合うだけでなく、食べ物や飲み物を自由に持ち寄りつつ、コミュケーションの場としても貴重な体験ができる、そんなイベントです。
参考：日本で唯一のデモパーティ Tokyo Demo Fest 2017 が今年も開催！ GLSL Compo やセミナーにも注目！ - WebGL 総本山
JR 秋葉原駅にもほど近い 3331 Arts Chiyoda の体育館が今年の会場でした。
Demoscene のイベントでは、そのイベントの色によって様々ではあるのですが、ある程度部門を分けて、多種多様な作品を参加者たちが出品します。
たとえば今年の TDF（Tokyo Demo Fest）では、以下のような部門がありました。
- Combined Graphics compo(イラストやプロシージャルなグラフィックス作品)
- Combined Music compo（サウンド・ミュージック作品）
- GLSL Graphics compo（GLSL のみで描くグラフィックス作品）
- Combined demo compo（PC 環境で実行できるデモ作品）
- Wild compo（上記に分類されない作品）
私は今回は Combined demo compo に作品を出品。この部門は、いわゆる実行ファイル形式になっている映像作品のほか、WebGL を用いたリアルタイムグラフィックス作品も含む部門です。
GLSL Graphics compo のほうは GLSL Sandbox を用いてシェーダ作品を披露しあうので、こちらも実質 WebGL をプラットフォームとする部門ですね。
このように、近年では、WebGL を用いた作品が Demoscene を賑わせることも多くなってきました。素晴らしいですね。
今回の TDF では、初めて参加した方や、あまり Demoscene に詳しく無い来場者のために、イベントのオーガナイザーからイベントの趣旨や、使われているシステムの使い方などのレクチャー式セミナーが提供されており、こういった文化に馴染みのない方でも安心して参加できる土台作りがされていました。
こういう初心者向けの導線があるのはすごくいいですね。
Demoscene というと、バリバリの CG 野郎たちばかりが集まっている硬派な集いなのでは……と思ってしまう人がいるかもしれませんが、けしてそんなことはないんです。
会場は体育館を使っているため、スクリーンも大きく大迫力！
デモ作品の上映には、この巨大なスクリーンいっぱいに、作品が投影されます。しかも高精細で驚くほどキレイです。
海外の方もたくさん！
少しばかり WebGL をかじっている私も、今回なんとか合間を縫って作品を仕上げました。
自分の作品が上映されるその瞬間には、緊張と興奮が入り混じり無駄に変な汗が出てくるという謎の体験ができます。今年で参加しはじめて三年目なのに、この自分の作品が上映される前の異常な緊張感は本当に慣れないですね（笑）
私は今回は、WebGL では比較的よく見かけるいわゆるパーティクル芸で攻める、そんな作品を出品しました。
パーティクルを飛ばしまくり、加算合成でバシバシ色を乗せまくるという、あまり目新しい技術を使っているわけでもない内容ではあるのですが、やっぱり映像とサウンドが一緒になり、かつ大きなスクリーンにバーンと映し出されると自分の作品も少しだけマシに見えますね。
今回の作品のソースコードは Github に普通に置いてあるので、気になる方はそちらをご覧いただくこともできます。
ただ three.js とかは一切使ってない自家製の WebGL デモなので、ちょっとソースコードを直接読んでいくのは大変かもしれない……
そこで、少しだけこの作品に使われている技術を簡単に解説しておきましょう。
まず、次の画像にあるように、今回の作品ではスクリーンになんか細かな粒みたいなのが出てくるシーンがいくつかあります。これはいわゆるポストエフェクト的なことを行なった結果です。
他のシーンでは、一度描画したシーン全体に対してガウシアンブラーを掛けている場合が多いのですが、このつぶつぶシェーダではブラーではなく、輝度からつぶつぶを作って描画しています。本当の狙いはもう少しなんていうか、少しドットスクリーンっぽい渋い感じになると思ったのですがあんまかっこよくならんかった（正直者）
粒を描く場合は、GLSL の mod を使って座標を一定の範囲にクランプするような処理を施した後、その範囲のなかで輝度から中央部分だけがぽつりと明るく点になるようなシェーダの処理を行っています。
今考えてみると、この粒の大きさの指標を、元シーンの輝度だけでなく別途波紋のように波打たせたり模様を描くように処理したりしておけば、もうちょいかっこよくなったかもしれないなどと思います（いまさら）
また、パーティクルを描画するときには、GPGPU 的なことを行なってシェーダ側でパーティクルの座標をぐりぐりしています。
現在は WebGL 2.0 が動くようになっていますが、このデモを作り始めた当初はまだ WebGL 2.0 はデフォルト有効ではなかった時期だったために、古風にテクスチャに焼いて GPGPU 処理を行っている感じですね。
フラグをオン・オフするだけで、点だけを描いたり、あるいは同時に線を描いたりできるようにしておいて、姑息に同じ頂点の動きなのにまったく別物に見えるようにしたりしています。
点のほうは明るく、線のほうはちょっと違う色にするなどして姑息にシーンを演出（笑）
また、GPGPU を行うためのテクスチャには、次々とパーティクルの座標が書き込まれて、逐次更新されていくのですが、途中でこの座標や進行方向のベクトルをいちいちリセットしないことで、直前のシーンで GPGPU していた結果が引き継がれるような流れになっています。
これにより、シーン切替時に、前のシーンの状態によってその直後にパーティクルが存在する座標や進む方向が、作者の想定を超えて 偶然にかっこよくなる という現象が起こりめちゃ助かりました（めちゃ正直）
たとえば下の画像は、直前のシーンで GPGPU 用のテクスチャの中身がトーラスの形になっているところから引き継がれています。
なので、画面の中心に向かってぐわーっと寄ってくるパーティクルの形が、よーく見るとトーラスの崩れかけみたいに見えるでしょ？
はい。とまあこんな感じで、わりかし古風な、ありがちな技術の姑息な組み合わせにより誕生した私の WebGL デモ作品ですが……デモ用の作品ということもあって負荷的にはちょっと重いです。
VR Ready なマシン（なら多分処理落ちしないかなと思います）をお持ちの方は、この記事の末尾にあるリンクから、実際に動かすことができるデモのページへ行けますので、もしよければご覧になってみてください（音が出ます）
また、今回の作品で使われている BGM は @ukkari_ukachan さんが作ってくれました。ありがとう ukachan。
その他のデモ作品も、どれも優れた作品ばかりで非常に刺激になりました。海外のサイトですが、徐々に TokyoDemoFest 2017 :: pouët.net というページのところに作品が順次アップロードされていくと思いますので、こちらも要チェックです。
GLSL Graphics compo の作品についても、順次 GLSL Sandbox にアップロードされていくはずです。こちらはサイトの仕様上タイトルなどが明記されないと思いますが、pouet.net のほうから確認するようにすれば、作者さんも合わせて一緒に確認できると思いますので、気になる方はそちらから見てみるといいと思います。
今年の TDF では、ついに WebGL 作品が優勝するなど、Demoscene 界隈における WebGL の立ち位置が、より一般的なものへと変わってきているのだなという印象を受けました。
フロントエンドやウェブの WebGL の使い方とは本質的に異なり、負荷を度外視した実装になることが多い Demoscene の WebGL 作品ですが、ブラウザで世界中のどこからでも閲覧できるというメリットは変わりません。ぜひみなさんも、一線級の WebGL Demo に触れ、アイデアや技術を盗んでみてください。
そして、来年の Tokyo Demo Fest でひとりでも多くの方に Demoscene の素晴らしさを共感する出会いができたら、最高かなと個人的には思っています。
Tokyo Demo Fest の関係者のみなさん、また、作品を出した方も、会場にいらっしゃった方も、みなさん本当にありがとうございました。
リンク：
TokyoDemoFest 2017 :: pouët.net
