跳至主要內容

Unity3D中使用SkiaSharp处理Texture2D

MonoLogueChi2024年3月4日Unity大约 9 分钟

在 Unity 中，一些时候需要动态修改一些贴图，其中一种方式，就是使用图形处理库，例如 SkiaSharp 或 ImageSharp。这篇文章简单说一下在 Unity 中如何使用 SkiaSharp。

最近一段时间工作比较忙，一直没有更新博客，这一篇文章简单记录一些最近的收获。

这篇文章主要是讲 Texture2D 和 SKBitmap 之间的转换，至于 SkiaSharp 的 API，请自行查阅相关文档。

由于要讲的东西篇幅很长，循序渐进，由浅入深讲解，千万不要看到代码就抄，很多是中间的思考过程。

准备工作

需要安装 SkiaSharp ，可以直接使用我的 UnitySkiaSharp，相关代码我以及封装好了，这篇文章只是分析一下转换过程。

借助 PNG 编码转换

这是效率最低的一种方式，除非是特殊情况，请不要使用这种方式。

using SkiaSharp;
using UnityEngine;
using UnityEngine.UI;

[RequireComponent(typeof(RawImage))]
public class Example0 : MonoBehaviour
{
  [SerializeField] private Texture2D tex;
  private RawImage _rawImage;

  private void Start()
  {
    _rawImage = GetComponent<RawImage>();

    var pngData0 = tex.EncodeToPNG();
    var bitmap = SKBitmap.Decode(pngData0);

    var pngData1 = bitmap.Encode(SKEncodedImageFormat.Png, 0).ToArray();

    var tex0 = new Texture2D(bitmap.Width, bitmap.Height);
    tex0.LoadImage(pngData1);
    _rawImage.texture = tex0;
    _rawImage.GetComponent<RectTransform>().sizeDelta = new Vector2(tex0.width, tex0.height);
  }
}

运行效果就不展示了。

使用颜色填充

前面介绍的这种方法，需要编码为 png 格式，然后再解码，中间的编码和解码过程需要浪费大量的性能。

试想一下，能否获取图片中的每一个点的颜色，然后再填充到新的图片中。

在此之前，需要先编写一个转换程序，用于在 Unity 和 SkiaSharp 之间转换颜色

using UnityEngine;

namespace SkiaSharp.Unity
{
  /// <summary>
  ///   颜色转换
  /// </summary>
  public static class ColorConverter
  {
    /// <summary>
    ///   转换到Unity颜色
    /// </summary>
    /// <param name="skColorF"></param>
    /// <returns></returns>
    public static Color ToUnityColor(this SKColorF skColorF)
    {
      return new Color(skColorF.Red, skColorF.Green, skColorF.Blue, skColorF.Alpha);
    }

    /// <summary>
    ///   转换到Unity颜色
    /// </summary>
    /// <param name="skColor"></param>
    /// <returns></returns>
    public static Color32 ToUnityColor32(this SKColor skColor)
    {
      return new Color32(skColor.Red, skColor.Green, skColor.Blue, skColor.Alpha);
    }

    /// <summary>
    ///   转换到SKColorF
    /// </summary>
    /// <param name="color"></param>
    /// <returns></returns>
    public static SKColorF ToSkColorF(this Color color)
    {
      return new SKColorF(color.r, color.g, color.b, color.a);
    }

    /// <summary>
    ///   转换到SKColor
    /// </summary>
    /// <param name="color32"></param>
    /// <returns></returns>
    public static SKColor ToSkColor(this Color32 color32)
    {
      return new SKColor(color32.r, color32.g, color32.b, color32.a);
    }
  }
}

然后使用 GetPixels32() 和 SetPixels32() 操作 Texture2D，简单写个示例。

using System.Linq;
using SkiaSharp;
using SkiaSharp.Unity;
using UnityEngine;
using UnityEngine.UI;

[RequireComponent(typeof(RawImage))]
public class Example1 : MonoBehaviour
{
  [SerializeField] private string texPath;
  private RawImage _rawImage;

  private void Start()
  {
    _rawImage = GetComponent<RawImage>();

    var bitmap = SKBitmap.Decode(texPath);

    var colors = bitmap.Pixels.AsParallel().AsOrdered().Select(s => s.ToUnityColor32()).ToArray();

    var tex0 = new Texture2D(bitmap.Width, bitmap.Height);
    tex0.SetPixels32(colors);
    tex0.Apply();

    _rawImage.texture = tex0;
    _rawImage.GetComponent<RectTransform>().sizeDelta = new Vector2(tex0.width, tex0.height);
  }
}

运行完成后，会发现图片是反的。

这是 Unity 中 Texture2D 和 SkiaSharp 图片读取位置不一致导致的。简单画了一张示意图，可以看一下结构。

由图可知，需要调整颜色的像素点顺序。知道原理后，修改一下代码。

using System;
using System.Buffers;
using System.Linq;
using SkiaSharp;
using SkiaSharp.Unity;
using UnityEngine;
using UnityEngine.UI;

[RequireComponent(typeof(RawImage))]
public class Example1 : MonoBehaviour
{
  [SerializeField] private string texPath;
  private RawImage _rawImage;

  private void Start()
  {
    _rawImage = GetComponent<RawImage>();

    var bitmap = SKBitmap.Decode(texPath);

    var skcolors = bitmap.Pixels.AsSpan();

    var writer = new ArrayBufferWriter<SKColor>(bitmap.Width * bitmap.Height);

    for (var i = bitmap.Height - 1; i >= 0; i--) writer.Write(skcolors.Slice(i * bitmap.Width, bitmap.Width));

    var colors = writer.WrittenSpan.ToArray().AsParallel().AsOrdered().Select(s => s.ToUnityColor32()).ToArray();

    var tex0 = new Texture2D(bitmap.Width, bitmap.Height);
    tex0.SetPixels32(colors);
    tex0.Apply();

    _rawImage.texture = tex0;
    _rawImage.GetComponent<RectTransform>().sizeDelta = new Vector2(tex0.width, tex0.height);
  }
}

修改代码，再次运行之后就可以正确加载贴图了。

反过来，从 Texture2D 到 SKBitmap 也是一样的，使用 GetPixels32() 获取数据，这里就不再赘述。

直接填充数据

我们再思考一个问题，能否不去填充像素点的颜色，而是直接填充数据，这样转换效率会更高。

当 SKBitmap 的 ColorType 与 Texture2D 的 TextureFormat，对应时，内存数据一致，调整数据后直接填充进去就可以了。

我给出下面的示例代码，可以看一下。

using System;
using System.Buffers;
using SkiaSharp;
using UnityEngine;
using UnityEngine.UI;

public class Example2 : MonoBehaviour
{
  [SerializeField] private Texture2D tex;
  private RawImage _rawImage;

  private void Start()
  {
    _rawImage = GetComponent<RawImage>();

    // 以下代码都是 已知 tex 的 TextureFormat 为 RGBA32 的情况下

    var bitmap = new SKBitmap(tex.width, tex.height, SKColorType.Rgba8888, SKAlphaType.Opaque);

    var data = tex.GetPixelData<byte>(0).AsReadOnlySpan();

    var writer = new ArrayBufferWriter<byte>(tex.width * tex.height * 4);

    for (var i = tex.height - 1; i >= 0; i--) writer.Write(data.Slice(i * tex.width * 4, tex.width * 4));

    var span = writer.WrittenSpan;

    unsafe
    {
      fixed (byte* ptr = span)
      {
        bitmap.SetPixels((IntPtr)ptr);
      }
    }

    var tex0 = new Texture2D(bitmap.Width, bitmap.Height, TextureFormat.RGBA32, false);

    var data0 = bitmap.GetPixelSpan();
    var writer0 = new ArrayBufferWriter<byte>(bitmap.Width * bitmap.Height * 4);

    for (var i = bitmap.Height - 1; i >= 0; i--) writer0.Write(data0.Slice(i * bitmap.Width * 4, bitmap.Width * 4));

    tex0.SetPixelData(writer0.WrittenSpan.ToArray(), 0);
    tex0.Apply();
    _rawImage.texture = tex0;
    _rawImage.GetComponent<RectTransform>().sizeDelta = new Vector2(tex0.width, tex0.height);
  }
}

从 GPU 读取数据

前面的所有代码，都是基于 Texture 数据在 CPU 内存中编写的，即 texture2d.isReadable = true，如果数据不在 CPU 内存中，则需要在显卡中读取数据。

/// <summary>
///   从GUP读取贴图
/// </summary>
/// <param name="texture"></param>
/// <returns></returns>
public static Texture2D GetTextureFromGpu(this Texture texture)
{
  var width = texture.width;
  var height = texture.height;
  Texture2D tex2;
  if (texture.GetTextureDataFromGpu(out var data))
  {
    tex2 = new Texture2D(width, height, texture.graphicsFormat, TextureCreationFlags.None);
    tex2.SetPixelData(data, 0);
  }
  else
  {
    var renderTexture = new RenderTexture(width, height, 32);
    Graphics.Blit(texture, renderTexture);
    var tmpTexture = RenderTexture.active;
    RenderTexture.active = renderTexture;
    tex2 = new Texture2D(width, height);
    tex2.ReadPixels(new Rect(0, 0, width, height), 0, 0);
    RenderTexture.active = tmpTexture;
  }
  return tex2;
}

/// <summary>
///   从GPU读取数据
/// </summary>
/// <param name="texture"></param>
/// <param name="data"></param>
/// <returns></returns>
/// <exception cref="Exception"></exception>
public static bool GetTextureDataFromGpu(this Texture texture, out NativeArray<byte> data)
{
#if UNITY_2023_2_OR_NEWER
  if (SystemInfo.IsFormatSupported(texture.graphicsFormat, GraphicsFormatUsage.ReadPixels))
#else
  if (SystemInfo.IsFormatSupported(texture.graphicsFormat, FormatUsage.ReadPixels))
#endif
  {
    var request = AsyncGPUReadback.Request(texture, 0, texture.graphicsFormat);
    request.WaitForCompletion();
    if (request.hasError) throw new Exception("");
    data = request.GetData<byte>();
    return true;
  }
  data = new NativeArray<byte>();
  return false;
}

然后修改前面所写的代码，判断是否可读，如果可读就按前面所写的做，如果不可读，就改为从 GPU 获取数据。

使用 Job 和位运算提高效率

NativeArray

要想使用 Job,就一定会需要 NativeArray<T> ,但是阅读上一篇的代码可知，使用更多的是 Span<T> 和 ReadOnlySpan<T>，所以需要转换。

using System;
using Unity.Collections;
using Unity.Collections.LowLevel.Unsafe;

namespace SkiaSharp.Unity
{
  public static class NativeArrayExt
  {
    /// <summary>
    ///   转换到 NativeArray
    /// </summary>
    /// <param name="span"></param>
    /// <typeparam name="T"></typeparam>
    /// <returns></returns>
    public static unsafe NativeArray<T> AsNativeArray<T>(this ReadOnlySpan<T> span) where T : unmanaged
    {
      fixed (void* source = span)
      {
        var data = NativeArrayUnsafeUtility.ConvertExistingDataToNativeArray<T>(source, span.Length, Allocator.None);
#if ENABLE_UNITY_COLLECTIONS_CHECKS
        NativeArrayUnsafeUtility.SetAtomicSafetyHandle(ref data, AtomicSafetyHandle.Create());
#endif
        return data;
      }
    }

    /// <summary>
    ///   转换到 NativeArray
    /// </summary>
    /// <param name="span"></param>
    /// <typeparam name="T"></typeparam>
    /// <returns></returns>
    public static unsafe NativeArray<T> AsNativeArray<T>(this Span<T> span) where T : unmanaged
    {
      fixed (void* source = span)
      {
        var data = NativeArrayUnsafeUtility.ConvertExistingDataToNativeArray<T>(source, span.Length, Allocator.None);
#if ENABLE_UNITY_COLLECTIONS_CHECKS
        NativeArrayUnsafeUtility.SetAtomicSafetyHandle(ref data, AtomicSafetyHandle.Create());
#endif
        return data;
      }
    }
  }
}

使用 Job 并行计算

使用 Job 并行计算，在一定程度上可以加快颜色格式转换效率，而且这里使用了位运算转换颜色格式。

using Unity.Burst;
using Unity.Collections;
using Unity.Jobs;
using UnityEngine;

namespace SkiaSharp.Unity
{
  /// <summary>
  ///   颜色转换
  /// </summary>
  public static class ColorConverter
  {
    /// <summary>
    ///   转换到 Unity 颜色
    /// </summary>
    /// <param name="skColorF"></param>
    /// <returns></returns>
    public static Color ToUnityColor(this SKColorF skColorF)
    {
      return new Color(skColorF.Red, skColorF.Green, skColorF.Blue, skColorF.Alpha);
    }

    /// <summary>
    ///   转换到 Unity 颜色
    /// </summary>
    /// <param name="skColor"></param>
    /// <returns></returns>
    public static Color32 ToUnityColor32(this SKColor skColor)
    {
      return new Color32(skColor.Red, skColor.Green, skColor.Blue, skColor.Alpha);
    }

    /// <summary>
    ///   转换到 SKColorF
    /// </summary>
    /// <param name="color"></param>
    /// <returns></returns>
    public static SKColorF ToSkColorF(this Color color)
    {
      return new SKColorF(color.r, color.g, color.b, color.a);
    }

    /// <summary>
    ///   转换到 SKColor
    /// </summary>
    /// <param name="color32"></param>
    /// <returns></returns>
    public static SKColor ToSkColor(this Color32 color32)
    {
      return new SKColor(color32.r, color32.g, color32.b, color32.a);
    }

    /// <summary>
    ///   批量转换到 Color32
    /// </summary>
    /// <param name="colors"></param>
    /// <param name="batchCount"></param>
    /// <returns></returns>
    public static NativeArray<Color32> ConvertToColor32(NativeArray<SKColor> colors, int batchCount = 512)
    {
      var handle = FastColorConverter(colors.Reinterpret<uint>(), out var data, batchCount);
      handle.Complete();
      return data.Reinterpret<Color32>();
    }

    /// <summary>
    ///   批量转换到 SKColor
    /// </summary>
    /// <param name="colors"></param>
    /// <param name="batchCount"></param>
    /// <returns></returns>
    public static NativeArray<SKColor> ConvertToSkColor(NativeArray<Color32> colors, int batchCount = 512)
    {
      var handle = FastColorConverter(colors.Reinterpret<uint>(), out var data, batchCount);
      handle.Complete();
      return data.Reinterpret<SKColor>();
    }

    /// <summary>
    ///   快速转换颜色
    /// </summary>
    /// <param name="dataIn"></param>
    /// <param name="dataOut"></param>
    /// <param name="batchCount"></param>
    public static JobHandle FastColorConverter(NativeArray<uint> dataIn, out NativeArray<uint> dataOut, int batchCount = 512)
    {
      dataOut = new NativeArray<uint>(dataIn.Length, Allocator.TempJob);

      var job = new ColorConverterJob
      {
        DataIn = dataIn,
        DataOut = dataOut
      };
      return job.Schedule(dataIn.Length, batchCount);
    }

    [BurstCompile]
    private struct ColorConverterJob : IJobParallelFor
    {
      [ReadOnly] public NativeArray<uint> DataIn;
      public NativeArray<uint> DataOut;

      private const uint Mask0 = 0x00FF0000;
      private const uint Mask1 = 0x000000FF;

      public void Execute(int index)
      {
        var color = DataIn[index];

        DataOut[index] = ((color & Mask0) >> 16) | ((color & Mask1) << 16) | (color & ~(Mask0 | Mask1));
      }
    }
  }
}

贴图转换

using System;
using System.Buffers;
using Unity.Collections;
using UnityEngine;
using UnityEngine.Experimental.Rendering;
using UnityEngine.Rendering;

namespace SkiaSharp.Unity
{
  public static class Texture2DConverter
  {
    public static Texture2D ToTexture2D(this SKBitmap bitmap, int width = 0, int height = 0,
      SKSamplingOptions? options = null)
    {
      var resize = width != 0 || height != 0;

      width = width == 0 ? bitmap.Width : width;
      height = height == 0 ? bitmap.Height : height;

      if (resize) bitmap = bitmap.Resize(new SKSizeI(width, height), options ?? SKSamplingOptions.Default);

      Texture2D texture2D;
      var l = bitmap.ColorType.TryConvertToTextureFormat(out var textureFormat);
      if (l > 0)
      {
        var data = bitmap.GetPixelSpan();

        var writer = new ArrayBufferWriter<byte>(width * height * l);

        for (var i = height - 1; i >= 0; i--) writer.Write(data.Slice(i * width * l, width * l));

        texture2D = new Texture2D(width, height, textureFormat, false);
        texture2D.SetPixelData(writer.WrittenSpan.ToArray(), 0);
      }
      else
      {
        var data0 = bitmap.Pixels.AsSpan();
        var writer = new ArrayBufferWriter<SKColor>();

        for (var i = height - 1; i >= 0; i--) writer.Write(data0.Slice(i * width, width));

        var data1 = writer.WrittenSpan.AsNativeArray();
        var colors = ColorConverter.ConvertToColor32(data1, width * 64);

        texture2D = new Texture2D(width, height, textureFormat, false);
        texture2D.SetPixels32(colors.ToArray());

        data1.Dispose();
        colors.Dispose();
      }

      texture2D.Apply();
      return texture2D;
    }

    public static SKBitmap ToSkBitmap(this Texture2D texture2D, int width = 0, int height = 0,
      SKSamplingOptions? options = null)
    {
      var resize = width != 0 || height != 0;
      width = width == 0 ? texture2D.width : width;
      height = height == 0 ? texture2D.height : height;

      SKBitmap bitmap;
      var l = texture2D.format.TryConvertSkColorTypes(out var skColorType);

      if (l > 0 && texture2D.isReadable)
      {
        ReadOnlySpan<byte> data = texture2D.GetPixelData<byte>(0);

        var writer = new ArrayBufferWriter<byte>(width * height * l);

        for (var i = height - 1; i >= 0; i--) writer.Write(data.Slice(i * width * l, width * l));

        var span = writer.WrittenSpan;
        unsafe
        {
          fixed (byte* ptr = span)
          {
            bitmap = new SKBitmap(width, height, skColorType, SKAlphaType.Premul);
            bitmap.SetPixels((IntPtr)ptr);
          }
        }
      }
      else if (l > 0 && texture2D.GetTextureDataFromGpu(out var textureData))
      {
        ReadOnlySpan<byte> data = textureData;

        var writer = new ArrayBufferWriter<byte>(width * height * l);

        for (var i = height - 1; i >= 0; i--) writer.Write(data.Slice(i * width * l, width * l));

        var span = writer.WrittenSpan;
        unsafe
        {
          fixed (byte* ptr = span)
          {
            bitmap = new SKBitmap(width, height, skColorType, SKAlphaType.Premul);
            bitmap.SetPixels((IntPtr)ptr);
          }
        }
      }
      else
      {
        var data0 = (texture2D.isReadable ? texture2D : texture2D.GetTextureFromGpu()).GetPixels32();
        var data1 = new NativeArray<Color32>(data0, Allocator.TempJob);

        var data2 = ColorConverter.ConvertToSkColor(data1, width * 64);
        var skColors = data2.AsSpan();

        var writer = new ArrayBufferWriter<SKColor>();

        for (var i = height - 1; i >= 0; i--) writer.Write(skColors.Slice(i * width, width));

        bitmap = new SKBitmap(texture2D.width, texture2D.height, skColorType, SKAlphaType.Premul);

        bitmap.Pixels = writer.WrittenSpan.ToArray();
        data1.Dispose();
        data2.Dispose();
      }

      if (resize) bitmap = bitmap.Resize(new SKSizeI(width, height), options ?? SKSamplingOptions.Default);

      return bitmap;
    }

    /// <summary>
    ///   从GUP读取贴图
    /// </summary>
    /// <param name="texture"></param>
    /// <returns></returns>
    public static Texture2D GetTextureFromGpu(this Texture texture)
    {
      var width = texture.width;
      var height = texture.height;
      Texture2D tex2;
      if (texture.GetTextureDataFromGpu(out var data))
      {
        tex2 = new Texture2D(width, height, texture.graphicsFormat, TextureCreationFlags.None);
        tex2.SetPixelData(data, 0);
      }
      else
      {
        var renderTexture = new RenderTexture(width, height, 32);
        Graphics.Blit(texture, renderTexture);
        var tmpTexture = RenderTexture.active;
        RenderTexture.active = renderTexture;
        tex2 = new Texture2D(width, height);
        tex2.ReadPixels(new Rect(0, 0, width, height), 0, 0);
        RenderTexture.active = tmpTexture;
      }

      return tex2;
    }

    /// <summary>
    ///   从GPU读取数据
    /// </summary>
    /// <param name="texture"></param>
    /// <param name="data"></param>
    /// <returns></returns>
    /// <exception cref="Exception"></exception>
    public static bool GetTextureDataFromGpu(this Texture texture, out NativeArray<byte> data)
    {
#if UNITY_2023_2_OR_NEWER
      if (SystemInfo.IsFormatSupported(texture.graphicsFormat, GraphicsFormatUsage.ReadPixels))
#else
      if (SystemInfo.IsFormatSupported(texture.graphicsFormat, FormatUsage.ReadPixels))
#endif
      {
        var request = AsyncGPUReadback.Request(texture, 0, texture.graphicsFormat);
        request.WaitForCompletion();
        if (request.hasError) throw new Exception("");
        data = request.GetData<byte>();
        return true;
      }

      data = new NativeArray<byte>();
      return false;
    }
  }
}
using System;
using UnityEngine;

namespace SkiaSharp.Unity
{
  internal static class ColorTypeConverter
  {
    private static readonly SKColorType[] SkColorTypes =
    {
      SKColorType.Alpha8,
      SKColorType.Rgb565,
      SKColorType.Rgba8888,
      SKColorType.Rgb888x,
      SKColorType.Bgra8888,
      SKColorType.RgbaF16,
      SKColorType.RgbaF16Clamped,
      SKColorType.RgbaF32,
      SKColorType.Rg88,
      SKColorType.RgF16,
      SKColorType.Rg1616,
      SKColorType.Rgba16161616,

      SKColorType.Rgba1010102,
      SKColorType.Rgb101010x,
      SKColorType.Gray8,
      SKColorType.AlphaF16,
      SKColorType.Alpha16,
      SKColorType.Bgra1010102,
      SKColorType.Bgr101010x
    };

    private static readonly TextureFormat[] TextureFormats =
    {
      TextureFormat.Alpha8,
      TextureFormat.RGB565,
      TextureFormat.RGBA32,
      TextureFormat.RGBA32,
      TextureFormat.BGRA32,
      TextureFormat.RGBAHalf,
      TextureFormat.RGBAHalf,
      TextureFormat.RGBAFloat,
      TextureFormat.RG16,
      TextureFormat.RGHalf,
      TextureFormat.RG32,
      TextureFormat.RGBA64,

      TextureFormat.RGBA64,
      TextureFormat.RGBA64,
      TextureFormat.RGBA32,
      TextureFormat.RGBAHalf,
      TextureFormat.RGBA64,
      TextureFormat.RGBA64,
      TextureFormat.RGBA64
    };

    public static readonly int[] LInts = { 1, 2, 4, 4, 4, 8, 8, 16, 2, 4, 4, 8, 0, 0, 0, 0, 0, 0, 0 };


    public static int TryConvertToTextureFormat(this SKColorType skColorType, out TextureFormat textureFormat)
    {
      var index = Array.IndexOf(SkColorTypes, skColorType);
      if (index >= 0)
      {
        textureFormat = TextureFormats[index];
        return LInts[index];
      }

      textureFormat = TextureFormat.RGBA32;
      return 0;
    }

    public static int TryConvertSkColorTypes(this TextureFormat textureFormat, out SKColorType skColorType)
    {
      var index = Array.IndexOf(TextureFormats, textureFormat);
      if (index >= 0)
      {
        skColorType = SkColorTypes[index];
        return LInts[index];
      }

      skColorType = SKColorType.Rgba8888;
      return 0;
    }
  }
}