おもちゃラボ

Unityで遊びを作ってます

【Unity】VuforiaでARの背景にエフェクトをかける

f:id:nn_hokuson:20210830153153p:plain:w600
Vuforiaのカメラ映像にエフェクトをかけたいときの方法を紹介します。エフェクトをかけるための流れは

になります。

ポストエフェクト用のシェーダを作る

Vuforiaで背景映像に対してエフェクトをかけるにはシェーダを使います。こちらで紹介しているポストエフェクト系のシェーダですが作り方は少し違います。

nn-hokuson.hatenablog.com

まずはVuforiaPostEffectという名前のシェーダを作成してください。このシェーダは上の記事と同じように、背景をモノクロにするシェーダです。

Shader "Custom/VuforiaPostEffect" {
    // Used to render the Vuforia Video Background

    Properties
    {
        [NoScaleOffset] _MainTex("Texture", 2D) = "white" {}
        [NoScaleOffset] _UVTex1("UV Texture 1", 2D) = "white" {}
        [NoScaleOffset] _UVTex2("UV Texture 2", 2D) = "white" {}
    }

    SubShader
    {
        Tags {"Queue" = "geometry-11" "RenderType" = "opaque" }
        Pass {
            ZWrite Off
            Cull Off
            Lighting Off

            CGPROGRAM

        //Custom Shaderwords for different texture formats
        #pragma multi_compile VUFORIA_RGB VUFORIA_YUVNV12 VUFORIA_YUVNV21 VUFORIA_YUV420P VUFORIA_YUVYV12

        #pragma vertex vert
        #pragma fragment frag

        #include "UnityCG.cginc"
        #include "../Library/PackageCache/com.ptc.vuforia.engine@66f2f26b3878-1627315709000/Vuforia/Shaders/VuforiaVideoBackground.cginc"

        v2f vert(appdata_base v)
        {
            return vuforiaConvertRGBVert(v);
        }

        half4 frag(v2f i) : COLOR
        {
          //RGBからモノクロ変換
            half4 c = vuforiaConvertRGBFrag(i);
            half gray = c.x * 0.3 + c.y * 0.6 + c.z * 0.1;
            c = half4(gray, gray, gray, 1);

#ifdef UNITY_COLORSPACE_GAMMA
            return c;
#else
            return half4(GammaToLinearSpace(c.rgb), c.a);
#endif	
        }

        ENDCG
    }
    }
    Fallback "Legacy Shaders/Diffuse"
}

フラグメントシェーダの中で、vuforiaConvertRGBFragメソッドを使ってピクセルの色をとりだし、それをモノクロに変換して出力しています。

なお、vuforiaConvertRGBVertやvuforiaConvertRGBFragメソッドはVuforiaVideoBackground.cgincで定義されているメソッドなので、28行目でインクルードしています。

ARCameraにシェーダを設定する

VuforiaのAR Cameraにはポストエフェクト用のシェーダを設定するためのスロットが用意されています。そこに今作ったシェーダを設定します。

ヒエラルキーウインドウでAR Cameraを選択して、インスペクタの「Open Vuforia Engine Configuration」ボタンをクリックしてください。

f:id:nn_hokuson:20210829064413p:plain:w600

次にインスペクタから「Video Background Shader」の欄を探して、そこに作成したVuforiaPostEffectシェーダをドラッグ&ドロップします。これでVuforiaの背景映像にポストエフェクトをかけることができます。

f:id:nn_hokuson:20210829065302p:plain:w250

確認とまとめ

シェーダの設定ができたら実行してみましょう。次のように背景映像がモノクロになっていれば成功です!

f:id:nn_hokuson:20210830153153p:plain:w400

また、今回作ったシェーダはあくまでも背景映像用のシェーダなので、ARで表示するオブジェクトに対してはエフェクトがかからないことに注意してください!もし、ARオブジェクトも含めてトータルでエフェクトをかけたい場合は、これまでどおり通常のポストエフェクトを使用します。

nn-hokuson.hatenablog.com

Vuforiaの背景映像にエフェクトをかける方法を紹介しました。シェーダを使っているので、色の変更だけでなくアニメーションに対応したエフェクトや、画面のズームアップなど、さまざまな効果を追加することができます。ぜひ試してみてくださいね!