こちらのツイートを見て、Unityでどうやってすりガラスのテクスチャ作るんだろ～と思いました。
#毎日ARデザイン No.02 [可読性を考慮したデザイン]
— 本間悠暉 / MESON (@y__homm) 2020年3月4日
空間上に情報が重畳されることがARの特性であり、その情報が見えづらい状態は避けなければいけません。
周囲の環境や背景も考慮して情報の見え方を考える。
（たとえば同じ半透過でも左のほうが可読性は高い） pic.twitter.com/fww5rGdGlK
Unityでやる場合、背景を取得してシェーダーとかでブラーかけないといけないのでどの方法でも処理が重そう。まあパフォーマンスはいったん無視しよう！
unity-frosted-glass
こちらを使ってみる！
こちらからプロジェクトフォルダごとダウンロードした
デモシーン見てみる。
すりガラスになってる板のシェーダーが特殊。
すりガラスの模様のテクスチャを変えたら模様が変わる。
ForestIntensityですりガラス度も変わる。
カメラにCommandBufferBlur.csがついている。ポストプロセッシングは関係ない。
ちなみにSpriteのままだとブラーかからなかったのでQuadにマテリアルとして張り付けた。
３Dオブジェクトでもちゃんと動くよ。
uGUI
さてUIに適用してみよう！
用意したUIはこんな感じ。
そしてPanelのMaterialにサンプルのマテリアルを適用する。
するとこんな感じ！
文字が・・・
でもおしゃれ～
Imageに設定した色は反映されない。
すりガラスシェーダー
次はこちらのシェーダーをお借りします。
２Dと書いてあるけどCubeにも適用できる！
ブラーの強度変わる！
シェーダーだけで動くので一番手軽。
ちなみにuGUIへ適用すると・・・
ああ
Canvas2つ作る
しょうがないのでCanvasを2つ作り、片方はすりガラスパネル、もう一つは半透明パネル＋テキストみたいにして、位置をずらしました。
そしたらいい感じにできた！
いいね。
AR
こちらのシェーダーでARしました。
ARでも動いた！
Vuforiaでやりました！めっちゃいい！！
PCでやったら元のカメラの解像度が悪くて、ブラーとの違いが分かりにくいかもしれないけどこんな感じ。
uGUI用すりガラスシェーダー
こちらはuGUI用のすりガラスシェーダー。
やはりuGUI用のシェーダーは工夫が必要みたい。
GitHub - edom18/BluredUGUI: Blured uGUI background sample
Githubのプロジェクトを見たほうが良さそう。
game実行したら動く。
ImageにBlurGUIのシェーダーを付けているのと、
SceneBlurEffectというスクリプトにBlurEffectというさっきとは別のシェーダーがついている。
実行したらこれを付けているオブジェクトがカメラの下に行く。
自分のプロジェクトで動かす
自分のシーンでやってみたけど、うまくいかない。
CanvasをOverrayでやってみたけど、実行したらが画角が変になる
エラーが出てる。
Example.uGUI.SceneBlurEffect.OnWillRenderObject () (at Assets/SceneBlurEffect.cs:113)
カメラの取得ができてない
if (cam == UnityEditor.SceneView.lastActiveSceneView.camera)
シーンのアクティブ？？
解決？
実行してからいったんSceneタブに切り替えて、Gameビューに戻ってきたらエラーが消えてブラーもかかった。
毎回シーンをアクティブにしてる・・・
設定
Imageの色のアルファでぼかし具合が変わる。
色も変えられる。
CanvasはWorldモードでも動いた
おまけ：背景固定ならXDでできる
ARとかじゃなくて、背景もUIの位置も固定のすりガラスUIならXDで簡単に作れる。
（固定すぎて使えないかもしれないけど。）
最初のtwitter画像をまねて、透明とすりガラスの比較してみた。
すりガラスっぽくするには背景のぼかしをしたらいい。
量によってボケ具合が変わる。不透明度は左右同じにした。
ぼかしの量や、不透明度の適正値はなんなんだろう・・・？
今回透明度は60~70、ぼかし量は４にした。
おまけ：ARっぽい背景写真
あとARっぽい背景写真を探すために過去に撮った写真を見てたけど、あんまりいいのないな～。普通の日常生活の背景写真なんて取らないからな。今度撮ろう！
昔Photoshopでもやったけど手順多かった。
最後に
4時間ぐらいずっとやってた。
