インタラクティブに学ぶ

シェーダーの世界を
ゼロからマスターしよう

WebGLシェーダーをリアルタイムプレビュー付きのエディタで体験しながら、 段階的に学べるインタラクティブな学習プラットフォームです。

学習をはじめる

カリキュラム

10章・40レッスンで基礎から発展まで

1

シェーダーの世界へようこそ

GPUの仕組みとシェーダープログラミングの基礎を学びます。最初のシェーダーを書き、座標系やUniform変数の使い方を理解しましょう。

4 レッスン
2

色の世界

デジタルカラーの基礎を学びます。RGB色空間、色の補間方法、HSBカラーモデルを使った表現力豊かな色彩制御を習得します。

3 レッスン
3

シェーピング関数

数学関数を使って値を自在に変形する方法を学びます。step、smoothstep、fract など、シェーダーの基礎となる関数群を習得します。

4 レッスン
4

図形を描く

符号付き距離関数(SDF)を使ってシェーダーで図形を描く方法を学びます。円、矩形、線など基本図形からブーリアン演算まで習得します。

5 レッスン
5

変換とパターン

座標変換を使ったパターン生成の技術を学びます。回転、スケール、タイリングなどの変換を組み合わせて美しいパターンを作ります。

4 レッスン
6

アニメーション

時間とユーザー入力を使ったアニメーションの技術を学びます。イージング関数やマウスインタラクションで動的なビジュアルを作ります。

3 レッスン
7

ランダムとノイズ

プロシージャルな自然表現の核となるノイズ関数を学びます。疑似乱数からパーリンノイズ、fBmまで段階的に習得します。

4 レッスン
8

テクスチャとイメージ処理

テクスチャの読み込みと画像処理の基礎を学びます。フィルタ、畳み込み、ディストーションなどのエフェクトを実装します。

4 レッスン
9

発展テクニック

レイマーチングやライティングなど、より高度なシェーダーテクニックを学びます。3D表現への入り口を探ります。

4 レッスン
10

Three.jsとの統合

Three.jsやReact Three Fiberと組み合わせてシェーダーを活用する方法を学びます。実践的なWebGL開発の総仕上げです。

5 レッスン