【AppleVisionPro】部屋の明るさをマテリアルに反映させたい！

# 【AppleVisionPro】部屋の明るさをマテリアルに反映させたい！

visionOSの場合、URPのLitシェーダーを使うと、部屋の明るさによって色の明度が変わります！これはAppleVisionPro実機でも同じです！便利ですね！

| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/d26e4b99-a130-75a4-757f-4e8ad4ab866d.png) | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/60c7c026-4a77-c492-b11e-0ede77f76067.png) |
|:---:|:---:|
| Litシェーダーは明るい部屋だとマテリアルも明るくなる | Litシェーダーは暗い部屋だとマテリアルも暗くなる |

ただ、残念ながらLitシェーダーは、以下のようなアニメ調アバターに適用すると、違和感が大きくなります。プラスチック感が増すといいますか…

| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/ea2ba803-50e5-e32e-06d8-1bb5f62de63e.png) | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/7efbe5e5-6949-5dcb-f6bc-07b47e19f331.png) |
|:---:|:---:|
| 元のToonシェーダー | Litシェーダーは違和感大 |

なので、ToonシェーダーをvisionOSでも使いたいのですが、2024年4月時点では、visionOSで使えるToonシェーダーはまだありません！

Unlitシェーダーを使う方法もあるんですが、これだと部屋の明るさに対応できません！

| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/0e198f46-5ced-b047-27e5-6381836de841.png) | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/4c13322a-bddc-918e-a406-7ff78c075480.png) |
|:---:|:---:|
| Unlitシェーダーは明るい部屋だと違和感小 | Unlitシェーダーは暗い部屋だと違和感大|

そこで、Unlitシェーダーをベースに、部屋の明るさに対応した新しいシェーダーを作ることにしました！！

# 開発環境

本記事作成時点では、以下の環境で開発しています。

- macOS 14.2.1
- Unity 2022.3.19f1
- PolySpatial 1.1.6
- Xcode 15.3
- visionOS 1.1


# PolySpatial Environment Radiance で部屋の明るさが取れる！

`PolySpatial Environment Radiance` ノードの `Diffuse Radiance` という出力が、部屋の明るさ（色情報を含む）であることがわかりました！

そこで、以下のようなShaderGraphを作ってみました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/e092e9ff-f761-487d-66f5-cee3f898ba12.png)

テクスチャから抽出した色情報に、 `Diffuse Radiance` の値をかけるだけのシンプルな処理です。
以下のように部屋の明るさをマテリアルに反映できました！

| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/7ea7c6d7-1f8f-6802-9bc3-7418683ab605.png) | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/652a32fa-024f-a2d4-e612-a6152ff2b694.png) |
|:---:|:---:|
| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/b0111ce4-cee4-85fd-4b52-bf7ea6f2807e.png) | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/64e0ef22-a891-67a0-e454-a7d122769ab9.png) |
| `Diffuse Radiance` を使えば、明るい部屋だとマテリアルも明るくなる | `Diffuse Radiance` を使えば、暗い部屋だとマテリアルも暗くなる |

# Emissionにも対応する！

瞳のEmissionが表現されていないのが気になるので、以下のように処理を追加してみました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/01417f96-148c-fcf1-8075-36dd1d305661.png)

これで瞳が少し明るくなりました！

| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/64e0ef22-a891-67a0-e454-a7d122769ab9.png) | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221845/703056b4-d90d-8797-bd0f-5cbc3acf0329.png) |
|:---:|:---:|
| `Emission` 未対応 | `Emission` 対応 |

以下のように、Apple Vision Pro実機でも正常に動作しました！よかったです！！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/AppleVisionPro?src=hash&amp;ref_src=twsrc%5Etfw">#AppleVisionPro</a> を使って1/8スケールのVRMアバターを踊らせてみました！<a href="https://twitter.com/hashtag/%E6%A0%84VP?src=hash&amp;ref_src=twsrc%5Etfw">#栄VP</a> はアクリルスタンドいっぱいで楽しい！楽曲はビビデバです！<br>部屋の明るさをメッシュに反映するShaderGraphを作ったので、暗い部屋での違和感は減りました！<br>その場にいたメンバーからも好評で良かった！<a href="https://twitter.com/hashtag/VisionPro?src=hash&amp;ref_src=twsrc%5Etfw">#VisionPro</a> <a href="https://t.co/rHEnF9L6TC">pic.twitter.com/rHEnF9L6TC</a></p>&mdash; segur(せぎゅ)@ARエンジニア (@segur_vita) <a href="https://twitter.com/segur_vita/status/1774107443565609065?ref_src=twsrc%5Etfw">March 30, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


# サンプルコード

今回作ったShaderGraphは以下に公開します。ご参照ください。

- https://gist.github.com/segurvita/4bd17d7769a51035d3ebd9a834a134d1


# OpenUPM

今回作ったShaderは、OpenUPMにも公開してます！
ぜひご活用ください！

https://openupm.com/packages/com.segur.poly-spatial-environment-diffuse-shader/

# さいごに

本記事作成にあたり、以下のページを参考にさせていただきました。ありがとうございました。

- https://docs.unity3d.com/Packages/com.unity.polyspatial.visionos@1.1/manual/PolySpatialLighting.html
- https://qiita.com/from2001vr/items/cdedbecfb91908cef0d7