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

by hanachiru

Slide 1

Slide 1 text

始める前に・適度に質問をしていきます - ルーレット(https://shge.github.io/roulette/) ・今日使うコード一覧を先に配布します

Slide 2

Slide 2 text

扱うテーマ：コンピューターグラフィックス今日の目標は以下の作品を作ること(時間がなければ一部割愛)

Slide 3

Slide 3 text

描画とは・モニタ上の画素に点を打つこと　例) 4kディスプレイ：3840x2160 => 3,840 x 2,160 = 8,294,400個の画素引用：https://www.youtube.com/watch?v=wUx_Y9BgC7k

Slide 4

Slide 4 text

フラグメントシェーダー・入力された画素の座標に色を付けるアルゴリズム ※後で詳しく説明するので、ニュアンスが分かればOK

Slide 5

Slide 5 text

フラグメントシェーダー・入力された画素の座標に色を付けるアルゴリズム引用：https://github.com/ColinLeung-NiloCat/UnityURPToonLitShaderExample シェーダー変更シェーダーAで描画シェーダーBで描画

Slide 6

Slide 6 text

フラグメントシェーダーをブラウザ上で書く・ShaderToyというフラグメントシェーダーを書けるサイトを使う　(https://www.shadertoy.com/)

Slide 7

Slide 7 text

フラグメントシェーダーをブラウザ上で書く・右上のNewを押すと、フラグメントシェーダーが書ける画面に移動

Slide 8

Slide 8 text

ShaderToyについて・ブラウザでフラグメントシェーダーが書けるサイト・言語はGLSL - C言語をベースとしたシェーダー専用言語 - リファレンスの日本語メモ　(https://gist.github.com/gyohk/abf13dbcb5be750b3b021752b280ccd3)

Slide 9

Slide 9 text

ShaderToyの画面説明

Slide 10

Slide 10 text

1. はじめてのフラグメントシェーダー ① 配布したコード ② ShaderToy

Slide 11

Slide 11 text

1. はじめてのフラグメントシェーダー正しく動けば赤色の画面が出力されるはず

Slide 12

Slide 12 text

色の表現方法について色は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)

Slide 13

Slide 13 text

色の表現方法について(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) = (?, ?, ?, ?)

Slide 14

Slide 14 text

フラグメントシェーダー(再掲) ・入力された画素の座標に色を付けるアルゴリズム

Slide 15

Slide 15 text

1.はじめてのフラグメントシェーダー出力する色描画する画素の座標赤色を表す4次元ベクトル

Slide 16

Slide 16 text

フラグメントシェーダー(再掲) ・入力された画素の座標に色を付けるアルゴリズム

Slide 17

Slide 17 text

2.座標の正規化・入力された座標の2次元ベクトル(fragCoord)は解像度によって入力される範囲が　異なる描画範囲が512x512px 描画範囲が1024x1024px

Slide 18

Slide 18 text

2.座標の正規化・描画範囲のピクセル数の違いをなくすため　描画範囲の幅(iResolution : vec2)で割る

Slide 19

Slide 19 text

2.座標の正規化出力画像

Slide 20

Slide 20 text

2.座標の正規化出力画像 (x, y) = (1, 0) (x, y) = (1, 0) (x, y) = (0, 1) (x, y) = (1, 1)

Slide 21

Slide 21 text

2.座標の正規化出力画像 (R,G,B,A) = (1, 0, 0, 1)

Slide 22

Slide 22 text

3. 時間経過を取得する・エモい出力を得るためには、時間経過(iTime : float)が必要不可欠　iTime・・・実行されてから何秒たったか

Slide 23

Slide 23 text

3. 経過時間を取得する t B(青色の強さ)

Slide 24

Slide 24 text

4. 経過時間を使った作品の練習・以下の出力画像を得るためにはどんなコードを打てば良いか出力画像

Slide 25

Slide 25 text

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番目のコードにかなり近い

Slide 26

Slide 26 text

4. 経過時間を使った作品の練習の答え出力画像 |sin(x + t)| t R(赤色の強さ) x座標

Slide 27

Slide 27 text

5. 経過時間を使った作品の練習　その2 ・以下の出力画像を得るためにはどんなコードを打てば良いか出力画像

Slide 28

Slide 28 text

5. 経過時間を使った作品の練習　その2 ・以下の出力画像を得るためにはどんなコードを打てば良いか出力画像ヒント　・一つ前のもの練習　　「abs(sin(uv.x + iTime))」を加工　・モノクロ　　=> (R, G, B, A) = (x, x, x, 1) 　・コードの雰囲気があってれば　　波の数とか速度は気にしなくてOK

Slide 29

Slide 29 text

5. 経過時間を使った作品の練習その2　答え出力画像 |sin(40(x + t))|

Slide 30

Slide 30 text

6. step関数を使う・step関数を使うとよりクッキリと描画できる　例：step(0.3, x)

Slide 31

Slide 31 text

6. step関数を使う・以下の出力画像を得るためにはどんなコードを打てば良いか　出力画像

Slide 32

Slide 32 text

6. step関数を使う・以下の出力画像を得るためにはどんなコードを打てば良いか　出力画像ヒント　・一つ前の練習　　「abs(sin((uv.x - iTime) * 40.0))」　・

Slide 33

Slide 33 text

6. step関数を使う出力画像 col x 白黒

Slide 34

Slide 34 text

7. 距離関数を使う・距離関数(ディスタンスフィールド)とは2点間の距離を返す関数のこと　　distance(d0, d1) ・・・点d0と点d1の距離を返す

Slide 35

Slide 35 text

7. 距離関数を使う・中央からの距離をそのまま色として出力　　

Slide 36

Slide 36 text

・中央からの距離をそのまま色として出力　　 7. 距離関数を使う・外に近くにつれて白くなる・右上uv = (1, 1)の点は　(R,G,B,A)=(0.70, 0.70, 0.70, 1)

Slide 37

Slide 37 text

8. 今までの知識と距離関数のコラボ・以下の出力画像を得るためにはどんなコードを打てば良いか出力画像

Slide 38

Slide 38 text

8. 今までの知識と距離関数のコラボ・以下の出力画像を得るためにはどんなコードを打てば良いか出力画像ヒント　・距離関数 distance(d0, d1) 　・　・経過時間 iTime 　・sin関数 sin(x)

Slide 39

Slide 39 text

8. 今までの知識と距離関数のコラボ・以下の出力画像を得るためにはどんなコードを打てば良いか出力画像 sin(100d + 20t)

Slide 40

Slide 40 text

9. ボロノイ図・平面に配置された複数の点(母点)に対して、平面上の点を最も近い母点によって　グループ分けした図引用：http://alexbeutel.com/webgl/voronoi.html

Slide 41

Slide 41 text

9. ボロノイ図・平面に配置された複数の点(母点)に対して、平面上の点を最も近い母点によって　グループ分けした図一番簡単なアルゴリズムの手順　　o(mn) m:ピクセルの数，n:母点の数 1. 各母点からの距離を全て求める 2. 一番距離が近い母点を見つける 3. 色に反映

Slide 42

Slide 42 text

9. ボロノイ図・以下の出力画像を得るためにはどんなコードを打てば良いか出力画像

Slide 43

Slide 43 text

9. ボロノイ図・以下の出力画像を得るためにはどんなコードを打てば良いか一番簡単なアルゴリズムの手順　　 o(mn) m:ピクセルの数，n:母点の数 1. 各母点からの距離を全て求める 2. 一番距離が近い母点を見つける 3. 色に反映出力画像

Slide 44

Slide 44 text

9. ボロノイ図のコード出力画像

Slide 45

Slide 45 text

9. ボロノイ図のコード・今日書いたコードの回答例一覧を配布します出力画像一番簡単なアルゴリズムの手順　　 o(mn) m:ピクセルの数，n:母点の数 1. 各母点からの距離を全て求める 2. 一番距離が近い母点を見つける 3. 色に反映

Slide 46

Slide 46 text

まとめ・フラグメントシェーダーとは入力された画素の座標に色を付けるアルゴリズム・Shadertoyというサイトで手軽に書くことができる・数学の知識をフル活用しながら、エモい動画やエフェクトを作ろう