シャドーマッピング法を実装したWebGLデモを作成します。光源視点からの深度情報を使って影を生成し、マウスでカメラを制御できるようにします。シャドーマッピング法を実装したWebGLデモを作成しました。主な特徴： **実装内容：** - **2パスレンダリング**: 光源視点からの深度バッファ生成 → メイン描画 - **シャドウマップ**: 1024×1024の深度テクスチャに光源からの距離情報を保存 - **影の生成**: 各ピクセルで光源からの距離を比較して影を判定 - **マウス制御**: ドラッグでカメラ回転、ホイールでズーム **技術的なポイント：** - **深度比較**: シャドウマップの深度値と現在のフラグメントの深度を比較 - **バイアス**: シャドウアクネ（影のちらつき）を防ぐためのオフセット - **光源の動き**: アニメーション時に光源が円運動して影の変化を確認可能 - **複数オブジェクト**: 2つのキューブと平面で影の投影・受影を表現 **操作方法：** - マウスドラッグ: カメラ視点回転 - マウスホイール: ズームイン/アウト - アニメーションボタン: 光源の動きON/OFF - リセットボタン: カメラ位置初期化 シャドウマッピングの基本原理である「光源から見えない部分は影になる」という考え方を、深度バッファを使って効率

以下の機能を追加・変更しました： **変更点：** 1. **画面サイズ**: 800x600 → 600x450に変更 2. **シャドウマップ可視化機能**: 新しいボタンで切り替え可能 **新機能の詳細：** **シャドウマップ表示機能：** - 「シャドウマップ表示 ON/OFF」ボタンでモード切り替え - シャドウマップモードでは、光源視点からの深度バッファの内容をグレースケールで表示 - 白い部分：光源に近い（深度値が小さい） - 黒い部分：光源から遠い（深度値が大きい） **技術的な実装：** - 専用のシェーダー（shadowMapVertexShader、shadowMapFragmentShader）を追加 - フルスクリーンクアッド用のバッファを作成 - シャドウマップテクスチャをそのまま画面に描画 **シャドウマップで確認できること：** - 光源から見えるオブジェクトの形状 - 深度の分布（距離に応じたグラデーション） - 影が生成される仕組みの視覚的理解 この可視化により、シャドーマッピングアルゴリズムがどのように動作しているかを直感的に理解できます。

シャドウマップ用のシェーダーソースの定義位置を適切な場所に移動します。エラーを修正しました。問題は、シャドウマップ用のシェーダーソースが、それを使用するプログラム作成部分よりも後に定義されていたことでした。 **修正内容：** - `shadowMapVertexShaderSource` と `shadowMapFragmentShaderSource` の定義を、メインのフラグメントシェーダーソースの直後に移動 - これにより、シェーダープログラム作成時に適切に参照できるようになりました これでエラーが解決され、シャドウマップの可視化機能が正常に動作するはずです。「シャドウマップ表示 ON/OFF」ボタンを押すと、光源視点からの深度バッファの内容をグレースケールで確認できます。