シェーダーで行うモデリング
tonoshake
自己紹介
・CGで遊び始めて一年程の初心者
・3Dモデリングとシェーダーを描くことが好き
作ったものの一部
動く花火の団扇
何にでも水晶をはやせるシェーダー
VRChat公式Publicアバター
tonosama
STYLY Avatar Diorama Awards
みんなのいいね賞 受賞
iori space
モデリングできそうなシェーダー
・ジオメトリーシェーダー
・フラグメントシェーダー
線、面、点を好きなように
作ったり移動させたりできる
画面上で出す色を好きに決められる
ジオメトリーシェーダーによるモデリング
ジオメトリーシェーダーで作られるものの例
ボクセルシェーダー
GPUパーティクル
ジオメトリーシェーダーの基本情報
3つの出力方法をもつ
TriangleStream
LineStream
PointStream
面
線
点
ジオメトリーシェーダーでモデリング
入力 P(0,0,0)
Y
Z
X
C
B
A
O
Y
Z
X
O
P
A = P + (1, 1, 0)
B = P + (1,-1, 0)
C = P + (-1,1, 0)
出力
ジオメトリーシェーダーでモデリング
頂点A = P + (1, 1, 0)
頂点B = P + (1,-1, 0)
頂点C = P + (-1,1, 0)
頂点P(x,y,z)
ジオメトリーシェーダーでモデリング
入力 P(0,0,0)
Y
Z
X
B
A
O
Y
Z
X
O
P
A = ( 1, 1, 1)
B = ( 1, -1, 1)
C = (-1, 1, 1)
D = (-1, -1, 1)
E = ( 1, 1, -1)
F = ( 1, -1, -1)
G = (-1, 1, -1)
H = (-1, -1, -1)
C
D
E
F
G
G
ジオメトリーシェーダーでモデリング
入力 P(x,y,z)
A = P + ( 1, 1, 1)
B = P + ( 1, -1, 1)
C = P + (-1, 1, 1)
D = P + (-1, -1, 1)
E = P + ( 1, 1, 1)
F = P + ( 1, -1, 1)
G = P + (-1, 1, 1)
H = P + (-1, -1, 1)
ジオメトリーシェーダーでモデリング 〆
Quadから生やした水晶
GPUチャーハン by アワビP
フラグメントシェーダーによるモデリング
フラグメントシェーダーの簡単な紹介
(R,G,B) = (X,Y,0)
O
X
Y
O
X
Y
(R,G,B) = Oからの距離
フラグメントシェーダーで描かれた画
Inigo Qilez 「Happy Jumping」
Big WIngs「Kelp Forest」
レイマーチング の紹介
5ピクセル
カメラ
緑
青
黄
レイマーチング の紹介
5ピクセル
カメラ
緑
青
黄
レイマーチング の紹介
6x6ピクセル
カメラ
緑
青
黄
スフィアトレーシング の紹介
5ピクセル
カメラ
緑
青
黄
スフィアトレーシング の紹介
5ピクセル
カメラ
緑
青
黄
レイマーチング 球の作り方
カメラ
Z
Y
O
( 0, 0, -10)
( 0, 0 ,0)
球の表面までの距離
(球の中心⇔光の先端 間の距離) - 球の半径
光の先端
( 0, 0, -5)
r = 1
距離関数
レイマーチング 距離関数の紹介
箱の距離関数
float sdBox( vec3 p, vec3 b )
{
vec3 q = abs(p) - b;
return length(max(q,0.0))+min(max(q.x,max(q.y,q.z)),0.0);
}
シリンダーの距離関数
float sdCylinder( vec3 p, vec3 c )
{
return length(p.xz-c.xy)-c.z;
}
レイマーチング 物体の移動
Z
Y
O
光の先端
( 0, 0, -5)
Z
Y
O
光の先端
( 0, -5, -5)
Z
Y
O
光の先端
( 0, +5, -5)
(0,+5,0)
(0,-5,0)
先端 - (0,-5,0)
先端 - (0,+5,0)
光の先端座標から移動させたい値を引けば良い！
レイマーチング 形状の変化
Y
Z
X
光の先端 rp
mat2 rot(float a)
{
float s = sin(a),c = cos(a);
return mat2(c,s,-s,c);
}
rp.xz *= rot(rp.y);
box = sdBox(p,vec3(.9));
レイマーチング 形状の変化
Y
Z
X
光の先端 rp
rp.y += sin(rp.x * 2.);
box = sdBox(p,vec3(3.,1.,3.)) ;
レイマーチング 形状の変化
Y
Z
X
光の先端 rp
rp.x = -abs(rp.x);
rp.xz *= rot(rp.y);
box = sdBox(p,vec3(.9));
レイマーチングのモデリングまとめ
距離関数を作る(先人の知恵を借りる)
光の先端の調整
回転したり移動させたり...
距離関数に突っ込む
レイマーチングでモデリングした雪だるま
レイマーチングが行える場所
GLSL Sandbox http://glslsandbox.com/
・アクセスするだけで書き始められる
GLSL fan https://glslfan.com/
・ツイッターでログイン可能
Shadertoy https://www.shadertoy.com/
・シェーダーの神がたくさん住んでいるところ
・ すごい作品がいっぱい
NEORT https://neort.io/
・作品を登録して売買できる
手軽
(Unityのfragment shaderでもできます)
まとめ
まとめ
・ジオメトリーシェーダーは入力頂点の座標を加工して増やして形を作る
・レイマーチングは光の先端の座標を加工して形を作る
・シェーダーは楽しい
先人達による凄い資料
e.blog ジオメトリーシェーダー入門
http://edom18.hateblo.jp/entry/2018/07/11/140455
iq DistanceFunctions
https://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm
さやちゃんぐbotブログ 【LIVE Shader Deconstruction :: happy jumping】iq神のライティングを読み解く
http://sayachang-bot.hateblo.jp/entry/2019/08/16/215059
@kaneta1992 魔法使いになりたい人のためのシェーダーライブコーディング入門
https://qiita.com/kaneta1992/items/21149c78159bd27e0860
The Art of Code Shader Coding: Ray Marching Tips & Tricks
おまけ
ボクセルシェーダー https://github.com/rekahsnnig/shader/boxel.shader
ジオメトリーシェーダーテンプレート https://github.com/rekahsnnig/shader/template_geometry.shader
Unityシェーダー向け レイマーチング雪だるま https://github.com/rekahsnnig/shaderyukidaruma.shader
glslsandboxで使えるレイマーチング のテンプレート http://glslsandbox.com/e#59558.0
以降没スライド
ジオメトリーシェーダーでモデリング おまけ
レイマーチング の紹介
O
X
Y
シェーダー
Tree house in the Shade
by 1001
Club Transcendia
by The Architect
ShaderFes2019
by momoma
レイマーチング
カメラ
光: 物体 -> カメラ
見える画
カメラ
光: 物体 <- カメラ
見える画
レイマーチングじゃない
レイマーチング
ジオメトリーシェーダーでモデリング
頂点A = P + (1, 1, 0)
頂点B = P + (1,-1, 0)
頂点C = P + (-1,1, 0)
頂点P(x,y,z)
ジオメトリーシェーダーでモデリング
頂点A = P + (1, 1, 0)
頂点B = P + (1,-1, 0)
頂点C = P + (-1,1, 0)
頂点P(x,y,z)