Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
1時間でフラグメントシェーダー入門からボロノイ図まで
Search
hanachiru
November 30, 2020
Programming
0
1.5k
1時間でフラグメントシェーダー入門からボロノイ図まで
学校のとあるイベントで用いた資料です。
演習メインで進めていく形式ですが、知識ゼロからでも進められるように作成してみたつもりです。
せっかく作ったので公開。
hanachiru
November 30, 2020
Tweet
Share
More Decks by hanachiru
See All by hanachiru
Algorithms for Gerrymandering over Graphs
hanachiru
0
140
Other Decks in Programming
See All in Programming
AWS初心者ってどうやってAWSを学ぶ?〜アプリエンジニアがやってよかったアーキテクチャ学習方法〜
yamanashi_ren01
0
190
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Berlin
prof18
0
110
実用的かつリーズナブルな 「Azure × Gemini × LINE」~キャラクターBot 実装ライブデモ~
tomodo_ysys
1
170
Temporalを取り巻く仕様を整理する
sajikix
0
120
Rust.Nagoya #1
codemountains
0
170
【Go言語】golangci-lintの使い方
tomo1227
0
280
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
CSC307 Lecture 14
javiergs
PRO
0
220
How to use Macrobenchmark
veronikapj
0
160
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
219
8.8k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Optimizing for Happiness
mojombo
373
69k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Building Adaptive Systems
keathley
34
2k
Thoughts on Productivity
jonyablonski
64
4.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
YesSQL, Process and Tooling at Scale
rocio
166
14k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
A designer walks into a library…
pauljervisheath
201
24k
4 Signs Your Business is Dying
shpigford
178
21k
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というサイトで手軽に書くことができる ・数学の知識をフル活用しながら、エモい動画やエフェクトを作ろう