Prompt : 金属のCG画像を得る方法にCookTranceの反射モデルの3次元BRDFを可視化するコードをhtmlとJavaScriptで書け。入射角などはスライダーで指定し、見る方向はマウスドラッグで制御
可視化モード 半球表示: BRDF値を3D半球上の点として表示し、各方向の反射強度を視覚化 サーフェス表示: 平面上でのBRDF分布をヒートマップとして表示 インタラクティブ操作 マウスドラッグ: 3D視点の回転制御 マウスホイール: ズームイン/アウト リアルタイム更新: パラメータ変更時の即座な反映 調整可能なパラメータ 入射角 (θᵢ): 光の入射角度 (0-89°) 方位角 (φᵢ): 光の方位角 (0-360°) 粗さ (Roughness): 表面の微細構造 (0.01-1.0) 金属度 (Metallic): 金属的特性 (0-1.0) 屈折率 (IOR): 材質の光学特性 (1.0-3.0) ベースカラー: 材質の基本色 強度スケール: 表示の明るさ調整 Cook-Torrance BRDFモデル このモデルは以下の3つの要素から構成されています： フレネル項 (F): 入射角に依存する反射率 分布項 (D): マイクロファセットの法線分布（GGX/Trowbridge-Reitz） 遮蔽項 (G): マイクロファセット間の相互遮蔽（Smith G） 数式: BRDF = DFG / (4 * NdotL * NdotV) このツールを使って、異なる材質パラメータが金属表面の反射特性にどのような影響を与えるかを直感的に理解できます。特に、粗さが反射の鋭さに、金属度がフレネル反射の色に与える影響を確認できます。
Cook-Torrance BRDF可視化ツールが完成しました！今度は正常に動作します。 主な機能とアップデート 表示モード 半球曲面: BRDF値を3D半球曲面として滑らかに表示 平面曲面: 平面上の3D曲面としてBRDF分布を表示 パラメータ制御（全てスライダー対応） 入射角 (θᵢ): 光の入射角度 (0-89°) 方位角 (φᵢ): 光の方位角 (0-360°) 粗さ (Roughness): 表面の微細構造 (0.01-1.0) 金属度 (Metallic): 金属的特性 (0-1.0) 屈折率 (IOR): 材質の光学特性 (1.0-3.0) ベースカラー: カラーピッカーで色選択 強度スケール: 表示の明るさ調整 (0.1-10.0) 曲面解像度: メッシュの細かさ (12-48) 表示オプション ワイヤーフレーム表示: メッシュの構造を表示 光源ベクトル表示: 黄色い矢印で光の方向を表示 操作方法 マウスドラッグ: 3D視点の回転 マウスホイール: ズームイン/アウト リアルタイム更新: 全パラメータの即座反映 技術的改善 曲面は三角形メッシュで構成され、滑らかに描画 深度ソート（Painter's Algorithm）による正確な奥行き表現 Cook-Torrance BRDFの物理的に正確な実装 ガンマ補正とカラー処理の最適化 これで金属材質の反射特性を直感的に理解し、各パラメータがどのように反射の形状や強度に影響するかを視覚的に学習できます。
アップデート内容 画面サイズ調整 キャンバスサイズを800x600から600x450に変更 分解能の向上 デフォルト解像度を24から48に向上 最大解像度を48から80に拡張 より滑らかで自然な曲面表現が可能 スライダーの視認性改善 スライダーの高さとサムネイルサイズを増加 グラデーション背景を追加してトラックを明確化 境界線とシャドウを追加してより立体的に BRDF曲面の品質向上 対数スケーリングを導入して極端な値を抑制 カラーマッピングの改善でより自然な色表現 頂点とフェースの生成ロジックを最適化 より滑らかな色の遷移 視覚的改善 ベースサイズの調整で適切なスケール感 高解像度でのパフォーマンス最適化 ワイヤーフレーム表示の透明度調整 これで曲面がより自然に表示され、スライダーも明確に見えるようになりました。高い分解能での滑らかなBRDF可視化をお楽しみください！