Chapter 12

2-06: マテリアル (Material For Each House Side)

ちょまど (千代田まどか)
ちょまど (千代田まどか)
2022.05.20に更新

このページの原文: https://doc.babylonjs.com/start/chap2/face_material

🏘 2-06: 家のそれぞれの面にマテリアル (Material For Each House Side)

MeshBuilder.CreateBoxにより作られるボックスのオプションプロパティのなかには、faceUV プロパティと設定値として Vector4 の配列があります。これらを使用して、ボックスのひとつの面に適用する画像の領域を得ることができます。

ボックスの各面に画像を貼っていく faceUV プロパティの配列では、それぞれの面には、以下の 6 つのインデックスの番号が付けられています。

番号 面 (原文)
0 背面 (back)
1 前面 (front)
2 右面 (right)
3 左面 (left)
4 上部 (top)
5 底 (bottom)

一軒家の例

この画像を使いましょう。

家の正面、右側、背面、左側の画像が、同じサイズで順番に含まれています。

各画像の幅は、画像全体の幅の 0.25 ずつになっています。 使用する画像の部分を指定するために、左下, 右上 それぞれの座標を指定します。
もし画像全体を使用するなら (0, 0) と (1, 1) を指定し、もし画像の一部分だけ使用するならそれぞれの座標は 0 から 1 の間の端数を指定することになります。

また、(上で紹介した 2 組の座標を使用する方法ではなく) 4 dimensional vector (四次元ベクトル) を使用する方法もあります。
(左下x、左下y、右上z、右上w)

上の画像の場合、辺を画像に一致させると
front, 1, (0.0, 0.0, 0.25, 1.0)
right, 2, (0.25, 0, 0.5, 1.0)
back, 0, (0.5, 0.0, 0.75, 1.0)
left, 3, (0.75, 0, 1.0, 1.0)
top (上部) と bottom (底) が無いのでデフォルト値を使うことになります。

それをコードで書くとこうなります。

faceUV = [];
// 背面
faceUV[0] = new BABYLON.Vector4(0.5, 0.0, 0.75, 1.0); 
// 前面
faceUV[1] = new BABYLON.Vector4(0.0, 0.0, 0.25, 1.0); 
// 右側面
faceUV[2] = new BABYLON.Vector4(0.25, 0, 0.5, 1.0); 
// 左側面
faceUV[3] = new BABYLON.Vector4(0.75, 0, 1.0, 1.0); 

→ Playgroundでライブデモとコードを確認

プロパティ wrap = false

また、オプションプロパティ wrap = true を設定していないと、この部分画像が回転してしまう場合があります。

wrap = false の場合はドアが上になってしまっています。

const box = BABYLON.MeshBuilder.CreateBox("box", {faceUV: faceUV, wrap: true});

wrap = true の家の場合はちゃんとドアが下で正しい方向に向かっています。

🏘 Semi Detached House (2戸で一つの建物となっている住宅) の例

セミデタッチド・ハウス (2戸で一つの建物となっている住宅) の場合、家の幅は 2 倍になり、使用する 部分画像も 同様に 2 倍になります。

家の正面と背面(↑の画像の左端と右端の部分)は、側面(画像の中央部分)の 2 倍の幅です。側面部分は 再利用して 2 回使うことになります。

→ Playgroundでライブデモとコードを確認

続く

一戸建てとセミデタッチドの家をそれぞれ作ったので、それらをたくさんコピーして村を作りたいですね。
ボックスと屋根のコピーを別々に作ることもできますが、ボックスと屋根をひとつの合体させ、ひとつのメッシュ「家」としたほうが扱いがラクになりそうです。

これを行う前に、コードを整理して、新しいコードを書くことに集中できるようにしましょう。そのため、既存のコードを関数化していきましょう。
次のページで詳しく見ていきましょう。

参考)さらなる学び

https://doc.babylonjs.com/divingDeeper/materials/using/texturePerBoxFace