UVマッピング 3Dデモ

UVマッピングは、3Dモデルの表面に2Dテクスチャを貼り付けるための座標システムです。 3Dオブジェクトの表面上の各頂点に、2D平面上の座標（U、V座標）を割り当てることで、テクスチャ画像のどの部分をモデルのどの部分に対応させるかを定義します。UとVは2D座標軸を表し、通常0.0から1.0の範囲で表現されます。 例えば、球体を地球儀として考えると、地球の表面を平面の世界地図に展開するのと同じような作業です。3Dの球面を2Dの長方形に「展開」し、テクスチャ画像の各ピクセルが3Dモデルのどの部分に対応するかを決めます。 UVマッピングの主な工程は以下の通りです： **UVアンラップ**：3Dモデルを2D平面に展開する作業。複雑な形状の場合、継ぎ目（シーム）を設定して切り開く必要があります。 **座標の調整**：展開されたUV座標を整理し、テクスチャ空間を効率的に使用するように配置します。 **テクスチャの適用**：2Dテクスチャ画像をUV座標に基づいて3Dモデルに貼り付けます。 BlenderやMaya、3ds Maxなどの3DCGソフトウェアでは、自動UVアンラップ機能や手動での調整ツールが提供されており、モデルの形状に応じて最適なUVマップを作成できます。適切なUVマッピングにより、テクスチャの歪みを最小限に抑え、リアルな質感を3Dモデルに与えることができます。

3DモデルのUVマッピングを表示するインタラクティブなデモを作成します。立方体にテクスチャを適用し、マウスで回転させることができます。UVマッピングの3Dデモを作成しました。このデモでは以下の機能が実装されています： **主な機能：** - **マウス操作**：ドラッグで立方体を回転、ホイールでズーム - **UVマッピングの視覚化**：各面にグリッド付きテクスチャを適用 - **リアルタイム3D描画**：WebGLを使用した滑らかな描画 **技術的なポイント：** - **頂点データ**：各頂点に3D座標（x,y,z）とUV座標（u,v）を定義 - **シェーダー**：頂点シェーダーで座標変換、フラグメントシェーダーでテクスチャサンプリング - **テクスチャ座標**：各面で(0,0)から(1,1)の範囲でUVマッピング - **行列変換**：透視投影、回転、移動の組み合わせで3D表示 立方体の各面には同じテクスチャが適用されていますが、UV座標によってテクスチャのどの部分がどの面に対応するかが決まります。グリッドパターンにより、テクスチャがどのように3D表面にマッピングされているかを視覚的に確認できます。 マウスで自由に回転させて、各面のテクスチャマッピングを確認してみてください。

**修正した問題：** 1. **キャンバスサイズ**：600x450に設定 2. **WebGL初期化**：より堅牢なエラーハンドリングを追加 3. **テクスチャ生成**：シンプルなチェッカーボードパターンで確実に表示 4. **ブラウザ互換性**：experimental-webglフォールバックを追加 5. **エラー表示**：問題が発生した場合にエラーメッセージを表示 **表示される内容：** - **立方体**：赤と青緑のチェッカーボードテクスチャが適用された3D立方体 - **マウス操作**：ドラッグで回転、ホイールでズーム - **UVマッピング**：各面に(0,0)から(1,1)のUV座標でテクスチャが適用 これで立方体が正常に表示されるはずです。各面のチェッカーボードパターンにより、UVマッピングがどのように機能しているかを視覚的に確認できます。マウスで自由に回転させて、テクスチャが3D表面にどのようにマッピングされているかを観察してください。

立方体と球を選択できるように機能を追加します。立方体と球を選択できる機能を追加しました！ **新機能：** 1. **形状選択ボタン**： - 立方体ボタン：6つの正方形面にUVマッピング - 球ボタン：球面座標系でのUVマッピング 2. **異なるUVマッピング手法**： - **立方体**：各面に(0,0)から(1,1)の正方形UV座標 - **球**：経度(0-360°)がU座標、緯度(0-180°)がV座標に対応 3. **動的な説明更新**： - 選択した形状に応じてUV座標の説明が変更されます **UVマッピングの違い：** - **立方体**：各面が独立した平面なので、面ごとに正方形のUVマッピング - **球**：連続した曲面なので、地球の地図のような展開方法でUVマッピング ボタンをクリックして立方体と球を切り替えてみてください。それぞれの形状でテクスチャがどのように適用されるかの違いを観察できます。球の場合、極付近でテクスチャが収束する様子や、経度方向のテクスチャの繰り返しパターンを確認できます。