ウーパの手習い

私的開発メモ用途なのでご容赦ください。2020年現在はSwiftとUnityでARのお勉強中。

VRChat SDK: Web Panel が白っぽい場合の対応

f:id:uuupacom:20180405004035p:plain

VRChatのWebPanelって、文字や写真が白っぽく（明度が高すぎる感じで）表示されていませんか？
※Webで同様の症状を検索しても引っかからないので私だけ発生している現象なのかしら？


解決にむけて、Twitter上でヒントをいただきつつ段階的に解決していくことができましたので、そのツイートも引用しつつ、解決方法をまとめておきます。

WebPanelの色味（明度）がおかしいのはブラウザ表示のガンマ値が正しくないのが原因らしく、試しにVRchat上で白っぽくなっているWebPanel画像をスクリーンキャプチャして、Photoshopのレベル補正で、ガンマ値2.2の逆数＝1/2.2＝0.45を適応させると、PCモニタ上の色が再現できます。

だから、Unity上で同じようにガンマ値を再調整（degamma?）するシェーダーを書いて、WebPanelのマテリアルのシェーダーに設定してやれば、期待通りの濃い色合いを再現できそうですよね。

ところが、WebPanelコンポーネント（が割り当てられたQuadオブジェクト）って、VRChat上で強制的にシェーダーがUnlit/Textureに変更されてしまうようで、実際検証してみたらその通りでした。

ではどうすればいいかというと、WebPanelコンポーネントには、Duplicate Materialsという項目があり、ここに別のマテリアルを指定すると、そのマテリアルは、WebPanelのスクリーンと同じ内容を表示するマテリアルになります。
※ディスプレイをミラーリングする感じといえば伝わるでしょうか。

f:id:uuupacom:20180405002712p:plain

そのDuplicateされたマテリアルの方は、カスタムシェーダーを割り当てることができ、Unlitに強制変更されることもありませんので、そのマテリアルにガンマ値を再調整するdegammaシェーダーを指定してやれば良いというわけです。

そのシェーダーについては、私シェーダー初心者なのでデフォルトのシェーダーを小修整して用意しました。
※ソース内コメントにもあるように、詳しく調べずに使った GammaToLinearSpace() 関数が見た目上上手くいったため採用していますが、本当はガンマ値の逆数 1/2.2 を上手く適応させるのが正しいと思います。

github.com

次の課題としては、WebPanel画面（Aとします）はリンクテキストやリンク画像をクリックできますが、Duplicateしたマテリアル（Bとします）はあくまでコピーされた画像なので、クリック等はできません。この課題に対しては、

  • AとBを同じサイズにし、Bをほんの少し前に重ねるように配置する。
  • Bが前面だとクリックできない？→Bのコライダーを消して、後ろのAを触れるようにすれば、Bが前面に表示しながら、後ろのA、つまりWebPanelを操作できる。

という解決法に至りました。この時、通常WebPanel上に表示される「マウスカーソル（白いパーティクルみたいなの）」が見えないのではと心配しましたが、Bをギリギリ前面に配置すれば、マウスカーソルはBよりも前面に表示できています。

 以上で無事対応できました。Twitterにて解決へのご意見をいただいた@naqtn様、@uretaro様、誠にありがとうございました。