プログラマのためのシェーダー入門

プログラマのためのシェー ダー入門 Godot Meetup Tokyo Vol.3 @shiena 2024-11-28

自己紹介 • KOGA Mitsuhiro a.k.a @shiena • Vol.2で「Godotで始めるApple Vision Proアプリ開発手法」 を発表 X • 得意: Unity(XR系) @shiena

発表の流れ • 扇形シェーダーの作り方 • 旗シェーダーの作り方 • 学習リソース

扇形シェーダーの作り 方 1. 原点をずらす 2. 円を塗る 3. 中心角で開いた領域を塗る 4. 2と3の積を取る 5. PlaneMeshに割り当てる

半径radius -> 0.4 扇形シェーダーの作り 方 1. 原点をずらす 2. 円を塗る 3. 中心角で開いた領域を塗る 4. 2と3の積を取る • length(vec2)はベクトル長を返す • radius以下の領域が円になる 5. PlaneMeshに割り当てる

directionの方向 -> 45° 上を0°として右回り 扇形シェーダーの作り 方 1. 原点をずらす 2. 円を塗る 3. 中心角で開いた領域を塗る 4. 2と3の積を取る 5. PlaneMeshに割り当てる 中心角angle -> 60°

扇形シェーダーの作り 方 1. 原点をずらす 2. 円を塗る 3. 中心角で開いた領域を塗る https://xn--w6q13e505b.jp/de ne/arctan.html • -π <= θ <= π • 座標系は右上が(1, 1) 5. PlaneMeshに割り当てる • 角度は左回り fi • atan(y, x) = θ (ラジアン) 4. 2と3の積を取る

• https://xn--w6q13e505b.jp/define/arctan.html

扇形シェーダーの作り 方 1. 原点をずらす 2. 円を塗る 3. 中心角で開いた領域を塗る 4. 2と3の積を取る UVの座標系は右下が(1, 1) 5. PlaneMeshに割り当てる

directionの方向 -> 45° 上を0°として右回り 扇形シェーダーの作り 方 1. 原点をずらす 2. 円を塗る 3. 中心角で開いた領域を塗る 4. 2と3の積を取る 5. PlaneMeshに割り当てる 中心角angle -> 60°

directionの方向 -> 45° 上を0°として右回り 扇形シェーダーの作り 方 1. 原点をずらす 2. 円を塗る 上を0°、右回りとなる座標軸に調整 3. 中心角で開いた領域を塗る 4. 2と3の積を取る 5. PlaneMeshに割り当てる 中心角angle -> 60°

directionの方向 -> 45° 上を0°として右回り 扇形シェーダーの作り 方 1. 原点をずらす 2. 円を塗る 角度が大きい方の辺の角度を算出 3. 中心角で開いた領域を塗る 4. 2と3の積を取る 5. PlaneMeshに割り当てる 中心角angle -> 60°

directionの方向 -> 45° 上を0°として右回り 扇形シェーダーの作り 方 1. 原点をずらす 2. 円を塗る 角度を正数に調整 3. 中心角で開いた領域を塗る 4. 2と3の積を取る 5. PlaneMeshに割り当てる 中心角angle -> 60°

directionの方向 -> 45° 上を0°として右回り 扇形シェーダーの作り 方 1. 原点をずらす 2. 円を塗る 中心角で開いた領域を1、それ以外を0 3. 中心角で開いた領域を塗る 4. 2と3の積を取る 5. PlaneMeshに割り当てる 中心角angle -> 60°

扇形シェーダーの作り 方 1. 原点をずらす 2. 円を塗る 3. 中心角で開いた領域を塗る 4. 2と3の積を取る 5. PlaneMeshに割り当てる

扇形シェーダーの作り 方 1. 原点をずらす 2. 円を塗る 3. 中心角で開いた領域を塗る 4. 2と3の積を取る 5. PlaneMeshに割り当てる

旗シェーダーの作り方 1. 頂点シェーダーに切り替える 2. 頂点のy座標をx軸方向にずらす 3. Vertexに出力する 4. PlaneMeshに割り当てる

旗シェーダーの作り方 1. 頂点シェーダーに切り替える 2. 頂点のy座標をx軸方向にずらす 3. Vertexに出力する 4. PlaneMeshに割り当てる

旗シェーダーの作り方 1. 頂点シェーダーに切り替える 2. 頂点のy座標をx軸方向にずらす 3. Vertexに出力する 4. PlaneMeshに割り当てる • vertexは頂点座標(x, y, z) • TIMEはゲームを起動した時間(秒)

旗シェーダーの作り方 1. 頂点シェーダーに切り替える 2. 頂点のy座標をx軸方向にずらす 3. Vertexに出力する 4. PlaneMeshに割り当てる

旗シェーダーの作り方 1. 頂点シェーダーに切り替える 2. 頂点のy座標をx軸方向にずらす 3. Vertexに出力する 4. PlaneMeshに割り当てる

学習リソース Godot Shaders Bible Godot Shaders Shadertoy https://www.jettelly.com/store/books/ the-godot-shaders-bible/ https://godotshaders.com/ https://www.shadertoy.com/

• https://www.jettelly.com/store/books/the-godot-shaders-bible/
• https://godotshaders.com/
• https://www.shadertoy.com/

学習リソース スライドのプロジェクト https://github.com/shiena/ godot_meetup_vol3

• https://github.com/shiena/godot_meetup_vol3