ノーマルマップで表現する立体テクスチャ

note

WebGLとGLSLシェーダーを使用してノーマルマッピング技法を実装し、平面的なテクスチャに立体感と深度を与える表現手法です。球体ジオメトリに適用されたノーマルマップが、ライティング計算により擬似的な凹凸効果を生み出し、リアルな質感表現を実現しています。このサンプルではテクスチャとノーマルマップのオン・オフを切り替えることで、その効果を視覚的に比較できるようにしています。

球体ジオメトリを生成し、ベーステクスチャとノーマルマップの2つのテクスチャを適用しています。フラグメントシェーダーでは、ノーマルマップから取得した法線ベクトル情報を使用して、ライティング計算を行います。ノーマルマップの各ピクセルのRGB値を法線ベクトルに変換し、ディレクショナルライトまたはポイントライトとの内積計算により、擬似的な凹凸による陰影を表現しています。

ノーマルマッピング技法は、3Dゲーム開発、建築ビジュアライゼーション、プロダクトデザインのプレゼンテーションなど、リアルな質感表現が求められるさまざまな分野で活用されています。ポリゴン数を増やすことなく表面の細かなディテールを表現できるため、パフォーマンスを保ちながら視覚的なクオリティを向上させることができます。