"Texture2D.ReadPixels() and EncodeToPNG() not working properly (windows, android)" (776428)

News & General Discussion
1

Hi,
Can someone help me with a boring problem?

I’m trying to generate a transparent .png based on a UI text present in a canvas (TextMeshPro beeing used to generate the text). For that, I’m currently using a code to capture the current frame of the scene Camera using the ReadPixels method. Then I save the resulted image to a png file using EncodeToPNG.

But those functions give 2 problems :

  1. On windows the generated .png creates strange grey outlines or extra pixels on the text borders, between RGB channel and alpha channel. I don’t know where it’s coming from …

  2. On Android the generated .png shows strange grey-glack abberations arround letters.

I looked for several ways to fix this (changing shader, texture format, color setting) but none worked. Does someone know why I have those strange results?

Thanks in advance.

TextureFormat : ARGB32
Text Shader : TextMeshPro/Distance Field
Android Build setting :

  • Color space : Gamma
  • Auto graphic API : enabled
  • Color gamut : sRGB

Results :

Windows :

512×512 17.2 KB

Android :

320×320 3.11 KB

And below the code I’m using(sorry if I don’t post it correctly) :

//+-------+
//|Capture|
//+-------+
txtgen_camera.clearFlags = CameraClearFlags.Depth; //Remove Skybox and allows transparency sorting

RenderTexture rt = new RenderTexture(resWidth, resHeight, 24);
txtgen_camera.targetTexture = rt;

//Texture parameters : Format and Resolution
Texture2D screenShot = new Texture2D(resWidth, resHeight, TextureFormat.ARGB32, true);
//Read pixels then release cam
txtgen_camera.Render();
RenderTexture.active = rt;
screenShot.ReadPixels(new Rect(0, 0, resWidth, resHeight), 0, 0);
txtgen_camera.targetTexture = null;
RenderTexture.active = null;
Destroy(rt);

//Generate Image File
byte[] bytes;
bytes = screenShot.EncodeToPNG();
bytes = B83.Image.PNGTools.ChangePPI(bytes, 100, 100); //can be done in photoshop instead of Unity

Destroy(screenShot);

//+----------+
//|Image name|
//+----------+
string time = System.DateTime.Now.ToString("yyyy-MM-dd_HH-mm-ss");
string name_file = "TestTxtGen" + "_" + time + extension;

//+----------+
//|Save image|
//-----------+
string local_path = Path.Combine(Application.persistentDataPath, "Texts");
string file_path = Path.Combine(local_path, name_file);

if (!System.IO.Directory.Exists(local_path))
{
    Directory.CreateDirectory(local_path);
}

File.WriteAllBytes(file_path, bytes);
2

Have you tried rendering it to RGB24 format? Because png supports alpha channel, and png with alpha channel can be displayed in interesting ways, depending on viewer. Additionally, B83.Image.PNGTools.ChangePPI is not a part of unity API. Try disabling that and see if it changes anything.

3

Ok. Here is the solution for the Android problem:

I just replaced this:

txtgen_camera.clearFlags = CameraClearFlags.Depth;

by this:

txtgen_camera.clearFlags = CameraClearFlags.Color;
txtgen_camera.backgroundColor = new Color(0, 0, 0, 0);

And it worked :slight_smile:

Unfortunatly the strange gray outline around the letters between the white and transparent pixels is still present.

@neginfinity Both of your solutions gave no result about it :frowning:

Those extra pixels come from elsewhere. Perhaps a relationship with the openGL language used to compute the image ?

4

Those extra pixels probably come from the font texture. This is what happens when you have a sprite with alpha mask and a texture that matches the alpha mask exactly. Then the picture gets interpolated. Because color is interpolated at the same time, you’ll get areas with gray or even black pixels where alpha is not still zero, and they form black outlines. This is usually not visible when your font is black, but can show up when it is white.

Android picture looks like some sort of major failure, like being unable to find proper texture format.

1 Like
5

Well, it may not be the best solution, but I found a way to solve this. I just replaced all the no-null alpha pixel by the desired color:

screenShot = RemoveOutlines(screenShot);

public Texture2D RemoveOutlines(Texture2D texture)
{
    for (int x = 0; x < texture.width; x++)
    {
        for (int y = 0; y < texture.height; y++)
        {
            if (texture.GetPixel(x, y).a != 0)
                texture.SetPixel(x, y, textColor);
        }
    }
    return texture;
}

Result :