Need some help writing a simple scanlines shader:

Hey everyone. I currently have a scanlines shader setup that I am using in my game. However, it doesn't look quite right. It looks like the middle one in the pic below, and what I really want is for it to look like the image on the right:



Now on the same page of that image the author included some code, however as I am very green at shaders I could not figure out how to adapt it to work in Unity. Can someone please assist with this?

Code (csharp):

1.  
2. //
3. // PUBLIC DOMAIN CRT STYLED SCAN-LINE SHADER
4. //
5. //   by Timothy Lottes
6. //
7. // This is more along the style of a really good CGA arcade monitor.
8. // With RGB inputs instead of NTSC.
9. // The shadow mask example has the mask rotated 90 degrees for less chromatic aberration.
10. //
11. // Left it unoptimized to show the theory behind the algorithm.
12. //
13. // It is an example what I personally would want as a display option for pixel art games.
14. // Please take and use, change, or whatever.
15. //
16.  
17. // Emulated input resolution.
18. #if 0
19.   // Fix resolution to set amount.
20.   vec2 res=vec2(320.0/1.0,160.0/1.0);
21. #else
22.   // Optimize for resize.
23.   vec2 res=iResolution.xy/6.0;
24. #endif
25.  
26. // Hardness of scanline.
27. //  -8.0 = soft
28. // -16.0 = medium
29. float hardScan=-8.0;
30.  
31. // Hardness of pixels in scanline.
32. // -2.0 = soft
33. // -4.0 = hard
34. float hardPix=-3.0;
35.  
36. // Display warp.
37. // 0.0 = none
38. // 1.0/8.0 = extreme
39. vec2 warp=vec2(1.0/32.0,1.0/24.0);
40.  
41. // Amount of shadow mask.
42. float maskDark=0.5;
43. float maskLight=1.5;
44.  
45. //------------------------------------------------------------------------
46.  
47. // sRGB to Linear.
48. // Assuing using sRGB typed textures this should not be needed.
49. float ToLinear1(float c){return(c<=0.04045)?c/12.92:pow((c+0.055)/1.055,2.4);}
50. vec3 ToLinear(vec3 c){return vec3(ToLinear1(c.r),ToLinear1(c.g),ToLinear1(c.b));}
51.  
52. // Linear to sRGB.
53. // Assuing using sRGB typed textures this should not be needed.
54. float ToSrgb1(float c){return(c<0.0031308?c*12.92:1.055*pow(c,0.41666)-0.055);}
55. vec3 ToSrgb(vec3 c){return vec3(ToSrgb1(c.r),ToSrgb1(c.g),ToSrgb1(c.b));}
56.  
57. // Nearest emulated sample given floating point position and texel offset.
58. // Also zero's off screen.
59. vec3 Fetch(vec2 pos,vec2 off){
60.   pos=floor(pos*res+off)/res;
61.   if(max(abs(pos.x-0.5),abs(pos.y-0.5))>0.5)return vec3(0.0,0.0,0.0);
62.   return ToLinear(texture2D(iChannel0,pos.xy,-16.0).rgb);}
63.  
64. // Distance in emulated pixels to nearest texel.
65. vec2 Dist(vec2 pos){pos=pos*res;return -((pos-floor(pos))-vec2(0.5));}
66.    
67. // 1D Gaussian.
68. float Gaus(float pos,float scale){return exp2(scale*pos*pos);}
69.  
70. // 3-tap Gaussian filter along horz line.
71. vec3 Horz3(vec2 pos,float off){
72.   vec3 b=Fetch(pos,vec2(-1.0,off));
73.   vec3 c=Fetch(pos,vec2( 0.0,off));
74.   vec3 d=Fetch(pos,vec2( 1.0,off));
75.   float dst=Dist(pos).x;
76.   // Convert distance to weight.
77.   float scale=hardPix;
78.   float wb=Gaus(dst-1.0,scale);
79.   float wc=Gaus(dst+0.0,scale);
80.   float wd=Gaus(dst+1.0,scale);
81.   // Return filtered sample.
82.   return (b*wb+c*wc+d*wd)/(wb+wc+wd);}
83.  
84. // 5-tap Gaussian filter along horz line.
85. vec3 Horz5(vec2 pos,float off){
86.   vec3 a=Fetch(pos,vec2(-2.0,off));
87.   vec3 b=Fetch(pos,vec2(-1.0,off));
88.   vec3 c=Fetch(pos,vec2( 0.0,off));
89.   vec3 d=Fetch(pos,vec2( 1.0,off));
90.   vec3 e=Fetch(pos,vec2( 2.0,off));
91.   float dst=Dist(pos).x;
92.   // Convert distance to weight.
93.   float scale=hardPix;
94.   float wa=Gaus(dst-2.0,scale);
95.   float wb=Gaus(dst-1.0,scale);
96.   float wc=Gaus(dst+0.0,scale);
97.   float wd=Gaus(dst+1.0,scale);
98.   float we=Gaus(dst+2.0,scale);
99.   // Return filtered sample.
100.   return (a*wa+b*wb+c*wc+d*wd+e*we)/(wa+wb+wc+wd+we);}
101.  
102. // Return scanline weight.
103. float Scan(vec2 pos,float off){
104.   float dst=Dist(pos).y;
105.   return Gaus(dst+off,hardScan);}
106.  
107. // Allow nearest three lines to effect pixel.
108. vec3 Tri(vec2 pos){
109.   vec3 a=Horz3(pos,-1.0);
110.   vec3 b=Horz5(pos, 0.0);
111.   vec3 c=Horz3(pos, 1.0);
112.   float wa=Scan(pos,-1.0);
113.   float wb=Scan(pos, 0.0);
114.   float wc=Scan(pos, 1.0);
115.   return a*wa+b*wb+c*wc;}
116.  
117. // Distortion of scanlines, and end of screen alpha.
118. vec2 Warp(vec2 pos){
119.   pos=pos*2.0-1.0;    
120.   pos*=vec2(1.0+(pos.y*pos.y)*warp.x,1.0+(pos.x*pos.x)*warp.y);
121.   return pos*0.5+0.5;}
122.  
123. // Shadow mask.
124. vec3 Mask(vec2 pos){
125.   pos.x+=pos.y*3.0;
126.   vec3 mask=vec3(maskDark,maskDark,maskDark);
127.   pos.x=fract(pos.x/6.0);
128.   if(pos.x<0.333)mask.r=maskLight;
129.   else if(pos.x<0.666)mask.g=maskLight;
130.   else mask.b=maskLight;
131.   return mask;}    
132.  
133. // Draw dividing bars.
134. float Bar(float pos,float bar){pos-=bar;return pos*pos<4.0?0.0:1.0;}
135.  
136. // Entry.
137. void mainImage( out vec4 fragColor, in vec2 fragCoord ){
138.   // Unmodified.
139.   if(fragCoord.x<iResolution.x*0.333){
140.     fragColor.rgb=Fetch(fragCoord.xy/iResolution.xy+vec2(0.333,0.0),vec2(0.0,0.0));}
141.   else{
142.     vec2 pos=Warp(fragCoord.xy/iResolution.xy+vec2(-0.333,0.0));
143.     if(fragCoord.x<iResolution.x*0.666){
144.       hardScan=-12.0;
145.       maskDark=maskLight=1.0;
146.       pos=Warp(fragCoord.xy/iResolution.xy);}
147.     fragColor.rgb=Tri(pos)*Mask(fragCoord.xy);}    
148.   fragColor.a=1.0;  
149.   fragColor.rgb*=
150.     Bar(fragCoord.x,iResolution.x*0.333)*
151.     Bar(fragCoord.x,iResolution.x*0.666);
152.   fragColor.rgb=ToSrgb(fragColor.rgb);}
153.  

 

Also here is the current scanlines shader that I am using to achieve the effect of the image in the middle above:

Code (csharp):

1.  
2. Shader "SOTN Custom/Scanlines" {
3. Properties {
4.     _Color("Color", Color) = (0,0,0,1)
5.     _LinesSize("LinesSize", Range(1,10)) = 1
6. }
7. SubShader {
8.     Tags {"IgnoreProjector" = "True" "Queue" = "Overlay"}
9.     Fog { Mode Off }
10.     Pass {
11.         ZTest Always
12.         ZWrite Off
13.         Blend SrcAlpha OneMinusSrcAlpha
14.  
15. CGPROGRAM
16.  
17. #pragma vertex vert
18. #pragma fragment frag
19. #include "UnityCG.cginc"
20.  
21.         fixed4 _Color; half _LinesSize;
22.  
23.         struct v2f {
24.             half4 pos:POSITION;
25.             fixed4 sPos:TEXCOORD;
26.         };
27.  
28.         v2f vert(appdata_base v) {
29.             v2f o; o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
30.             o.sPos = ComputeScreenPos(o.pos);
31.             return o;
32.         }
33.  
34.         fixed4 frag(v2f i) : COLOR {
35.             fixed p = i.sPos.y / i.sPos.w;
36.  
37.             if((int)(p*_ScreenParams.y/floor(_LinesSize))%2==0) discard;
38.                return _Color;
39.          }
40.  
41. ENDCG
42.        }
43.  
44. }
45. }
46.  

 

I'm not paying someone $50 when I just want this one simple effect. That would be a huge rip-off. Nice shameless plug BTW. That would be issue #1 with the stuff in the store that I found. The other issue being with store purchases is that I really don't know for sure if the effect will look just like I want until I have bought it, and if it doesn't then I would be out of luck.

If I had someone who could do it I would just pay them $10 to code this because it's something that could be done easily by someone with shader knowledge in about 30 minutes or less. While I can code C sadly I do not know CG Shader or I would just do it myself. (though I do have an interest in learning it).

 

The only thing you're missing from your middle image to the right one is the 1D gaussian blur. Should be easy enough to implement if you just look at how that's done in the code. Start with the 1DGaus function and the one below it.

 

I'd take $10 if I was allowed, but unfortunately I'm contractually obliged to help for free

 

You concluded that paying 50$ for an asset which includes 60+ more effects that is going to teach you how your problem is going to be solved and also used by many big and released titles is a huge rip-off?

Further more, when i directed you to an alternative solution in case you cant find a free solution, you think i am shameless?

And finally, you decide your problem can be solved for 10$?

Good luck with your endavours

 

I would never have a use for 99% of those shaders. Also quite a few of them can already be found online elsewhere. That also wouldn't teach me anything; it's not a tutorial. I'm not just going to learn by staring at a mess of code.

Trying to make money off someone seeking help for such a simple problem? Yes. It's pretty sad when someone posts on a forum asking for assistance with something and is sent to a link to purchase something else. Especially something where the person would not need 95-99% of what is being sold. The fact that you are ok with this, says a lot for your character.

Yes because while I don't know the syntax for the code, I do know what would go into making it. And yes with assistance like yours from people I would need a lot of luck. It's truly sad how many in this "community" act when someone asks for help. You had all the time in the world to make sarcastic remarks back, but none to offer any helpful advice other than "hey wanna buy from me?". #NoEsBueno

Thanks. Now this is a lot more helpful than someone trying to make a buck off of me. So just the 1D Gaussian and the 3-tap Gaussian filter along horz. line are needed for that effect? Interesting. I'll look up a few tutorial vids and see what I can learn about CG shader and frag/surf shaders over the next few days.

If you don't mind, I'll try and message you over the weekend? I'd rather learn how to do this stuff rather than just asking people for code (which doesn't really help me learn).

 

Alright, I'm feeling very christmassy today so I will help you I updated that shader to make it work with Unity. But let me say few things first. ShaderToy shaders are generaly not a very good place to learn the basics. Those shaders are often hard to read, unoptimized or simply not suited for realtime rendering. The shader you posted actually has three different effects for different parts of the screen for example.
If you want to learn how to write shaders, then I suggest to read some tutorials and try to write some simple shaders first. There's a ton of resources online.
With that being said, translating shaders from ShaderToy (GLSL) to Unity (HLSL/Cg) isn't very difficult. GLSL and HLSL are very similar languages and you can copy and paste between them with minor edits. But you do need some basic knowledge first. And if you want to truly understand what the shader does then you need to know a bit more than the basics.
Anyway, here is your shader

Code (CSharp):

1. Shader "Hidden/CRT"
2. {
3.     Properties
4.     {
5.         //_MainTex("Texture", 2D) = "white" {}
6.  
7.         // Hardness of scanline.
8.         //  -8.0 = soft
9.         // -16.0 = medium
10.         hardScan("HardScan", Range(-8, -16)) = -8
11.         // Hardness of pixels in scanline.
12.         // -2.0 = soft
13.         // -4.0 = hard
14.         hardPix("HardPix", Range(-2, -4)) = -3
15.         maskDark("maskDark", Range(0, 2)) = 0.5
16.         maskLight("maskLight", Range(0, 2)) = 1.5
17.         // Display warp.
18.         // 0.0 = none
19.         // 1.0/8.0 = extreme
20.         warp("Warp", Vector) = (0.03125, 0.04166, 0, 0)
21.         // resolution scale
22.         resScale("ResolutionScale", Range(1, 16)) = 4
23.     }
24.     SubShader
25.     {
26.         // No culling or depth
27.         Cull Off ZWrite Off ZTest Always
28.  
29.         Pass
30.         {
31.             CGPROGRAM
32.             #pragma vertex vert
33.             #pragma fragment frag
34.  
35.             #include "UnityCG.cginc"
36.  
37.             struct appdata
38.             {
39.                 float4 vertex : POSITION;
40.                 float2 uv : TEXCOORD0;
41.             };
42.  
43.             struct v2f
44.             {
45.                 float2 uv : TEXCOORD0;
46.                 float4 vertex : SV_POSITION;
47.             };
48.  
49.             v2f vert(appdata v)
50.             {
51.                 v2f o;
52.                 o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
53.                 o.uv = v.uv;
54.                 return o;
55.             }
56.  
57.             sampler2D _MainTex;
58.  
59.             float maskDark = 0.5;
60.             float maskLight = 1.5;
61.             float hardScan = -8.0;
62.             float hardPix = -3.0;
63.             float2 warp = float2(1.0 / 32.0, 1.0 / 24.0);
64.             float2 res;
65.             float resScale;
66.  
67.             // Nearest emulated sample given floating point position and texel offset.
68.             float3 Fetch(float2 pos, float2 off)
69.             {
70.                 pos = floor(pos * res + off) / res;
71.                 //if (max(abs(pos.x - 0.5), abs(pos.y - 0.5)) > 0.5)
72.                     //return float4(0, 0, 0, 0);
73.                 return tex2Dlod(_MainTex, float4(pos.xy, 0, -16.0));
74.             }
75.            
76.             // Distance in emulated pixels to nearest texel.
77.             float2 Dist(float2 pos) { pos = pos*res; return -((pos - floor(pos)) - float2(0.5, 0.5)); }
78.  
79.             // 1D Gaussian.
80.             float Gaus(float pos, float scale) { return exp2(scale*pos*pos); }
81.  
82.             // 3-tap Gaussian filter along horz line.
83.             float3 Horz3(float2 pos, float off)
84.             {
85.                 float3 b = Fetch(pos, float2(-1.0, off));
86.                 float3 c = Fetch(pos, float2(0.0, off));
87.                 float3 d = Fetch(pos, float2(1.0, off));
88.                 float dst = Dist(pos).x;
89.                 // Convert distance to weight.
90.                 float scale = hardPix;
91.                 float wb = Gaus(dst - 1.0, scale);
92.                 float wc = Gaus(dst + 0.0, scale);
93.                 float wd = Gaus(dst + 1.0, scale);
94.                 // Return filtered sample.
95.                 return (b*wb + c*wc + d*wd) / (wb + wc + wd);
96.             }
97.  
98.             // 5-tap Gaussian filter along horz line.
99.             float3 Horz5(float2 pos, float off)
100.             {
101.                 float3 a = Fetch(pos, float2(-2.0, off));
102.                 float3 b = Fetch(pos, float2(-1.0, off));
103.                 float3 c = Fetch(pos, float2(0.0, off));
104.                 float3 d = Fetch(pos, float2(1.0, off));
105.                 float3 e = Fetch(pos, float2(2.0, off));
106.                 float dst = Dist(pos).x;
107.                 // Convert distance to weight.
108.                 float scale = hardPix;
109.                 float wa = Gaus(dst - 2.0, scale);
110.                 float wb = Gaus(dst - 1.0, scale);
111.                 float wc = Gaus(dst + 0.0, scale);
112.                 float wd = Gaus(dst + 1.0, scale);
113.                 float we = Gaus(dst + 2.0, scale);
114.                 // Return filtered sample.
115.                 return (a*wa + b*wb + c*wc + d*wd + e*we) / (wa + wb + wc + wd + we);
116.             }
117.  
118.             // Return scanline weight.
119.             float Scan(float2 pos, float off)
120.             {
121.                 float dst = Dist(pos).y;
122.                 return Gaus(dst + off, hardScan);
123.             }
124.  
125.             // Allow nearest three lines to effect pixel.
126.             float3 Tri(float2 pos)
127.             {
128.                 float3 a = Horz3(pos, -1.0);
129.                 float3 b = Horz5(pos, 0.0);
130.                 float3 c = Horz3(pos, 1.0);
131.                 float wa = Scan(pos, -1.0);
132.                 float wb = Scan(pos, 0.0);
133.                 float wc = Scan(pos, 1.0);
134.                 return a*wa + b*wb + c*wc;
135.             }
136.  
137.             // Distortion of scanlines, and end of screen alpha.
138.             float2 Warp(float2 pos)
139.             {
140.                 pos = pos*2.0 - 1.0;
141.                 pos *= float2(1.0 + (pos.y*pos.y)*warp.x, 1.0 + (pos.x*pos.x)*warp.y);
142.                 return pos*0.5 + 0.5;
143.             }
144.  
145.             // Shadow mask.
146.             float3 Mask(float2 pos)
147.             {
148.                 pos.x += pos.y*3.0;
149.                 float3 mask = float3(maskDark, maskDark, maskDark);
150.                 pos.x = frac(pos.x / 6.0);
151.                 if (pos.x < 0.333)mask.r = maskLight;
152.                 else if (pos.x < 0.666)mask.g = maskLight;
153.                 else mask.b = maskLight;
154.                 return mask;
155.             }
156.  
157.             // main
158.             fixed4 frag(v2f i) : SV_Target
159.             {
160.                 res = _ScreenParams.xy / resScale;
161.  
162.                 float2 fragCoord = i.vertex.xy;
163.                 float4 fragColor = 0;
164.  
165. #ifdef UNITY_UV_STARTS_AT_TOP
166.                 fragCoord.y = _ScreenParams.y - fragCoord.y;
167. #endif
168.                 float2 pos = Warp(fragCoord.xy / _ScreenParams.xy);
169.                 //fragColor.rgb = tex2D(_MainTex, i.uv)* Mask(fragCoord);
170.                 fragColor.rgb = Tri(pos) *Mask(fragCoord);
171.  
172.                 return fragColor;
173.             }
174.             ENDCG
175.         }
176.     }
177. }
178.  

You can attach this script to your camera to test it.

Code (CSharp):

1. using UnityEngine;
2.  
3. [ExecuteInEditMode]
4. public class CRT : MonoBehaviour
5. {
6.     public Material material;
7.     // Use this for initialization
8.     void Start()
9.     {
10.         material = new Material(Shader.Find("Hidden/CRT"));
11.     }
12.  
13.     public void OnRenderImage(RenderTexture source, RenderTexture destination)
14.     {
15.         material.SetTexture("_MainTex", source);
16.         Graphics.Blit(source, destination, material);
17.     }
18. }

Not the best/fastest shader out there but it should work. Happy Holidays

 

It doesn't go unnoticed by others that you chime in ever so much when there's a shader question to promote your own shader package not leaving any other answer behind than "pay me 50 bucks".
While I highly respect your effort put into these assets (they seem to be really good) I would say there's a more polite way of pointing others in your wallet's direction. These guys are not asking for a payed solution in the first place. So why offer it - at least post the general approach/direction to take when tackling a specific problem. If the OP doesn't get it done post your asset store link. All fine. Everyone happy. No?

 

@Michal_ great work.

But having some problems trying to get this shader to work in WebGL.

Especially when I want to include the UI Canvas in Camera 'Space' mode.

Works fine in Editor, well there is the problem that when the UI is in Camera mode the image flips, but when I add a Vignette and Bloom effect it appears the correct way up???

But in WebGL it fails, anyone else had these kinds of problems?

 

Is the image vertically flipped? Probably OpenGL vs DirectX problem. Following line from the shader flips the image.

Code (CSharp):

1. #ifdef UNITY_UV_STARTS_AT_TOP
2.                 fragCoord.y = _ScreenParams.y - fragCoord.y;
3. #endif

You can try to remove #ifdef #endif and then use the shader with/without that line and see what happens.

 

@Michal_ cheers.

Tried removing the line but the texture does not appear in the correct screen position, combined with it not quite working in WebGL builds that makes it confusing.

That reminds me doesn't WebGL GLSL and DirectX HLSL require separate sub shaders.

http://forum.unity3d.com/threads/webgl-conways-game-of-life.374215/#post-2427457

Will I need to re-write the shader in GLSL or can I just setup a sub shader that takes the shadertoy version as that should be GLSL right?

 

My attempt at a HLSL and GLSL shader, but no luck so far.

Code (CSharp):

1. Shader "Hidden/CRTShader"
2. {
3.     Properties
4.     {
5.         //_MainTex("Texture", 2D) = "white" {}
6.  
7.         // Hardness of scanline.
8.         //  -8.0 = soft
9.         // -16.0 = medium
10.         hardScan("HardScan", Range(-8, -16)) = -8
11.         // Hardness of pixels in scanline.
12.         // -2.0 = soft
13.         // -4.0 = hard
14.         hardPix("HardPix", Range(-2, -4)) = -3
15.         maskDark("maskDark", Range(0, 2)) = 0.5
16.         maskLight("maskLight", Range(0, 2)) = 1.5
17.         // Display warp.
18.         // 0.0 = none
19.         // 1.0/8.0 = extreme
20.         warp("Warp", Vector) = (0.03125, 0.04166, 0, 0)
21.         // resolution scale
22.         resScale("ResolutionScale", Range(1, 16)) = 4
23.     }
24.    
25.     SubShader
26.     {
27.         // No culling or depth
28.         Cull Off ZWrite Off ZTest Always
29.  
30.         Pass
31.         {
32.         CGPROGRAM
33.         #pragma vertex vert
34.         #pragma fragment frag
35.  
36.         #include "UnityCG.cginc"
37.  
38.         struct appdata
39.         {
40.             float4 vertex : POSITION;
41.             float2 uv : TEXCOORD0;
42.         };
43.  
44.         struct v2f
45.         {
46.             float2 uv : TEXCOORD0;
47.             float4 vertex : SV_POSITION;
48.         };
49.  
50.         v2f vert(appdata v)
51.         {
52.             v2f o;
53.             o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
54.             o.uv = v.uv;
55.             return o;
56.         }
57.  
58.         sampler2D _MainTex;
59.  
60.         float maskDark = 0.5;
61.         float maskLight = 1.5;
62.         float hardScan = -8.0;
63.         float hardPix = -3.0;
64.         float2 warp = float2(1.0 / 32.0, 1.0 / 24.0);
65.         float2 res;
66.         float2 invRes;
67.         float resScale;
68.  
69.         //float2 invScreenRes = 1.0 / _ScreenParams.xy;
70.  
71.         // Nearest emulated sample given floating point position and texel offset.
72.         float3 Fetch(float2 pos, float2 off)
73.         {
74.             //pos = floor(pos * res + off) / res;
75.             //if (max(abs(pos.x - 0.5), abs(pos.y - 0.5)) > 0.5)
76.             //return float4(0, 0, 0, 0);
77.             return tex2Dlod(_MainTex, float4(pos.xy, 0, -16.0));
78.         }
79.  
80.         // Distance in emulated pixels to nearest texel.
81.         float2 Dist(float2 pos)
82.         {
83.             pos = pos*res;
84.             return -((pos - floor(pos)) - float2(0.5, 0.5));
85.         }
86.  
87.         // 1D Gaussian.
88.         float Gaus(float pos, float scale) { return exp2(scale*pos*pos); }
89.  
90.         // 3-tap Gaussian filter along horz line.
91.         float3 Horz3(float2 pos, float off)
92.         {
93.             float2 p = floor(pos * res + off) * invRes;
94.  
95.             float3 b = Fetch(p, float2(-1.0, off));
96.             float3 c = Fetch(p, float2(0.0, off));
97.             float3 d = Fetch(p, float2(1.0, off));
98.  
99.             float dst = Dist(pos).x;
100.             // Convert distance to weight.      
101.  
102.             float scale = hardPix;
103.             float wb = Gaus(dst - 1.0, scale);
104.             float wc = Gaus(dst + 0.0, scale);
105.             float wd = Gaus(dst + 1.0, scale);
106.             // Return filtered sample.
107.             return (b*wb + c*wc + d*wd) / (wb + wc + wd);
108.         }
109.  
110.         // 5-tap Gaussian filter along horz line.
111.         float3 Horz5(float2 pos, float off)
112.         {
113.             float2 p = floor(pos * res + off) * invRes;
114.  
115.             float3 a = Fetch(p, float2(-2.0, off));
116.             float3 b = Fetch(p, float2(-1.0, off));
117.             float3 c = Fetch(p, float2(0.0, off));
118.             float3 d = Fetch(p, float2(1.0, off));
119.             float3 e = Fetch(p, float2(2.0, off));
120.  
121.             float dst = Dist(pos).x;
122.             // Convert distance to weight.
123.             float scale = hardPix;
124.             float wa = Gaus(dst - 2.0, scale);
125.             float wb = Gaus(dst - 1.0, scale);
126.             float wc = Gaus(dst + 0.0, scale);
127.             float wd = Gaus(dst + 1.0, scale);
128.             float we = Gaus(dst + 2.0, scale);
129.             // Return filtered sample.
130.             return (a*wa + b*wb + c*wc + d*wd + e*we) / (wa + wb + wc + wd + we);
131.         }
132.  
133.         // Return scanline weight.
134.         float Scan(float2 pos, float off)
135.         {
136.             float dst = Dist(pos).y;
137.             return Gaus(dst + off, hardScan);
138.         }
139.  
140.         // Allow nearest three lines to effect pixel.
141.         float3 Tri(float2 pos)
142.         {
143.             float3 a = Horz3(pos, -1.0);
144.             float3 b = Horz5(pos, 0.0);
145.             float3 c = Horz3(pos, 1.0);
146.             float wa = Scan(pos, -1.0);
147.             float wb = Scan(pos, 0.0);
148.             float wc = Scan(pos, 1.0);
149.             return a*wa + b*wb + c*wc;
150.         }
151.  
152.         // Distortion of scanlines, and end of screen alpha.
153.         float2 Warp(float2 pos)
154.         {
155.             pos = pos*2.0 - 1.0;
156.             pos *= float2(1.0 + (pos.y*pos.y)*warp.x, 1.0 + (pos.x*pos.x)*warp.y);
157.             return pos*0.5 + 0.5;
158.         }
159.  
160.         // Shadow mask.
161.         float3 Mask(float2 pos)
162.         {
163.             pos.x += pos.y*3.0;
164.             float3 mask = float3(maskDark, maskDark, maskDark);
165.             pos.x = frac(pos.x * 0.16666); // / 6.0);
166.             if (pos.x < 0.333) mask.r = maskLight;
167.             else if (pos.x < 0.666) mask.g = maskLight;
168.             else mask.b = maskLight;
169.             return mask;
170.         }
171.  
172.         // main
173.         fixed4 frag(v2f i) : SV_Target
174.         {
175.             res = _ScreenParams.xy / resScale;
176.  
177.             invRes.x = 1.0 / res.x;
178.             invRes.y = 1.0 / res.y;
179.  
180.             float2 fragCoord = i.vertex.xy;
181.             float4 fragColor = 0;
182.  
183.         #ifdef UNITY_UV_STARTS_AT_TOP              
184.             fragCoord.y = _ScreenParams.y - fragCoord.y;
185.         #endif      
186.  
187.             float2 pos = Warp(fragCoord.xy / _ScreenParams.xy);
188.  
189.             //fragColor.rgb = tex2D(_MainTex, i.uv)* Mask(fragCoord);
190.             fragColor.rgb = Tri(pos) * Mask(fragCoord);
191.  
192.             return fragColor;
193.         }
194.         ENDCG
195.     }
196.     }
197.    
198.    
199.     SubShader
200.     {
201.         // No culling or depth
202.         Cull Off ZWrite Off ZTest Always
203.  
204.         Pass
205.         {
206.             GLSLPROGRAM
207.  
208.     #include "UnityCG.glslinc"
209.  
210. #ifdef VERTEX
211.  
212.     //attribute vec4 _glesVertex;
213.  
214.     //attribute vec4 _glesMultiTexCoord0;
215.  
216.     //uniform highp mat4 glstate_matrix_mvp;
217.  
218.     //varying mediump vec2 xlv_TEXCOORD0;
219.  
220.  
221.     void main()
222.     {
223.         gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
224.         //gl_Position = (glstate_matrix_mvp * _glesVertex);
225.         //xlv_TEXCOORD0 = _glesMultiTexCoord0.xy;
226.     }
227.  
228. #endif // VERTEX
229.  
230.  
231. #ifdef FRAGMENT
232.     //
233.     // PUBLIC DOMAIN CRT STYLED SCAN-LINE SHADER
234.     //
235.     //   by Timothy Lottes
236.     //
237.     // This is more along the style of a really good CGA arcade monitor.
238.     // With RGB inputs instead of NTSC.
239.     // The shadow mask example has the mask rotated 90 degrees for less chromatic aberration.
240.     //
241.     // Left it unoptimized to show the theory behind the algorithm.
242.     //
243.     // It is an example what I personally would want as a display option for pixel art games.
244.     // Please take and use, change, or whatever.
245.     //
246.  
247.     // Emulated input resolution.
248.  
249.         vec2 res;
250.  
251.         // Hardness of scanline.
252.         //  -8.0 = soft
253.         // -16.0 = medium
254.         float hardScan = -8.0;
255.  
256.         // Hardness of pixels in scanline.
257.         // -2.0 = soft
258.         // -4.0 = hard
259.         float hardPix = -3.0;
260.  
261.         // Display warp.
262.         // 0.0 = none
263.         // 1.0/8.0 = extreme
264.         vec2 warp = vec2(1.0 / 32.0, 1.0 / 24.0);
265.  
266.         // Amount of shadow mask.
267.         float maskDark = 0.5;
268.         float maskLight = 1.5;
269.  
270.         float resScale;
271.  
272.         //------------------------------------------------------------------------
273.  
274.         // sRGB to Linear.
275.         // Assuing using sRGB typed textures this should not be needed.
276.         float ToLinear1(float c) { return(c <= 0.04045) ? c / 12.92 : pow((c + 0.055) / 1.055, 2.4); }
277.         vec3 ToLinear(vec3 c) { return vec3(ToLinear1(c.r), ToLinear1(c.g), ToLinear1(c.b)); }
278.  
279.         // Linear to sRGB.
280.         // Assuing using sRGB typed textures this should not be needed.
281.         float ToSrgb1(float c) { return(c<0.0031308 ? c*12.92 : 1.055*pow(c, 0.41666) - 0.055); }
282.         vec3 ToSrgb(vec3 c) { return vec3(ToSrgb1(c.r), ToSrgb1(c.g), ToSrgb1(c.b)); }
283.  
284.         // Nearest emulated sample given floating point position and texel offset.
285.         // Also zero's off screen.
286.         vec3 Fetch(vec2 pos, vec2 off) {
287.             pos = floor(pos*res + off) / res;
288.             if (max(abs(pos.x - 0.5), abs(pos.y - 0.5))>0.5)return vec3(0.0, 0.0, 0.0);
289.             return ToLinear(texture2D(iChannel0, pos.xy, -16.0).rgb);
290.         }
291.  
292.         // Distance in emulated pixels to nearest texel.
293.         vec2 Dist(vec2 pos) { pos = pos*res; return -((pos - floor(pos)) - vec2(0.5)); }
294.  
295.         // 1D Gaussian.
296.         float Gaus(float pos, float scale) { return exp2(scale*pos*pos); }
297.  
298.         // 3-tap Gaussian filter along horz line.
299.         vec3 Horz3(vec2 pos, float off) {
300.             vec3 b = Fetch(pos, vec2(-1.0, off));
301.             vec3 c = Fetch(pos, vec2(0.0, off));
302.             vec3 d = Fetch(pos, vec2(1.0, off));
303.             float dst = Dist(pos).x;
304.             // Convert distance to weight.
305.             float scale = hardPix;
306.             float wb = Gaus(dst - 1.0, scale);
307.             float wc = Gaus(dst + 0.0, scale);
308.             float wd = Gaus(dst + 1.0, scale);
309.             // Return filtered sample.
310.             return (b*wb + c*wc + d*wd) / (wb + wc + wd);
311.         }
312.  
313.         // 5-tap Gaussian filter along horz line.
314.         vec3 Horz5(vec2 pos, float off) {
315.             vec3 a = Fetch(pos, vec2(-2.0, off));
316.             vec3 b = Fetch(pos, vec2(-1.0, off));
317.             vec3 c = Fetch(pos, vec2(0.0, off));
318.             vec3 d = Fetch(pos, vec2(1.0, off));
319.             vec3 e = Fetch(pos, vec2(2.0, off));
320.             float dst = Dist(pos).x;
321.             // Convert distance to weight.
322.             float scale = hardPix;
323.             float wa = Gaus(dst - 2.0, scale);
324.             float wb = Gaus(dst - 1.0, scale);
325.             float wc = Gaus(dst + 0.0, scale);
326.             float wd = Gaus(dst + 1.0, scale);
327.             float we = Gaus(dst + 2.0, scale);
328.             // Return filtered sample.
329.             return (a*wa + b*wb + c*wc + d*wd + e*we) / (wa + wb + wc + wd + we);
330.         }
331.  
332.         // Return scanline weight.
333.         float Scan(vec2 pos, float off) {
334.             float dst = Dist(pos).y;
335.             return Gaus(dst + off, hardScan);
336.         }
337.  
338.         // Allow nearest three lines to effect pixel.
339.         vec3 Tri(vec2 pos) {
340.             vec3 a = Horz3(pos, -1.0);
341.             vec3 b = Horz5(pos, 0.0);
342.             vec3 c = Horz3(pos, 1.0);
343.             float wa = Scan(pos, -1.0);
344.             float wb = Scan(pos, 0.0);
345.             float wc = Scan(pos, 1.0);
346.             return a*wa + b*wb + c*wc;
347.         }
348.  
349.         // Distortion of scanlines, and end of screen alpha.
350.         vec2 Warp(vec2 pos) {
351.             pos = pos*2.0 - 1.0;
352.             pos *= vec2(1.0 + (pos.y*pos.y)*warp.x, 1.0 + (pos.x*pos.x)*warp.y);
353.             return pos*0.5 + 0.5;
354.         }
355.  
356.         // Shadow mask.
357.         vec3 Mask(vec2 pos) {
358.             pos.x += pos.y*3.0;
359.             vec3 mask = vec3(maskDark, maskDark, maskDark);
360.             pos.x = fract(pos.x / 6.0);
361.             if (pos.x < 0.333)mask.r = maskLight;
362.             else if (pos.x < 0.666)mask.g = maskLight;
363.             else mask.b = maskLight;
364.             return mask;
365.         }
366.  
367.         // Draw dividing bars.
368.         //float Bar(float pos, float bar) { pos -= bar; return pos*pos < 4.0 ? 0.0 : 1.0; }
369.  
370.         // Entry.
371.         void main(out vec4 fragColor, in vec2 fragCoord) {
372.  
373.             res = _ScreenParams.xy / resScale;
374.  
375.             vec2 pos = Warp(fragCoord.xy / res.xy);
376.             fragColor.rgb = Tri(pos)*Mask(fragCoord.xy);
377.  
378.             fragColor.a = 1.0;
379.         }
380.     #endif
381.         ENDGLSL
382.     }
383.     }
384.    
385. }

Progress is it still works in editor but still nothing in WebGL???

 

Unity will automatically cross-compile all hlsl shaders to glsl for opengl platforms.

Is the image flipped in WebGL or it doesn't work at all? Is there any error in the app log? Maybe the shader wasn't included in the build. You can try to force it. Go to Edit->Project Settings->Graphics and add you shader to the list of "Always Included Shaders".

 

It doesn't work at all (just black).

Are you sure as I needed a WebGL GLSL version of the Mandlebrot shader to work in WebGL?

http://forum.unity3d.com/threads/webgl-conways-game-of-life.374215/#post-2427457

Tried building to standalone PC but using OpenGL and it worked. The editor changed to OpenGL 4.5 and it worked in editor, but the UI Canvas was flickering vanishing and smearing.

 

Automatic cross-compiling from HLSL to GLSL certainly works for Win OpenGL, Mac, iOS and Android. I never used WebGL but I assume it works the same way. The shader is probably just doing something that WebGL doesn't support.
The only thing that comes to mind is the "SV_POSITION" semantic used in pixel shader. That wasn't allowed before DX10 and newer OpenGL versions. Here's slightly modified version of the shader that doesn't use it

Code (CSharp):

1. Shader "Hidden/CRT"
2. {
3.     Properties
4.     {
5.         //_MainTex("Texture", 2D) = "white" {}
6.         // Hardness of scanline.
7.         //  -8.0 = soft
8.         // -16.0 = medium
9.         hardScan("HardScan", Range(-8, -16)) = -8
10.         // Hardness of pixels in scanline.
11.         // -2.0 = soft
12.         // -4.0 = hard
13.         hardPix("HardPix", Range(-2, -4)) = -3
14.         maskDark("maskDark", Range(0, 2)) = 0.5
15.         maskLight("maskLight", Range(0, 2)) = 1.5
16.         // Display warp.
17.         // 0.0 = none
18.         // 1.0/8.0 = extreme
19.         warp("Warp", Vector) = (0.03125, 0.04166, 0, 0)
20.         // resolution scale
21.         resScale("ResolutionScale", Range(1, 16)) = 4
22.     }
23.     SubShader
24.     {
25.         // No culling or depth
26.         Cull Off ZWrite Off ZTest Always
27.         Pass
28.         {
29.             CGPROGRAM
30.             #pragma vertex vert
31.             #pragma fragment frag
32.  
33.             #pragma target 2.0
34.             #include "UnityCG.cginc"
35.             struct appdata
36.             {
37.                 float4 vertex : POSITION;
38.                 float2 uv : TEXCOORD0;
39.             };
40.             struct v2f
41.             {
42.                 float2 uv : TEXCOORD0;
43.                 float4 screenPos : TEXCOORD1;
44.                 float4 vertex : SV_POSITION;
45.             };
46.             v2f vert(appdata v)
47.             {
48.                 v2f o;
49.                 o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
50.                 o.uv = v.uv;
51.                 o.screenPos = ComputeScreenPos(o.vertex);
52.                 return o;
53.             }
54.             sampler2D _MainTex;
55.             float maskDark = 0.5;
56.             float maskLight = 1.5;
57.             float hardScan = -8.0;
58.             float hardPix = -3.0;
59.             float2 warp = float2(1.0 / 32.0, 1.0 / 24.0);
60.             float2 res;
61.             float resScale;
62.             // Nearest emulated sample given floating point position and texel offset.
63.             float3 Fetch(float2 pos, float2 off)
64.             {
65.                 pos = floor(pos * res + off) / res;
66.                 //if (max(abs(pos.x - 0.5), abs(pos.y - 0.5)) > 0.5)
67.                     //return float4(0, 0, 0, 0);
68.                 return tex2Dlod(_MainTex, float4(pos.xy, 0, -16.0));
69.             }
70.          
71.             // Distance in emulated pixels to nearest texel.
72.             float2 Dist(float2 pos) { pos = pos*res; return -((pos - floor(pos)) - float2(0.5, 0.5)); }
73.             // 1D Gaussian.
74.             float Gaus(float pos, float scale) { return exp2(scale*pos*pos); }
75.             // 3-tap Gaussian filter along horz line.
76.             float3 Horz3(float2 pos, float off)
77.             {
78.                 float3 b = Fetch(pos, float2(-1.0, off));
79.                 float3 c = Fetch(pos, float2(0.0, off));
80.                 float3 d = Fetch(pos, float2(1.0, off));
81.                 float dst = Dist(pos).x;
82.                 // Convert distance to weight.
83.                 float scale = hardPix;
84.                 float wb = Gaus(dst - 1.0, scale);
85.                 float wc = Gaus(dst + 0.0, scale);
86.                 float wd = Gaus(dst + 1.0, scale);
87.                 // Return filtered sample.
88.                 return (b*wb + c*wc + d*wd) / (wb + wc + wd);
89.             }
90.             // 5-tap Gaussian filter along horz line.
91.             float3 Horz5(float2 pos, float off)
92.             {
93.                 float3 a = Fetch(pos, float2(-2.0, off));
94.                 float3 b = Fetch(pos, float2(-1.0, off));
95.                 float3 c = Fetch(pos, float2(0.0, off));
96.                 float3 d = Fetch(pos, float2(1.0, off));
97.                 float3 e = Fetch(pos, float2(2.0, off));
98.                 float dst = Dist(pos).x;
99.                 // Convert distance to weight.
100.                 float scale = hardPix;
101.                 float wa = Gaus(dst - 2.0, scale);
102.                 float wb = Gaus(dst - 1.0, scale);
103.                 float wc = Gaus(dst + 0.0, scale);
104.                 float wd = Gaus(dst + 1.0, scale);
105.                 float we = Gaus(dst + 2.0, scale);
106.                 // Return filtered sample.
107.                 return (a*wa + b*wb + c*wc + d*wd + e*we) / (wa + wb + wc + wd + we);
108.             }
109.             // Return scanline weight.
110.             float Scan(float2 pos, float off)
111.             {
112.                 float dst = Dist(pos).y;
113.                 return Gaus(dst + off, hardScan);
114.             }
115.             // Allow nearest three lines to effect pixel.
116.             float3 Tri(float2 pos)
117.             {
118.                 float3 a = Horz3(pos, -1.0);
119.                 float3 b = Horz5(pos, 0.0);
120.                 float3 c = Horz3(pos, 1.0);
121.                 float wa = Scan(pos, -1.0);
122.                 float wb = Scan(pos, 0.0);
123.                 float wc = Scan(pos, 1.0);
124.                 return a*wa + b*wb + c*wc;
125.             }
126.             // Distortion of scanlines, and end of screen alpha.
127.             float2 Warp(float2 pos)
128.             {
129.                 pos = pos*2.0 - 1.0;
130.                 pos *= float2(1.0 + (pos.y*pos.y)*warp.x, 1.0 + (pos.x*pos.x)*warp.y);
131.                 return pos*0.5 + 0.5;
132.             }
133.             // Shadow mask.
134.             float3 Mask(float2 pos)
135.             {
136.                 pos.x += pos.y*3.0;
137.                 float3 mask = float3(maskDark, maskDark, maskDark);
138.                 pos.x = frac(pos.x / 6.0);
139.                 if (pos.x < 0.333)mask.r = maskLight;
140.                 else if (pos.x < 0.666)mask.g = maskLight;
141.                 else mask.b = maskLight;
142.                 return mask;
143.             }
144.             // main
145.             fixed4 frag(v2f i) : SV_Target
146.             {
147.                 res = _ScreenParams.xy / resScale;
148.                 float2 fragCoord = i.screenPos.xy * _ScreenParams.xy;//i.vertex.xy;
149.                 float4 fragColor = 0;              
150. #ifdef UNITY_UV_STARTS_AT_TOP
151.                 //fragCoord.y = _ScreenParams.y - fragCoord.y;
152. #endif
153.                 float2 pos = Warp(fragCoord.xy / _ScreenParams.xy);
154.                 //fragColor.rgb = tex2D(_MainTex, i.uv)* Mask(fragCoord);
155.                 fragColor.rgb = Tri(pos) *Mask(fragCoord);
156.                 return fragColor;
157.             }
158.             ENDCG
159.         }
160.     }
161. }

 

@Michal_ Wow well done, it's working in WebGL.

It needs the UNITY_UV_STARTS_AT_TOP line to be the right way up.

Thank You.