神奇的服装设计

神奇吗？

的确，如果反过来，把左边衣服上的图案像素化成右边画板上的图案，确实不神奇，但这里神奇的是反过来了，竟然可以把像素画转换成高质量的平滑贴图。怎么做到的呢？

资料线索

网上相关资料较少，经过一番努力，终于找到了算法Pixel-art scaling algorithms
Wiki网站有时候打不开，我把上面的贴图借一个过来，给大家提供个线索:

各种算法效果

这篇Wiki里面简单描述了各种算法的原理，基本都是采样原始像素周边若干像素，然后经过一定的算法，最终确定目标图像的像素值。Wiki最后的References中提到了具体实现在Github上的地址,我们美术看了上面的效果图，选择了XBR4x这个算法，shader链接是References中第18条:XBR4x shader.
由于Unity本身支持CG shader,所以应该很好改。

实现

好了现在核心算法以及Shader有了，下面就是实现绘图板以及根据绘制的像素画，生成平滑的贴图，贴到Mesh上进行预览功能了。首先创建一个画布，挂载ImageScale组件：

画布

ImageScale源码如下:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Experimental.Rendering;
using UnityEngine.UI;

public class ImageScale : MonoBehaviour
{
    public GameObject anchor;   //把生成的图贴到谁身上(测试用)
    public int scale;   //生成的图，相对于原始图，放大倍数
    public Shader shader;   //从原始图到生成图，所用到的Shader
    public Vector2Int resolution;   //原始图的大小
    public Color penColor;  //画笔颜色
    private Material mat;
    private RenderTexture renderTexture;
    private Texture2D texture;
    private bool isDrawing;
    private RectTransform thisRect;
    private Vector2Int lastPoint;
    private Vector2 pixelSize;

    // Start is called before the first frame update
    void Start()
    {
        isDrawing = false;
        thisRect = GetComponent<RectTransform>();

        //计算一个像素占多大尺寸
        pixelSize = thisRect.rect.size / resolution;
        
        Texture2D tex = new Texture2D(resolution.x, resolution.y, TextureFormat.RGBA32, false,true);
        
        if (tex != null && shader != null)
        {
            tex.filterMode = FilterMode.Point;
            texture = tex;
            for(int i=0; i<tex.width; i++)
                for(int j=0; j<tex.height; j++)
                    tex.SetPixel(i, j, Color.white);
            tex.Apply();

            //更新本身的图片
            RawImage image = GetComponent<RawImage>();
            image.texture = tex;


            mat = new Material(shader);
            mat.SetVector("texture_size", new Vector2(tex.width, tex.height));
            mat.SetTexture("_MainTex", tex);
            
            renderTexture =  new RenderTexture(tex.width * scale, tex.height * scale, 0);

            Graphics.Blit(tex, renderTexture, mat);

            MeshRenderer renderer = anchor.GetComponent<MeshRenderer>();
            renderer.material.SetTexture("_BaseMap", renderTexture);
        }
    }

    
    private void DrawLine(Vector2Int newPoint)
    {
        //只处理在框内的
        if (newPoint.x < 0 || newPoint.x >= resolution.x || newPoint.y < 0 || newPoint.y >= resolution.y)
            return;
        if(!isDrawing)
        {
            isDrawing = true;
            texture.SetPixel(newPoint.x, newPoint.y, penColor);
            texture.Apply();

            Graphics.Blit(texture, renderTexture, mat);

            lastPoint = newPoint;
            return;
        }

        //如果移动一段距离了，就划线
        if(newPoint != lastPoint)
        {
            List<Vector2Int> points = GridHelper.GetTouchedPosBetweenTwoPoints(lastPoint, newPoint);
            if(points.Count > 0)
            {
                foreach(Vector2Int p in points)
                {
                    texture.SetPixel(p.x, p.y, penColor);
                }
                texture.Apply();

                Graphics.Blit(texture, renderTexture, mat);

                lastPoint = newPoint;
            }
        }
    }

    //坐标转换
    private Vector2Int PointerDataToRelativePos(Vector2 clickPosition)
    {
        Vector2 result;
        RectTransformUtility.ScreenPointToLocalPointInRectangle(thisRect, clickPosition, null, out result);
        result += thisRect.rect.size / 2;
        Vector2Int intResult = Vector2Int.zero;
        pixelSize = thisRect.rect.size / resolution;
        intResult.Set(Mathf.FloorToInt(result.x / pixelSize.x), Mathf.FloorToInt(result.y / pixelSize.y));
        return intResult;
    }
    
    // Update is called once per frame
    void Update()
    {
        if(Input.GetMouseButton(0))
        {
            DrawLine(PointerDataToRelativePos(Input.mousePosition));
        }
        else
        {
            isDrawing = false;
        }
    }
}

其中在Start函数中，创建一个Texture2D用来绘画，然后创建一个RenderTexture用来接受平滑过的效果，并贴到墙纸对象(用来展示效果的GameObject)上， Update函数中检测鼠标事件，做完坐标转换后，在Texture2D上划线，并用给定的平滑算法Shader，Blit到RenderTexture上，就可以在场景中看到效果了。最终效果如下:

效果

怎么样，结果是不是出乎意料？几个像素就能生成如此平滑的图案，你还有什么创意，一起来试试吧。
【转载请注明出处】