マウスドラッグで視点を回転できます
アンビエントオクルージョン（Ambient Occlusion、AO）は、3Dコンピュータグラフィックスにおける陰影技術の一つです。 この技術は、物体の表面の各点において、その点がどれだけ周囲の物体によって遮蔽されているかを計算し、遮蔽の度合いに応じて暗くする手法です。具体的には、ある点から半球状にレイ（光線）を飛ばし、どのくらいの割合で他の物体に遮られるかを調べます。 主な特徴： **視覚的効果** - 物体の接触部分や隙間、くぼみなどが自然に暗くなる - 立体感や奥行き感が向上する - よりリアルで自然な陰影表現が可能 **用途** - 3Dゲームのリアルタイムレンダリング - 映画やアニメーションの制作 - 建築やプロダクトデザインの可視化 **実装方法** - Screen Space Ambient Occlusion（SSAO）：画面空間で計算する軽量版 - Ray Tracing Ambient Occlusion：より正確だが計算コストが高い - プリベイクAO：事前に計算してテクスチャに焼き込む方法 アンビエントオクルージョンは、特に複雑な形状や細かいディテールを持つ3Dモデルにおいて、現実的な陰影を表現するために不可欠な技術となっています。
3Dオブジェクトにアンビエントオクルージョンを適用したインタラクティブなビューアを作成します。Three.jsを使用してアンビエントオクルージョンを実装した3Dビューアを作成しました。 **主な機能：** 1. **マウス操作** - ドラッグで視点回転 - ホイールでズームイン/アウト 2. **アンビエントオクルージョン計算** - 各頂点で半球状にレイキャストを実行 - 遮蔽度に応じてAO値を計算 - カスタムシェーダーでAOを適用 3. **パラメータ調整** - AO強度の調整 - サンプル数の変更（精度とパフォーマンスのバランス） - 複数のオブジェクト形状を選択可能 4. **視覚化オプション** - ワイヤーフレーム表示 - リアルタイムでのパラメータ変更 **AOアルゴリズムの実装：** - 各頂点から法線方向の半球内にランダムなレイを飛ばす - 他のジオメトリとの交差を検出 - 交差距離に基づいて遮蔽度を計算 - 最終的に0-1の範囲でAO値を算出 このビューアでは、トーラスや複雑な形状で特にAOの効果が分かりやすく確認できます。隙間や接触部分が自然に暗くなり、立体感が向上する様子を観察できます。
Three.jsのバージョンによる`BufferGeometryUtils`の問題と、AOの初期計算タイミングを修正しました。エラーを修正しました。主な変更点： 1. **複雑な形状の変更**: `BufferGeometryUtils.mergeBufferGeometries`が未定義だったため、代わりに`TorusKnotGeometry`を使用しました。これは複雑な結び目形状で、AOの効果がよく分かります。 2. **初期AO値の設定**: ジオメトリ作成時に初期AO値（全て1.0）を設定し、後から実際のAO値で更新するようにしました。 3. **AO計算の関数分離**: `calculateAndApplyAO`関数を作成し、エラーハンドリングを改善しました。 4. **タイミング調整**: AO計算のタイミングを調整し、メッシュが確実に作成された後に実行されるようにしました。 これで「複雑な形状」を選択してもエラーが発生せず、美しいトーラスノット（結び目）が表示され、その複雑な形状でのアンビエントオクルージョン効果を確認できます。