回答編集履歴
3
3Dオブジェクトの黒フェード表現案を追記
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枚分割式の配置図を追記
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
用語を修正
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が交差しないように配置すればいけそうに思いますが、不定形のオブジェクトにも対応するにはステンシル方式の方がいいかもしれませんね。
|