前段时间公司有一个AR涂涂乐的项目,虽然之前接触过AR也写过小Demo,但是没有完整开发过AR项目.不过经过1个多星期的学习,现在已经把项目相关的技术都学会了,在此向互联网上那些乐于分享的程序员前辈们致敬.学习的过程中我发现好多博客只有代码没有讲解,在这里我就写一个详细一点的涂涂乐教程吧.

一.AR涂涂乐原理

目前市场上所有的AR产品中,涂涂乐是一个做的比较成功的产品,因为其形象 生动 新奇的特点,在早教行业内很受欢迎.其实AR涂涂乐的原理非常简单,就是把被当作画画工具的识别图上的颜色材质渲染到空白的模型上.

二.制作流程

我大概总结了下从模型到AR应用涉及到的具体流程,如下:

  1. 美术制作AR应用中需要用到的模型和动画
  2. 模型制作好之后,对照识别图上的模型外形匹配好UV
  3. UV匹配好之后把模型和识别图交付程序,程序登录Vuforia官网添加证书和目标数据
  4. 程序把Vuforia插件和目标数据分别下好并导入工程
  5. 删除默认场景中的摄像机,添加ARCamera和ImageTarget到场景并配置好参数
  6. 把涂涂乐需要用到的模型放入场景,把模型的动画切好
  7. 求识别图4个顶点的位置,获取一帧图像,把这些参数传给Shader,Shader处理过后,识别图上的颜色就渲染到模型上了
  8. 导出的手机,我这里是安卓平台

三.图文教程

这里以我最近写的项目为例:

1.美术不是自己亲自做的,就写下我当时做项目时对美术的要求吧:

  • UV要展好,和识别图匹配好
  • 带动画的模型要保持独立,不能和其他模型在一起
  • 模型动画要有周期性2遍为一个周期
  • 识别图要对比强烈
  • 命名规范要有意义同一模型的不同组件要分组
  • 单位M
  • 格式FBX

交付:

  • 模型:

  • 识别图:

这个模型只有花是用来画画的,因此识别图是一个空白的花.

2.Vuforia准备工作(许可证 和 识别图数据)

  • 没有注册过的先注册下,Vuforia注册时要注意的一点是密码要包含大小写和特殊符号
  • 注册后点击Develop --->Add License Key

  • 正常测试选Development就行了,然后取个名字点Next

  • 然后确认就好了

  • 这里的License Key是待会项目中要用到的 先用记事本保存下来备用

  • 到了添加识别图的时候了,先创建一个Target Database

  • 然后点击刚才创建的Target Database

  • 添加识别图

  • 静静等待 不要关闭

  • 下载识别图数据备用

  • 下载Vuforia插件备用

3.Unity配置阶段

  • 配置安卓开发环境(之前写过的博客,很具体)电梯

  • 转换开发平台(不提前转换导出时有可能会报错)

  • 依次导入Vuforia插件包,识别图数据包,美术资源

  • 删除场景中的Camera,在场景中添加AR Camera和Image Target

  • 配置AR Camera

  • 配置Image Target

  • 把模型拖入Image Target并调整好位置

4.编程阶段

总体思想:编程阶段做的主要工作是把识别图上的材质信息经过计算赋给模型,这里因为动画的原因,每个模型可能涉及很多单个小模块,每个单个的模块都要经过这个计算,在这里,花的7个花瓣是独立的,也就需要7次运算.

  • 核心代码
using UnityEngine;
using Vuforia;
using System.Collections; public class ARRender : MonoBehaviour
{ public GameObject Scene; private Animator flowerAnimator; //七色花的七个花瓣
public GameObject flower1;
public GameObject flower2;
public GameObject flower3;
public GameObject flower4;
public GameObject flower5;
public GameObject flower6;
public GameObject flower7; private Texture2D texture;
//申请Texture2D变量储存屏幕截图 private int screenWidth;
//保存屏幕宽度
private int screenHeight;
//保存屏幕高度 //拾取真正贴图的四个点的坐标
Vector3 targetAnglePoint1;
//左上角坐标
Vector3 targetAnglePoint2;
//左下角坐标
Vector3 targetAnglePoint3;
//右上角坐标
Vector3 targetAnglePoint4;
//右下角坐标 public GameObject plane;
//储存确定贴图大小的面片物体 Vector2 halfSize;
//记录plane宽高的一半值 void Start()
{ screenWidth = Screen.width;
//屏幕宽
screenHeight = Screen.height;
//屏幕高 texture = new Texture2D(screenWidth, screenHeight, TextureFormat.RGB24, false);//实例化空纹理 flowerAnimator = this.GetComponent<Animator>(); } //截屏函数
public void ScreenShot()
{
Scene.SetActive(true); flowerAnimator.SetTrigger("FlowerRainbow"); texture.ReadPixels(new Rect(0, 0, screenWidth, screenHeight), 0, 0);
//读取屏幕像素信息
texture.Apply();
//存储为纹理数据 halfSize = new Vector2(plane.GetComponent<MeshFilter>().mesh.bounds.size.x, plane.GetComponent<MeshFilter>().mesh.bounds.size.z) * 50.0f*0.5f;
//获取Plane的长宽的一半值 //确定真实贴图的世界坐标
targetAnglePoint1 = transform.parent.position + new Vector3(-halfSize.x, 0, halfSize.y);
targetAnglePoint2 = transform.parent.position + new Vector3(-halfSize.x, 0, -halfSize.y);
targetAnglePoint3 = transform.parent.position + new Vector3(halfSize.x, 0, halfSize.y);
targetAnglePoint4 = transform.parent.position + new Vector3(halfSize.x, 0, -halfSize.y); //获取VP值
Matrix4x4 P = GL.GetGPUProjectionMatrix(Camera.main.projectionMatrix, false);
Matrix4x4 V = Camera.main.worldToCameraMatrix;
Matrix4x4 VP = P * V; //给地球的Shader传递贴图四个点的世界坐标,VP,以及贴图
flower1.GetComponent<Renderer>().material.SetVector("_Uvpoint1", new Vector4(targetAnglePoint1.x, targetAnglePoint1.y, targetAnglePoint1.z, 1f));
flower1.GetComponent<Renderer>().material.SetVector("_Uvpoint2", new Vector4(targetAnglePoint2.x, targetAnglePoint2.y, targetAnglePoint2.z, 1f));
flower1.GetComponent<Renderer>().material.SetVector("_Uvpoint3", new Vector4(targetAnglePoint3.x, targetAnglePoint3.y, targetAnglePoint3.z, 1f));
flower1.GetComponent<Renderer>().material.SetVector("_Uvpoint4", new Vector4(targetAnglePoint4.x, targetAnglePoint4.y, targetAnglePoint4.z, 1f));
flower1.GetComponent<Renderer>().material.SetMatrix("_VP", VP);
flower1.GetComponent<Renderer>().material.mainTexture = texture; flower2.GetComponent<Renderer>().material.SetVector("_Uvpoint1", new Vector4(targetAnglePoint1.x, targetAnglePoint1.y, targetAnglePoint1.z, 1f));
flower2.GetComponent<Renderer>().material.SetVector("_Uvpoint2", new Vector4(targetAnglePoint2.x, targetAnglePoint2.y, targetAnglePoint2.z, 1f));
flower2.GetComponent<Renderer>().material.SetVector("_Uvpoint3", new Vector4(targetAnglePoint3.x, targetAnglePoint3.y, targetAnglePoint3.z, 1f));
flower2.GetComponent<Renderer>().material.SetVector("_Uvpoint4", new Vector4(targetAnglePoint4.x, targetAnglePoint4.y, targetAnglePoint4.z, 1f));
flower2.GetComponent<Renderer>().material.SetMatrix("_VP", VP);
flower2.GetComponent<Renderer>().material.mainTexture = texture; flower3.GetComponent<Renderer>().material.SetVector("_Uvpoint1", new Vector4(targetAnglePoint1.x, targetAnglePoint1.y, targetAnglePoint1.z, 1f));
flower3.GetComponent<Renderer>().material.SetVector("_Uvpoint2", new Vector4(targetAnglePoint2.x, targetAnglePoint2.y, targetAnglePoint2.z, 1f));
flower3.GetComponent<Renderer>().material.SetVector("_Uvpoint3", new Vector4(targetAnglePoint3.x, targetAnglePoint3.y, targetAnglePoint3.z, 1f));
flower3.GetComponent<Renderer>().material.SetVector("_Uvpoint4", new Vector4(targetAnglePoint4.x, targetAnglePoint4.y, targetAnglePoint4.z, 1f));
flower3.GetComponent<Renderer>().material.SetMatrix("_VP", VP);
flower3.GetComponent<Renderer>().material.mainTexture = texture; flower4.GetComponent<Renderer>().material.SetVector("_Uvpoint1", new Vector4(targetAnglePoint1.x, targetAnglePoint1.y, targetAnglePoint1.z, 1f));
flower4.GetComponent<Renderer>().material.SetVector("_Uvpoint2", new Vector4(targetAnglePoint2.x, targetAnglePoint2.y, targetAnglePoint2.z, 1f));
flower4.GetComponent<Renderer>().material.SetVector("_Uvpoint3", new Vector4(targetAnglePoint3.x, targetAnglePoint3.y, targetAnglePoint3.z, 1f));
flower4.GetComponent<Renderer>().material.SetVector("_Uvpoint4", new Vector4(targetAnglePoint4.x, targetAnglePoint4.y, targetAnglePoint4.z, 1f));
flower4.GetComponent<Renderer>().material.SetMatrix("_VP", VP);
flower4.GetComponent<Renderer>().material.mainTexture = texture; flower5.GetComponent<Renderer>().material.SetVector("_Uvpoint1", new Vector4(targetAnglePoint1.x, targetAnglePoint1.y, targetAnglePoint1.z, 1f));
flower5.GetComponent<Renderer>().material.SetVector("_Uvpoint2", new Vector4(targetAnglePoint2.x, targetAnglePoint2.y, targetAnglePoint2.z, 1f));
flower5.GetComponent<Renderer>().material.SetVector("_Uvpoint3", new Vector4(targetAnglePoint3.x, targetAnglePoint3.y, targetAnglePoint3.z, 1f));
flower5.GetComponent<Renderer>().material.SetVector("_Uvpoint4", new Vector4(targetAnglePoint4.x, targetAnglePoint4.y, targetAnglePoint4.z, 1f));
flower5.GetComponent<Renderer>().material.SetMatrix("_VP", VP);
flower5.GetComponent<Renderer>().material.mainTexture = texture; flower6.GetComponent<Renderer>().material.SetVector("_Uvpoint1", new Vector4(targetAnglePoint1.x, targetAnglePoint1.y, targetAnglePoint1.z, 1f));
flower6.GetComponent<Renderer>().material.SetVector("_Uvpoint2", new Vector4(targetAnglePoint2.x, targetAnglePoint2.y, targetAnglePoint2.z, 1f));
flower6.GetComponent<Renderer>().material.SetVector("_Uvpoint3", new Vector4(targetAnglePoint3.x, targetAnglePoint3.y, targetAnglePoint3.z, 1f));
flower6.GetComponent<Renderer>().material.SetVector("_Uvpoint4", new Vector4(targetAnglePoint4.x, targetAnglePoint4.y, targetAnglePoint4.z, 1f));
flower6.GetComponent<Renderer>().material.SetMatrix("_VP", VP);
flower6.GetComponent<Renderer>().material.mainTexture = texture; flower7.GetComponent<Renderer>().material.SetVector("_Uvpoint1", new Vector4(targetAnglePoint1.x, targetAnglePoint1.y, targetAnglePoint1.z, 1f));
flower7.GetComponent<Renderer>().material.SetVector("_Uvpoint2", new Vector4(targetAnglePoint2.x, targetAnglePoint2.y, targetAnglePoint2.z, 1f));
flower7.GetComponent<Renderer>().material.SetVector("_Uvpoint3", new Vector4(targetAnglePoint3.x, targetAnglePoint3.y, targetAnglePoint3.z, 1f));
flower7.GetComponent<Renderer>().material.SetVector("_Uvpoint4", new Vector4(targetAnglePoint4.x, targetAnglePoint4.y, targetAnglePoint4.z, 1f));
flower7.GetComponent<Renderer>().material.SetMatrix("_VP", VP);
flower7.GetComponent<Renderer>().material.mainTexture = texture;
}
}
  • Shader
Shader "AR paint/ToMaterial" {
Properties {
_MainTex ("Base (RGB)", 2D) = "white" {}
_Uvpoint1("point1", Vector) = (0 , 0 , 0 , 0)
_Uvpoint2("point2", Vector) = (0 , 0 , 0 , 0)
_Uvpoint3("point3", Vector) = (0 , 0 , 0 , 0)
_Uvpoint4("point4", Vector) = (0 , 0 , 0 , 0) }
SubShader {
Tags { "Queue"="Transparent" "RenderType"="Transparent" }
LOD 200 Pass{
Blend SrcAlpha OneMinusSrcAlpha CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc" sampler2D _MainTex;
float4 _MainTex_ST;
float4 _Uvpoint1;
float4 _Uvpoint2;
float4 _Uvpoint3;
float4 _Uvpoint4;
float4x4 _VP; struct v2f {
float4 pos : SV_POSITION;
float2 uv : TEXCOORD0;
float4 fixedPos : TEXCOORD2;
} ; v2f vert (appdata_base v)
{
v2f o;
o.pos = mul(UNITY_MATRIX_MVP,v.vertex);
o.uv = TRANSFORM_TEX(v.texcoord,_MainTex); float4 top = lerp(_Uvpoint1, _Uvpoint3, o.uv.x);
float4 bottom = lerp(_Uvpoint2, _Uvpoint4, o.uv.x);
float4 fixedPos = lerp(bottom, top, o.uv.y);
o.fixedPos = ComputeScreenPos(mul(UNITY_MATRIX_VP, fixedPos));
return o;
} float4 frag (v2f i) : COLOR
{ float4 top = lerp(_Uvpoint1, _Uvpoint3, i.uv.x);
float4 bottom = lerp(_Uvpoint2, _Uvpoint4, i.uv.x);
float4 fixedPos = lerp(bottom, top, i.uv.y);
fixedPos = ComputeScreenPos(mul(_VP, fixedPos));
return tex2D(_MainTex, fixedPos.xy / fixedPos.w); }
ENDCG
}
}
//FallBack "Diffuse"
}
  • 首先在ImageTarget下新建一个Plane和识别图大小一致,核心代码的功能就是把场景中Plane(也就是识别图)的世界坐标转换到屏幕坐标,然后截图形成纹理,最后把这些数据传给Shader处理.

  • 把模型拖入ImageTarget,装饰场景也拖进去先隐藏,然后把需要渲染的模块拖入ARRender的代码参数,然后新建一个材质,Shader选择ARpaint/ToMaterial,把这个材质赋给所有要涂色渲染的模块,也就是7个花瓣.
  • 新建一个Button,添加事件拖入Flower,方法选择ScreenShot
  • 导出安装包到手机,测试,这是我的测试结果:

  • 关于动画

  • 动画拿到之后根据需要进行切割并Apply

  • 新建一个动画控制器,把刚才切好的动画拖到动画状态机里面,右键建立Transition,Parameters选项卡中创建Trigger,这样就可以在程序中控制动画了

  • 关于音效

  • 新建一个空物体,起名Audio

  • 添加AudioSource组件

  • 拖入ImageTarget

  • 找到ImageTarget下的 DefaultTrackableEventHandler 脚本 声明AudioSource变量然后分别在 OnTrackingFound() 和 OnTrackingLost()这两个方法里添加声音暂停和开始方法

public class DefaultTrackableEventHandler : MonoBehaviour,
ITrackableEventHandler
{
public AudioSource clothesAudioSource;
#region PRIVATE_MEMBER_VARIABLES private TrackableBehaviour mTrackableBehaviour; #endregion // PRIVATE_MEMBER_VARIABLES #region UNTIY_MONOBEHAVIOUR_METHODS void Start()
{
mTrackableBehaviour = GetComponent<TrackableBehaviour>();
if (mTrackableBehaviour)
{
mTrackableBehaviour.RegisterTrackableEventHandler(this);
}
} #endregion // UNTIY_MONOBEHAVIOUR_METHODS #region PUBLIC_METHODS /// <summary>
/// Implementation of the ITrackableEventHandler function called when the
/// tracking state changes.
/// </summary>
public void OnTrackableStateChanged(
TrackableBehaviour.Status previousStatus,
TrackableBehaviour.Status newStatus)
{
if (newStatus == TrackableBehaviour.Status.DETECTED ||
newStatus == TrackableBehaviour.Status.TRACKED ||
newStatus == TrackableBehaviour.Status.EXTENDED_TRACKED)
{
OnTrackingFound();
}
else
{
OnTrackingLost();
}
} #endregion // PUBLIC_METHODS #region PRIVATE_METHODS private void OnTrackingFound()
{
//gameObject.transform.FindChild ("Earth").gameObject.SetActive (true);
Renderer[] rendererComponents = GetComponentsInChildren<Renderer>(true);
Collider[] colliderComponents = GetComponentsInChildren<Collider>(true); // Enable rendering:
foreach (Renderer component in rendererComponents)
{
component.enabled = true;
} // Enable colliders:
foreach (Collider component in colliderComponents)
{
component.enabled = true;
}
if (!clothesAudioSource.isPlaying)
{
clothesAudioSource.Play();
} Debug.Log("Trackable " + mTrackableBehaviour.TrackableName + " found");
} private void OnTrackingLost()
{
Renderer[] rendererComponents = GetComponentsInChildren<Renderer>(true);
Collider[] colliderComponents = GetComponentsInChildren<Collider>(true); // Disable rendering:
foreach (Renderer component in rendererComponents)
{
component.enabled = false;
} // Disable colliders:
foreach (Collider component in colliderComponents)
{
component.enabled = false;
} clothesAudioSource.Pause(); Debug.Log("Trackable " + mTrackableBehaviour.TrackableName + " lost");
} #endregion // PRIVATE_METHODS
}
}
  • 关于对焦

Vuforia默认不会自动对焦,新建一个脚本,把下面代码复制进去,把脚本拖到ARCamera上面就好了

using UnityEngine;
using System.Collections; public class Duijiao : MonoBehaviour
{ // Use this for initialization
void Start()
{
GameObject ARCamera = GameObject.Find("ARCamera"); Vuforia.CameraDevice.Instance.SetFocusMode(Vuforia.CameraDevice.FocusMode.FOCUS_MODE_CONTINUOUSAUTO);
} // Update is called once per frame
void Update()
{
Vuforia.CameraDevice.Instance.SetFocusMode(Vuforia.CameraDevice.FocusMode.FOCUS_MODE_CONTINUOUSAUTO);
}
}
  • 关于多图识别

  • 设置目标上限

  • 拖入更多的ImageTarget,每个ImageTarget下配置不同的识别图和模型就能多图识别了

  • 测试结果

由于还没有重构,代码比较丑陋,不过好处是适合新手,很好理解

手把手教你做个AR涂涂乐的更多相关文章

  1. UWP Jenkins + NuGet + MSBuild 手把手教你做自动UWP Build 和 App store包

    背景 项目上需要做UWP的自动安装包,在以前的公司接触的是TFS来做自动build. 公司要求用Jenkins来做,别笑话我,之前还真不晓得这个东西. 会的同学请看一下指出错误,不会的同学请先自行脑补 ...

  2. 转载:手把手教你做iOS推送

    手把手教你做iOS推送 http://www.cocoachina.com/industry/20130321/5862.html

  3. 手把手教你做JavaWeb项目:登录模块

    现如今,无论是客户端还是移动端,无论是游戏登陆还是社交平台登陆,无处不在的“登陆”.那么你知道怎么制作吗?今天就为你娓娓道来: 用户登录 在各大信息管理系统中,登录功能是必不可少的,他的作用就是验证用 ...

  4. R数据分析:跟随top期刊手把手教你做一个临床预测模型

    临床预测模型也是大家比较感兴趣的,今天就带着大家看一篇临床预测模型的文章,并且用一个例子给大家过一遍做法. 这篇文章来自护理领域顶级期刊的文章,文章名在下面 Ballesta-Castillejos ...

  5. 手把手教你做个人 app

    我们都知道,开发一个app很大程度依赖服务端:服务端提供接口数据,然后我们展示:另外,开发一个app,还需要美工协助切图.没了接口,没了美工,app似乎只能做成单机版或工具类app,真的是这样的吗?先 ...

  6. 手把手教你做echarts图表系列之组织结构图

    在实际项目中使用echarts越来越多了,今天从一个组织结构图开始,手把手教大家开发echarts图表. 公司里的组织结构图如下: 可以参考echarts入门教程:http://echarts.bai ...

  7. 手把手教你做一个Shell命令窗口

    这是一个类似于win下面的cmd打开后的窗口,可以跨平台使用,可以在win和linux下面同时使用,主要功能如下: 首先我们需要把这些功能的目录写出来,通过写一个死循环,让其每次回车之后都可以保持同样 ...

  8. Android应用系列:手把手教你做一个小米通讯录(附图附源码)

    前言 最近心血来潮,突然想搞点仿制品玩玩,很不幸小米成为我苦逼的第一个试验品.既然雷布斯的MIUI挺受欢迎的(本人就是其的屌丝用户),所以就拿其中的一些小功能做一些小demo来玩玩.小米的通讯录大家估 ...

  9. 手把手教你做爬虫---基于NodeJs

    前言: 趁着北京今儿天气格外的蓝,我觉得我得干点什么,于是乎,卷起袖子,整理一下最近做爬虫的那些事儿. 目标:爬取北京大学软件与微电子学院的所有新闻,并将内容及图片存储到本地. 设计思路:经过对北京大 ...

随机推荐

  1. easyui treegrid实现显示checkbox并能获取到选定值的

    闲聊: 小颖最近忙疯了,经常被加班,昨天都要下班了,又提了个需求,虽然写的代码不多只有几行,可是测试环境很难跑通,一会就ie崩溃了,所以弄得小颖最近老是头晕. 也不知道最近是怎么了,一向特别爱吃的小颖 ...

  2. 【craps赌博游戏】

    /* cpaps赌博游戏 说明: 一个简单的赌博游戏,游戏规则如下:玩家掷两个骰子,点数为1到6,如果第一次点数和为7或11,则玩家胜,如果点数和为2.3 或12,则玩家输,如果和 为其它点数,则记录 ...

  3. Swift 2.0 UItableView 的简单使用

    在IOS开发中,UItableView 的使用真的是最常见最普通的了,现在在自学swift 今天也是这用Swift 写了写 UItableview的使用,还有一些经常出错的地方.下面我先把整个控制器的 ...

  4. 使用bootstrap table小记(表格组件)

    前言 新的一年悄然到来,生活依旧.最近一周大热的赵雷风,一首<成都>,一首<理想>再次把民谣展示在国人面前.歌词着实写的不错. 理想,你今年几岁 你总是诱惑着年轻的朋友 你总是 ...

  5. HTML中的a标签实现点击下载

    通常在咱们写项目的时候会遇到上传下载什么的,在上传完文件后会把文件的路径保存到数据库里以便下载,如果想不通过后台直接下载的话,可以把文件路径给a标签的属性href: <a href=" ...

  6. 复杂的1秒--图解Google搜索技术

    谷歌(Google),一个非常成功,但又十分神秘,而且带有几分理想化色彩的互联网搜索巨人,它还是一家相当了不起的广告公司,谷歌首页上的那个搜索按钮是其年赢利200亿美元的杀手级应用,也是Interne ...

  7. C#中字符和字符串总结

    Char类是C#提供的字符类型,String是C#提供的字符串类型. 字符: Char类在C#中表示一个Unicode字符. Char类只定义一个Unicode字符. Char类常用的方法及说明如下: ...

  8. 从C#到TypeScript - Promise

    总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...

  9. Java之路——敬JAVA初学者(作者:MoMo)

    作为一名大四的毕业生,大学三年过,有得有失.作为一个喜欢编程,喜欢JAVA的人,自学其实是一件美事,很有意思的事.要是能再找个女朋友一起学.嘿嘿,就不枉在大学走了一遭啊!    要离开学校了,还是想留 ...

  10. android学习11——Handler,Looper,MessageQueue工作原理

    Message是Handler接收和处理的消息对象. 每个线程只能拥有一个Looper.它的loop方法读取MessageQueue中的消息,读到消息之后就把消息交给发送该消息的Handler进行处理 ...