画像を外部ファイルから取り込む際に透過画像に白いフチが入ってしまい綺麗な透過ができない

実現したいこと

・ユーザーがフォルダに入れた透過画像を動的に取得して綺麗に表示したい。
・画像にはアンチエイリアスをかけたい。

前提

Unityでカスタマイズが効くタイプのデスクトップマスコットツールを作っています。

発生している問題・エラーメッセージ

FilterMode.Bilinearで読み込むと、白いフチが周りについてしまい、綺麗に表示できない。（FilterMode.Trilinearでも同様）

FilterMode.Pointで読み込むと、透過は綺麗にできるが、アンチエイリアスが入らないので荒い表現になってしまう。

これは外部ファイルからの画像読み込みでなく、一般的な方法で画像を単に表示した場合です。これが理想の表示です。

該当のソースコード

C#
1private static Texture2D LoadImageAsync(byte[] data)
2    {
3        // Decodes an image on a thread pool.
4        var imageResult = ImageDecoder.DecodeImage(data);
5
6        // Creates a texture and set the pixel data on the main thread.
7        return imageResult.ToTexture2D();
8    }
9
10    public static Sprite LoadSprite(string path)
11    {
12        if(System.IO.File.Exists(path)){
13            var rawData = System.IO.File.ReadAllBytes(path);
14            Texture2D texture2D = LoadImageAsync(rawData);
15            texture2D.filterMode=FilterMode.Bilinear;
16
17            //Texture2D texture2D = new Texture2D(0, 0);
18            //texture2D.LoadImage(rawData);
19            //texture2D.filterMode=FilterMode.Bilinear;
20            var sprite = Sprite.Create(texture2D, new Rect(0f, 0f, texture2D.width, texture2D.height),new Vector2(0.5f, 0.5f), 100f,0,SpriteMeshType.FullRect);
21
22            return sprite;
23        }
24        else{
25            return null;
26        }
27    }

ImageDecoder.DecodeImageはMochineko.StbImageSharpForUnityという外部アセットを使っていますが、基本的な流れは読み込んだバイト列→テクスチャ2D→Spriteに変換しているだけです。コメントアウトしているLoadImageを使った方法でも同様の現象が起きます。

補足情報（FW/ツールのバージョンなど）

Unity2021.3.28f1

hoshi-takanori

2023/11/07 15:23

本来使われないはずの透過ピクセルの色がアンチエイリアス処理で使われてしまうからでしょうね。 https://forum.unity.com/threads/grey-edges-in-sprites-with-transparent-pixels.280253/

namari

2023/11/07 18:04

ありがとうございます。類似の質問に見えるのですが、英語の理解が怪しいのかいまいち改善に繋がりませんでした。Sprite.Createの際にRectを少し内側に小さめに読み込んでみたり、wrapModeをTextureWrapMode.Clampに設定したりしたのですが…

hoshi-takanori

2023/11/07 20:04

たぶん、その画像の透過してる部分の色が白で、アルファ値が 0 なんだと思います。アルファ値が 0 の部分は、普段は無視されるので何色でも問題ありませんが、アンチエイリアス処理の際に隣接するピクセルの値をブレンドする処理が行われ、白っぽくなってしまうのでしょう。輪郭が黒い画像なら、透過部分の色も黒くすれば大丈夫だと思いますが、ユーザーがフォルダに入れた任意の画像に対して、透過部分の色を輪郭の色に合わせるのはちょっと難しい気がしますね。なお、gimp とか使えば透過部分の色を確認することはできると思いますが、編集できるかは知りません。

namari

2023/11/08 06:10

なるほど原因が分かりました。確かに解決は難しそうですね…スクリプトによる読み込みのときだけ発生するので何か解決策があると思いましたが…　ありがとうございます。