Search Unity

  1. Unity 2019.2 is now released.
    Dismiss Notice

What's with the chunky graphics on WebGL?

Discussion in 'WebGL' started by JoeStrout, May 27, 2019.

  1. JoeStrout

    JoeStrout

    Joined:
    Jan 14, 2011
    Posts:
    8,283
    A picture is the easiest way to explain the problem:

    upload_2019-5-27_11-41-31.png

    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):

    upload_2019-5-27_11-48-44.png

    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?
     
  2. mgear

    mgear

    Joined:
    Aug 3, 2010
    Posts:
    5,560
  3. JoeStrout

    JoeStrout

    Joined:
    Jan 14, 2011
    Posts:
    8,283
    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. :(
     
  4. JoeStrout

    JoeStrout

    Joined:
    Jan 14, 2011
    Posts:
    8,283
    Oh... duh. Figured it out. :)

    upload_2019-5-27_20-7-54.png

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