VisionProで部屋の明るさを反映させるシェーダーを作った話

by segur

Slide 1

Slide 1 text

VisionProで部屋の明るさを反映させるシェーダーを作った話 2024/12/18 せぎゅ

Slide 2

Slide 2 text

STYLY制作部エンジニアマネージャー/STYLY Studio 開発者 VR学会認定上級VR技術者/Unity認定プログラマー LookingGlassハッカソン優勝/Vision Proハワイ購入勢名古屋在住 PROFILE ARエンジニアせぎゅ Segur

Slide 3

Slide 3 text

Apple Vision Proで部屋の明るさをマテリアルに反映させたい！

Slide 4

Slide 4 text

部屋の明るさ？

Slide 5

Slide 5 text

VisionProは部屋の明るさがマテリアルに反映する Litシェーダーを使うと、VisionPro搭載カメラが周囲の明るさを取得し、それがマテリアルの明度に反映されます！

Slide 6

Slide 6 text

例: segurのアバターアバターをVisionProで見たときに、部屋の明るさを反映させたい！

Slide 7

Slide 7 text

VisionProに対応したToonシェーダーがない！元のToonシェーダーこのように描画したい Litシェーダー陶器みたいな見た目で違和感大

Slide 8

Slide 8 text

Unlitシェーダー Unlitシェーダーなら違和感は少ないが…

Slide 9

Slide 9 text

Unlitシェーダー Unlitシェーダーは暗い部屋だと違和感大！

Slide 10

Slide 10 text

部屋の明るさに対応した独自シェーダーを作ろう！

Slide 11

Slide 11 text

PolySpatial Environment Radianceで部屋が映る！ VisonPro搭載カメラが撮影した景色がShaderGraphで取れるぞ！

Slide 12

Slide 12 text

PolySpatial Environment Radianceで明るさが取れる！ VisonPro搭載カメラが取得した部屋の明るさがShaderGraphで取れるぞ！

Slide 13

Slide 13 text

部屋の明るさをマテリアルに反映できた！テクスチャから抽出した色情報に、 Diffuse Radiance の値をかけただけ

Slide 14

Slide 14 text

自作シェーダーなんやかんやで Emissionにも対応！

Slide 15

Slide 15 text

VisionPro実機でも動作しました！

Slide 16

Slide 16 text

せっかくだから VRM形式に正式対応しよう！

Slide 17

Slide 17 text

MToonのパラメーターを自作シェーダーのパラメーターに紐づけたら、 UniVRMがいい感じに変換してくれる〜！

Slide 18

Slide 18 text

完成したShaderはOpenUPMで公開中！ https://openupm.com/packages/com.segur.poly-spatial-environment-diffuse-shader/

Slide 19

Slide 19 text

Shaderを公開したところ…

Slide 20

Slide 20 text

公開した２時間後に社長からバグ報告が…

Slide 21

Slide 21 text

AlphaClipping機能がバグる TransparentやAlphaClipping辺りのパラメーター紐づけに誤りがあったので修正！

Slide 22

Slide 22 text

無事に直りました！

Slide 23

Slide 23 text

地味にダウンロードされてます！ VisionPro開発者が使ってくれてるっぽい