Three.js -- Blender OSL Cycles Baking and JSON Export with UVs

# はじめに
この記事は、youtubeの[Blender Cycles Baking](https://www.youtube.com/watch?v=9MUTzn86XXQ&t=902s)の手順を日本語にしたものです。
Cyclesレンダー時にテクスチャ等を設定し、Blenderレンダーに持っていきます。
画像のオレンジ色で囲ってあるところが主に変更する箇所です。
わかりやすく書くつもりですが、Blenderのショートカットがわかるといいかもしれません。

## 1.エンジンをCyclesに変える
Blenderを起動したら、まずエンジンをCyclesレンダーに変更します。
![bake01.png](https://qiita-image-store.s3.amazonaws.com/0/150548/127835ae-6063-90ae-3aab-1fdad36631ea.png)

## 2.オブジェクトとカメラのみを残す
Lampを右クリックから消します。
今回は、オブジェクトにモンキー（スザンヌ）を使うので、Cubeも消しています。
モンキーの追加は、オブジェクトが映っている画面内で、
Shift + A　メッシュ　モンキー　です。
![bake02.png](https://qiita-image-store.s3.amazonaws.com/0/150548/14a931cc-c84e-cef0-cc95-52da93d43d03.png)

## 3.シームをつける
シームとは、UV展開時の切れ目のことです。
うまく切れ目を入れておくと、後々にやりやすくなります。
モードを編集モードにして、Ctrl + Eで出てきます。
![bake03.png](https://qiita-image-store.s3.amazonaws.com/0/150548/f9330674-797b-b709-8a94-e126c963aa27.png)

## 4.シームをつける位置
今回、私は顔と頭の回りにぐるっとシームを入れました。
赤い線がシームの入っているところです。
![bake04.png](https://qiita-image-store.s3.amazonaws.com/0/150548/5f232175-c993-3816-58eb-1f593d018800.png)

## 5.レンダータブのOpen Shading Languageにチェックを入れる
[OSL](https://github.com/sambler/osl-shaders)を使用する場合は、こちらにチェックを入れます。
今回はOSLを使用した手順で進めていきます。
![bake05.png](https://qiita-image-store.s3.amazonaws.com/0/150548/f8340e7a-59a9-bee7-cf60-bec6048b6320.png)

## 6.レンダータブの二乗サンプルにチェックを入れる
サンプリングのところです。
![bake06.png](https://qiita-image-store.s3.amazonaws.com/0/150548/e8b2bf54-dccf-9340-620e-a6f58e40c3b1.png)

## 7.ノードエディターに切り替えて、マテリアルを作成します
ノードエディターは左下のところから切り替えます。
マテリアルは新規ボタンを押します。
![bake07.png](https://qiita-image-store.s3.amazonaws.com/0/150548/72d96c30-07d8-fc21-e208-0c4940ad6ad7.png)

## 8.ノードを追加します
ノードエディターでテクスチャ座標とスクリプトを追加します。
元からあるディフューズBSDFを消すのは、選択してXキーです。
そして、スクリプトノードの外部からダウンロードしたOSLを読み込みます。
![bake08.png](https://qiita-image-store.s3.amazonaws.com/0/150548/98b0f552-596e-482f-144b-03c1a0cd0c20.png)

## 9.ベイク用の画像を作る
画像エディターに切り替えて、新規を押します。
![bake09.png](https://qiita-image-store.s3.amazonaws.com/0/150548/ef0d35db-1446-ee75-b104-a4ed4425b9c8.png)

## 10.背景を環境テクスチャで設定します
ワールドタブのノードを使用を押して、カラーの丸ボタンを押して、環境テクスチャを選びます。
![bake10.png](https://qiita-image-store.s3.amazonaws.com/0/150548/b2ce0fe0-417b-e965-b7c4-881f1800c1a0.png)

## 11.画像テクスチャノードを作っておく
画像テクスチャノードを追加しておいて、先ほど作ったベイク用の画像を選択します。
![bake11.png](https://qiita-image-store.s3.amazonaws.com/0/150548/6eac8040-c3e1-e4fe-fe8e-09e9796b434f.png)

## 12.UV展開
3Dビューに戻り、Uキーです。
![bake12.png](https://qiita-image-store.s3.amazonaws.com/0/150548/15788c52-9929-6ce2-aceb-857d52a5670a.png)

## 13.統合でベイク
ベイク前にレンダータブでレンダーを押し、すぐにキャンセルします。
レンダータブでベイクを押します。
![bake13.png](https://qiita-image-store.s3.amazonaws.com/0/150548/ff34d91d-38f8-623d-6e44-60f4f16ca0ec.png)

## 14.画像を保存
画像エディターで画像から別名保存を選びます。
参考画像がUVのみのベイクとなっていますが、本来は柄等が映っています。
![bake14.png](https://qiita-image-store.s3.amazonaws.com/0/150548/0d577023-5da8-3c68-c014-bbd34a7e9d91.png)

## 15.Blenderレンダーへ
Blenderレンダーに切り替えて、マテリアルタブからマテリアルを消します。
![bake15.png](https://qiita-image-store.s3.amazonaws.com/0/150548/806fb819-bf70-48f0-9b21-7bd6e123ae4e.png)

## 16.マテリアルを作り直す
新規ボタンを押してマテリアルを作り直します。
![bake16.png](https://qiita-image-store.s3.amazonaws.com/0/150548/ca737618-3b32-85fc-4b3e-fea3b138b33f.png)

## 17.テクスチャを開く
テクスチャタブから先ほど保存した画像を選びます。
![bake17.png](https://qiita-image-store.s3.amazonaws.com/0/150548/6d240664-a0b4-2ba4-d24b-9ae054c4e1fa.png)

## 18.AOを有効にする
ワールドタブからアンビエントオクルージョンにチェックを入れます。
![bake18.png](https://qiita-image-store.s3.amazonaws.com/0/150548/78b2ca8a-dddd-4e91-42be-599c3dcbcfab.png)

## 19.JSONエクスポート
ファイル　エクスポート　Three.js(json)を選択します。
![bake19.png](https://qiita-image-store.s3.amazonaws.com/0/150548/20e81626-bfc0-4c5c-472c-db938e90cab9.png)

## 20.エクスポートの設定
まだここが自分でもはっきりしていないのですが、とりあえず、FaceMaterialsにチェックを入れています。
![bake20.png](https://qiita-image-store.s3.amazonaws.com/0/150548/f2062170-2bc2-7989-7efb-3dd59c23ce7a.png)

## Three.jsで表示すると
このような感じになります。
![sbake.png](https://qiita-image-store.s3.amazonaws.com/0/150548/ac5ba2a2-c240-3a73-cbb9-984e0c554f4a.png)

## おわりに
ここがわかりにくいなどあれば、コメントやツイッターで教えていただけると助かります。