この記事は、KLab Engineer Advent Calendar 2018 10日目の記事です。
はじめに
今月頭の12/1から12/2にかけて、日本で唯一のデモパーティであるTokyo Demo Fest 2018が開催されました。
デモパーティをご存じではない方のために、公式サイトから引用します。
デモパーティは、コンピュータを用いたプログラミングとアートに 興味のある人々が日本中、世界中から一堂に会し、 デモ作品のコンペティション(コンポ)やセミナーなどを行います。 また、イベント開催中は集まった様々な人たちとの交流が深められます。
またデモについて詳しく知りたい方はこちらをご覧ください。
今回私は、このパーティのGLSL Graphics CompoというGLSLコードのみで映像を作って競うコンポにTraveler 2という作品を応募して1位に選んで頂きました！
#TokyoDemoFest 2018 GLSL Compo 1位の作品をShadertoyに投稿しました！
— かねた (@kanetaaaaa) 2018年12月2日
本日はありがとうございました！！https://t.co/5SFfmtkw86 pic.twitter.com/Xu8QZk0Rpw
実際にブラウザ上で動作するデモや動画はこちらからご覧ください
この記事では、2018年6月から12月までの6か月間、GLSLのみでグラフィックを描画するテクニックを学びながらTraveler 2を完成させるまでに参考にさせて頂いた資料や作品を、出来る限り私が読み進めた順番にご紹介します！
対象の読者層は、一言で表現すると6ヶ月前の自分です。
- 3Dグラフィックスの知識が多少ある。
- シェーダーを書いたことはあるが、レイマーチングなどの所謂シェーダー芸は書いたことがない。
- ShadertoyやGLSLSandboxの作品はよく見ているけど、謎技術すぎて理解できないし、自分では一生かけても作れないと思っている。
上記のいずれかに当てはまり、デモシーンやGLSL作品に興味がある方は（当てはまらない方も..！）、偉大な先人達が残してくれた作品や資料達を熟読してGLSL作品を一緒に作りましょう！
そもそも、GLSLってシェーダーってなんぞや！という方は、こちらから読むとよいかと思います。
GLSL で暖を取るための準備をしよう！ GLSL お役立ちマニュアル
さらに踏み込んだ内容が知りたい！という方は、こちらでテクニックの解説をしているのでご覧ください！
Tokyo Demo Fest 2018 GLSL Graphics Compoで優勝した！作品の解説等
偉大な先人達の記事や資料（見た順）
※見出しをリンクにしています
The Art of Code
BigWIngs先生のyoutubeチャンネルです。
レイマーチングを学習して3Dを描画する前に2Dから学ぼうと考えて、Shadertoy Tutorialsの動画をいくつかやりました。
特に、ShaderToy LiveCoding - The Drive Homeがオススメです。
シェーダだけで世界を創る！three.jsによるレイマーチング
gam0022先生のすごくわかりやすいレイマーチングの資料です。
この資料でレイマーチングの仕組みを完全に理解しました。
wgld.orgのGLSLコンテンツ
wgld.orgはdoxas先生のWebGLのあらゆるテクニックについて書かれたサイトです。
gam0022先生の資料でレイマーチングの仕組みを把握して、wgld.orgのレイマーチングチュートリアルで実践的な知識を学びました。
3Dの知識を既に持っていて、レイマーチングについて学びたい場合は、シェーダ内でレイを定義するから読み進めると良いと思います。（私もそうしました）
GLSLについてのメモ
edo_m18先生がGLSLのよく使われるビルトイン関数について、1ページでまとめているQiita記事です。
GLSLを書いた経験があまり無かったので、しょっちゅう参照していました。
特にstep関数の引数の順番をよく忘れてしまうので、その度に見ていました。
Distance Functions
iq先生によるプリミティブな距離関数や、テクニックの一覧です。
GLSLデモを作ってる人でも、距離関数についてはこのページに依存している人が多いのではないでしょうか？
今回作ったTraveler 2もボックス、球、トーラスの距離関数とsmoothminと呼ばれるテクニックをこのページからお借りしました。
距離関数のfold（折りたたみ）による形状設計
gam0022先生の折り畳みによる形状設計について書かれた記事です。
日本語でここまで丁寧に折り畳みについて解説してくれている記事はあまりないのではないでしょうか？
Traveler 2では後半のシーンの背景に、この記事に登場する回転foldというテクニックを使用しています。
Distance Estimated 3D Fractals (III): Folding Space
gam0022先生に教えてもらった全5パートある記事のうち、3つ目の記事です。
**KIFS(Kaleidoscopic Iterated Function System)**と呼ばれる、ループ内で折り畳みを繰り返すことにより、複雑なフラクタル形状を高速に描画する手法について書かれています。
一つ上で紹介した、距離関数のfold（折りたたみ）による形状設計と同時に読み進めました。
正規化Lambert
学生時代からサイトにお世話になっているPocol先生の正規化Lambertについて書かれた記事です。
Traveler 2はイカした感じのリアルな質感にしたかったので正規化された実装をお借りしました。
Blinn-Phong スペキュラの正規化について
hanecci先生の正規化Blinn-Phongについて書かれた記事です。
Lambertと同じく、リアルな質感にしたかったので正規化された実装をお借りしました。
楽しい！Unityシェーダー お絵描き入門！
3Dの記事が続きましたが、こちらの資料ではsetchi先生の2Dテクニックが沢山解説されています。
特にグリッド毎に動きを変えるテクニックは目から鱗でした。
Traveler 2では画面を覆うダートマスクと疑似パーティクルで、そのテクニックを使用しています。
2Dの小技 動くお絵かき
gaziya先生の2Dテクニックについて書かれたQiita記事です。
2D描画の際にsmoothstepを使用することでアンチエイリアスな形状を描画する手法や、clampとmixによるシーケンス制御を参考にしました。
条件分岐のためにstep関数を使う時の考え方をまとめてみた
Yuichiroh Arai先生のifをstepに置き換えるテクニックについて書かれたQiita記事です。
Traveler 2はシェーダーが巨大になりすぎて、制作の後半ではコンパイル時間が原因でChromeがクラッシュするということが多発していました...
そこでこちらの記事のテクニックを使ってifを使わないようにするとコンパイル時間を稼ぐことができました。
その時のPRです。これを適用すると、コンパイル時間が20秒から12秒になりました!
https://github.com/kaneta1992/traveler/pull/15
レイマーチングで半歩差のつく小技集
今年の9月にGLSL Tech Night 2018という勉強会でkeim先生が登壇されたときの資料です。
Traveler 2では疑似パーティクル等のグロー表現にこちらの資料のテクニックをアイデアを頂きました。
また、資料にあるコード・リーディングはとても参考にさせて頂きました。必見です。
Perlin Noise (fBm) を使ったカメラ揺れエフェクト
Keijiro Takahashi先生のfbmをカメラの揺れに使用するテクニックについて書かれた資料です。
Traveler 2ではこのテクニックを参考に、fbmでカメラの手ブレ再現をしています。
手ブレを付けることで、無機質な映像が一気にリアルな映像になって感動したので、かなりおススメです。
偉大な先人達の作品（見た順）
※見出しをリンクにしています
The Drive Home
偉大な先人達の記事や資料の一番最初にも紹介した、The Art of Codeの中の人BigWIngs先生の作品です。
youtubeチャンネルにはこの作品をライブコーディングするチュートリアルもあるのでおススメです。
Traveler 2では、画面を覆うダートマスクの埃をこちらの作品を参考に作りました。
Monster
iq先生の作品です。
偉大な先人達の記事や資料でも紹介した、Distance Estimated 3D Fractals (III): Folding Spaceで登場するKIFSというテクニックを使って蠢く3Dオブジェクトを描画しています。
資料を見ながらこの作品を弄ったりして、KIFSがどういったものか理解することができました。
KIFS Menger
dom767先生のKIFSでメンガーのスポンジを描画する作品です。
Traveler 2ではこちらで登場する距離関数を改造して、背景に使用しています。
2nd stage BOSS by 0x4015
よっしん先生がTokyo Demo Fest 2016に4k intro作品として1位を獲得した作品です。
凄すぎる映像と音楽を見た後、改めてコード量を見ると、この中に本当にあの映像が収まっているのかと驚愕します...
Traveler 2では2DのIFSで模様を描くテクニックと、ピクセル毎に時間をオフセットしてモーションブラーを実現するテクニックを参考にしました。
[Type]
FMS-Cat先生がTokyo Demo Fest 2016にWebGL作品として2位を獲得した作品です。
エッジ検出や、文字列をレイマーチングするテクニックを参考にするためにコードを読みました。（コンパイル時間の問題で実装はできなかった...）
Traveler 2では、後半のかっこよすぎるグリッチをYoutube動画でコマ送りして参考にさせて頂きました。
RaymarchingOnUnity5
i-saint先生のUnityでレイマーチする作品です。
こちらの記事で紹介されていた、gif画像で模様が画面奥に伝っていくのがかっこよかったので参考にさせて頂きました。
Raymarching - Primitives
こちらもiq先生の作品です。
3Dの様々なオブジェクトがレイマーチで描画されています。
マテリアルの扱いについて右往左往していたのですが、こちらに登場する、距離関数の戻り値でマテリアルIDをやり取りして、最後にID毎のシェーディングをするという形に落ち着きました。
Optical Stream
私がTraveler 2をエントリーしたTokyo Demo Fest 2018のトップページにも採用されている、notargs先生の作品です。
噂によるとこれをライブコーディングで作ったというので驚きです...
Traveler 2では疑似パーティクル、マーチングループを複数に分ける、HSVを使うと3つのテクニック参考にしました。
Glitch transform
tdhooper先生のグリッチしながらオブジェクトを変形させている作品です。
これがかっこよすぎたのでアイデアを参考にさせて頂きました。
挙動を確認できるイージング関数一覧 - GLSLSandbox
GLSLSandboxなので作者が不明なのですが、イージング関数が沢山あります。
挙動もすぐに確認できるので、カメラワークに使用する好みのイージングをこちらからお借りしました。
さいごに
これからシェーダーで遊ぶ人に向けて、6ヵ月でシェーダー一般人がシェーダー芸人なった足跡を記事として残してみました。
シェーダー芸はとても楽しいので、この記事を紹介して友人にも布教していきたいと思っています！
この記事を最後まで見てくださって方々も、是非シェーダー芸でGLSL作品を作りましょう！そしてTokyo Demo Festに作品を持ち込みましょう！！