EasyAR塗塗樂代碼分析

來說一下對EasyAR sdk中自帶的unity Samples中的Coloring3D這個項目的理解(例子程序可以去官網下載 最後會列出所有用到網站的網址)。

這個項目的效果就是我們常見的“塗塗樂”。

上色之後

例子程序有很多


其他的我也都看了但是還有一些沒有出現預期的效果,今天就先說下Coloring3D”這個工程。

使用unity打開這個工程(官方的說法是4.6版本以上都能用),打開後目錄如下:

在下圖的目錄中打開場景


Hierarchy視圖的目錄結構如下

下面我們分析下這裏面的東西:

1.EasyAR_Startup 這個預設是使用EasyAR所必須的 上面掛的腳本主要有:EasyARBehaviourAugmenterBehaviourImageTrackerBehaviour。對於這三個腳本和其他例子中的腳本官方文檔中已經有了很大一部分的說明,如果大家喜歡還會繼續對其他例子程序的代碼進行分析。

2.ImageTargetNamecard 上面只有一個腳本EasyImageTargetBehaviour

大家如果不太明白這個腳本,就先知道紅圈部分指定了識別圖片(畢竟這個也不是今天的重點)。

3.下面重點來了!!!!!Colotbear(不知道是我改過名字還是官方給錯名字了,感覺這個名字應該是ColorBear纔對啊,好好好就先這樣)。Inspector視圖如下:



4.

下面我們打開Coloring3DBehaviour這個腳本

先來解釋下 OnwillRenderObject 這個函數 在unity官方文檔中的結束大致如下:onwillrenderobject稱爲每個相機如果對象是可見的。這個功能是如果對象是被視爲從當前相機可見撲殺處理後稱爲。該方法是有用的,如果你需要一個爲每一個渲染對象的相機的準備步驟。這的一個例子是渲染渲染紋理的反射。每一個相機的視點都會有不同的反射,需要在原始的對象之前呈現。如果對象被剔除的一個給定的相機,這個對象會被跳過的思考。使用恰當的語境,看劇本water.cs資產->進口包- >的影響。

注意,camera.current將設置爲相機,將渲染對象。此外,這被稱爲多次每幀。

百度翻譯出來的可能也不太清楚什麼意思,我說下我個人的理解吧,直接點說就是在渲染小熊之前獲取圖像(如果直接獲取一幀圖像小熊模型會遮擋貼圖影響效果)其他的代碼用註釋的形式和大家分享吧。

 void Renderprepare()
        {
            if (!cam)//這裏的cam暫時就叫它貼圖相機,它的作用是獲取一張屏幕截圖(注意是整個屏幕的截圖)
                     //如果相機爲空就new一個出來
            {
                GameObject go = new GameObject("__cam");
                cam = go.AddComponent<Camera>();
                go.transform.parent = transform.parent;
                cam.hideFlags = HideFlags.HideAndDontSave;
            }
            cam.CopyFrom(Camera.main);//從主相機中獲取一幀
            cam.depth = 0;
            cam.cullingMask = 31;

            if (!renderTexture)
            {
                renderTexture = new RenderTexture(Screen.width, Screen.height, -50);//new一個貼圖
            }
            cam.targetTexture = renderTexture;
            cam.Render();
            GetComponent<Renderer>().material.SetTexture("_MainTex", renderTexture);//把截圖付給小熊模型
        }

  void OnWillRenderObject()
        {
            if (!targetBehaviour || targetBehaviour.Target == null)
                return;
            Vector2 halfSize = targetBehaviour.Target.Size * 0.5f;
            //通過識別圖的中心點得到識別圖的四個定點
            Vector3 targetAnglePoint1 = transform.parent.TransformPoint(new Vector3(-halfSize.x, 0, halfSize.y));
            Vector3 targetAnglePoint2 = transform.parent.TransformPoint(new Vector3(-halfSize.x, 0, -halfSize.y));
            Vector3 targetAnglePoint3 = transform.parent.TransformPoint(new Vector3(halfSize.x, 0, halfSize.y));
            Vector3 targetAnglePoint4 = transform.parent.TransformPoint(new Vector3(halfSize.x, 0, -halfSize.y));
            //獲取一張屏幕貼圖並付給小熊
            Renderprepare();
            //把四個UV點設置成剛獲取的屏幕截屏中識別圖的四個點到此結束。可能我表達不太清楚吧,下面用圖片給大家解釋
            GetComponent<Renderer>().material.SetVector("_Uvpoint1", new Vector4(targetAnglePoint1.x, targetAnglePoint1.y, targetAnglePoint1.z, 1f));
            GetComponent<Renderer>().material.SetVector("_Uvpoint2", new Vector4(targetAnglePoint2.x, targetAnglePoint2.y, targetAnglePoint2.z, 1f));
            GetComponent<Renderer>().material.SetVector("_Uvpoint3", new Vector4(targetAnglePoint3.x, targetAnglePoint3.y, targetAnglePoint3.z, 1f));
            GetComponent<Renderer>().material.SetVector("_Uvpoint4", new Vector4(targetAnglePoint4.x, targetAnglePoint4.y, targetAnglePoint4.z, 1f));
        }

把整個屏幕截屏設置爲小熊的貼圖

通過中心的紅點計算出四個頂點的座標

最後把小熊的四個UVPoint對應到四個頂點

好了到這裏就結束了,如果有需要討論的請Email我

[email protected]




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章