2010年6月8日 22:48

【作品】AR+3D動畫公仔

最近做了一個滿有趣的活動網站
可以線上養成味味A的A仔, 收集動作和服裝, 累積一定歲數後還可以抽筆電

味味A 25週年

遊戲本身只是一個像電子雞的遊戲
不過技術上還滿多且雜的, 就像是個大雜繪, 貪心地加了很多料
結合了像是3D、DAE動畫、AR(擴增實境)、Facebook API、webcam偵測手指
在AR模式如果去旋轉感應卡, 或者把A仔倒吊都會有反應
還好有一些是以前剛好有接觸或需求, 而研究出來的成果


活動網址:http://www.vedan.com.tw/25party/

3D動畫模型是第一次使用, 在事前和建模廠商來來回回好幾次的修改
結果磨了太久, 實際程式撰寫只剩不到2星期, 又是一個爆肝力作
綜合了這麼多種技術, 還是有點吃不消
尤其在效能上, 實在也沒辦法顧及太多
想要追上國外的技術水準, 深深覺得還有好多東西要學習阿

  關於Facebook API, 一般要嵌在Facebook裡的應用程式, 會使用FBML或者iframe二種作法, 而要在獨立的活動上使用, 則要使用XFBML及JavaScript SDK, 並設定為聯外通, iframe也是使用JavaScript SDK, 所以同一個網頁嵌到Facebook後就成了應用程式: http://apps.facebook.com/vedan-party/ (只是size不太合, 要嵌在facebook中最好設計成寬度760以下)。 早期的官方教學資源是做在wiki裡, 資料又亂又舊, 現在有整理了一個網頁: http://developers.facebook.com/docs/ 希望以後的更新可以更迅速。

  webcam感應技術主要靈感來自於wonderfl上的一則程式: DiffCamera, 只是再改成針對RGB分別偵測, 以紅色變化為主, 用以偵測膚色, 然後設定為可更動感應區域, 說穿了其實也不是很難。

  AR技術是使用FLARtoolkit (※注意商業使用上有限制), 感應用的mark生成可以參考這篇文章:Marker”s” Generator Online Released!, 從內附的範例開始改起, 搭配Papervision3D, 不會太難使用。


  • esabear 發表於樂多回應(32)引用(0)Flash筆記編輯本文
    樂多分類:網路/3C切換閱讀版型 │昨日人次:0 │累計人次:5266 │標籤:3D,作品,flash
     

    引用URL

    http://cgi.blog.roodo.com/trackback/12635105

    回應文章
    AR搭配FLASH搭配3D還有很多可能性可以走~
    我也剛開始研究這一塊呢~><

    PS:開進去空白一片是因為要先偵測到webcam才能開啟UI跟遊戲嗎?(愣)
    ---------------------------------------------
    版主回覆:
    現在還是會呈現空白嗎? 載入中?
    webcam如果沒偵測到是不會進webcam模式的
    | 檢舉 | Posted by 宋熊寶 at 2010年6月28日 13:27

    急須大量AR人才
    0934141242
    Andy
    uzi8888@yahoo.com.tw
    | 檢舉 | Posted by Andy at 2010年7月10日 14:06
    私密回應
    Posted at 2010年8月9日 12:11

    Hi 板主,

    我是專門負責IT人力招募的人,現階段有一個客戶是知名外商公司,有在找一位網站企劃人員

    Job description:
    1. 與美國總公司連繫,更新與維護公司的網站內容
    2. 活動網站設計
    3. 網頁流量及活動成效追蹤及分析評估
    4. 負責e-learning專案管理

    如你對這個職缺內容有興趣的話,歡迎你直接與我連絡喔。

    Anderson 25782420 ext 148
    email: andersonding@jobnet.com.tw
    | 檢舉 | Posted by Anderson at 2010年8月16日 14:30

    板主您好:
    最近在研究AR~看到您的大作
    希望有機會能向您請教
    是否方便~謝謝!
    ---------------------------------------------
    版主回覆:
    有問題可以留言切磋 :-)
    雖然平時忙碌 有空還是會回應的
    | 檢舉 | Posted by Steven at 2010年9月3日 14:23

    請問如果要在AR裡製作一個公仔並做互動~
    除了把檔案儲存成DAE動畫檔案外~
    webcam偵測手指的技術是否有相關的網站
    或是工具來了解作法~
    我是用FLARToolKit來抓DAE檔
    是否也可以做到這樣的互動效果~
    不知這樣問是否瞭解~還請多包涵~^^
    ---------------------------------------------
    版主回覆:
    3D模型的作法有很多種 有輸出成obj,md2等等
    還有一種作法是把模型輸出為.as檔 效能和載入速度還比較好
    要用哪一種要看看專案的需求而定, 道理都是一樣的, 像我也是採用DAE方式
    只要你能把模型在畫面中的定位找出來, 就可以互動
    所以重點就在於定位的方式
    以你提的FlarToolKit來說, 我記得是沒有"直接"提供對應畫面的座標系
    但是3D套件如PV3D、Away3D等都有3D對應2D的函式
    至於webcam互動的部份, 就是如文中所提的作法來做
    只要能找到正確的感應區塊, 偵測到一定的變化量後做反應就可以做到了
    | 檢舉 | Posted by Steven at 2010年9月7日 09:23

    感謝您的回覆~
    至於webcam互動的部份~
    是否有中文方面的教學可以參考~
    因為對webcam互動的部份觀念還很模糊
    看英文更烏煞煞~
    ---------------------------------------------
    版主回覆:
    我其實也沒有找到什麼中文資源
    像諸如影像,人臉辨識,動作偵測之類的影像處理
    都是偏資訊工程領域的技術 很少有人拿出來討論

    但要找還是有的 只是國外居多
    我所使用的方法即文中的來源 已經算是陽春版的方式了
    不過考慮效能的話還算堪用

    如果你有找到的話 也歡迎分享囉 :-)
    | 檢舉 | Posted by Steven at 2010年9月9日 14:24

    很高興看到這麼優質的程式設計師
    有如此傑出的作品
    這是台灣之福

    不過
    因為都沒看到相關的授權資訊
    想了解你這個 AR 作品是否有事先取得"國外AR Toolkit for Flash版(FLART ToolKit和合法授權"?

    我們公司也想要做類似的AR網頁

    但也有人告訴我們說
    最近很多外面的公司都亂用AR
    這些公司都已違反智財法
    **(就算後面取得也是已違法,因為取得授權時間不能在後)
    而且因為是公訴罪,
    若違此法
    任何人都可以在街角的派出所直接向警察檢舉,
    檢警也就一定要分案辦理,沒得講情的

    但我個人相信你這個線上養成味味A的A仔作品
    一定是有合法授權的
    畢竟這家食品公司是大公司,是絕對不可能違法的 (若違法是要把公司負責人起訴的)

    所以可否告訴我
    如何與對方連絡
    另外
    最重要的是
    像你這樣的授權要多少COCO?

    我相信這是所有同好都想要知道的!!!
    ---------------------------------------------
    版主回覆:

    不好意思
    這個部落格只是純粹個人的一些心得筆記, 只討論技術, 並不想涉及太多商業色彩
    畢竟我個人並不能代表公司, 而且這些費用資訊跟業務部門較有關, 我並不是相當清楚

    不過我知道FlarToolKit在台灣有Reseller, 可以提供相關聯絡資訊給你:
    artruth.info@gmail.com 吳小姐
    就我所知, 台灣的經銷商對於授權的認知和原廠可能有一些出入, 而且授權金是可以討論的

    如果想瞭解更清楚也可以直接聯絡 info@artoolworks.com
    我很早之前曾因為感興趣有自行聯絡過. 原廠的人很Nice的. 一定可以滿足你的疑惑 : )
    | 檢舉 | Posted by AR人 at 2010年9月9日 15:25

    請問用FlarToolKit製作AR
    真的需要取得對方授權嗎~
    這個程式不是對外公開可以下載得到嗎~
    ---------------------------------------------
    版主回覆:
    嗯 商業用途是有限制的喔
    有疑問可以寄信向對方詢問~
    | 檢舉 | Posted by Steven at 2010年9月14日 08:37
    謝謝版主分享授權資訊,在此釐清一下:擴增實境AR的軟體 包括 FLARToolkit,ARToolkit,無邊框的NFT,材質感更佳的osgARToolkit,運用在手機的iPhone ARToolkit或android 等等都可找在下洽談版權。
    如果您沒有透過此軟體營利(商業化使用),而是個人實驗性質,想公開在網站上分享,也請您email告知本公司一聲,以免產生誤會。
    如果您是學校師生非營利性質使用,可享正式授權版優惠折扣。
    歡迎與在下聯繫。請聯絡service@ar-truth.com。擴增實境股份有限公司吳小姐留言。
    | 檢舉 | Posted by 擴增實境授權代理 at 2010年9月15日 10:44

    我想問一下 像下面的影片
    http://www.youtube.com/watch?v=o8yx5VpbQpA
    當中58秒左右的AR 是如何做的??
    可不可以請版主幫幫忙
    給一點方向或著是有甚麼方法可以完成
    (我只是要右邊的那種方塊,左邊不用)

    非常感謝
    ---------------------------------------------
    版主回覆:
    其實不管左右的原理都是一樣的
    方塊上面那張圖就是AR用來辨識方位用
    辨識的工作交給AR程式 你要做的就是把3D物件放上去
    該範例就是擺一個3D的平面(Plane)上去 並貼上影片做為材質
    | 檢舉 | Posted by 緯 at 2010年9月15日 13:03

    所以我出來的檔案還是dae檔囉?
    我在3dmax中先建立一個3d的plane 然後把影片當材質貼上去
    然後再交由FLARToolKit來去讀取那個dae檔??
    板大是這樣的意思嗎???
    感謝回覆
    ---------------------------------------------
    版主回覆:
    Plane不見得要建模, 幾乎所有3D套件都可以直接畫
    像PaperVision3D、Away3D本身就有內建了
    還有像方塊或球..等基本形狀, 都可以用程式畫的
    | 檢舉 | Posted by 緯 at 2010年9月16日 13:24

    請問我用3Ds MAX建立模型
    貼圖的面數通常多少會比較好~
    因為不是越精緻的3D模型會越跑不動嗎~
    在AR的環境裡~
    ---------------------------------------------
    版主回覆:
    我自己實驗的理想值是控制在3千面以內為佳
    不過要視目標使用者的硬體環境來增減
    如果畫面精緻度很要求 面數撐到6、7千也不是不可能
    只是程式需要做一些處置 例如適時地隱藏某些物件之類的
    | 檢舉 | Posted by Steven at 2010年9月16日 17:18

    感謝版主的回覆~謝謝!^^
    | 檢舉 | Posted by Steven at 2010年9月17日 11:52

    謝謝版主回覆!!
    我昨天試了一下
    在3Dmax 10中 好像不能貼入影片當材質
    我的檔案是SWF檔
    就是我已經畫了一個Plane
    然後就貼不上去我的影片
    請板大提點一下

    一直有問題
    真的很抱歉
    謝謝板主
    ---------------------------------------------
    版主回覆:
    影片當材質通常要由程式端來貼
    其實你可以先試看看用Papervision3D的MovieMaterial來做為Plane的貼圖
    影片可以放進MovieClip操縱
    如果一定要用flv直接貼上去, 可以試試VideoStreamMaterial
    | 檢舉 | Posted by 緯 at 2010年9月17日 12:02

    版主大大
    先說聲謝謝
    因為我已經成功把影片當材質貼在plane上了
    但是我現在想結合FlARToolKit
    那要怎麼啟動我的視訊鏡頭
    就是當視訊鏡頭照到我的標籤上
    會呈現我所製作的plane??
    ---------------------------------------------
    版主回覆:
    建議你從FlARToolKit附的範例檔著手
    範例是在3D場景中加一個方塊
    依照你的需求 只要把方塊改成Plane就完成了
    | 檢舉 | Posted by 緯 at 2010年10月4日 13:43

    大大~~
    我已經都弄好了
    不過當鏡頭照到我的標籤
    顯示出來的影片
    怎麼變成左右相反啊?(查了一下這叫做鏡射)
    請問一下該如何處理?

    之前到現在
    問題有點多
    還勞版主費心解答了
    感謝版主大大
    ---------------------------------------------
    版主回覆:
    治標的方式可以到webcam設定中, 設定為水平翻轉

    但其實你只要把該video左右翻轉再位移回來就好了(scaleX = -1)

    不知道有沒有標準作法, 但至少我是這樣處理的
    | 檢舉 | Posted by 緯 at 2010年10月13日 18:20

    請問3DS如何存DAE檔~
    我是用3DS9.0版本存DAE檔
    可是存出來檔案大小是0KB
    不知道是什麼原因~
    ---------------------------------------------
    版主回覆:
    依照我的經驗, max或maya要裝外掛才能正常輸出dae
    我之前是用Feeling Software出的ColladaMax,ColladaMaya:
    http://www.feelingsoftware.com/en_US/3D-collada-tools/collada-tools/collada-premium.html

    可是後來變成收費版, 當初的安裝檔不知丟到哪去
    也許可以下載這裡的來試試:
    http://sourceforge.net/projects/colladamaya/files/

    或者到開放原始碼的專案找解法:(本身還沒試過)
    http://opencollada.org/
    用法請自行參照說明吧
    | 檢舉 | Posted by hotonoken at 2010年10月20日 11:45

    版主
    不好意思,我想請教一下
    上面有提到利用MovieMaterial做為Plane的貼圖
    有比較詳細一點的說明嗎?
    抱歉喔,我是新手所以沒辦法像前輩一點就通
    那影片的格式有限制嗎?
    影片的路徑要打在什麼地方讓程式去抓檔
    ---------------------------------------------
    版主回覆:
    MovieMaterial就是用MovieClip(可含動畫)來當貼圖
    所以你要先知道怎麼把影片放到MovieClip裡, 這有好幾種方法
    一種是把影片匯入影格裡
    一種是放在外面再載入,檔案格式是.flv,最簡單的方法是用影片FLVPlayback組件

    總之你的問題可以拆成2個子問題
    1.怎麼把影片放到MovieClip裡使用
    2.怎麼使用MovieMaterial
    如果以上說法還是沒概念的話, 要用以上關鍵字自己查一下資料囉
    畢竟篇幅有限, 在flash論壇或相關討論區, 會有更多人可以解答:)
    | 檢舉 | Posted by Joan at 2010年11月1日 22:53
    1.請問照您的成果而言,FLAToolkit可以支援到不用修改程式,只需改某些部份就可以使用自己的mark和3D物件對嗎?

    2.ARtoolkit跟FLAtoolkit以要修改成可以做簡易的判斷,(例如兩個物件出現在同一畫面可以跑出別的3D物件),那麼選擇哪個比較適合做這類開發呢?
    ---------------------------------------------
    版主回覆:
    1.沒錯,不用修改就可以自製mark與自訂3D物件
    2.ARtoolkit我不是很清楚, 但FLARtoolkit是ARtoolkit的flash轉移版本, 功能應該不會差太多, 你應該要考慮的是呈現結果是什麼形式, 要線上flash網頁呢(用FLARtoolkit), 還是要做成離線執行的軟體
    | 檢舉 | Posted by k at 2010年11月10日 15:16

    熱心的版主您好:
    請問我若想要做2D的圖像動畫
    是否可以用FLASH來做2D動畫匯入
    檔案格式.SWF可以抓得到嗎~
    感謝回覆ㄛ~
    ---------------------------------------------
    版主回覆:
    呃 你是指AR裡放2D嗎?
    一樣要放在3D物件裡(如plane平面)
    來源是swf的話要想辦法載入進來, 然後貼圖在3D Plane上
    | 檢舉 | Posted by hotonoken at 2010年11月16日 14:49
    私密回應
    Posted at 2010年12月1日 23:51

    不好意思~就是當我用SWF匯入dreamwaver時,網頁都沒有攝影機畫面,但我單獨用SWF測試時都可以!資料夾也都放在網站檔案哩!想請問原因@@?
    ---------------------------------------------
    版主回覆:
    像這種開發時可以, 嵌入網頁時不行的問題
    建議放到網站上http://環境下實測
    因為flash的限制問題..把本機和網站視為不同環境
    如果還是不行 那要檢查是否有載入其它網站的來源檔案
    | 檢舉 | Posted by 啾 at 2010年12月3日 19:48

    請問ARToolKit是否可以在紙上顯示影片(EX:avi檔)?
    我有先在XML修改語法,但是發現這是使輸入源變為影片,而不是輸出影片檔
    不知道是否有方法可以輸出影片?
    ---------------------------------------------
    版主回覆:
    你所謂的輸出影片是指...?

    1.如果是要看到螢幕裡webcam畫面中,影片秀在紙上=>在3D平面使用影片貼圖
    2.如果是想將過程錄成影片=>使用FMS,或一些影片錄製的套件
    3.如果是想把影片投影在紙上=>首先要有投影機,技術則相當複雜,請搜尋"第六感裝置"

    P.S.avi影片無法被flash直接讀取, 需要轉檔為flv或其它flash支援格式
    | 檢舉 | Posted by momo at 2011年2月11日 14:20
    版主你好:
    我想做的是使用camera辨識一個標籤後,
    會出現相對應的影片,應該和第一個(1.)比較像
    你說的影片貼圖是?
    ---------------------------------------------
    版主回覆:
    前面幾個回覆中就有討論囉
    http://www.youtube.com/watch?v=o8yx5VpbQpA
    58秒左右的效果(可以在本文搜尋↑網址)

    如果要讓影片看起來貼附在紙上 勢必要用3D程式來旋轉該影片
    但如果只是要辨識標籤後 在另一處顯示一般的平面影片 就可以不需要3D及貼圖

    前者情況需具備3D技術知識 在此就無法多述了
    | 檢舉 | Posted by momo at 2011年2月15日 14:27

    請問要如何用flartoolkit辨識一個MARK之後在螢幕上顯示FLV檔的影片?
    目前只能單獨執行程式後出現影片,但沒辦法辨識MARK之後出現影片
    不知是否有方法可以結合?
    ---------------------------------------------
    版主回覆:
    //當然可以 flartoolkit的基本範例中, enterframe函式中就有判斷式:
    if 有感應時 出現3D物件
    else 隱藏3D物件(visible = false)
    //把3D物件改成影片即可
    //至於if內的判斷變數要實際看程式碼了 許久沒碰我也忘了
    | 檢舉 | Posted by 123 at 2011年5月24日 14:45

    感謝大大,想再請教一下
    我是否可以把這個網頁上的AR
    直接就放到Android作業系統的平版電腦上玩呢?
    據我所知Android是有支援flash player的
    或者我要如何修改程式才能做到

    再次感謝!
    ---------------------------------------------
    版主回覆:
    Android「理論上」是可以跑flash的 但有一些侷限...

    首先flash player版本要夠新(會受到Android OS限制)
    再來flash本身的操作設計 要特別為觸控裝置改良
    flash常見的拖拉等簡易動作 就我所知在Android上就有點困難
    而且目前看來flash支援度似乎還不夠全面
    效能上也有瓶頸 (手機的運算遠比PC差)
    相信跑起來一定會有不少問題

    或許AIR會有解吧 不過我對這方面研究不多
    | 檢舉 | Posted by peter at 2011年8月30日 23:37
    私密回應
    Posted at 2011年10月13日 20:04

    板主您好,我也在實驗flartoolkit,我用flash cs 開以後,在開發時可以有攝影機,
    我不太會用flash,所以我改用比較熟悉的flex,將flex 整合flartoolkit以後,在desktop版本可以有攝影機,但是改成web版本,將swf放到html裡頭後就不會出現攝影機,請再給一些明燈。 謝謝
    ---------------------------------------------
    版主回覆:
    用web應該還是可以開攝影機的
    從你的訊息看很有限
    只能猜測也許是在攝影機功能前就發生error
    要用一些Debugger工具來看
    通常是載入外部檔案的權限問題
    確定所有所需檔案都存在swf同資料夾或子資料下
    或者實際放上網站試試
    | 檢舉 | Posted by N at 2011年10月13日 20:05
    擴增實境 iPhone手機版課程!
    ※ 主辦單位 : ARTruth擴增實境股份有限公司
    特聘請目前於國外知名大學互動及數位媒體實驗室之紐西蘭籍國際專業人士,來台分享國際使用擴增實境技術現況及教授實際操作ARToolkit for ios,讓您吸收核心的know-how,完成iPhone手機上擴增實境的應用。名額有限,錯過可惜!!!
    ※ 日期時間 : 2011 / 12/ 03 (星期六) 9:00am~18:00pm
    ※ 講座地點:台北市開南商工 109 專業教室
    詳情:http://www.ar-truth.com/cover-page/news
    ※ 課程目標:
    1.瞭解擴增實境 (AR) 市場規模及國際趨勢
    2.讓從來沒用過ARToolkit 的人,從一開始的步驟開始教學,到可以運用在
    iPhone上的AR,用iPhone偵測marker叫出動畫,完成一項實際案例。
    ※ 適合對象:
    1. 對擴增實境(AR)相關科系學生或是在職人士
    2. 對iPhone手機應用軟體開發有興趣之相關人士
    3. 了解智慧型手機軟體X code經驗者尤佳
    | 檢舉 | Posted by 擴增實境股份有限公司ARTruth at 2011年11月1日 14:37
    私密回應
    Posted at 2012年3月15日 13:09
    板主您好:
    我想請問的是如果自己做3d模型(.dae)檔,不知是大小設定還是什麼沒辦法顯是我的模型,我是已原有範例換成自己做的model,原始範例可執行,但換成自己製作的卻沒顯示出,謝謝
    ---------------------------------------------
    版主回覆:
    建議你先檢查dae是否有問題
    用DAEViewer等工具看能不能讀
    例如這篇 http://blog.roodo.com/esabear/archives/9268611.html
    有時候也有可能是scale問題 搞不好放大或縮小就看得到它
    | 檢舉 | Posted by Da at 2012年3月27日 15:58