1時間でフラグメントシェーダー入門からボロノイ図まで

学校のとあるイベントで用いた資料です。
演習メインで進めていく形式ですが、知識ゼロからでも進められるように作成してみたつもりです。
せっかく作ったので公開。

Transcript

1. 始める前に ・適度に質問をしていきます - ルーレット(https://shge.github.io/roulette/) ・今日使うコード一覧を先に配布します
2. 扱うテーマ：コンピューターグラフィックス 今日の目標は以下の作品を作ること(時間がなければ一部割愛)
3. 描画とは ・モニタ上の画素に点を打つこと 　例) 4kディスプレイ：3840x2160 => 3,840 x 2,160 = 8,294,400個の画素 引用：https://www.youtube.com/watch?v=wUx_Y9BgC7k
4. フラグメントシェーダー ・入力された画素の座標に色を付けるアルゴリズム ※後で詳しく説明するので、ニュアンスが分かればOK
5. フラグメントシェーダー ・入力された画素の座標に色を付けるアルゴリズム 引用：https://github.com/ColinLeung-NiloCat/UnityURPToonLitShaderExample シェーダー 変更 シェーダーAで描画 シェーダーBで描画
6. フラグメントシェーダーをブラウザ上で書く ・ShaderToyというフラグメントシェーダーを書けるサイトを使う 　(https://www.shadertoy.com/)
7. フラグメントシェーダーをブラウザ上で書く ・右上のNewを押すと、フラグメントシェーダーが書ける画面に移動
8. ShaderToyについて ・ブラウザでフラグメントシェーダーが書けるサイト ・言語はGLSL - C言語をベースとしたシェーダー専用言語 - リファレンスの日本語メモ 　(https://gist.github.com/gyohk/abf13dbcb5be750b3b021752b280ccd3)
9. ShaderToyの画面説明
10. 1. はじめてのフラグメントシェーダー ① 配布したコード ② ShaderToy
11. 1. はじめてのフラグメントシェーダー 正しく動けば赤色の画面が出力されるはず
12. 色の表現方法について 色はRGB(赤・緑・青)によって表現できる ・それぞれの値が0 ~ 255の値をとるのが一般的 例. ・黒: (R, G, B) = (0, 0, 0) ・白: (R, G, B) = (255, 255, 255) ・赤: (R, G, B) = (255, 0, 0) ・黄: (R, G, B) = (255, 255, 0)
13. 色の表現方法について(GLSLでの) 全ての色はRGBA(赤・緑・青・透明度)によって表現できる ・GLSLという言語ではそれぞれ0 ~ 1の値を持つ4次元ベクトルとして表現 例. ・黒: (R, G, B, A) = (0, 0, 0, 1) ・白: (R, G, B, A) = (?, ?, ?, ?) ・赤: (R, G, B, A) = (?, ?, ?, ?) ・黄: (R, G, B, A) = (?, ?, ?, ?)
14. フラグメントシェーダー(再掲) ・入力された画素の座標に色を付けるアルゴリズム
15. 1.はじめてのフラグメントシェーダー 出力する色 描画する画素の座標 赤色を表す4次元ベクトル
16. フラグメントシェーダー(再掲) ・入力された画素の座標に色を付けるアルゴリズム
17. 2.座標の正規化 ・入力された座標の2次元ベクトル(fragCoord)は解像度によって入力される範囲が　異 なる 描画範囲が512x512px 描画範囲が1024x1024px
18. 2.座標の正規化 ・描画範囲のピクセル数の違いをなくすため 　描 画範囲の幅(iResolution : vec2)で割る
19. 2.座標の正規化 出力画像
20. 2.座標の正規化 出力画像 (x, y) = (1, 0) (x, y) = (1, 0) (x, y) = (0, 1) (x, y) = (1, 1)
21. 2.座標の正規化 出力画像 (R,G,B,A) = (1, 0, 0, 1)
22. 3. 時間経過を取得する ・エモい出力を得るためには、時間経過(iTime : float)が必要不可欠 　iTime・・・実行されてから何秒たったか
23. 3. 経過時間を取得する t B(青色の強さ)
24. 4. 経過時間を使った作品の練習 ・以下の出力画像を得るためにはどんなコードを打てば良いか 出力画像
25. 4. 経過時間を使った作品の練習 ・以下の出力画像を得るためにはどんなコードを打てば良いか 出力画像 ヒント 　・経過時間は iTime 　・右下の点uv = (1, 0)に注目 　　- (R,G,B,A) = (0, 0, 0, 1) 黒 　　- (R,G,B,A) = (1, 0, 0, 1) 赤 　・左下の点uv = (0, 0) 　　- (R,G,B,A) = (0, 0, 0, 1) 黒 　　- (R,G,B,A) = (1, 0, 0, 1) 赤 　・3番目のコードにかなり近い
26. 4. 経過時間を使った作品の練習の答え 出力画像 |sin(x + t)| t R(赤色の強さ) x座標
27. 5. 経過時間を使った作品の練習　その2 ・以下の出力画像を得るためにはどんなコードを打てば良いか 出力画像
28. 5. 経過時間を使った作品の練習　その2 ・以下の出力画像を得るためにはどんなコードを打てば良いか 出力画像 ヒント 　・一つ前のもの練習 　　「abs(sin(uv.x + iTime))」を加工 　・モノクロ 　　=> (R, G, B, A) = (x, x, x, 1) 　・コードの雰囲気があってれば 　　波の数とか速度は気にしなくてOK
29. 5. 経過時間を使った作品の練習その2　答え 出力画像 |sin(40(x + t))|
30. 6. step関数を使う ・step関数を使うとよりクッキリと描画できる 　 例：step(0.3, x)
31. 6. step関数を使う ・以下の出力画像を得るためにはどんなコードを打てば良いか 　 出力画像
32. 6. step関数を使う ・以下の出力画像を得るためにはどんなコードを打てば良いか 　 出力画像 ヒント 　・一つ前の練習 　　「abs(sin((uv.x - iTime) * 40.0))」 　・
33. 6. step関数を使う 出力画像 col x 白 黒
34. 7. 距離関数を使う ・距離関数(ディスタンスフィールド)とは2点間の距離を返す関数のこと　 　distance(d0, d1) ・・・点d0と点d1の距離を返す
35. 7. 距離関数を使う ・中央からの距離をそのまま色として出力　 　
36. ・中央からの距離をそのまま色として出力　 　 7. 距離関数を使う ・外に近くにつれて白くなる ・右上uv = (1, 1)の点は 　(R,G,B,A)=(0.70, 0.70, 0.70, 1)
37. 8. 今までの知識と距離関数のコラボ ・以下の出力画像を得るためにはどんなコードを打てば良いか 出力画像
38. 8. 今までの知識と距離関数のコラボ ・以下の出力画像を得るためにはどんなコードを打てば良いか 出力画像 ヒント 　・距離関数 distance(d0, d1) 　・ 　・経過時間 iTime 　・sin関数 sin(x)
39. 8. 今までの知識と距離関数のコラボ ・以下の出力画像を得るためにはどんなコードを打てば良いか 出力画像 sin(100d + 20t)
40. 9. ボロノイ図 ・平面に配置された複数の点(母点)に対して、平面上の点を最も近い母点によって　グ ループ分けした図 引用：http://alexbeutel.com/webgl/voronoi.html
41. 9. ボロノイ図 ・平面に配置された複数の点(母点)に対して、平面上の点を最も近い母点によって　グ ループ分けした図 一番簡単なアルゴリズムの手順　　o(mn) m:ピクセルの数，n:母点の数 1. 各母点からの距離を全て求める 2. 一番距離が近い母点を見つける 3. 色に反映
42. 9. ボロノイ図 ・以下の出力画像を得るためにはどんなコードを打てば良いか 出力画像
43. 9. ボロノイ図 ・以下の出力画像を得るためにはどんなコードを打てば良いか 一番簡単なアルゴリズムの手順　　 o(mn) m:ピクセルの数，n:母点の数 1. 各母点からの距離を全て求める 2. 一番距離が近い母点を見つける 3. 色に反映 出力画像
44. 9. ボロノイ図のコード 出力画像
45. 9. ボロノイ図のコード ・今日書いたコードの回答例一覧を配布します 出力画像 一番簡単なアルゴリズムの手順　　 o(mn) m:ピクセルの数，n:母点の数 1. 各母点からの距離を全て求める 2. 一番距離が近い母点を見つける 3. 色に反映
46. まとめ ・フラグメントシェーダーとは入力された画素の座標に色を付けるアルゴリズム ・Shadertoyというサイトで手軽に書くことができる ・数学の知識をフル活用しながら、エモい動画やエフェクトを作ろう