シェーダライブコーディングのすすめ
UnityエンジニアによるShader勉強会！- KLab TECH Meetup #4
自己紹介
↓ aが5個
自己紹介
一か月前からライブコーディングにハマっています
この発表を届けたい人
発表の流れ
発表の流れ
発表の流れ
シェーダーライブコーディングって何？
シェーダーライブコーディングって何？
競技？
国内外のデモパーティで大会が行われている
Tokyo Demo Fest 2018
Revision 2019
競技？
シェーダー芸？
シェーダー芸？
フラグメントシェーダーのみで映像を作る！
板ポリ
シェーダーライブコーディング４つの面白ポイント
面白ポイント①
シェーダーだけで完結する！
面白ポイント➁
まるで魔法に見える！
面白ポイント➂
隙間時間に遊べる！
面白ポイント④
宴会芸に使えるかも！？
入門レイマーチング
シェーダー芸？
フラグメントシェーダーのみで映像を作る！
板ポリ
フラグメントシェーダーのみで映像？
板ポリにフラグメントシェーダーというと
ポストエフェクト
ポストエフェクト
シェーダー芸
全ピクセルにシェーダーを実行する
描画結果をサンプルして加工する
ピクセル色を決定する
全ピクセルにシェーダーを実行する
形状を定義する
形状をトレースして情報を集める
ピクセル色を決定する
形状をトレースする
スフィアトレーシング
スフィアトレーシング
vec2 p = gl_FragCoord.xy / resolution.xy;
0.0
1.0
gl_FragCoord = 現在のピクセル座標
resolution = 画面解像度
スフィアトレーシング
vec2 p = ( gl_FragCoord.xy * 2. - resolution.xy ) /
min(resolution.x, resolution.y);
0.0
-1.0
1.0
スフィアトレーシング
vec2 p = ( gl_FragCoord.xy * 2. - resolution.xy ) /
min(resolution.x, resolution.y);
vec3 ro = vec3(0., 0., -5.);
vec3 rd = normalize(vec3(p, screenZ));
ro
rd
スフィアトレーシング
vec2 p = ( gl_FragCoord.xy * 2. - resolution.xy ) /
min(resolution.x, resolution.y);
vec3 ro = vec3(0., 0., -5.);
float screenZ = 2.5;
vec3 rd = normalize(vec3(p, screenZ));
screenZ = 0.5
screenZ = 5.0
screenZ = 2.5
スフィアトレーシング
・・・
float t = 0.0;
for (int i = 0; i < 99; i++) {
vec3 pos = ro + rd * t;
float d = distanceFunction(pos);
t += d;
}
スフィアトレーシング
・・・
float t = 0.0;
vec3 col = vec3(0.);
for (int i = 0; i < 99; i++) {
vec3 pos = ro + rd * t;
float d = distanceFunction(pos);
if (d < 0.0001) {
col = 色を決定！;
break;
}
t += d;
}
スフィアトレーシング
スフィアトレーシング
形状を定義する
Distance Function(距離関数)
float distanceFunction(vec3 p) {
float d = 最短距離を計算;
return d;
}
簡単な距離関数を紹介
球
r
p
d
原点
平面
p
d
箱の距離関数を作ってみよう
Distance Estimator
Distance Estimator(距離推定器)
必ずしも最短距離である必要はない
平面の距離関数をアレンジすれば箱を作れる！
Distance Function(距離関数)
箱の距離関数
-1.0, 1.0
-1.0, -1.0
1.0, -1.0
1.0, 1.0
0.0, 0.0
箱の距離関数
float sdBox(vec3 p, float s) {
return p.y;
}
-1.0, 1.0
-1.0, -1.0
1.0, -1.0
1.0, 1.0
0.0, 0.0
箱の距離関数
float sdBox(vec3 p, float s) {
return p.x;
}
-1.0, 1.0
-1.0, -1.0
1.0, -1.0
1.0, 1.0
0.0, 0.0
箱の距離関数
float sdBox(vec3 p, float s) {
return max(max(p.x, p.y), p.z);
}
-1.0, 1.0
-1.0, -1.0
1.0, -1.0
1.0, 1.0
0.0, 0.0
箱の距離関数
float sdBox(vec3 p, float s) {
return max(max(p.x, p.y), p.z);
}
-1.0, 1.0
-1.0, -1.0
1.0, -1.0
1.0, 1.0
0.0, 0.0
箱の距離関数
float sdBox(vec3 p, float s) {
p = p - s;
return max(max(p.x, p.y), p.z);
}
-1.0, 1.0
-1.0, -1.0
1.0, -1.0
1.0, 1.0
0.0, 0.0
s, s
箱の距離関数
?
-1.0, 1.0
-1.0, -1.0
1.0, -1.0
1.0, 1.0
0.0, 0.0
s, s
Fold（折り畳み）
Fold（折り畳み）
0.0
-1.0
1.0
-0.2
-0.4
-0.9
0.2
0.4
0.9
Fold（折り畳み）
0.0
1.0
1.0
0.2
0.4
0.9
0.2
0.4
0.9
箱の距離関数
float sdBox(vec3 p, float s) {
p = p - s;
return max(max(p.x, p.y), p.z);
}
-1.0, 1.0
-1.0, -1.0
1.0, -1.0
1.0, 1.0
0.0, 0.0
s, s
-s, -s
s, -s
-s, s
箱の距離関数
float sdBox(vec3 p, float s) {
p = abs(p) - s;
return max(max(p.x, p.y), p.z);
}
1.0, 1.0
1.0, 1.0
1.0, 1.0
1.0, 1.0
0.0, 0.0
s, s
s, s
s, s
s, s
箱の距離関数
今回作ったもの
正確な箱の距離関数
箱の距離関数
今回作ったもの
正確な箱の距離関数
正確でなくても単純な形の組み合わせで距離関数を構築できる！
やったぜ！
次は？
今日から使える平面の小技
小技
ダイヤモンドの距離関数が欲しいよ～
小技
平面の距離関数を拡張すれば
任意の法線を持つ平面の距離関数を定義できる
p
d
原点
h
n
小技
Gem clock by keim
小技
Polar Modという極座標でオブジェクトを複製するテクニック
平面の距離関数
ベースとなる円柱の距離関数
円柱を平面で削り取る(積集合)
小技
Polar Modという極座標でオブジェクトを複製するテクニック
平面の距離関数
ベースとなる円柱の距離関数
円柱を平面で削り取る(積集合)
小技
Polar Modという極座標でオブジェクトを複製するテクニック
平面の距離関数
ベースとなる円柱の距離関数
円柱を平面で削り取る(積集合)
小技
Polar Modという極座標でオブジェクトを複製するテクニック
平面の距離関数
ベースとなる円柱の距離関数
円柱を平面で削り取る(積集合)
小技
平面の距離関数だけで任意の凸体を定義できる！
距離関数のライブ感を出すのに便利！
まとめ
まとめ
みんなもやろう！
たのしいよ～
yourname@mail.com
http://www.example.com/
こっから没スライド
競技？
国内外のデモパーティで大会が行われている
Tokyo Demo Fest 2018
Revision 2019
Slide title here
CASE１：団子の距離関数が欲しいよ～
Slide title here
Slide title here
Slide title here
裏技
Fold
0.0
-1.0
1.0
-0.2
-0.4
-0.9
Fold
0.0
1.0
1.0
0.2
0.4
0.9
0.2
0.4
0.9
Fold（折り畳み）
Fold（折り畳み）
Slide title here
ITER = 0
ITER = 1
ITER = 4