What's with the chunky graphics on WebGL?

A picture is the easiest way to explain the problem:



This is the same game, running on the left in WebGL (in Firefox on my Mac), and on the right in the Unity editor (on the same Mac). Why does the text on the left look so cruddy?

That text is not a built-in Unity component, but my own thing — actually a SpriteRenderer for each character, with a custom shader:

Code (CSharp):

1. Shader "Sprites/Bicolor"
2. {
3.     Properties
4.     {
5.         [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
6.         [PerRendererData] _Color ("ForeColor", Color) = (1,1,1,1)
7.         [PerRendererData] _BackColor ("BackColor", Color) = (0,0,0,0)
8.         [MaterialToggle] PixelSnap ("Pixel snap", Float) = 1
9.     }
10.  
11.     SubShader
12.     {
13.         Tags
14.         {
15.             "Queue"="Transparent"
16.             "IgnoreProjector"="True"
17.             "RenderType"="Transparent"
18.             "PreviewType"="Plane"
19.             "CanUseSpriteAtlas"="True"
20.         }
21.  
22.         Cull Off
23.         Lighting Off
24.         ZWrite Off
25.         Blend One OneMinusSrcAlpha
26.  
27.         Pass
28.         {
29.         CGPROGRAM
30.             #pragma vertex vert
31.             #pragma fragment frag
32.             #pragma multi_compile _ PIXELSNAP_ON
33.             #pragma shader_feature ETC1_EXTERNAL_ALPHA
34.             #include "UnityCG.cginc"
35.            
36.             struct appdata_t
37.             {
38.                 float4 vertex   : POSITION;
39.                 float4 color    : COLOR;
40.                 float2 texcoord : TEXCOORD0;
41.             };
42.  
43.             struct v2f
44.             {
45.                 float4 vertex   : SV_POSITION;
46.                 fixed4 color    : COLOR;
47.                 float2 texcoord  : TEXCOORD0;
48.             };
49.            
50.             fixed4 _Color;
51.             fixed4 _BackColor;
52.  
53.             v2f vert(appdata_t IN)
54.             {
55.                 v2f OUT;
56.                 OUT.vertex = UnityObjectToClipPos(IN.vertex);
57.                 OUT.texcoord = IN.texcoord;
58.                 OUT.color = (IN.color.a > 0.5 ? _Color : _BackColor);
59. //                OUT.color = IN.color * _Color;
60.                 #ifdef PIXELSNAP_ON
61.                 OUT.vertex = UnityPixelSnap (OUT.vertex);
62.                 #endif
63.  
64.                 return OUT;
65.             }
66.  
67.             sampler2D _MainTex;
68.             sampler2D _AlphaTex;
69.  
70.             fixed4 SampleSpriteTexture (float2 uv)
71.             {
72.                 fixed4 color = tex2D (_MainTex, uv);
73.  
74.                 return color;
75.             }
76.  
77.             fixed4 frag(v2f IN) : SV_Target
78.             {
79.                 fixed4 c = SampleSpriteTexture(IN.texcoord);
80.                 return (c.a > 0.5 ? _Color : _BackColor);
81.             }
82.         ENDCG
83.         }
84.     }
85. }

Pixel snap is turned on. It looks like the sort of thing you see when the alpha-testing is off, but the actual resources involved here don't have any anti-aliasing in the alpha channel... the "W" character, for example, looks like this (zoomed way in):



So I'm at a bit of a loss. How do we get from these nice clean source images, to those chunky, ugly renderings seen only in WebGL?

 

at least the default sprite shader has that one extra line, to multiply with alpha:
c.rgb *= c.a;

https://forum.unity.com/threads/looking-for-shader-advice.551749/#post-3647437

 

It does, but as you can see the purpose here is different — based on whether the alpha > 0.5, I'm choosing one of the two colors set on the material.

Works fine on desktop... looks like junk on WebGL.

 

Oh... duh. Figured it out.



It was just the compression of the font texture. Should've thought of that right away. I blame Monday.