SceneKitのマテリアルのdiffuseを変更して3D物体の見た目を変える

SceneKitのマテリアルについて一番くわしいブログ記事に[iOS で SceneKit を試す(Swift 3) その33 - ジオメトリの質感を決めるマテリアルについて](http://appleengine.hatenablog.com/entry/2017/07/19/161307)がありますが、今記事では、もっと簡単なところだけにフォーカスします。

# マテリアルとは

<img width="765" alt="スクリーンショット 2018-12-06 8.58.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/111366/6f81e2e1-cd8b-d828-4e22-16fb0b5b7aa7.png">
https://developer.apple.com/documentation/scenekit/scnmaterial

AppleのSCNMaterialの説明を引用すると、**ジオメトリの表面の見た目を決める濃淡の特徴のセット**と訳せます。

# どうやって設定するの

<img width="1010" alt="スクリーンショット 2018-12-06 9.03.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/111366/a7e4579f-0412-1581-89cd-12e3ffee3351.png">

scnファイルを開いてsphereというジオメトリをおいた様子が上です。

右側の玉アイコンで編集できます。

## 赤くしてみる

<img width="1008" alt="スクリーンショット 2018-12-06 9.21.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/111366/4fbc1490-a1c0-5708-c232-380d0a399a9c.png">

上記のようにdiffuseで色を変更するとmaterialの色が変わります。

## マテリアルは１つだけではない

<img width="329" alt="スクリーンショット 2018-12-06 9.23.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/111366/ea5cbf9b-2d1e-1587-f209-e6517897c049.png">

先の例では、上記のようにuntitiledMaterialが赤くなっていました。スフィアの場合は表面が１つしかないので、materialが一個しかありませんでした。しかし、円柱の場合はどうでしょう。

<img width="722" alt="スクリーンショット 2018-12-06 9.24.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/111366/41734ed7-deb0-2353-7fd2-d63f3cbac12c.png">

上のように、１つしかマテリアルを追加しなければ、全体が赤くなりますが、

<img width="713" alt="スクリーンショット 2018-12-06 9.26.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/111366/658a039f-954d-f024-f37a-8ec6e4f24c96.png">

円柱は表面が上の面、下の面、側面と３つあるので３つまでマテリアルを追加して面によって色を変えることができます。materialはそれぞれidentityに名前を入れて名前をつけることができます。

<img width="727" alt="スクリーンショット 2018-12-06 9.34.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/111366/9c937288-2671-89ce-deea-a8933f4da178.png">

SCNTextのジオメトリに対して行うと、上のようにIKEAも再現できる。。！ｗ

## 画像を割り当ててみる

diffuseには画像ファイルも割り当てることができます。

<img width="682" alt="スクリーンショット 2018-12-06 9.36.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/111366/fedb391a-5fbf-773a-23e1-16d1bae3e9f7.png">

<img width="723" alt="スクリーンショット 2018-12-06 9.36.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/111366/4fcb786d-ad1d-6973-7a5e-577bc99a3b23.png">

こんなかんじで、画像マテリアルで模様が自由自在です。

## 実はあの飛行機も

ARKitのテンプレートを作ると出てくるこの飛行機にも実はmaterialがはってあります。

<img width="710" alt="スクリーンショット 2018-12-06 9.38.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/111366/d6f69ef5-8a3f-2e8f-7441-7ed2768afa11.png">

ためしにマテリアルを削除してみると

<img width="721" alt="スクリーンショット 2018-12-06 9.41.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/111366/20af1b1f-0782-0a20-ced4-c5741eb0a215.png">

真っ白になってしまいました。

実は飛行機の模様、以下のような画像のマテリアルが貼ってあるだけなのです。3Dのモデルを展開して2Dの面にしたときの展開図みたいなイメージですかね。

<img width="677" alt="スクリーンショット 2018-12-06 9.41.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/111366/d0353e45-a07f-5ade-aaf4-2154a826d936.png">

# コードでもできるよ

```swift
let sphere = SCNSphere(radius: 0.1)
sphere.firstMaterial?.diffuse.contents = UIColor.red

let node = SCNNode()
node.geometry = sphere
```

複数のマテリアルをつけたいときは以下のように

```swift
let m1 = SCNMaterial()
m1.diffuse.contents = UIColor.red // 赤
        
let m2 = SCNMaterial()
m2.diffuse.contents = UIColor.blue // 青
        
sphere.materials = [m1, m2]
```

# まとめ

- materialのdiffuseに色を入れると表面の色が変わる
- materialは１つだけではない、表面の数だけ設定できる
- materialには画像も入れられる