Three.js 　バンプマッピング(Bump mapping)　― 凹凸処理 ―

今回は、Three.jsの「バンプマッピング(Bump mapping)」について書きます。

バンプマッピング(Bump mapping)は、平面である物体の表面に細かい凹凸があるように見せかける処理のことです。
Three.jsでは、簡単にバンプマッピングを利用することが出来ます。
もっと詳しくバンプマッピングについて知りたい人は、下のサイトを見てください。

バンプマッピングの設定はマテリアル（材質）のプロパティを使います。
この２つのプロパティを使います。

bumpMap　・・・バンプマッピング用のテクスチャです。
bumpScale・・・凹凸の深さを調整する係数です。

では、実際に上記のプロパティを使用した、マテリアルのソースコードを書きます。

//textureには、テクスチャが入ってます。

var material = new THREE.MeshPhongMaterial({
         map: texture, bumpMap:texture, bumpScale: 0.05 });

ちなみに、

var material = new THREE.MeshPhongMaterial({
         bumpMap:texture, bumpScale: 0.05 });

このように、「 map: texture」をとると凹凸だけしか描画されません。
f:id:gupuru:20131210205143p:plain
凹凸だけだと、何かよく分かりません（笑）

次に、バンプマッピングを使用して球を生成しているコードです。

//テクスチャの読み込み
var texture  = new THREE.ImageUtils.loadTexture('hatenablog.jpg');

//球の生成と宣言
var shere = new THREE.Mesh(                                         
 new THREE.SphereGeometry(50, 100, 100),                     
 new THREE.MeshPhongMaterial({                                
   map:texture,bumpMap:texture, bumpScale: 0.05                                         
   }));

//シーンオブジェクトに追加         
scene.add(shere);

これを実行すると、こうなります。（テクスチャは地球です。）
f:id:gupuru:20131210204724p:plain

上の写真を拡大すると、
f:id:gupuru:20131210204728p:plain
凹凸が描画がされている感じに見えます。

ちなみに、コチラの写真は、バンプマッピングを使っていません。
f:id:gupuru:20131210205323p:plain
平面な感がしますね（笑）

さらに、他のプロパティを加えることで、より高度な質感を表現できます。
このコードには、「specular: 0xcccccc, shininess:50, ambient: 0xffffff」を追加しました。

//テクスチャの読み込み
var texture  = new THREE.ImageUtils.loadTexture('hatenablog.jpg');

//球の生成と宣言
var shere = new THREE.Mesh(                                         
 new THREE.SphereGeometry(50, 100, 100),                     
 new THREE.MeshPhongMaterial({                                
   map:texture,bumpMap:texture, bumpScale: 0.05,specular: 0xcccccc, shininess:50, ambient: 0xffffff                                         
   }));

//シーンオブジェクトに追加         
scene.add(shere);