unity3D 涂涂乐使用shader实现上色效果

unity3D 涂涂乐使用shader实现上色效果

之前我博文里面发过一个简单的通过截图方式来实现的模型上色方法，但是那个方法不合适商用，因为你需要对的很准确才可以把贴图完美截取下来，只要你手抖了一下就会发现贴歪了。那么有没有更好的方法来实现这个效果呢，这就需要使用Shader的方式来实现这个效果。

刚好看到了一篇有关于涂涂乐原理的实现方法，EsayAR的官方案例里面就是使用的这个方法，EsayAR的官方案例其实基本完成这个涂涂乐的效果在看过涂涂乐原理，结合案例的是用Vuforia实现的一个效果，发现利用Shader的方式来实现涂涂乐UV图片的修正这个方式比利用对准框的方法要好，而且也避免了UV在位置偏移的问题。（PS：点击打开链接 Vuforia的案例，注意PC上是没有问题的，但是移动端UV会出现破面的问题）

这里要注意PC上实现的效果并不代表手机上能实现涂涂了得效果，就如Vuforia的案例一样PC上是没有任何问题，但是在移动端就会出现一些问题。（PS：这里我使用的EsayAR的来实现Vuforia的方法）

注意这里提供的源码是使用EsayAR来写的（PS：移动端是有问题）

using System;
using UnityEngine;
using System.Collections;
using EasyAR;

public class Coloring3D : MonoBehaviour
{

    public MeshRenderer realityPlane;
    public Camera rendercamera;
    private Vector3[] marks;
    private Material cubeMat;
    private Vector2 sizeVector2;
    private Vector2 webcamTex2ScreenScale;
    private ImageTargetBehaviour imageTargetBehaviour;
    private Texture2D scanTexture2D;
    private bool isSetupScale = false;

	// Use this for initialization
	void Start ()
	{
	    Init();
	}

    public void Init()
    {
        marks = new Vector3[4];
        sizeVector2 = new Vector2();
        imageTargetBehaviour = transform.GetComponentInParent<ImageTargetBehaviour>();
        sizeVector2 = imageTargetBehaviour.Size;

        //计算识别Plane的4个角的位置
        for (int i = 0; i < marks.Length; i++)
        {
            float x = -1, y = -1;
            if ((i + 1) % 2 == 0)
                x = 1;
            else
                x = -1;
            if (i >= 2)
                y = 1;
            marks[i] = new Vector3(sizeVector2.x / 2 * x, 0, sizeVector2.y / 2 * y);
        }

    }

    void SetupScale()
    {
        //if (!imageTargetBehaviour.GetIsShow())//判断模型是不是显示出来，可以注释掉
           //return;
        if (!isSetupScale)
        {
            cubeMat = this.transform.GetComponent<MeshRenderer>().material;

            var texture = realityPlane.material.mainTexture;//获取摄像头照到的纹理图片
            cubeMat.mainTexture = texture;//将纹理赋值到材质球上

            //计算屏幕和整张图片的比例
            var maxScale = Mathf.Max((float)Screen.width / texture.width, (float)Screen.height / texture.height);

            var t2sWidth = texture.width * maxScale;
            var t2sHeight = texture.height * maxScale;

            webcamTex2ScreenScale.x = Screen.width / t2sWidth;
            webcamTex2ScreenScale.y = Screen.height / t2sHeight;
            isSetupScale = true;
        }

        for (int i = 0; i < marks.Length; i++)
        {
            marks[i] = marks[i] + this.transform.parent.position;
            var pos =
                AdjustUV(rendercamera.WorldToViewportPoint(marks[i]));
            string posName = String.Format("p{0}", i);
            cubeMat.SetVector(posName, pos);//传入到shader进行纹理的拉伸
        }

    }

    Vector4 AdjustUV(Vector3 v)
    {
        //识别图在屏幕的位置
        var webcamX = FixWebcamTextureToScreenUV(v.x, webcamTex2ScreenScale.x);
        var webcamY = FixWebcamTextureToScreenUV(v.y, webcamTex2ScreenScale.y);
        return new Vector4(webcamX*v.z, (1 - webcamY)*v.z, v.z, 1.0f);
    }

    float FixWebcamTextureToScreenUV(float value, float scale)
    {
        return (1.0f - scale) * 0.5f + value * scale;
    }

	// Update is called once per frame
    void OnWillRenderObject()
	{
	    SetupScale();
	}
}

接下来是shader：

Shader "Unlit/PaintingShader"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
	}
	SubShader
	{
		Tags { "RenderType"="Opaque" }
		LOD 100

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag

			#include "UnityCG.cginc"
			struct appdata
			{
				float4 vertex : POSITION;
				float2 uv : TEXCOORD0;
			};

			struct v2f
			{
				float2 uv : TEXCOORD0;
				float4 vertex : SV_POSITION;
			};

			sampler2D _MainTex;
			float4 p0;
			float4 p1;
			float4 p2;
			float4 p3;

			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
				o.uv.x = v.uv.x;
				o.uv.y = v.uv.y;
				return o;
			}

			fixed4 frag (v2f i) : SV_Target
			{
				float2 mid;
				float3 newUV;

				//计算纹理的位置
				if (i.uv.x + i.uv.y >= 1) {
					mid = i.uv;
					newUV = p0 * (1 - mid.x - mid.y) + p1 * mid.x + p2 * mid.y;
				} else {
					mid = float2(1 - i.uv.y, i.uv.x + i.uv.y - 1);
					newUV = p2 * (1 - mid.x - mid.y) + p1 * mid.x + p3 * mid.y;
				}
				//返回计算好的纹理位置
				return tex2D(_MainTex, newUV.xy / newUV.zz);
			}

			ENDCG
		}
	}
}

这里看看效果PC的效果图片吧！

（PS：这里要注意移动端是会出现问题的，但是PC端是没有问题的）

最后附上一张移动端的涂涂乐效果图出来

功能有实时渲染，点击屏幕后就取消实时渲染然后上色到模型上。（PS：移动端的和PC端的代码编写差异挺大的，但是还是离不上面用到的源码）

Vuforia的移动端问题有待解决，如果解决这个问题我会第一时间写博客告诉大家。

（如果想交流一下涂涂乐的问题，可以加我QQ：245076259）