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.7k
1時間でフラグメントシェーダー入門からボロノイ図まで
学校のとあるイベントで用いた資料です。
演習メインで進めていく形式ですが、知識ゼロからでも進められるように作成してみたつもりです。
せっかく作ったので公開。
hanachiru
November 30, 2020
Tweet
Share
More Decks by hanachiru
See All by hanachiru
Algorithms for Gerrymandering over Graphs
hanachiru
0
200
Other Decks in Programming
See All in Programming
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.1k
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
110
NPOでのDevinの活用
codeforeveryone
0
420
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
390
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
460
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
430
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
860
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
450
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
GraphQLとの向き合い方2022年版
quramy
48
14k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Rails Girls Zürich Keynote
gr2m
94
14k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
4 Signs Your Business is Dying
shpigford
184
22k
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というサイトで手軽に書くことができる ・数学の知識をフル活用しながら、エモい動画やエフェクトを作ろう