シェーダー芸人になりたかった6か月前の自分に教えてあげたいリンク集

この記事は、[KLab Engineer Advent Calendar 2018](https://qiita.com/advent-calendar/2018/klab) 10日目の記事です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/136662/67caa136-6aa6-15b1-4704-e7e68e3d9c02.png)
# はじめに
今月頭の12/1から12/2にかけて、**日本で唯一のデモパーティ**である[Tokyo Demo Fest 2018](http://tokyodemofest.jp/2018/)が開催されました。

デモパーティをご存じではない方のために、公式サイトから引用します。

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

またデモについて詳しく知りたい方は[こちら](http://tokyodemofest.jp/2016/#aboutdemo)をご覧ください。

今回私は、このパーティの**GLSL Graphics Compo**という**GLSLコードのみで映像を作って競うコンポ**に**Traveler 2**という作品を応募して**1位**に選んで頂きました！
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/TokyoDemoFest?src=hash&amp;ref_src=twsrc%5Etfw">#TokyoDemoFest</a> 2018 GLSL Compo 1位の作品をShadertoyに投稿しました！<br>本日はありがとうございました！！<a href="https://t.co/5SFfmtkw86">https://t.co/5SFfmtkw86</a> <a href="https://t.co/Xu8QZk0Rpw">pic.twitter.com/Xu8QZk0Rpw</a></p>&mdash; かねた (@kanetaaaaa) <a href="https://twitter.com/kanetaaaaa/status/1069206867887321094?ref_src=twsrc%5Etfw">2018年12月2日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

実際にブラウザ上で動作するデモや動画はこちらからご覧ください

- [GitHub](https://github.com/kaneta1992/traveler)
- [オンラインデモ](https://www.shadertoy.com/view/4tGBDG)
- [動画](https://www.youtube.com/watch?v=gTTQDZkQi-w)

この記事では、2018年6月から12月までの6か月間、GLSLのみでグラフィックを描画するテクニックを学びながら**Traveler 2**を完成させるまでに参考にさせて頂いた資料や作品を、出来る限り私が読み進めた順番にご紹介します！

対象の読者層は、一言で表現すると**6ヶ月前の自分**です。

- 3Dグラフィックスの知識が多少ある。
- シェーダーを書いたことはあるが、レイマーチングなどの所謂シェーダー芸は書いたことがない。
- ShadertoyやGLSLSandboxの作品はよく見ているけど、謎技術すぎて理解できないし、自分では一生かけても作れないと思っている。

上記のいずれかに当てはまり、デモシーンやGLSL作品に興味がある方は（当てはまらない方も..！）、偉大な先人達が残してくれた作品や資料達を熟読して**GLSL作品を一緒に作りましょう！**

そもそも、GLSLってシェーダーってなんぞや！という方は、こちらから読むとよいかと思います。
[GLSL で暖を取るための準備をしよう！ GLSL お役立ちマニュアル](https://qiita.com/doxas/items/5a7b6dedff4bc2ce1586)

さらに踏み込んだ内容が知りたい！という方は、こちらでテクニックの解説をしているのでご覧ください！
[Tokyo Demo Fest 2018 GLSL Graphics Compoで優勝した！作品の解説等](http://nanka.hateblo.jp/entry/2018/12/13/080322)

# 偉大な先人達の記事や資料（見た順）
※見出しをリンクにしています
## [The Art of Code](https://www.youtube.com/channel/UCcAlTqd9zID6aNX3TzwxJXg)
[BigWIngs](https://www.shadertoy.com/user/BigWIngs)先生のyoutubeチャンネルです。

レイマーチングを学習して3Dを描画する前に2Dから学ぼうと考えて、Shadertoy Tutorialsの動画をいくつかやりました。

特に、**ShaderToy LiveCoding - The Drive Home**がオススメです。

## [シェーダだけで世界を創る！three.jsによるレイマーチング](https://www.slideshare.net/shohosoda9/threejs-58238484)
[gam0022](https://twitter.com/gam0022)先生のすごくわかりやすいレイマーチングの資料です。

この資料でレイマーチングの仕組みを完全に理解しました。

## [wgld.orgのGLSLコンテンツ](https://wgld.org/d/glsl/)
[wgld.org](https://wgld.org/)は[doxas](https://twitter.com/h_doxas)先生のWebGLのあらゆるテクニックについて書かれたサイトです。

[gam0022](https://twitter.com/gam0022)先生の資料でレイマーチングの仕組みを把握して、[wgld.org](https://wgld.org/)のレイマーチングチュートリアルで実践的な知識を学びました。

3Dの知識を既に持っていて、レイマーチングについて学びたい場合は、[シェーダ内でレイを定義する](https://wgld.org/d/glsl/g008.html)から読み進めると良いと思います。（私もそうしました）

## [GLSLについてのメモ](https://qiita.com/edo_m18/items/71f6064f3355be7e4f45)
[edo_m18](https://twitter.com/edo_m18)先生がGLSLのよく使われるビルトイン関数について、1ページでまとめているQiita記事です。

GLSLを書いた経験があまり無かったので、しょっちゅう参照していました。

特に**step関数の引数の順番をよく忘れてしまう**ので、その度に見ていました。

## [Distance Functions](http://iquilezles.org/www/articles/distfunctions/distfunctions.htm)
[iq](https://twitter.com/iquilezles)先生によるプリミティブな距離関数や、テクニックの一覧です。

GLSLデモを作ってる人でも、距離関数についてはこのページに依存している人が多いのではないでしょうか？

今回作った**Traveler 2**も**ボックス、球、トーラスの距離関数とsmoothminと呼ばれるテクニック**をこのページからお借りしました。

## [距離関数のfold（折りたたみ）による形状設計](https://gam0022.net/blog/2017/03/02/raymarching-fold/)
[gam0022](https://twitter.com/gam0022)先生の折り畳みによる形状設計について書かれた記事です。

日本語でここまで丁寧に折り畳みについて解説してくれている記事はあまりないのではないでしょうか？

**Traveler 2**では後半のシーンの背景に、この記事に登場する**回転foldというテクニック**を使用しています。

## [Distance Estimated 3D Fractals (III): Folding Space](http://blog.hvidtfeldts.net/index.php/2011/08/distance-estimated-3d-fractals-iii-folding-space/)
[gam0022](https://twitter.com/gam0022)先生に教えてもらった全5パートある記事のうち、3つ目の記事です。

**KIFS(Kaleidoscopic Iterated Function System)**と呼ばれる、ループ内で折り畳みを繰り返すことにより、複雑なフラクタル形状を高速に描画する手法について書かれています。

一つ上で紹介した、[距離関数のfold（折りたたみ）による形状設計](https://gam0022.net/blog/2017/03/02/raymarching-fold/)と同時に読み進めました。

## [正規化Lambert](http://www.project-asura.com/program/d3d11/d3d11_004.html)
学生時代からサイトにお世話になっている[Pocol](https://qiita.com/ProjectAsura)先生の正規化Lambertについて書かれた記事です。

**Traveler 2**はイカした感じのリアルな質感にしたかったので正規化された実装をお借りしました。

## [Blinn-Phong スペキュラの正規化について](http://d.hatena.ne.jp/hanecci/20130505/p2)
[hanecci](https://twitter.com/hanecci)先生の正規化Blinn-Phongについて書かれた記事です。

Lambertと同じく、リアルな質感にしたかったので正規化された実装をお借りしました。

## [楽しい！Unityシェーダー お絵描き入門！](https://docs.google.com/presentation/d/1NMhx4HWuNZsjNRRlaFOu2ysjo04NgcpFlEhzodE8Rlg/edit#slide=id.g423da70889_217_0)
3Dの記事が続きましたが、こちらの資料では[setchi](https://twitter.com/setchi)先生の2Dテクニックが沢山解説されています。

特に**グリッド毎に動きを変えるテクニック**は目から鱗でした。

**Traveler 2**では**画面を覆うダートマスクと疑似パーティクル**で、そのテクニックを使用しています。

## [2Dの小技　動くお絵かき](https://qiita.com/gaziya5/items/29a51b066cb7d24983d6)
[gaziya](https://twitter.com/gaziya5)先生の2Dテクニックについて書かれたQiita記事です。

2D描画の際に**smoothstepを使用することでアンチエイリアスな形状を描画する手法や、clampとmixによるシーケンス制御**を参考にしました。

## [条件分岐のためにstep関数を使う時の考え方をまとめてみた](https://qiita.com/yuichiroharai/items/6e378cd128279ac9a2f0)
[Yuichiroh Arai](https://twitter.com/yuichiroharaiJP)先生のifをstepに置き換えるテクニックについて書かれたQiita記事です。

**Traveler 2**はシェーダーが巨大になりすぎて、制作の後半では**コンパイル時間が原因でChromeがクラッシュする**ということが多発していました...

そこでこちらの記事のテクニックを使って**ifを使わないようにするとコンパイル時間を稼ぐことができました**。

その時のPRです。これを適用すると、コンパイル時間が20秒から12秒になりました!
https://github.com/kaneta1992/traveler/pull/15

## [レイマーチングで半歩差のつく小技集](https://www.slideshare.net/keimesuda/glsltech2018)
今年の9月に[GLSL Tech Night 2018](https://connpass.com/event/97565/)という勉強会で[keim](https://twitter.com/mike_at_cg)先生が登壇されたときの資料です。

**Traveler 2**では**疑似パーティクル等のグロー表現**にこちらの資料のテクニックをアイデアを頂きました。

また、資料にある**コード・リーディング**はとても参考にさせて頂きました。必見です。

## [Perlin Noise (fBm) を使ったカメラ揺れエフェクト](https://gist.github.com/keijiro/3731297)
[Keijiro Takahashi](https://twitter.com/_kzr)先生のfbmをカメラの揺れに使用するテクニックについて書かれた資料です。

**Traveler 2**ではこのテクニックを参考に、**fbmでカメラの手ブレ再現**をしています。

手ブレを付けることで、**無機質な映像が一気にリアルな映像になって感動した**ので、かなりおススメです。

# 偉大な先人達の作品（見た順）
※見出しをリンクにしています
## [The Drive Home](https://www.shadertoy.com/view/MdfBRX)
[偉大な先人達の記事や資料](https://qiita.com/kaneta1992/private/ce6305e1882fd49d363a#%E5%81%89%E5%A4%A7%E3%81%AA%E5%85%88%E4%BA%BA%E9%81%94%E3%81%AE%E8%A8%98%E4%BA%8B%E3%82%84%E8%B3%87%E6%96%99%E8%A6%8B%E3%81%9F%E9%A0%86)の一番最初にも紹介した、[The Art of Code](https://www.youtube.com/channel/UCcAlTqd9zID6aNX3TzwxJXg)の中の人[BigWIngs](https://www.shadertoy.com/user/BigWIngs)先生の作品です。

youtubeチャンネルにはこの作品をライブコーディングするチュートリアルもあるのでおススメです。

**Traveler 2**では、**画面を覆うダートマスクの埃**をこちらの作品を参考に作りました。

## [Monster](https://www.shadertoy.com/view/4sX3R2)
[iq](https://twitter.com/iquilezles)先生の作品です。

[偉大な先人達の記事や資料](https://qiita.com/kaneta1992/private/ce6305e1882fd49d363a#%E5%81%89%E5%A4%A7%E3%81%AA%E5%85%88%E4%BA%BA%E9%81%94%E3%81%AE%E8%A8%98%E4%BA%8B%E3%82%84%E8%B3%87%E6%96%99%E8%A6%8B%E3%81%9F%E9%A0%86)でも紹介した、[Distance Estimated 3D Fractals (III): Folding Space](http://blog.hvidtfeldts.net/index.php/2011/08/distance-estimated-3d-fractals-iii-folding-space/)で登場する**KIFS**というテクニックを使って蠢く3Dオブジェクトを描画しています。

資料を見ながらこの作品を弄ったりして、KIFSがどういったものか理解することができました。

## [KIFS Menger](https://www.shadertoy.com/view/ltS3W3)
[dom767](https://www.shadertoy.com/user/dom767)先生のKIFSでメンガーのスポンジを描画する作品です。

**Traveler 2**ではこちらで登場する距離関数を改造して、背景に使用しています。

## [2nd stage BOSS by 0x4015](https://www.shadertoy.com/view/MsGGDK)
[よっしん](https://twitter.com/yosshin4004)先生が[Tokyo Demo Fest 2016](http://tokyodemofest.jp/2016/)に4k intro作品として1位を獲得した作品です。

凄すぎる映像と音楽を見た後、改めてコード量を見ると、**この中に本当にあの映像が収まっているのかと驚愕します**...

**Traveler 2**では**2DのIFSで模様を描くテクニックと、ピクセル毎に時間をオフセットしてモーションブラーを実現するテクニック**を参考にしました。

## [[Type]](https://github.com/FMS-Cat/type)
[FMS-Cat](https://twitter.com/FMS_Cat)先生が[Tokyo Demo Fest 2016](http://tokyodemofest.jp/2016/)にWebGL作品として2位を獲得した作品です。

**エッジ検出や、文字列をレイマーチングするテクニック**を参考にするためにコードを読みました。（コンパイル時間の問題で実装はできなかった...）

**Traveler 2**では、**後半のかっこよすぎるグリッチをYoutube動画でコマ送りして参考**にさせて頂きました。

## [RaymarchingOnUnity5](https://github.com/i-saint/RaymarchingOnUnity5)
[i-saint](https://twitter.com/i_saint)先生のUnityでレイマーチする作品です。

こちらの記事で紹介されていた、gif画像で模様が画面奥に伝っていくのがかっこよかったので参考にさせて頂きました。

http://i-saint.hatenablog.com/entry/2015/06/30/233000

## [Raymarching - Primitives](https://www.shadertoy.com/view/Xds3zN)
こちらも[iq](https://twitter.com/iquilezles)先生の作品です。

3Dの様々なオブジェクトがレイマーチで描画されています。

マテリアルの扱いについて右往左往していたのですが、こちらに登場する、**距離関数の戻り値でマテリアルIDをやり取りして、最後にID毎のシェーディングをする**という形に落ち着きました。

## [Optical Stream](https://www.shadertoy.com/view/4lGcz1)
私が**Traveler 2**をエントリーした[Tokyo Demo Fest 2018](http://tokyodemofest.jp/2018/)のトップページにも採用されている、[notargs](https://twitter.com/notargs)先生の作品です。

噂によるとこれを**ライブコーディングで作ったというので驚きです**...

**Traveler 2**では**疑似パーティクル、マーチングループを複数に分ける、HSVを使う**と3つのテクニック参考にしました。

## [Glitch transform](https://www.shadertoy.com/view/XtyXzW)
[tdhooper](https://twitter.com/tdhooper)先生のグリッチしながらオブジェクトを変形させている作品です。

これがかっこよすぎたのでアイデアを参考にさせて頂きました。

## [挙動を確認できるイージング関数一覧 - GLSLSandbox](http://glslsandbox.com/e#44668.1)
GLSLSandboxなので作者が不明なのですが、イージング関数が沢山あります。

挙動もすぐに確認できるので、カメラワークに使用する好みのイージングをこちらからお借りしました。

# さいごに
これからシェーダーで遊ぶ人に向けて、**6ヵ月でシェーダー一般人がシェーダー芸人なった足跡**を記事として残してみました。

シェーダー芸はとても楽しいので、この記事を紹介して友人にも布教していきたいと思っています！

この記事を最後まで見てくださって方々も、是非**シェーダー芸でGLSL作品を作りましょう！そしてTokyo Demo Festに作品を持ち込みましょう！！**