AR儿童绘本技术实现－静态着色

使用vuforia的AR技术+Unity3d实现儿童绘本，市面上的大部分是静态着色：我们在涂鸦了图片以后扫描图片，把图片上着色的部分贴到3d模型上，实现着色互动儿童绘本玩具。

大概的流程是：
1. 制作3d Model以及对应的着色贴图
2. 将着色贴图作为vuforia的识别体
3. 在识别贴图的时候把texture区域裁剪出来
4. 把裁剪的贴图贴到3d模型上

单步骤分析：

制作3d Model以及对应的着色贴图：
这里有一个检查UV有没有做对的方法，把做好的贴图直接贴到3d模型上面，如果uv不对的话，在需要着色的部分，一般是白色区域里会有填充色。假如uv没对上的话，会出现，你或许是把图片确实着色了，但模型上却没有颜色的情况，或者你还没着色，模型上已经有颜色填充了。

将着色贴图作为vuforia的识别体：
http://developer.vuforia.com/
在上传识别图的时候，最好是图片在上传到高通以后显示是5星，星值越高，越容易识别，更稳定

在识别贴图的时候把texture区域裁剪出来：
当我们在获取屏幕贴图的时候，其实获取的是整个屏幕上vuforia相机照到的场景信息，如果我们把这个含有除识别图以外还有其他信息的贴图，贴到3d模型上，此时的模型UV是无法对上。
这个时候，我们需要定义一个面片：
1. 面片的大小一定得跟识别图大小一致
2. 面片的x轴旋转90度，为了跟高通相机的投影垂直
3. 将面片设置为透明

然后我可以开始获取MVP信息，首先说明一下MVP坐标转换的意义：
M - model world 经过该坐标，3d物体由自身的坐标转到空间（世界）坐标
V - camera view 经过该坐标，3d物体有空间坐标转换到相机坐标
P - camera projection 经过该坐标，我们可以在屏幕上看到了

Matrix4x4 M = mPlane.GetComponent<Renderer>().localToWorldMatrix;
Matrix4x4 V = Camera.main.worldToCameraMatrix;
Matrix4x4 P = GL.GetGPUProjectionMatrix(Camera.main.projectionMatrix, false);

经过MVP计算以后，我们已经得到的信息：
1. 面片在空间中的坐标位置
2. AR Camera在空间的位置
3. AR Camera在空间中的投影位置
然后我们把MVP相乘，得到了相机投影的剪辑位置，此时可以通过ShaderLab来接受MVP位置信息，参考资料（http://wiki.ceeger.com/script:unityengine:classes:gl:gl.getgpuprojectionmatrix）
Shader：

Shader "Custom/Test" {
    Properties {
        _MainTex("Texture", 2D) = "white" { }  
    }

    SubShader{ 

    Pass{

    Cull Back

    CGPROGRAM
    #pragma vertex vert
    #pragma fragment frag

    #include "UnityCG.cginc"

    sampler2D _MainTex;
    float4x4 _MATRIX_MVP;

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

    v2f vert(appdata_base v){

        v2f o;
        float2 screenSpacePos;
        float4 clipPos;

        //Convert position from world space to clip space.
        //Only the UV coordinates should be frozen, so use a different matrix
        clipPos = mul(_MATRIX_MVP, v.vertex);

        //Convert position from clip space to screen space.
        //Screen space has range x=-1 to x=1
        screenSpacePos.x = clipPos.x / clipPos.w;
        screenSpacePos.y = clipPos.y / clipPos.w;

        //the screen space range (-1 to 1) has to be converted to
        //the UV range 0 to 1
        o.uv.x = (0.5f*screenSpacePos.x) + 0.5f;
        o.uv.y = (0.5f*screenSpacePos.y) + 0.5f;

        //The position of the vertex should not be frozen, so use
        //the standard UNITY_MATRIX_MVP matrix
        o.pos = mul(UNITY_MATRIX_MVP, v.vertex);

        return o;
    }

    half4 frag(v2f i) : COLOR{

        half4 texcol = tex2D(_MainTex, i.uv);
        return texcol;
    }

    ENDCG

    }
    }
} 

*把裁剪的贴图贴到3d模型上：
将material的mainTexture设置为我们获取屏幕的texture，高通获取当前屏幕截图的方法：

CameraDevice.Instance.SetFrameFormat(Vuforia.Image.PIXEL_FORMAT.RGB888, false);
image = CameraDevice.Instance.GetCameraImage(Vuforia.Image.PIXEL_FORMAT.RGB888);

如果是Editor模式，可以使用：

CameraDevice.Instance.SetFrameFormat(Vuforia.Image.PIXEL_FORMAT.GRAYSCALE;, false);

demo下载地址：
https://yunpan.cn/cPHFVVJcmWCdk 访问密码 f392

此为简化版的教程，本人已经开发多款AR产品，有任何问题可以联系我：11413947