回答編集履歴

3

3Dオブジェクトの黒フェード表現案を追記

2019/02/12 20:57

投稿

Bongo
Bongo

スコア10807

test CHANGED
@@ -9,3 +9,195 @@
9
9
 
10
10
 
11
11
  ![4分割方式](b1fcc04b71b93e4c8c982b2eb5eafb1f.gif)
12
+
13
+
14
+
15
+ #追記
16
+
17
+ ご参考までに、サーフェイスシェーダーにステンシル機能を追加して、どうなるか試してみました。後述しますが、Canvasの描画モードがScreen Space - Overlayだとうまくいかないのが難点ですね。
18
+
19
+ 新規サーフェイスシェーダーを作って名前をCustom/StandardStencilとし、下記のようにステンシル用プロパティとステンシルブロックを追加しました。それ以外はデフォルトの状態から変わっていません。
20
+
21
+
22
+
23
+ ```ShaderLab
24
+
25
+ Shader "Custom/StandardStencil"
26
+
27
+ {
28
+
29
+ Properties
30
+
31
+ {
32
+
33
+ _Color ("Color", Color) = (1,1,1,1)
34
+
35
+ _MainTex ("Albedo (RGB)", 2D) = "white" {}
36
+
37
+ _Glossiness ("Smoothness", Range(0,1)) = 0.5
38
+
39
+ _Metallic ("Metallic", Range(0,1)) = 0.0
40
+
41
+
42
+
43
+ // ステンシル用プロパティを追加
44
+
45
+ _StencilComp ("Stencil Comparison", Float) = 8
46
+
47
+ _Stencil ("Stencil ID", Float) = 0
48
+
49
+ _StencilOp ("Stencil Operation", Float) = 0
50
+
51
+ _StencilWriteMask ("Stencil Write Mask", Float) = 255
52
+
53
+ _StencilReadMask ("Stencil Read Mask", Float) = 255
54
+
55
+ }
56
+
57
+ SubShader
58
+
59
+ {
60
+
61
+ Tags { "RenderType"="Opaque" }
62
+
63
+ LOD 200
64
+
65
+
66
+
67
+ // ステンシルブロックを追加
68
+
69
+ Stencil
70
+
71
+ {
72
+
73
+ Ref [_Stencil]
74
+
75
+ Comp [_StencilComp]
76
+
77
+ Pass [_StencilOp]
78
+
79
+ ReadMask [_StencilReadMask]
80
+
81
+ WriteMask [_StencilWriteMask]
82
+
83
+ }
84
+
85
+
86
+
87
+ CGPROGRAM
88
+
89
+ // Physically based Standard lighting model, and enable shadows on all light types
90
+
91
+ #pragma surface surf Standard fullforwardshadows
92
+
93
+
94
+
95
+ // Use shader model 3.0 target, to get nicer looking lighting
96
+
97
+ #pragma target 3.0
98
+
99
+
100
+
101
+ sampler2D _MainTex;
102
+
103
+
104
+
105
+ struct Input
106
+
107
+ {
108
+
109
+ float2 uv_MainTex;
110
+
111
+ };
112
+
113
+
114
+
115
+ half _Glossiness;
116
+
117
+ half _Metallic;
118
+
119
+ fixed4 _Color;
120
+
121
+
122
+
123
+ // Add instancing support for this shader. You need to check 'Enable Instancing' on materials that use the shader.
124
+
125
+ // See https://docs.unity3d.com/Manual/GPUInstancing.html for more information about instancing.
126
+
127
+ // #pragma instancing_options assumeuniformscaling
128
+
129
+ UNITY_INSTANCING_BUFFER_START(Props)
130
+
131
+ // put more per-instance properties here
132
+
133
+ UNITY_INSTANCING_BUFFER_END(Props)
134
+
135
+
136
+
137
+ void surf (Input IN, inout SurfaceOutputStandard o)
138
+
139
+ {
140
+
141
+ // Albedo comes from a texture tinted by color
142
+
143
+ fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
144
+
145
+ o.Albedo = c.rgb;
146
+
147
+ // Metallic and smoothness come from slider variables
148
+
149
+ o.Metallic = _Metallic;
150
+
151
+ o.Smoothness = _Glossiness;
152
+
153
+ o.Alpha = c.a;
154
+
155
+ }
156
+
157
+ ENDCG
158
+
159
+ }
160
+
161
+ FallBack "Diffuse"
162
+
163
+ }
164
+
165
+ ```
166
+
167
+
168
+
169
+ 注目オブジェクト以外を暗くするための黒イメージを2枚用意しました。
170
+
171
+ Canvasの描画モードはScreen Space - Cameraとし、Plane Distanceは1にしてカメラの近くに描画されるようにします。
172
+
173
+ Screen Space - Overlayだと、3Dオブジェクトが描画された後にステンシルバッファがクリアされてしまうため、せっかく3Dオブジェクトがステンシルバッファをいじっても黒イメージが影響を受けなくなってしまうためです。
174
+
175
+
176
+
177
+ Ethanがシーン上の赤玉に触れると黒イメージ1が、青玉に触れると黒イメージ2が現れるようにして、各オブジェクトのステンシル設定を下記のようにすると...
178
+
179
+
180
+
181
+ - Ethan...Custom/StandardStencil
182
+
183
+ Stencil Comparison 8(常にステンシル通過)、Stencil ID 1(リファレンス値1)、Stencil Operation 2(ステンシルバッファにリファレンス値を書き込み)
184
+
185
+ - 赤玉、青玉...Custom/StandardStencil
186
+
187
+ Stencil Comparison 8(常にステンシル通過)、Stencil ID 2(リファレンス値2)、Stencil Operation 2(ステンシルバッファにリファレンス値を書き込み)
188
+
189
+ - 黒イメージ1...UI/Default
190
+
191
+ Stencil Comparison 6(ステンシル値とリファレンス値が不一致ならステンシル通過)、Stencil ID 1(リファレンス値1)、Stencil Operation 0(ステンシルバッファを変更しない)
192
+
193
+ - 黒イメージ2...UI/Default
194
+
195
+ Stencil Comparison 6(ステンシル値とリファレンス値が不一致ならステンシル通過)、Stencil ID 2(リファレンス値2)、Stencil Operation 0(ステンシルバッファを変更しない)
196
+
197
+
198
+
199
+ 下図のように、赤玉に触れるとEthan以外が暗く、青玉に触れると赤玉・青玉以外が暗くなりました。
200
+
201
+
202
+
203
+ ![Ethan](9ece919fa3330711ab8bac1a11c49ad6.gif)

2

4枚分割式の配置図を追記

2019/02/12 20:57

投稿

Bongo
Bongo

スコア10807

test CHANGED
@@ -4,4 +4,8 @@
4
4
 
5
5
  以前どこかのサイトでそんな表現を見かけたなと思い検索してみましたら、[Unity UI:一部分だけ残してフェードアウトさせる - いんでぃーづ](https://indie-du.com/entry/2018/05/22/190000)が出てきました。全面を薄暗いImageで覆い、影響を及ぼしたくない部分だけステンシルを使って抜くというアプローチのようです。
6
6
 
7
- ご質問者さんの案でも4方向のImageが交差しないように配置すればいけそうに思いますが、不定形のオブジェクトにも対応するにはステンシル方式の方がいいかもしれませんね。
7
+ ご質問者さんの案でも、下図のように4方向のImageが交差しないように配置すればいけそうに思いますが、不定形のオブジェクトにも対応するにはステンシル方式の方がいいかもしれませんね。
8
+
9
+
10
+
11
+ ![4分割方式](b1fcc04b71b93e4c8c982b2eb5eafb1f.gif)

1

用語を修正

2019/02/11 22:38

投稿

Bongo
Bongo

スコア10807

test CHANGED
@@ -2,6 +2,6 @@
2
2
 
3
3
 
4
4
 
5
- 以前どこかのサイトでそんな表現を見かけたなと思い検索してみましたら、[Unity UI:一部分だけ残してフェードアウトさせる - いんでぃーづ](https://indie-du.com/entry/2018/05/22/190000)が出てきました。全面を薄暗いパネルで覆い、影響を及ぼしたくない部分だけステンシルを使って抜くというアプローチのようです。
5
+ 以前どこかのサイトでそんな表現を見かけたなと思い検索してみましたら、[Unity UI:一部分だけ残してフェードアウトさせる - いんでぃーづ](https://indie-du.com/entry/2018/05/22/190000)が出てきました。全面を薄暗いImageで覆い、影響を及ぼしたくない部分だけステンシルを使って抜くというアプローチのようです。
6
6
 
7
7
  ご質問者さんの案でも4方向のImageが交差しないように配置すればいけそうに思いますが、不定形のオブジェクトにも対応するにはステンシル方式の方がいいかもしれませんね。