Three.jsでバンプマップとディスプレイスメントマップを比較｜違いと使い分けを実例で解説
Three.jsでバンプマップとディスプレイスメントマップの違いが分かりにくいと感じたことはありませんか？
この記事では、両者の特徴と使い分けを、実際のコードとデモを交えて分かりやすく解説します。
バンプ マップ(bumpMap)、ディスプレイスメント マップ(displacementMap)(Three.js[r145])
- バンプ マップ
- ライトに関連して知覚される深度にマッピングされ、ライティングのみに影響します。（物体の形状は変わらない）
- ディスプレイスメント マップ
- メッシュの頂点座標を移動させます。移動された頂点は影を落としたり影が落ちたりします。（物体の形状が変わる）
マウス左ドラッグで回転、右ドラッグでカメラの移動、ホイールで拡大縮小できます。
スワイプで回転、画面に2本指を触れてなぞるとカメラの移動、ピンチイン／アウトで拡大縮小できます。
以下のチェック画像を「（左）バンプ マップ」「（右）ディスプレイスメント マップ」で適用しています。
ソースコード
//バンプ マップ、ディスプレイメント マップ用画像のロード
let Texture=new THREE.TextureLoader().load('./three_r145/img/flag.png');
Texture.wrapS=THREE.RepeatWrapping;
Texture.wrapT=THREE.RepeatWrapping;
//テクスチャの繰り返し回数を指定する
Texture.repeat.set(1,1);
//バンプ マップ、ディスプレイメント マップ用ジオメトリ作成(横、縦、横分割数、縦分割数)
let Geometry=new THREE.PlaneGeometry(10,10,50,50);
//バンプ マップの表面マテリアル
let BumpMaterial=new THREE.MeshLambertMaterial({
color:0x66ee66,
side:THREE.FrontSide,//表面を表示する設定
transparent:false, opacity:1.0,
wireframe:false, wireframeLinewidth:0,
bumpMap:Texture,
bumpScale:1
});
//バンプ マップ用表面メッシュ作成
let BumpMesh=new THREE.Mesh(Geometry,BumpMaterial);
BumpMesh.position.set(-6,0,0);
BumpMesh.rotation.set(-Math.PI/8*3,0,0);
BumpMesh.castShadow=true;
BumpMesh.receiveShadow=true;
scene.add(BumpMesh);
//ディスプレイスメント マップ用表面マテリアル
let DisplacementMaterial=new THREE.MeshLambertMaterial({
color:0x6699ee,
side:THREE.FrontSide,//表面を表示する設定
transparent:false, opacity:1.0,
wireframe:false, wireframeLinewidth:0,
displacementMap:Texture,
displacementScale:1
});
//ディスプレイスメント マップ用表面メッシュ作成
let DisplacementMesh=new THREE.Mesh(Geometry,DisplacementMaterial);
DisplacementMesh.position.set(6,0,0);
DisplacementMesh.rotation.set(-Math.PI/8*3,0,0);
DisplacementMesh.castShadow=true;
DisplacementMesh.receiveShadow=true;
scene.add(DisplacementMesh);