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.6k
1時間でフラグメントシェーダー入門からボロノイ図まで
学校のとあるイベントで用いた資料です。
演習メインで進めていく形式ですが、知識ゼロからでも進められるように作成してみたつもりです。
せっかく作ったので公開。
hanachiru
November 30, 2020
Tweet
Share
More Decks by hanachiru
See All by hanachiru
Algorithms for Gerrymandering over Graphs
hanachiru
0
180
Other Decks in Programming
See All in Programming
Software Architecture
hschwentner
6
2.1k
ゼロからの、レトロゲームエンジンの作り方
tokujiros
3
1.2k
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.3k
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4k
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
110
ecspresso, ecschedule, lambroll を PipeCDプラグインとして動かしてみた (プロトタイプ) / Running ecspresso, ecschedule, and lambroll as PipeCD Plugins (prototype)
tkikuc
2
3.7k
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
動作確認やテストで漏れがちな観点3選
starfish719
6
990
Writing documentation can be fun with plugin system
okuramasafumi
0
110
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
190
Honoのおもしろいミドルウェアをみてみよう
yusukebe
0
140
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
4.2k
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
250
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Why Our Code Smells
bkeepers
PRO
335
57k
Faster Mobile Websites
deanohume
306
31k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
230
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
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というサイトで手軽に書くことができる ・数学の知識をフル活用しながら、エモい動画やエフェクトを作ろう