トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

【Hololens】視界の端をぼかして境目を目立たせない【PostProcessing】

画面の端を黒でぼかすと、ARGlassでは透明になるので、画面の端が突然終わるのが気にならなくなるそうです。

f:id:bibinbaleo:20200205144944p:plain

ARグラスで 魅力的な絵作り より

www.slideshare.net

それをやる!

今まだ実機でうまくいっていません><

マルチパスにしたらできました!

いい感じ!オブジェクトが視界端に来た時に違和感が少ない気がする!

追記:マルチパスにする

XRSettingsでStereoRenderingModeをMulti PassにするとポストエフェクトがHololensでも正常に動くそうです。

f:id:bibinbaleo:20200206092632p:plain

tips.hecomi.com

PostProcessingV2

PostProcessingV2でやってみる。MainCameraにつける

bibinbaleo.hatenablog.com

Vignetteでできた。

f:id:bibinbaleo:20200205152106p:plain

 いい感じ!

f:id:bibinbaleo:20200205152840p:plain

でもビルドしたら変な表示になっちゃった。VRでカメラの2眼設定ミスったみたいな、立体視できてない感じ。

HololensでPostPrcessing使えないのかな

 

シェーダー

シェーダーでPostProcessingやる?

スライドには、下のスクリプトでできるって書いてあるけど、これが何なのかよくわからなかった。

f:id:bibinbaleo:20200205145133p:plain

ググったらシェーダーっぽい。でもシェーダーをどこにつけるんだろう??

PostProcessingアセットを使わなくても、シェーダーとスクリプトで自前のPostエフェクトをかけれるそうです!

nn-hokuson.hatenablog.com

qiita.com

シェーダーを作る

f:id:bibinbaleo:20200205161702p:plain

ImageEffectShaderを選んだら、もともとカラー反転のシェーダーになっている。

f:id:bibinbaleo:20200205192045p:plain

これのfragの中身などを変えていきます。

f:id:bibinbaleo:20200205145133p:plain

書き起こし

fixed4 col = tex2D(_MainTex, i.uv);
float2 uv = abs(i.uv * 2.0 - 1.0);
float2 u = _Width / _ScreenParams.xy * 0.5;
u = smoothstep(0, u, 1.0 - uv);
col = col * u.x * u.y;
return col;

_ScreenParams

qiita.com

smoothstep

nn-hokuson.hatenablog.com

このままだと_Widthがないと怒られます。自分で定義しないといけないようです。

上のPropertiesと

 Properties Properties {

_MainTex("Texture", 2D) = "white" {}

_Width("Width", Range(0, 500)) = 100

}

fragの上に

float _Width;

とします。

Widthはスクリーンの幅?なので200ぐらいがUnityエディタ上ではちょうどよかった。

こんな感じ。

最初のShader"Hidden/Test"のHiddenのところは別のに変えないと見えないらしい。

Shader "PostEffect/Test"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
			_Width("Width", Range(0, 500)) = 100
    }
    SubShader
    {
        // No culling or depth
        Cull Off ZWrite Off ZTest Always

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }

            sampler2D _MainTex;
			float _Width; 

            fixed4 frag (v2f i) : SV_Target
            {
                //fixed4 col = tex2D(_MainTex, i.uv);
                //// just invert the colors
                //col.rgb = 1 - col.rgb;
                //return col;

					fixed4 col = tex2D(_MainTex, i.uv);
					float2 uv = abs(i.uv*2.0 - 1.0);
					float2 u = _Width / _ScreenParams.xy * 0.5;
					u = smoothstep(0, u, 1.0 - uv);
					col = col * u.x*u.y;
					return col;

            }
            ENDCG
        }
    }
}

シェーダーができたら、適当に作ったマテリアルにセットする

f:id:bibinbaleo:20200205165728p:plain

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

ちなみにシェーダーのエラーはシェーダーのインスペクタに出ます

f:id:bibinbaleo:20200205164012p:plain

あとこれも余談ですが、「//追記」って日本語コメントアウトを書いたら上のエラーが出ました。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

スクリプト

C#スクリプトを作る

[ExecuteInEditMode]
public
class CameraFilter : MonoBehaviour { [SerializeField] private Material filter; void OnRenderImage(RenderTexture src, RenderTexture dest) { Graphics.Blit(src, dest, filter); } }

[ExecuteInEditMode]を付けると実行しなくても見れる。

OnRenderImageはカメラへの処理

logicalbeat.jp

これをカメラにつける。さっきのマテリアルも適用する。

f:id:bibinbaleo:20200205161646p:plain

 これで(Unityエディタ上では)できました!

f:id:bibinbaleo:20200205164017p:plain

だが、Hololensに入れるとPostProcessingと同じようにすごい変になった。

何ならHololens純正のホームボタンとかまで粗ぶって、壊しちゃったかと思った><

Fast Vignette

ビネットのアセットがたまたま無料になってた。今は有料かも

assetstore.unity.com

中身は上のスクリプトシェーダーとほぼ同じ仕組みだった。

丸くてぼわーっとしてる。

f:id:bibinbaleo:20200206134831p:plain

視野角

対角線の視野角

Hololens2:52°
Hololens1:34°

www.dospara.co.jp

この対角線の視野角がUnityのField of Viewなのかな?

f:id:bibinbaleo:20200206115104p:plain

と思ったら少し違うみたい

bluebirdofoz.hatenablog.com

16.82とかそれぐらいだって。

Unityのデフォルトは60だから、16.82にしたらだいぶ近くなった!

f:id:bibinbaleo:20200206115220p:plain

↑60 16.82↓

f:id:bibinbaleo:20200206120435p:plain

せっま
Hololens2はどれくらいなんだろう?

縦横比の視野角

Hololens2:43*29°
Hololens1:30*17.5°

f:id:bibinbaleo:20200127120231p:plain

【体験レポ】HoloLens 2は"正統進化"だ——性能は大幅強化、操作性は驚くほど自然に | Mogura VR

この縦横比は気にしたほうがいいのかな?

とりあえずGameViewに設定してみたけど、そういう問題じゃない気もする。

f:id:bibinbaleo:20200206115548p:plain

 

UIの色

UIの文字の色はいろいろ見てきた感じ、基本的に白。

でも背景色なくて白だけでいいのかな?

背景あったほうがいいのか?

でもそれってARグラスに限らずスマホのARアプリとかでも同じか。

このまとめが生きるときが来た!

bibinbaleo.hatenablog.com

基本的に白いUIに薄くグレーのシャドーを落としている例が多かった。

真っ白な背景で見たときだけわかるぐらい薄い。