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

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

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

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

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

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

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

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

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

ShaderToyの画面説明

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

More Decks by hanachiru

Other Decks in Programming

Featured

Transcript