title: "最終プロジェクト" description: "これまで学んだすべてのテクニックを活かして、オリジナルのシェーダー作品を制作します。" chapter: "10-threejs" order: 5 challenge: description: "学んだ技術を自由に組み合わせてオリジナル作品を作りましょう！ノイズで変形する球体、レイマーチングの抽象3Dシーン、パーティクル風アニメーションなど自由に作ってみてください。Playgroundも活用しましょう。" hints:

"まずはシンプルな形から始めて、エフェクトを重ねていくとよいでしょう。"
"これまでのレッスンのコードを参考にしてパーツを組み合わせてみましょう。"
"u_time、u_mouse、ノイズ、SDF など複数のテクニックを組み合わせると表現力が増します。"

最終プロジェクト

おめでとうございます！

全9章のシェーダーレッスンを完了し、Three.jsとの統合も学びました。ここまでで習得したテクニックを振り返りましょう。

学んだテクニック一覧

| 章 | テクニック | |----|----------| | 1. 入門 | GLSL基礎、uniform、座標系 | | 2. 色 | RGB、色の補間、HSB | | 3. シェーピング | step、smoothstep、fract、関数合成 | | 4. 図形 | SDF、円、矩形、線、ブーリアン演算 | | 5. 変換 | 回転、スケール、タイリング | | 6. アニメーション | 時間、イージング、マウスインタラクション | | 7. ノイズ | 疑似乱数、バリューノイズ、パーリンノイズ、fBm | | 8. テクスチャ | sampler2D、画像エフェクト、畳み込み、ディストーション | | 9. 発展 | ポストプロセス、レイマーチング、ライティング、3Dシーン | | 10. Three.js | ShaderMaterial、頂点シェーダー、R3F、カスタムエフェクト |

作品アイデア

1. 生命体シミュレーション

fBmノイズで有機的に変形する球体を作り、ライティングを適用。頂点シェーダーで表面をうねらせ、フラグメントシェーダーで温度マップのような色を付けます。

2. インタラクティブポータル

マウス位置にレイマーチングで描いた異世界のポータルを開きます。SDFの組み合わせとノイズで不思議な空間を表現。

3. ジェネラティブアート

タイリング、ノイズ、SDF、時間アニメーションを組み合わせた抽象的パターン。セルごとにランダムな回転やサイズの図形を配置し、有機的なパターンを生成します。

制作のヒント

小さく始める -- まず1つのエフェクトから始めて、動作を確認してから次を追加
既存コードを組み合わせる -- レッスンのコードをコピーして改造するのが効率的
Playgroundを活用 -- 自由に実験できるPlaygroundで試行錯誤しましょう
パラメータで遊ぶ -- 数値を変えるだけで全く違う表現になることがあります
保存機能を使う -- 良い結果が出たらPlaygroundの保存機能で記録しましょう

次のステップ

シェーダーの学習はここで終わりではありません。さらに深く学ぶためのリソース：

Shadertoy (shadertoy.com) -- 世界中のシェーダー作品を閲覧・共有
The Book of Shaders (thebookofshaders.com) -- シェーダーの理論をさらに深く
Inigo Quilez の記事 (iquilezles.org) -- SDF やレイマーチングの高度なテクニック
Three.js Journey (threejs-journey.com) -- Three.js のより発展的な使い方

シェーダーの世界を楽しんでください！