Hablemos de gradientes en Unity

Hola a todos. Mi nombre es Grigory Dyadichenko. He estado en el desarrollo de Unity durante aproximadamente 7 años y he visto mucho durante ese tiempo. Uno de los principales problemas que surge cuando le quitas un proyecto a gente sin experiencia son los degradados en las interfaces. En general, los errores en el desarrollo de la interfaz no son infrecuentes. Parece la misma incapacidad para usar Nueve cortes, atlas, comprensión del procesamiento por lotes. Pero los degradados se destacan un poco, ya que inflan el peso de la construcción a tamaños inimaginables o se dibujan en una interfaz con extraños artefactos de compresión. Analicemos por qué sucede esto y qué se puede hacer al respecto como solución. ¿Quién está interesado en este tema? Bienvenido bajo cat.

? ( ), . , , , .

. , , . Android . , , .



, , . 1 , . .



? , , - . draw call, , , , .

. , , . . , .



, . Image Simple Use Sprite Mesh . Image - Maskable Graphic, Simple quad. Graphic , color vertex. , Image Sprite _MainTex SpriteDefault. , , Image. CanvasRenderer. .



? :

1)

2)

, MaskableGraphic. UI.



. UI [PerRendererData], , . , , , , .



, -, . , Figma. 4 : , , . .

. . , , Unity Gradient, .

public Texture2D GenerateTexture(bool makeNoLongerReadable = false)
{
    Texture2D tex = new Texture2D(1, (int)_GradientResolution, TextureFormat.ARGB32, false, true);
    tex.wrapMode = WrapMode;
    tex.filterMode = FilterMode.Bilinear;
    tex.anisoLevel = 1;
    Color[] colors = new Color[(int)_GradientResolution];
    float div = (float)(int)_GradientResolution;
    for (int i = 0; i < (int)_GradientResolution; ++i)
    {
      float t = (float)i/div;
      colors[i] = _Gradient.Evaluate(t);
    }
    tex.SetPixels(colors);
    tex.Apply(false, makeNoLongerReadable);

    return tex;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

filter mode wrap mode . Gradient Resolution — , “” . , .



, .

. , — uv . , uv1 . 

v2f vert (appdata v)
{
  const float PI = 3.14159;
  v2f o;
  o.vertex = UnityObjectToClipPos(v.vertex);
  o.color = v.color;
  o.uv = TRANSFORM_TEX(v.uv, _MainTex);
  o.uv.xy -= 0.5;
  float s = sin (2 * PI * (-v.uv2.x) /360);
  float c = cos (2 * PI * (-v.uv2.x) /360);
  float2x2 rotationMatrix = float2x2( c, -s, s, c);
  rotationMatrix *=0.5;
  rotationMatrix +=0.5;
  rotationMatrix = rotationMatrix * 2-1;
  o.uv.xy = mul (o.uv.xy, rotationMatrix );
  o.uv.xy += 0.5;
  return o;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

uv . SampleSpriteTexture - Unity UI.

fixed4 SampleSpriteTexture (float2 uv)
{
	fixed4 color = tex2D (_MainTex, uv);

#if UNITY_TEXTURE_ALPHASPLIT_ALLOWED
	if (_AlphaSplitEnabled)
	color.a = tex2D (_AlphaTex, uv).r;
#endif //UNITY_TEXTURE_ALPHASPLIT_ALLOWED

	return color;
}
fixed4 frag (v2f i) : SV_Target
{
	fixed4 col = SampleSpriteTexture ( i.uv) * i.color;
	return col;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. . .

— . . , , . , . . : , .



, . , , .

v2f vert (appdata v)
{
  v2f o;
  o.vertex = UnityObjectToClipPos(v.vertex);
  o.color = v.color;
  o.uv = TRANSFORM_TEX(v.uv, _MainTex);
  o.center = v.center;
  return o;
}

fixed4 frag (v2f i) : SV_Target
{
  const float PI = 3.14159;
  float x =  (i.uv.x - i.center.x);
  float y =  (i.uv.y - i.center.y);
  float angle = acos(dot(float2(0, 1),normalize(float2(x, y))));
  float sign = (x) / abs(x);
  float TwoPI = PI * 2;
  float2 uv = ( sign*angle - i.center.z / 360 * TwoPI) / TwoPI;
  fixed4 col = SampleSpriteTexture (uv) * i.color; 
  return col;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, uv . up uv uv . , . 5-10 - .

/

. , . , 5 . , . , .

v2f vert (appdata v)
{
  const float PI = 3.14159;
  v2f o;
  o.vertex = UnityObjectToClipPos(v.vertex);
  o.color = v.color;
  o.uv = TRANSFORM_TEX(v.uv, _MainTex);

  float s = sin (2 * PI * (-v.params.z) /360);
  float c = cos (2 * PI * (-v.params.z) /360);
  float2x2 rotationMatrix = float2x2( c, -s, s, c);
  rotationMatrix *=0.5;
  rotationMatrix +=0.5;
  rotationMatrix = rotationMatrix * 2-1;
  o.uv.xy = mul (o.uv.xy - v.center.xy, rotationMatrix );

  o.params = v.params;
  o.center = v.center;
  return o;
}

fixed4 frag (v2f i) : SV_Target
{
	float x =  i.uv.x;
	float y =  i.uv.y;
	float r1 = i.params.x / 2;
	float r2 = i.params.y / 2;
 	float2 uv = sqrt(x * x / r1 + y * y / r2);
	fixed4 col = SampleSpriteTexture (uv) * i.color; 
	return col;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, . .

, . , .

fixed4 frag (v2f i) : SV_Target
{
	float x =  i.uv.x;
	float y =  i.uv.y;
	float r1 = i.params.x / 2;
	float r2 = i.params.y / 2;
	float2 uv = abs(x) / r1 + abs(y) / r2;
	fixed4 col = SampleSpriteTexture (uv) * i.color; 
	return col;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, Figma .

, , . , — , , figma png . , .



, !