Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
1時間でフラグメントシェーダー入門からボロノイ図まで
hanachiru
November 30, 2020
Programming
0
670
1時間でフラグメントシェーダー入門からボロノイ図まで
学校のとあるイベントで用いた資料です。
演習メインで進めていく形式ですが、知識ゼロからでも進められるように作成してみたつもりです。
せっかく作ったので公開。
hanachiru
November 30, 2020
Tweet
Share
More Decks by hanachiru
See All by hanachiru
Algorithms for Gerrymandering over Graphs
hanachiru
0
71
Other Decks in Programming
See All in Programming
Node.js 最新動向 TFCon 2022
yosuke_furukawa
PRO
6
3k
質とスピード(2022春版、質疑応答用資料付き) / Quality and Speed 2022 Spring Edition
twada
PRO
30
19k
byte列のbit表現を得るencodingライブラリ作った
convto
1
210
よりUXに近いSLI・SLOの運用による可用性の再設計
kazumanagano
3
1k
Introducing Kotlin Multiplatform in an existing project | Kotlin Dev Day Amsterdam
prof18
0
310
Jetpack Compose 頑張らないPreviewParameterProvider
horie23
0
110
デュアルトラックアジャイル× Agile Testingから 見えてきたQAのミライ
atamaplus
0
490
Licences open source : entre guerre de clochers et radicalité
pylapp
2
380
LOWYAの信頼性向上とNew Relic
kazumax55
4
370
Viteはいいぞ/Vite is Good
dojineko
1
110
Explore Java 17 and beyond
josepaumard
3
670
Reactでアプリケーションを構築する多様化
sakito
4
3.5k
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.1k
Why Our Code Smells
bkeepers
PRO
324
54k
Bootstrapping a Software Product
garrettdimon
296
110k
Robots, Beer and Maslow
schacon
152
7.1k
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
21
15k
A Tale of Four Properties
chriscoyier
149
20k
What's in a price? How to price your products and services
michaelherold
229
9.3k
Done Done
chrislema
174
14k
Faster Mobile Websites
deanohume
294
28k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
4
450
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
3
640
Transcript
始める前に ・適度に質問をしていきます - ルーレット(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というサイトで手軽に書くことができる ・数学の知識をフル活用しながら、エモい動画やエフェクトを作ろう