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://pan.baidu.com/s/1hsPrXAk 密码：ls9f

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