手把手教你做个AR涂涂乐
前段时间公司有一个AR涂涂乐的项目,虽然之前接触过AR也写过小Demo,但是没有完整开发过AR项目.不过经过1个多星期的学习,现在已经把项目相关的技术都学会了,在此向互联网上那些乐于分享的程序员前辈们致敬.学习的过程中我发现好多博客只有代码没有讲解,在这里我就写一个详细一点的涂涂乐教程吧.
一.AR涂涂乐原理
目前市场上所有的AR产品中,涂涂乐是一个做的比较成功的产品,因为其形象 生动 新奇的特点,在早教行业内很受欢迎.其实AR涂涂乐的原理非常简单,就是把被当作画画工具的识别图上的颜色材质渲染到空白的模型上.
二.制作流程
我大概总结了下从模型到AR应用涉及到的具体流程,如下:
- 美术制作AR应用中需要用到的模型和动画
- 模型制作好之后,对照识别图上的模型外形匹配好UV
- UV匹配好之后把模型和识别图交付程序,程序登录Vuforia官网添加证书和目标数据
- 程序把Vuforia插件和目标数据分别下好并导入工程
- 删除默认场景中的摄像机,添加ARCamera和ImageTarget到场景并配置好参数
- 把涂涂乐需要用到的模型放入场景,把模型的动画切好
- 求识别图4个顶点的位置,获取一帧图像,把这些参数传给Shader,Shader处理过后,识别图上的颜色就渲染到模型上了
- 导出的手机,我这里是安卓平台
三.图文教程
这里以我最近写的项目为例:
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涂涂乐的更多相关文章
- UWP Jenkins + NuGet + MSBuild 手把手教你做自动UWP Build 和 App store包
背景 项目上需要做UWP的自动安装包,在以前的公司接触的是TFS来做自动build. 公司要求用Jenkins来做,别笑话我,之前还真不晓得这个东西. 会的同学请看一下指出错误,不会的同学请先自行脑补 ...
- 转载:手把手教你做iOS推送
手把手教你做iOS推送 http://www.cocoachina.com/industry/20130321/5862.html
- 手把手教你做JavaWeb项目:登录模块
现如今,无论是客户端还是移动端,无论是游戏登陆还是社交平台登陆,无处不在的“登陆”.那么你知道怎么制作吗?今天就为你娓娓道来: 用户登录 在各大信息管理系统中,登录功能是必不可少的,他的作用就是验证用 ...
- R数据分析:跟随top期刊手把手教你做一个临床预测模型
临床预测模型也是大家比较感兴趣的,今天就带着大家看一篇临床预测模型的文章,并且用一个例子给大家过一遍做法. 这篇文章来自护理领域顶级期刊的文章,文章名在下面 Ballesta-Castillejos ...
- 手把手教你做个人 app
我们都知道,开发一个app很大程度依赖服务端:服务端提供接口数据,然后我们展示:另外,开发一个app,还需要美工协助切图.没了接口,没了美工,app似乎只能做成单机版或工具类app,真的是这样的吗?先 ...
- 手把手教你做echarts图表系列之组织结构图
在实际项目中使用echarts越来越多了,今天从一个组织结构图开始,手把手教大家开发echarts图表. 公司里的组织结构图如下: 可以参考echarts入门教程:http://echarts.bai ...
- 手把手教你做一个Shell命令窗口
这是一个类似于win下面的cmd打开后的窗口,可以跨平台使用,可以在win和linux下面同时使用,主要功能如下: 首先我们需要把这些功能的目录写出来,通过写一个死循环,让其每次回车之后都可以保持同样 ...
- Android应用系列:手把手教你做一个小米通讯录(附图附源码)
前言 最近心血来潮,突然想搞点仿制品玩玩,很不幸小米成为我苦逼的第一个试验品.既然雷布斯的MIUI挺受欢迎的(本人就是其的屌丝用户),所以就拿其中的一些小功能做一些小demo来玩玩.小米的通讯录大家估 ...
- 手把手教你做爬虫---基于NodeJs
前言: 趁着北京今儿天气格外的蓝,我觉得我得干点什么,于是乎,卷起袖子,整理一下最近做爬虫的那些事儿. 目标:爬取北京大学软件与微电子学院的所有新闻,并将内容及图片存储到本地. 设计思路:经过对北京大 ...
随机推荐
- easyui treegrid实现显示checkbox并能获取到选定值的
闲聊: 小颖最近忙疯了,经常被加班,昨天都要下班了,又提了个需求,虽然写的代码不多只有几行,可是测试环境很难跑通,一会就ie崩溃了,所以弄得小颖最近老是头晕. 也不知道最近是怎么了,一向特别爱吃的小颖 ...
- 【craps赌博游戏】
/* cpaps赌博游戏 说明: 一个简单的赌博游戏,游戏规则如下:玩家掷两个骰子,点数为1到6,如果第一次点数和为7或11,则玩家胜,如果点数和为2.3 或12,则玩家输,如果和 为其它点数,则记录 ...
- Swift 2.0 UItableView 的简单使用
在IOS开发中,UItableView 的使用真的是最常见最普通的了,现在在自学swift 今天也是这用Swift 写了写 UItableview的使用,还有一些经常出错的地方.下面我先把整个控制器的 ...
- 使用bootstrap table小记(表格组件)
前言 新的一年悄然到来,生活依旧.最近一周大热的赵雷风,一首<成都>,一首<理想>再次把民谣展示在国人面前.歌词着实写的不错. 理想,你今年几岁 你总是诱惑着年轻的朋友 你总是 ...
- HTML中的a标签实现点击下载
通常在咱们写项目的时候会遇到上传下载什么的,在上传完文件后会把文件的路径保存到数据库里以便下载,如果想不通过后台直接下载的话,可以把文件路径给a标签的属性href: <a href=" ...
- 复杂的1秒--图解Google搜索技术
谷歌(Google),一个非常成功,但又十分神秘,而且带有几分理想化色彩的互联网搜索巨人,它还是一家相当了不起的广告公司,谷歌首页上的那个搜索按钮是其年赢利200亿美元的杀手级应用,也是Interne ...
- C#中字符和字符串总结
Char类是C#提供的字符类型,String是C#提供的字符串类型. 字符: Char类在C#中表示一个Unicode字符. Char类只定义一个Unicode字符. Char类常用的方法及说明如下: ...
- 从C#到TypeScript - Promise
总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...
- Java之路——敬JAVA初学者(作者:MoMo)
作为一名大四的毕业生,大学三年过,有得有失.作为一个喜欢编程,喜欢JAVA的人,自学其实是一件美事,很有意思的事.要是能再找个女朋友一起学.嘿嘿,就不枉在大学走了一遭啊! 要离开学校了,还是想留 ...
- android学习11——Handler,Looper,MessageQueue工作原理
Message是Handler接收和处理的消息对象. 每个线程只能拥有一个Looper.它的loop方法读取MessageQueue中的消息,读到消息之后就把消息交给发送该消息的Handler进行处理 ...