#TokyoDemoFest 2016 の GLSL Graphics Compo で3位入賞！

event, demo, CG

はじめに

2016-02-20〜21に開催されたTokyo Demo Fest 2016に参加しました。

Tokyo Demo Festとは、このようなイベントです（公式ページからの引用）。

Tokyo Demo Fest は日本で唯一のデモパーティです。 デモパーティは、コンピュータを用いたプログラミングとアートに 興味のある人々が日本中、世界中から一堂に会し、 デモ作品のコンペティションやセミナーなどを行います。 また、イベント開催中は集まった様々な人たちとの交流が深められます。

私は”Carbon”という作品をGLSL Graphics Compoに提出して、3位入賞してきました！

さらに、three.jsの作者であり、GLSL Sandboxの作者でもあるMr.Doobと握手してきました！

今回が初参加でしたが、本当に最高のイベントでした！楽しかったです。 オーガナイザーのみなさん、参加者のみなさん、ありがとうございました！

全体のレポートについては、@h_doxasさんの記事がとても分かりやすいです。

この記事では、GLSL Graphics Compoで発表した”Carbon”という作品の裏話と、個人的に印象に残った思い出などを話します。

Carbon 製作秘話

Compo（コンポ）とは、一定の制約の中で映像や音楽の作品を製作し、投票によって順位をつけるイベントです。

今年のGLSL Graphics Compoでは、GLSL Sandbox上で動作する映像作品の順位を競いました。

GLSL Sandboxで動作させるためには、フラグメントシェーダだけで作品を実装する必要があります。 当然ですが、立体データや画像データは読み込めないので、コードだけでなんとかする必要があります。

私は”Carbon”というタイトルで作品を提出して3位入賞しました。 今年のGLSL Graphics Compoはレベルが高かったので、入賞できて嬉しかったです。

コチラから動くデモをご覧になれます！

Carbon - Blue Carbon - Green Carbon - Red Carbon - Violet

今回もレイマーチングによる作品です。

距離関数（distance function）は、Mandelboxというフラクタル図形を mod でループさせただけなので、非常にお手軽です。

この作品は大会中に頑張って製作しました。製作期間はなんと1日です！ 20日のお昼くらいに作り始めて、20日は徹夜で作業し、21日の13:00の提出期限のギリギリに間に合わせました。 提出期限5分前くらいまでバグが取れずにあたふたしていたのですが、なんとか提出できて本当に嬉しかったです。

シェーダはデバッグが難しいので、バグを取るのはけっこう大変です… 今回も同名の変数を異なるスコープで宣言しているという単純なミスで30分くらい無駄にしました。みなさんは気をつけましょう…

実は先週の #GLSLTechの打ち上げの飲み会の際に、Mandelboxというフラクタル図形という名前を聞きました。 Mandelboxで何か作品を作るということ、完成図のイメージはだいたい決まっていたので、そこまで出戻りなどもなく、1日で完成にこぎつけることができました。

わざと0.5秒おきにチカチカ点滅させてます。BPM120の曲を後ろで流すことを想定したためです。

実装的な細かい話

実装的な細かい話をすると、前回にレイマーチングで作成した”reflect”という作品では、 sceneColorという最短距離にある物体表面の色を返す関数を実装をすることで、色分けを実現しました。

“reflect”では床も球体も全て同様に鏡面反射させたかったので、この方法で十分でした。

今回の”Carbon”では物体ごとにシェーディングの挙動を切り替えることが必要でした。 背景のMandelboxは普通のPhongシェーディングを行い、空中に漂っている球体は鏡面反射というように、色だけでなく反射の挙動を物体ごとに制御する必要がありました。

今回は衝突情報をIntersectという構造体に格納して、衝突した物体に応じたMaterialに応じて、Intersect.materialにセットするようにしました。

Intersectの定義はこうしました。

struct Intersect {
    bool isHit;

    vec3 position;
    float distance;
    vec3 normal;

    int material;
    vec3 color;
};

const int CIRCUIT_MATERIAL = 0;
const int MIRROR_MATERIAL = 1;

マーチングループを抜けたあとのシェーディングを行うプログラムで、Intersect.materialを参照し、シェーディング方法を切り替えるような実装としました。 この方法により、色だけでなく、反射の挙動やシェーディングも物体ごとに制御することを実現しました。

衝突情報を構造体に格納するというのは、ちょっと前につくった“gem”という作品からのアプローチからの継承です。 “gem”はレイトレーシングのGLSL実装作品ですが、レイマーチングにも応用できることを証明できました。

ソースコードは可読性重視したので、なんとか読めるレベルになっていると思います。参考にしてください。

カメラのデバッグ

カメラのデバッグのためにTHREE.OrbitControlsを使いたかったので、three.jsで開発やデバッグしました。

ただし、GLSLのエラーを見つけるためにGLSL sandboxにコピペするといったように、three.js製の自作システムと、GLSL sandboxを平行して使用しました。 GLSL sandboxと互換性を持たせるために、three.jsで開発したシステムはGLSL sandboxと互換のあるuniforms設計をしました。

Mandelboxのいい感じに映し出すためのカメラの軌跡を見つけるのが大変でした。適当に動かすと、すぐにMandelboxの壁に衝突してしまうので… MandelboxのScaleというパラメータを弄りつつ、直線で壁に衝突しない軌跡を発見できたのは、THREE.OrbitControlsのおかげです。

他にもスクショをとるのにも、自作システムが役に立ちました。

GLSL sandboxで清書する前に、まずは自作システムで下書きするという方法はオススメです。

TDFで出会った、すごい人たち

コミュ症なので、普段はあんまり人に話しかけたりしないのですが、勇気を出して交流してみました。

ここからは、TDF（Tokyo Demo Fest）で出会った人たちを紹介します。他己紹介はやったことがないので緊張しますね。

doxasさん

先週の#GLSLTechにつづいて、@h_doxasさんにお会いしました。

doxasさんは、あの有名なwgld.orgやWebGL 総本山の中の人です。

wgld.orgはWebGLについて日本語で十分な情報が書かれている唯一のサイトといっても過言では無いでしょう。 しかも初心者でも分かるように、とても丁寧に分かりやすく解説されています。

自分自身、wgld.orgを読んでレイマーチングを学びました。 また、TDFの存在はdoxasさんのTwitterを見て知りました。 もしdoxasさんがいなかったら、今の私はなかったと思います。 ありがとうございます！

そんなdoxasさんの海をテーマにした”The Birth of…“という作品はコチラ！

Mr.Doob

three.jsの作者であり、GLSL Sandboxの作者でもあるMr.Doob氏が、なんと、TDFのために来日していました！

ちゃっかり記念撮影と握手させていただきました！

私は英語が怪しいので、あまりコミュニケーション取れませんでしたが、@yomotsuさんに助けていただきました。 yomotsuさんみたいにかっこ良く英語話せるようになりたいと本気で思いました。

three.jsに今年初めにPRを送ったことを覚えてくださったようで、本当に嬉しかったです。めっちゃ優しい人でした。

そんなMr.Doobのマントルをテーマにした作品”Broken Mantra”はコチラ！

yomotsuさん

yomotsuさんも#GLSLTechで先週お会いしたばかりでしたが、TDFでもお会いすることができました。

中学生の時からyomotsuさんを知っていて、ヨモツネットには大変お世話になっていました。

こんな形で出会えるなんて思っていなかったので、世の中なにがあるのか分かりませんね。

FMS_Catくん

FMS_CATくんのWebGLによるデモも凄かったですね。Demo Compo2位作品です！

特に最後のグリッチ効果が良い！グリッチ時の映像と音楽が完全に同期とれていてナイスですね。

音楽もWebGLのシェーダで生成して、WebAudioに波形データとして渡して再生しているそうです。

映像はレイマーチングで生成して、フォント埋め埋め込むところに謎技術をつかってます。

ちなみに、FMS_CatのFMSというのは学科名で、大学を背負って活動してるそうです！

gaziyaさん

gaziyaさんもヤバかったです。

レイマーチングのテクニックについて、様々なお話を聞きました。

foldによる点対称な物体の配置、一部の物体を消すことで不規則にreperationするテクニックを教えていただきました！

gaziyaさんの”Dragon”は、GLSL Graphics Compoで見事に1位でした！

未だにこれがレイマーチングによる作品とは信じられません。

レイマーチングでは形状を数式で表現するので、この龍のような有機的な形状を表現するのは、不可能だと思っていました。

時間を見つけて、じっくりコードを研究させていただきます。

soma_arcくん

soma_arcの作品はGLSL Graphics Compoで2位でした。

少ししかお話しかできませんでしたが、レイマーチング若人が増えてきて、負けていられないなと焦りました。

notargsくん

notargsは4月からスクエニで働く優秀な学生です。スクエニ羨ましすぎる！！

彼のブラウン管風シェーダが本当にすごい。

さらに飲み会で話を聞くと、アルバイトであの1000万DLを突破したスマフォゲームのコアパートのプログラムを手がけていたそうで、格の違いを見せつけられました＞＜

nikqさん

holeさんの同僚のnikqさん。

リアルタイムなパストレーシングのデモすごかったですね。激戦区のDEMO Compoで3位とってました！

veloさん

スウェーデンの“Approximate”というデモグループの音楽担当のveloさん。

打ち上げの席で一緒になりました。

聞き間違えでなければ、全世界のデモイベントに参加していて、80回以上の参加しているとか！

「Amigaは日本で有名か？」という質問には笑ってしまいました（TDFの参加者がAmiga大好きなのは何故なんだろう…）。

また、ApproximateのグラフィックプログラマーのCrypticさんのインタビュー記事を見せてくれました。

（自分のひどい英語に根気よく付き合ってくださってありがとうございました＞＜）

0x4015 & YET11さん

“2nd stage BOSS”はDEMO Compo 1位の作品です。圧倒的なクオリティの作品です。

0x4015さんが映像、YET11さんが音楽の作者さんです。

こんな凄まじい作品が4K部門なんて信じられないですね。

残念なことに、0x4015さんもYET11さんにもお会いできませんでした。来年こそは是非お会いしたい！

2nd stage BOSSはレイマーチング作品！？

この記事を執筆している途中で知ったのですが、i_saintさんによると、レイマーチングで実装してるみたいですね。 i_saintさんが“2nd stage BOSS”をGLSL Sandboxにポートしていて、たいへん驚きました。

さらに、Shadertoyにも移植されて、音楽まで含めて完全にWebGLで再現できるようになっていました。

また、kioku_systemkさんから、4KBプロシージャルGFXのテンプレートを教えていただきました。 このようなテンプレートがあれば、4Kデモのシェーダプログラムに集中できるので、素晴らしいですね。

GLSL sandboxへのportが可能であれば、逆に4Kのexeにもport可能なはずなので、来年のTDFでは4K Compoから出してもいいかな、とちょっと考えました。 しかし、自分には音楽をプロシージャルに作る技術は無いので、冷静に考えたら無謀でしたｗ

せっかくシェーダのコードが公開されているので、研究させていただきます！

大会が終わった後でも、こんなにもワクワクさせてくれるTDFは本当に最高ですね！

いつか自分も、このくらいのデモを作れるようになりたいなぁ…（無理だなぁ）

おわりに

興味の近い人と交流するのって、最高に楽しいですね！

来年も参加するので、よろしくお願いしますm(_ _)m

event, demo, CG
comments powered by Disqus

gam0022.net's Tag Cloud

Recent Posts

最新記事

Read more

Books

ブログ執筆者の著書

Unityバイブル R5夏号
posted with ヨメレバ
kakunpc/室星 亮太/細田 翔/山本 剛史/小林 慶祐/長谷川 孝二 ボーンデジタル 2023年08月29日頃
楽天ブックスで購入
Amazonで購入
Kindleで購入
7netで購入
紀伊國屋書店で購入
図書館で探す
Unity ゲーム プログラミング・バイブル 2nd Generation
posted with ヨメレバ
森 哲哉/布留川 英一/西森 丈俊/車谷 勇人/一條 貴彰/打田 恭平 ボーンデジタル 2021年06月29日頃
楽天ブックスで購入
Amazonで購入
Kindleで購入
7netで購入
紀伊國屋書店で購入
図書館で探す