---
title: プログラマのためのシェーダー入門
tags:  #godot #shader  
author: [Mitsuhiro Koga](https://convert.docswell.com/user/4783183)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/GEWPDL93J2.jpg?width=480
description: Godot Meetup Tokyo Vol.2
published: November 28, 24
canonical: https://convert.docswell.com/s/4783183/KG1Q8L-2024-11-28-190000
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/GEWPDL93J2.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/47ZKGM9G73.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/YJ6QYNKQJV.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/GJ5RG5P274.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/LE3PRN31J5.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/8EDLYW4KJG.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/V7P269M378.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/2JVD3M9NJQ.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/5EGY3GZ5EL.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/4JQM5XLL7P.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/K74V96D5J1.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/LJ13KVZ27G.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/GJWPDL9272.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/4EZKGM94E3.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/Y76QYNKG7V.jpg)



# Page. 16

![Page Image](https://bcdn.docswell.com/page/G75RG5PXE4.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/9J2DYN6QJR.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/DEY2GP9YEM.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/VJN8G5LR78.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/YE9KWY4ZE3.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/GE8RN6VYJD.jpg)



# Page. 22

![Page Image](https://bcdn.docswell.com/page/LELKP959JR.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/4JM24Z3VJW.jpg)



# Page. 24

![Page Image](https://bcdn.docswell.com/page/PJRMW6QWE9.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/PEXVPM5V7X.jpg)

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


