質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

特定のオブジェクトを目立たせる演出の実装

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 311

SeiSeis

score 9

現在スマートフォンのアクションゲームで、プレイヤーに画面上にある特定のオブジェクトがタッチできることを知らせるようなエフェクトを実装したいと考えています。

エフェクトの方針としては、↓画像のようなタッチできる特定のオブジェクトの後ろにパーティクルを発生させる、というものを考えています。
イメージ説明

3Dのパーティクルを実際のシーンに置くにあたり、ここで問題が起こります。
例えば後ろに壁等がある場合、壁にエフェクト対象オブジェクトが密着していた場合、↓画像のようにパーティクルがめり込んでしまいます。
イメージ説明

そこで、パーティクルとエフェクト対象オブジェクトのレイヤーを変更し、それのみを移すカメラを用意して実装しようと考えたのですが、そうするとどんな状況でも壁を貫通してしまい、画面上で不自然に描画されてしまいます。
イメージ説明
イメージ説明

実装したいイメージとしては、ゲームでよくあるゲームオブジェクトのアウトラインUIがパーティクルで表現されているようなイメージなのですが、このような「特定のオブジェクトの前だけ描画されないエフェクト」を作成するには、どのような方法があるでしょうか?
イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • sakura_hana

    2020/07/19 13:15

    恐らくそのスクショの元記事が以下だと思うのですが、これでは上手くいかなかったということですか?
    https://light11.hatenadiary.com/entry/2018/05/08/215519

    キャンセル

  • SeiSeis

    2020/07/19 14:03

    ありがとうございます。
    そちらも確認したのですが、取得したデプステクスチャに新たにパーティクルを描画することができるのでしょうか?
    また、この方法では4枚目画像のようにどこから見ても対象オブジェクト+エフェクトが描画されてしまうのではないでしょうか?

    キャンセル

  • sakura_hana

    2020/07/19 14:47

    シェーダーではなくパーティクル必須ということですか?(「エフェクト」だとその辺の区別が付かないので条件があるなら質問文に記載した方がよいかと思います)
    私はそこまで詳しくないので、「unity outline shader」などで合わせて検索すると参考になるかもしれません。(何を調べて試したかを記載すると回答する方の二度手間にならないと思います)

    キャンセル

  • SeiSeis

    2020/07/19 15:15

    今回はパーティクルで表現したいと思っています。
    分かりました。自分でももっと調べてみます。
    ありがとうございます。

    キャンセル

回答 2

checkベストアンサー

+1

パーティクルやオブジェクトのマテリアルに変更を加えてもかまわなければ、それらにステンシルの設定を追加することで何とかならないでしょうか?
bboydaisukeさんの案のようにパーティクルをモデルの全身から放射させるようにした上で、モデル側の描画時にはステンシルバッファに何らかの値を書き込み、パーティクル側の描画時にはステンシルバッファ上の値が書き換えられていないピクセルだけに描画を行うことにすれば、モデルの前面にかぶらせずにパーティクルを描画できるんじゃないかと思います。

たとえば下記のようにパーティクル側、モデル側の双方にステンシル設定を調整できるように改修を加え(いずれもメイン部分には手を加えておらず、単にプロパティとStencilブロックを追加しただけです)...

// Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt)

Shader "Particles/Alpha Blended Premultiply (Stencil)" {
    Properties {
        _MainTex ("Particle Texture", 2D) = "white" {}
        _InvFade ("Soft Particles Factor", Range(0.01,3.0)) = 1.0

        // ステンシル用プロパティを追加
        _StencilComp ("Stencil Comparison", Float) = 8
        _Stencil ("Stencil ID", Float) = 0
        _StencilOp ("Stencil Operation", Float) = 0
        _StencilWriteMask ("Stencil Write Mask", Float) = 255
        _StencilReadMask ("Stencil Read Mask", Float) = 255

        // _StencilCompはUnityEngine.Rendering.CompareFunctionの値をとる
        // 0: Disabled
        // 1: Never
        // 2: Less
        // 3: Equal
        // 4: LessEqual
        // 5: Greater
        // 6: NotEqual
        // 7: GreaterEqual
        // 8: Always

        // _StencilOpはUnityEngine.Rendering.StencilOpの値をとる
        // 0: Keep
        // 1: Zero
        // 2: Replace
        // 3: IncrementSaturate
        // 4: DecrementSaturate
        // 5: Invert
        // 6: IncrementWrap
        // 7: DecrementWrap
    }

    Category {
        Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" "PreviewType"="Plane" }
        Blend One OneMinusSrcAlpha
        ColorMask RGB
        Cull Off Lighting Off ZWrite Off

        // ステンシル設定を追加
        Stencil
        {
            Ref [_Stencil]
            Comp [_StencilComp]
            Pass [_StencilOp]
            ReadMask [_StencilReadMask]
            WriteMask [_StencilWriteMask]
        }

        SubShader {
            Pass {

                CGPROGRAM
                #pragma vertex vert
                #pragma fragment frag
                #pragma target 2.0
                #pragma multi_compile_particles

                #include "UnityCG.cginc"

                sampler2D _MainTex;
                fixed4 _TintColor;

                struct appdata_t {
                    float4 vertex : POSITION;
                    fixed4 color : COLOR;
                    float2 texcoord : TEXCOORD0;
                    UNITY_VERTEX_INPUT_INSTANCE_ID
                };

                struct v2f {
                    float4 vertex : SV_POSITION;
                    fixed4 color : COLOR;
                    float2 texcoord : TEXCOORD0;
                    #ifdef SOFTPARTICLES_ON
                        float4 projPos : TEXCOORD1;
                    #endif
                    UNITY_VERTEX_OUTPUT_STEREO
                };

                float4 _MainTex_ST;

                v2f vert (appdata_t v)
                {
                    v2f o;
                    UNITY_SETUP_INSTANCE_ID(v);
                    UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(o);
                    o.vertex = UnityObjectToClipPos(v.vertex);
                    #ifdef SOFTPARTICLES_ON
                        o.projPos = ComputeScreenPos (o.vertex);
                        COMPUTE_EYEDEPTH(o.projPos.z);
                    #endif
                    o.color = v.color;
                    o.texcoord = TRANSFORM_TEX(v.texcoord,_MainTex);
                    return o;
                }

                UNITY_DECLARE_DEPTH_TEXTURE(_CameraDepthTexture);
                float _InvFade;

                fixed4 frag (v2f i) : SV_Target
                {
                    #ifdef SOFTPARTICLES_ON
                        float sceneZ = LinearEyeDepth (SAMPLE_DEPTH_TEXTURE_PROJ(_CameraDepthTexture, UNITY_PROJ_COORD(i.projPos)));
                        float partZ = i.projPos.z;
                        float fade = saturate (_InvFade * (sceneZ-partZ));
                        i.color.a *= fade;
                    #endif

                    return i.color * tex2D(_MainTex, i.texcoord) * i.color.a;
                }
                ENDCG
            }
        }
    }
}
Shader "Custom/Standard Surface Shader (Stencil)"
{
    Properties
    {
        _Color ("Color", Color) = (1,1,1,1)
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
        _Glossiness ("Smoothness", Range(0,1)) = 0.5
        _Metallic ("Metallic", Range(0,1)) = 0.0

        // ステンシル用プロパティを追加
        _StencilComp ("Stencil Comparison", Float) = 8
        _Stencil ("Stencil ID", Float) = 0
        _StencilOp ("Stencil Operation", Float) = 0
        _StencilWriteMask ("Stencil Write Mask", Float) = 255
        _StencilReadMask ("Stencil Read Mask", Float) = 255
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }

        // ステンシル設定を追加
        Stencil
        {
            Ref [_Stencil]
            Comp [_StencilComp]
            Pass [_StencilOp]
            ReadMask [_StencilReadMask]
            WriteMask [_StencilWriteMask]
        }

        LOD 200

        CGPROGRAM
        // Physically based Standard lighting model, and enable shadows on all light types
        #pragma surface surf Standard fullforwardshadows

        // Use shader model 3.0 target, to get nicer looking lighting
        #pragma target 3.0

        sampler2D _MainTex;

        struct Input
        {
            float2 uv_MainTex;
        };

        half _Glossiness;
        half _Metallic;
        fixed4 _Color;

        // Add instancing support for this shader. You need to check 'Enable Instancing' on materials that use the shader.
        // See https://docs.unity3d.com/Manual/GPUInstancing.html for more information about instancing.
        // #pragma instancing_options assumeuniformscaling
        UNITY_INSTANCING_BUFFER_START(Props)
            // put more per-instance properties here
        UNITY_INSTANCING_BUFFER_END(Props)

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            // Albedo comes from a texture tinted by color
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
            o.Albedo = c.rgb;
            // Metallic and smoothness come from slider variables
            o.Metallic = _Metallic;
            o.Smoothness = _Glossiness;
            o.Alpha = c.a;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

モデル側はステンシルバッファの下1桁に1を書き込み...

図1

パーティクル側はステンシルバッファの下1桁が1でない場合だけ描画することにすれば...

図2

下図のような見え方になりました。

図3

※ちなみに、上から見たときにティーポットの注ぎ口やフタの縁の隙間からパーティクルや背景が見えてしまっているのは、モデルの作りのせいです...
これは単純に注ぎ口の内面やフタと本体の隙間に面が作られていないためなのです。メッシュ表面に破れがないモデルならば、どの方角から見ても大丈夫だろうと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/19 21:19

    ご提示していただいた通りに実践してみたところ、まさに思っていた通りの挙動になりました!
    ただ見よう見まねでただ実装しただけでそれぞれの設定の意味が分かっていないので、ステンシルバッファについても詳しく調べてみようと思います。
    ありがとうございました!

    キャンセル

0

こんな感じでしょうか。

イメージ説明

設定のポイントとしては以下の通りです。

Shape モジュール
Shape: Mesh Renderer
Mesh: 自分自身のメッシュ
Type: Triangle

Collision モジュール
Type: World
Collide With: 自分の Layer には当たらず、相手(板)のレイヤーに当たるようにする

後は適当です。Shape モジュールにより「メッシュの表面から湧き出るような効果」を与え、Collision モジュールにより衝突判定をしています。

設定については「どのモジュールにどんな機能があり、各パラメータを操作すると何が起きるのか」といったことを一通り学ぶとよいでしょう。『Unity ゲームエフェクト入門』にそのあたりの事がステップバイステップで載ってます。
あとは Particle にテクスチャを使ったり重ねたりする事でさらに細かい表現ができます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/19 11:10

    ご回答ありがとうございます。
    『Unity ゲームエフェクト入門』を持っておらずどのようなことが載っているか正確に分からないので、回答者様の真意をくみ取れていないかもしれないですが推測でお返事します。
    今回私が質問させていただいているのは「SIRENのようなエフェクトのつくり方」ではなく、「特定のオブジェクトの後ろに常に描画されるが、他のオブジェクトは貫通して描写される方法」についてです。
    貼っていただいた画像を見る限りではオブジェクトの周り全体をエフェクトが覆っているようですが、私の投稿した最初の画像のようにアウトラインのような役割を果たす描画の実装の仕方が知りたいので、今回の質問の意図とは少し離れていると思われます。ご親切に回答していただいたのに申し訳ありません。
    しかしゲームエフェクトについてもまだまだ知ることが多いので、おすすめいただいた『Unity ゲームエフェクト入門』についても調べてみようと思います。
    ありがとうございます。

    キャンセル

  • 2020/07/19 17:20

    質問の最後に貼ってある画像を見ましたが、こういうやつですか?
    https://www.youtube.com/results?search_query=outline+shader+unity

    これはパーティクルじゃないです。Outline Shader です。自分でいろいろ制御したいなら Shader Graph を作って自作しますが、それは公式に動画がいくつか https://www.youtube.com/c/Unity3DJapan/search?query=shader 上がっているのでそれを見るとよいでしょう。

    キャンセル

  • 2020/07/19 18:39

    一番下の画像は、アウトラインの役割であることをイメージしてもらうための参考画像です。
    実際はこのアウトラインを単純な線としてではなくパーティクルの形状に表示したいです。
    なるほど、シェーダーグラフですね。そちらも調べてみようと思います。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る