【UnityでAR】アンチエイリアス・ライティング・ベイク周りの備忘録

環境
Unity 2018.3.0b3

できるだけリアルに！が課題で、ARアプリを作る機会があったため、備忘録。

詰まったことは一番下にまとめてます。
ARだけでなく、VRにもUnityだけの制作にも言えること。

#モデルを綺麗に（ジャミジャミをけす）
3Dソフトで作ったモデルをインポートして使ったりするかと思います。
Unityエディター上で見る分には何も起きない。
けど、ビルドしてスマホでみたら…
![trim.png](https://qiita-image-store.s3.amazonaws.com/0/306317/80f2b989-820f-8d84-7326-8d354f368dca.png)
こんな状態…（パーツの境界が汚い）

マーカーのサイズを変えたり、アンチエイリアシングの値を高くしても、改善しません。

■原因
モデル自体のUV同士が重なるぐらい近すぎるため、レンダリングが重なって、このようにジャミジャミが発生します。

■解決法
そのため、内部で片方だけ描画するよう、法線の向きを変更したり
もしくは
面を分割して重なっている部分だけ非表示にする（モデルの内側に面が何もない状態にすると良い）

■結果
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/04120ac3-3cdf-1c3d-0fb1-d83b7d9f92dc.png)
白いパーツと黒いパーツの境界が綺麗に表示された。
![aaaaaa.png](https://qiita-image-store.s3.amazonaws.com/0/306317/01da8ec1-6a41-1ce3-56d2-a68ea347bd96.png)

こちらも綺麗に。左が処理済みで、右は処理前。

#アンチエイリアス処理
Post Processingを使います！
Package ManagerよりPost ProcessingをInstallします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/cf6db5fe-347a-be55-d08a-bbce1ba00431.png)
Project上で右クリック→Create→Post-Processing Profile　を作成します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/399f9066-2ae6-8230-4da4-a33dae889287.png)
作成されたPost-Processing ProfileをクリックをしてInspecterを表示し、
Antialiasingにチェックします。
また、Method項目で、パフォーマンス(処理速度)を優先するか、
アンチエイリアシングを優先するか、選ぶこともできます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/69c42c17-5950-c06d-fad1-7b1542a7a5c7.png)

また、Post Processingは　とても重いので、アプリを軽くするために、もう一つ変更を入れます。
Assets > PostProcessing > Resources > Shadersより、一番下にあるUber(虹色のShaderファイル)をダブルクリックして、スクリプトエディターを開きます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/3eec0ff2-67c7-fbbb-744b-59d0bfe2e541.png)
pragmaのところを、コメントアウトします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/3cbbcd69-a863-5451-493d-1aae47c4e3ed.png)
これで、使わないものを呼び出さずに済みます！(やらないと、10MBくらい？増えちゃうみたいです)

■結果
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/5d972a80-6bf5-8484-ff31-32a3d1991c19.png)処理前
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/838eff5d-e8c8-33e9-df0b-b0355f6ed626.png)![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/e6099011-34da-c81e-0838-dae4c11fab46.png)処理後
ちょっと画像が違いますが、かなり綺麗になりました！
※古い端末だと、アンチエイリアス処理が出来ないことがあるので注意です。

#鏡面反射を入れる
プラスチック部分や金属部分に部屋が映り込むようにします。

パノラマ画像を使用します。(サイトに落ちてるものでも結構いいのあります)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/eb07e7e5-7254-1b8f-45ab-cb9f96e81617.png)
2048x1024　くらいあると、綺麗です。
CubeMapをつくる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/187a73ed-d779-c74d-56fb-246bd2f789d8.png)
画像をインポートしたら、Texture Shapeを
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/6e37b249-219e-33d3-b14b-76dcd96b4976.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/03bfac78-e413-8af3-f20a-e04da2d4a32c.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/4f9baf11-cbb1-47c9-3e2a-d3860bc0ff21.png)

　



#ベイク
モデルに影をつける(Bakeする)ことで、
リアルタイムで付く大雑把な影よりもきれいな影がつけれます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/7162df4f-3abb-f9aa-18ef-ebcb8fc33aaf.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/229cfda8-272e-a285-61d3-58f64f59594b.png)

**Baked GI**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/a34bea44-09dd-d2d5-5641-42b91d7f532a.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/69bdae7d-db52-5668-d0d7-a4db563805e9.png)

**Blur Radius**
ポストプロセスで直接ライティングに適用されるぼかしフィルタの半径（テクセル）です。半径を大きくすると、よりぼやけた効果を与えます。ぼかしのレベルを高くすると、視覚的なアーティファクトが低減されるだけでなく、影のエッジもソフトになります。
**Anti Aliasing Samples**
適用されるアンチエイリアシングの程度（「ブロック状」アーティファクトの軽減）。数値が大きいほど品質が向上し、ベーキング時間が長くなります。
**Direct Light Quality**
レイの数は、直接ライティングを評価するために使用されます。レイの数が多いほど、より正確なソフトシャドウを生成しやすくなりますが、ベイク時間が長くなります。

■ベイク前の確認事項
・Auto Generateは外しておく
・ベイクしたいモデルにはちゃんと　Generate LightMap UVs チェックが入っているか？
・Lightmap staticもチェック入っているか？
・透明プラスチック等、影をつけたくないところはstaticを外す。
・baked後は、サイズを変えても移動してもＯＫ(Auto Generateのチェックをはずすこと！)
・ただしベイク後のオブジェクトをベイク付きで複製はできないので注意。


#ARアプリ制作詰んだTips
###Q.透過影画像が、グレーにみえてしまう
こんなかんじに、よく見ると黒じゃない。
茶色い机の上とかでARすると、違和感あります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/d59dcd1a-133d-4c7d-a14c-562ad3ac8800.png)

A.画像をアタッチしているマテリアルのmetalic値を1にしたら、黒になります
　

###Q.ARで、オブジェクトを後ろ向きにしたら、黒い影みたいなのがでる！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/82e00838-a922-ab20-3622-5d226b42fcab.png)
回転前
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/bcb9cb0b-b5d8-80a4-efdb-7b55fba38312.png)
後ろ向き
A.Lightmap Settingsで　Directional Modeを　Non-directionalにする。万事解決！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/bfac2d06-bd37-631d-aad2-67adb3cc0213.png)
　
###部屋が映り込まないようにしたい
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/631a07d8-e212-f1e0-e2e1-baae4e0a4a0b.png)
A.Reflectionはマテリアル各々外すことができる
　

###Q.Vuforia使用するとカメラのピントが合わない(アプリ起動時のピントのまま変わらない)
A.スクリプトをARCameraにアタッチして、オートフォーカスに変更出来ます。
おもちゃラボさん→http://nn-hokuson.hatenablog.com/entry/2018/04/04/212402
　

###Q.マテリアルに貼り付けた画像が、おかしい
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/707e5ab0-27bf-1013-f6ef-9a9f4d80d2fb.png)
A.画像の設定を、Texture Type Sprite(2D and UI)から⇒Defaultに変えてApplyする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/b1d7bd7b-3c79-6d11-98f3-9a5bf46befe0.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/d794ce4e-e210-89a0-7ae5-27169978b44d.png)

###Q. tgaとpngの違いは？
A.　

###Q.　スマホでみると、DirectionalLightの向きが変！
A. Orientationの向きが影響しているかもしれません。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/fe0d2f8a-b64e-bff8-8097-c852dd21b5a5.png)
ARするときは、横向きにもつため、設定をLandScape変更しているかもしれませんが、
「Portrait」にして、Directional Lightを　右手から左奥に進む向きにすると、
ARオブジェクトに良い感じにライトが当たります。(私の場合)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/0b21b67c-e673-a156-a335-b6cc08453afa.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/4d97ecd9-b195-58fd-6099-fdfec64fb11a.png)
　

###Q. PointLightを設置しても、ビルドしてスマホでみると反映されていない
A.ARCameraのInspecterとPointLightのInspecterを変更する
http://corevale.com/unity/2490
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/6eb05b3a-9eb6-f2b2-4378-77c23c1a7994.png)
Render Pathを　Forwardに変更。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/357121be-4a8b-a68c-d39c-1d0a5623c05e.png)
Render Modeを　Importantに変更。
　

###Q.2眼VRゴーグルでARできないの？
A.Vuforia Configurationの　Digital Eyewearという項目があります。
　Phone + Viewer　に変更しましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/a75ac09e-0fdd-59fc-dcc0-bfb36dd8ef44.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/c1092db5-5326-2a91-29f4-8cd51a0b03c7.png)
　Player Settingsから　XR Settings項目を変更します。
　Virtual Reality Supportedにチェック。
　VUrtual Reality SDKsに　Vuforiaを追加します。（+ボタンをクリック）　※もし他のSDKが入っていたら、-ボタンを押して消去して下さい）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/73bc5fba-b7c2-91e0-7cf1-5b95e9f0b728.png)
この設定のようになればOKです。
　

###Q.ライトが表示されない！
A.太陽トグルをOFFにしてしまっていないか確認しよう。（明るいグレーでONの状態）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/306317/22649a14-4b53-bcac-9f29-91425049c84b.png)

--------

ご参考までに。