Assets Portal cards in Unity

So, I was watching this awesome GDC talk by Matt Nava, where he explained the challenges Giant Squid had to overcome when creating their beautiful game Abzú. What really caught my attention was the use of portal cards in the most variable ways. Here is how I created portal cards for my game in Unity.

You can watch the reference tutorial here:

Here is the code for my portal card shader:

Code (CSharp):

1. Shader "Gloria/PortalCard" {
2. Properties
3. {
4. _Color ("_Color", Color) = (0.5,0.5,0.5,0.5)
5. _Depth ("Depth Fade Distance", Range(0.01,100.0)) = 1.0
6. _FadeLength("Fade Length", Float) = 1.0
7. }
8.  
9. SubShader
10. {
11. Tags{"Queue" = "Transparent" "IgnoreProjector" = "True" "RenderType" = "Transparent"}
12. LOD 200
13. Blend SrcAlpha OneMinusSrcAlpha
14. Lighting Off ZWrite Off
15.  
16. Pass
17. {
18. CGPROGRAM
19. #pragma vertex vert
20. #pragma fragment frag
21. #pragma multi_compile_fog;
22. #pragma target 3.0
23.  
24. #include "UnityCG.cginc"
25.  
26. fixed4 _Color;
27. float _Depth;
28. float _FadeLength;
29. sampler2D _CameraDepthTexture;
30. float4 _CameraDepthTexture_ST;
31.  
32. struct appdata{
33. float4 vertex : POSITION;
34. float2 texcoord : TEXCOORD0;
35. };
36.  
37. struct v2f{
38. float2 uv : TEXCOORD0;
39. float3 dist :TEXCOORD3;
40. float4 projPos : TEXCOORD2;
41. UNITY_FOG_COORDS(1)
42. float4 vertex : SV_POSITION;
43. };
44.  
45. v2f vert (appdata i){
46. v2f o;
47. o.vertex = UnityObjectToClipPos(i.vertex);
48. o.uv = i.texcoord;
49. UNITY_TRANSFER_FOG(o,o.vertex);
50. o.dist = UnityObjectToViewPos(i.vertex);
51.  
52. o.projPos = ComputeScreenPos(o.vertex);
53. UNITY_TRANSFER_DEPTH(o.projPos);
54.  
55. return o;
56. }
57.  
58. fixed4 frag(v2f i) : SV_TARGET
59. {
60. fixed4 col = _Color;
61.  
62. float sceneZ = LinearEyeDepth (SAMPLE_DEPTH_TEXTURE_PROJ(_CameraDepthTexture, UNITY_PROJ_COORD(i.projPos)));
63. float partZ = i.projPos.z + length(i.dist);
64. float fade = saturate((sceneZ-partZ) / _Depth);
65. col.a = saturate((fade * length(i.dist)) / _FadeLength);
66. UNITY_APPLY_FOG(i.fogCoord, col);
67. return col;
68. }
69.  
70. ENDCG
71. }
72. }
73. FallBack "Diffuse"
74. }

Remember: In order for the following effect to work on forward rendering path, you need to add the following line of code to any script.

Code (CSharp):

1. //cam is the Camera class reference.
2. Camera cam = GetComponent<Camera>();
3. cam.depthTextureMode = DepthTextureMode.Depth;

Feel free to use it and edit in your project as you please!

 

Very nice shader. I played around with it and it seems to be working fine in forward rendering mode even without code. Maybe because Unity updated something. One thing you might want to add is ability to work with textures, and maybe a "fade in" distance where it starts out completely invisible until getting to a certain distance where starts to fade in.

*bump* this should get more attention : )

 

Thanks for sharing this. This will be really useful!

 

I actually designed this shader to work specifically with my game, and funny enough, I ended up needing to add an extra texture field for some situations. haha.

What I posted here is just the backbone of the shader, so you don't have to reinvent the wheel, and it was a nice practice for someone who is just now learning how to create shaders. Again, you guys can mess around with it as much as you like, no questions asked.

 

Can you share the code for the version with the texture field? Thanks.

 

Sure thing. Here you go:

Code (CSharp):

1. Shader "Gloria/PortalCard" {
2.     Properties
3.     {
4.         _Color ("Color", Color) = (0.5,0.5,0.5,0.5)
5.         _MainTex ("Texture (RGBA)", 2D) = "white" {}
6.         _Depth ("Depth Fade Distance", Range(0.01,100.0)) = 1.0
7.         _FadeLength("Fade Length", Float) = 10.0
8.     }
9.  
10.     SubShader
11.     {
12.         Tags{"Queue" = "Transparent" "IgnoreProjector" = "True" "RenderType" = "Transparent"}
13.         LOD 200
14.         Blend SrcAlpha OneMinusSrcAlpha
15.         Lighting Off ZWrite Off
16.  
17.         Pass
18.         {
19.             CGPROGRAM
20.             #pragma vertex vert
21.             #pragma fragment frag
22.             #pragma multi_compile_fog;
23.             #pragma target 3.0
24.  
25.             #include "UnityCG.cginc"
26.  
27.             fixed4 _Color;
28.             float _Depth;
29.             float _FadeLength;
30.             sampler2D _MainTex;
31.             float4 _MainTex_ST;
32.             sampler2D _CameraDepthTexture;
33.             float4 _CameraDepthTexture_ST;
34.  
35.             struct appdata{
36.                 float4 vertex : POSITION;
37.                 float2 texcoord : TEXCOORD0;
38.             };
39.  
40.             struct v2f{
41.                 float2 uv : TEXCOORD0;
42.                 float3 dist :TEXCOORD3;
43.                 float4 projPos : TEXCOORD2;
44.                 UNITY_FOG_COORDS(1)
45.                 float4 vertex : SV_POSITION;
46.             };
47.  
48.             v2f vert (appdata i){
49.                 v2f o;
50.                 o.vertex = UnityObjectToClipPos(i.vertex);
51.                 o.uv = i.texcoord;
52.                 UNITY_TRANSFER_FOG(o,o.vertex);
53.                 o.dist = UnityObjectToViewPos(i.vertex);
54.  
55.                 o.projPos = ComputeScreenPos(o.vertex);
56.                 UNITY_TRANSFER_DEPTH(o.projPos);
57.  
58.                 return o;
59.             }
60.  
61.             fixed4 frag(v2f i) : SV_TARGET
62.             {
63.                 fixed4 col = _Color * tex2D(_MainTex, i.uv);
64.                 float sceneZ = LinearEyeDepth (SAMPLE_DEPTH_TEXTURE_PROJ(_CameraDepthTexture, UNITY_PROJ_COORD(i.projPos)));
65.                 float depthFactor = (sceneZ - length(i.dist)) / _Depth;
66.                 float distFactor = length(i.dist)/_FadeLength;
67.  
68.                 col.a *= saturate(distFactor * depthFactor);
69.                                
70.                 UNITY_APPLY_FOG(i.fogCoord, col);
71.                 return col;
72.                
73.             }
74.  
75.             ENDCG
76.         }
77.  
78.     }
79.     FallBack "Diffuse"
80. }
81.  

 

this is brilliant! Did not want to try to make this myself, would have been a mess.
Thanks!

Edit: just checked if usable in HDRP and it seems not. Can someone point me in the right direction regarding conversion? I have not had much success finding anything specifically.
Thanks

 

Sorry, D-Coy, I don't think I can help you there. I'm just scratching the surface of shader programming here, and HDRP is a topic way beyond my skill right now. If I manage to somehow make it work with HDRP, I'll gladly post the updated shader here.

 

Thanks for the reply. Yeah, a bit of a 'can of worms' question. I think Ill deal with is once HDRP is a little more solid and better documented. Cheers!