babylon.jsチュートリアル４ - Materials

babylon.jsのチュートリアルを学習していきます。

# Materials
https://doc.babylonjs.com/babylon101/materials

マテリアルはメッシュに光が当たったときの反応を色やテクスチャで設定します。
１コのマテリアルは複数のメッシュに設定できる。
光の反応の設定として、以下がある。

1. ディフューズ：拡散反射光
1. スペキュラー：鏡面反射光
1. エミッシブ：放射光
1. アンビエント：環境光

下記ページに簡潔な説明があります。3Dモデルの基礎知識ですね。
http://www.atelier-blue.com/program/mdirectx/3d/3d01-14.htm

# Color

マテリアルの使い方の例。マテリアルを生成し、色を設定。メッシュに設定します。

```js
var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);

myMaterial.diffuseColor = new BABYLON.Color3(1, 0, 1);
myMaterial.specularColor = new BABYLON.Color3(0.5, 0.6, 0.87);
myMaterial.emissiveColor = new BABYLON.Color3(1, 1, 1);
myMaterial.ambientColor = new BABYLON.Color3(0.23, 0.98, 0.53);

mesh.material = myMaterial;
```

会社でよく分からなくて、心が折れそうだと云っていたら、[@dmystk](https://qiita.com/dmystk)さんがまとめて教えてくれました。光の反射設定はこちらの記事を読みましょう。
https://qiita.com/dmystk/items/fa2b6c2b84e48fd7d511#diffusecolor

透明度の設定

```js
  greenMat.alpha = 1.0;
```

透明度のサンプル

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="nobuyuki-ishii" data-slug-hash="wvGXPxJ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="babylon101 Materials color alpha">
  <span>See the Pen <a href="https://codepen.io/nobuyuki-ishii/pen/wvGXPxJ">
  babylon101 Materials color alpha</a> by nobuyuki ishii (<a href="https://codepen.io/nobuyuki-ishii">@nobuyuki-ishii</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# Texture

マテリアルに画像を設定する場合

```js
var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);

myMaterial.diffuseTexture = new BABYLON.Texture("PATH TO IMAGE", scene);
myMaterial.specularTexture = new BABYLON.Texture("PATH TO IMAGE", scene);
myMaterial.emissiveTexture = new BABYLON.Texture("PATH TO IMAGE", scene);
myMaterial.ambientTexture = new BABYLON.Texture("PATH TO IMAGE", scene);

mesh.material = myMaterial;
```

テクスチャの透明度の設定も同じ

```js
mat.alpha = 1.0;
```

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="nobuyuki-ishii" data-slug-hash="wvGXPNe" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="babylon101 Materials texture alpha">
  <span>See the Pen <a href="https://codepen.io/nobuyuki-ishii/pen/wvGXPNe">
  babylon101 Materials texture alpha</a> by nobuyuki ishii (<a href="https://codepen.io/nobuyuki-ishii">@nobuyuki-ishii</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

テクスチャ画像の透明部分を有効にするかを設定するオプション

```js
mat.diffuseTexture.hasAlpha = true;
```

http://141-lab.com/babylon/qiita/has_alpha/

# Back Face Culling

テクスチャ画像の透明部分から反対側を透かして見えるかを設定するオプション

```js
mat.backFaceCulling = true;
```

http://141-lab.com/babylon/qiita/has_alpha/


# WireFrame

ワイヤフレーム表示を設定するオプション

```js
mat.wireframe = true;
```

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="nobuyuki-ishii" data-slug-hash="zYqLrex" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="babylon101 Materials Wireframe">
  <span>See the Pen <a href="https://codepen.io/nobuyuki-ishii/pen/zYqLrex">
  babylon101 Materials Wireframe</a> by nobuyuki ishii (<a href="https://codepen.io/nobuyuki-ishii">@nobuyuki-ishii</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# Local File Access

`google chrome`は、ローカルファイルへのアクセスをデフォルトで許可していないので、アクセスしたい場合は、ターミナルから以下を実行する。

## windows

```
start chrome --allow-file-access-from-files
```

## mac

```
open -a "Google Chrome" --args --allow-file-access-from-files
```

## linux

```
google-chrome --allow-file-access-from-files
```