【WebAR】8th Wallでの半透明オブジェクト表示の代替案（後編）



この記事では8th Wallでの半透明オブジェクトのマテリアルをよりリッチにする方法について挑戦した過程を記述します。

この記事は後編です。前編はこちらから

[https://qiita.com/MEMEMIYA/items/39e606dead810f895ddc](https://qiita.com/MEMEMIYA/items/39e606dead810f895ddc)

https://qiita.com/MEMEMIYA/items/39e606dead810f895ddc

# 目次
<font color=darkgray>01_開発環境
02_Blenderでモデルを用意する
03_8thWall標準のガラスマテリアルを適用してみる
04_8thWallでRealtimeReflectionsの設定をする</font>
～後半はここから～
[05_HDR素材を用意する](#05_HDR素材を用意する)
[06_Blenderでベイク用シェーダーの設定をする](#06_Blenderでベイク用シェーダーの設定をする)
[07_BlenderでBake-A-Nodeを使用しベイクする](#07_BlenderでBake-A-Nodeを使用しベイクする)
[08_Photoshopでレタッチをする](#08_Photoshopでレタッチをする)
[09_Blenderでシェーダーを再設定する](#09_Blenderでシェーダーを再設定する)
[10_8thWallにアップロード&配置](#10_8thWallにアップロード&配置)
[11_出力結果](#11_出力結果)
[12_まとめ](#12_まとめ)
[13_参考](#13_参考)


前半では、ここまで進みました。

![GlassComparisonVideo_02-ezgif.com-optimize.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/7ef2f888-6d82-5189-3fe2-48f8052083f2.gif)

更に情報量を上げるため、カラーマップを用意していきたいと思います。

# 05_HDR素材を用意する
フリーのHDR配布サイトから環境テクスチャを入手し、Blenderの背景に設定します。今回はPoly Havenでkitchenと検索して出てきたものを使用しました。exrファイルでもhdrファイルでもどちらでもよいです。

[https://polyhaven.com/](https://polyhaven.com/)

https://polyhaven.com/

![ポリヘブン_キッチン_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/065e8c8e-4552-6602-b95f-eb0a124dc949.png)


Blenderの背景設定の方法が分からない場合はこちらをご参照ください。

[https://zenn.dev/lisras/articles/07d3803d045210](https://zenn.dev/lisras/articles/07d3803d045210)

https://zenn.dev/lisras/articles/07d3803d045210


# 06_Blenderでベイク用シェーダーの設定をする
ベイク用のシェーダー設定をします。リンゴ飴の飴部分のシェーディングは以下のような設定にしています。

![シェーダー設定_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/f1b51ed1-c640-990b-a1c4-c0e06cbfe488.png)

底のテクスチャがおかしくなってしまうのを回避するため、接地はさせず多少浮かせています。ブレンドモードはアルファブレンドに設定しました。

![ジュースベイク時のテクスチャ設定_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/f6b64cad-0918-d464-2b37-eac04f24bebd.png)

アップルジュースはこういった感じです。特別なことは何もしていませんが、アルファブレンドの設定は忘れずに行ってください。

# 07_BlenderでBake-A-Nodeを使用しベイクする

Blenderに元々入っているテクスチャベイク機能を使用してもよかったのですが、品質と出力速度的に今回はBake-A-Nodeを使用しました。

https://3dnchu.com/archives/bake-a-node/

こちらからダウンロードできます。

https://amanbairwal.gumroad.com/l/bake-a-node

プリファレンス＞アドオンからアドオンを導入します。

アドオンの導入方法はこちらをご参照ください。
[https://ijigen.net/entry/How_To_Install](https://ijigen.net/entry/How_To_Install)

https://ijigen.net/entry/How_To_Install

インストールが完了したらシェーディングタブに移動した後 __ベイクしたいシェーダーノードを選択し、__ ノードタブにあるBake-A-Nodeのボタンを押します。

![Bake-a-Node_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/2b4bf2c8-0607-e697-c103-510eca79446e.png)

最終的にテクスチャは1024px×1024pxに縮小させますが、品質向上のためこの時点では4096×4096pxで出力します。後工程で縮小した方が仕上がりが綺麗です。


![Bake-A-Node_解像度_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/ff119019-e1cd-db01-e109-6746cd0ba0bb.png)

一度サンプル数1で出力してみて、PCの性能に問題が無いことが確認できたらサンプル数を上げていきましょう。ここでは12に設定しました。

:::note warn
注意

忘れがちですがテクスチャが出力されたら即保存しましょう。

![ベイクしたテクスチャは即保存_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/64cf4e92-d008-5f98-dc72-278579b67345.png)

__通常のCtrl+Sではベイクしたテクスチャは保存されず、Blenderが予期せず落ちるとテクスチャデータは消えます。__ 自動保存もされないので、必ず画像エディターの画像から名前をつけて保存しましょう。
:::

# 08_Photoshopでレタッチをする
保存したテクスチャをPhotoshopで開き、主にトーンカーブ、レベル補正、明るさ/コントラストを使用して微調整します。ガラスに映り込んだ黒い物体は他のオブジェクトと比較すると浮いてしまうため、少し抑えます。

```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
footer {
  FontColor black
  FontSize 24
}
</style>
footer  左:レタッチ前_右:レタッチ後
title <img:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/92824aed-a552-17ba-775f-d22300ddb1b7.png>
@enduml
```


```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
footer {
  FontColor black
  FontSize 24
}
</style>
footer  左:レタッチ前_右:レタッチ後
title <img:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/c23d52f3-087b-335b-d719-fd3acc95ee17.png>
@enduml
```

```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
footer {
  FontColor black
  FontSize 24
}
</style>
footer  左:レタッチ前_右:レタッチ後
title <img:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/f5ab459e-faa0-492c-04e0-a09a66929826.png>
@enduml
```

調整が終わったら軽量化のため各テクスチャを1024px*1024pxに縮小して書き出します。


# 09_Blenderでシェーダーを再設定する
テクスチャが書き出せたらBlenderに戻ります。
元のモデルにテクスチャを貼った後、メタリックと粗さの項目を適切な値に調整します。

![リンゴ飴メタリック_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/8ed339cb-dbb5-83f5-d948-d05e5939f1e0.png)


アップルジュースに関しては、8th Wallと行き来しつつ調整したところ、今回はBlender上でギラギラすぎるくらいに設定した方が好みのマテリアルに仕上がることが分かりました。

![glb書き出し時のジュースのシェーダー設定_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/95d13829-d5fe-610f-5a76-7f05bf9c6c02.png)


# 10_8thWallにアップロード&配置

8thWallにアップロード&配置します。

# 11_出力結果

![bake_Glass_mp_01-ezgif.com-optimize.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/2789ddbe-78a2-e5b6-7a38-8abb1acb4797.gif)

コップの方は結構良い感じだと思います。ボトルの方は少しアルミ缶のような印象を受けるので、改善の余地はありますが、最初と比べてアセットの情報量が他のアセットと同じくらいになりました。

![bake_Candy_mp_01-ezgif.com-optimize.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/6d71954e-b5e2-e914-5ac6-680629f215b2.gif)

リンゴ飴はピンク色過ぎたかもしれませんが、良い感じにテカテカしています。

# 12_まとめ
今回はカラーマップと8thwallのRealtime Reflectionsを使用して、リンゴ飴とアップルジュースのリッチな表現に挑戦しました。

制作後に知ったのですが、どうやら8thWallはRoughnessMapやNormalMapが使用できるそうなので(Realtime Reflectionsのjini-ball.glbをBlenderで読み込むと確認できる)、もしかしたらそちらを利用したもっと良い方法があるかもしれません。

https://www.8thwall.com/8thwall/cubemap-aframe

また、今回は試さなかったものの、Glass material＋カラーマップ＋Realtime Reflectionsでもっとよい表現ができるかもしれません。影もつけていないので、まだまだ改善の余地がありそうです。

# 13_参考

https://stackoverflow.com/questions/50468673/how-to-disable-eslint-rule-max-line-length-for-paragraph-in-template-of-vue-js