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.4k
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
雑に思考を整理する技術と効能
konifar
55
25k
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
100
puregoの活用例
aethiopicuschan
0
220
Git Lint
bkuhlmann
4
740
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
3.6k
プールにゆこう
irof
2
120
Code Reviews
bkuhlmann
4
880
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
22
15k
HUIT新歓2024「競技プログラミング、やってみませんか?」
slephy2784
1
250
1인 개발자로 행복하게 살기 - GDG 송도 헬로월드 2024
benjaminkim
1
5.6k
Java 22 Overview
kishida
1
170
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
310
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
331
56k
Visualization
eitanlees
135
14k
Building Flexible Design Systems
yeseniaperezcruz
318
37k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
Web Components: a chance to create the future
zenorocha
305
41k
Code Review Best Practice
trishagee
54
15k
KATA
mclloyd
14
12k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Unsuck your backbone
ammeep
662
57k
How to train your dragon (web standard)
notwaldorf
72
5.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.4k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
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というサイトで手軽に書くことができる ・数学の知識をフル活用しながら、エモい動画やエフェクトを作ろう