iOS ARKit教程:用裸露的手指在空中畫畫

最近昭娩,Apple公布了名為ARKit的新增強現(xiàn)實(AR)庫凛篙。對于許多人來說,它看起來只是另一個優(yōu)秀的AR庫栏渺,而不是一個值得關注的技術破壞者呛梆。但是,如果你看一下過去幾年的AR進展磕诊,就不應該太快得出這樣的結(jié)論填物。

ARKit教程插圖:在iOS ARKit應用程序中與虛擬對象交互

在這篇文章中,我們將使用iOS ARKit創(chuàng)建一個有趣的ARKit示例項目霎终。用戶將手指放在桌子上滞磺,好像他們握筆,點擊縮略圖并開始繪圖莱褒。完成后雁刷,用戶將能夠?qū)⑵淅L圖轉(zhuǎn)換為3D對象,如下面的動畫所示保礼。我們的iOS ARKit示例的完整源代碼可以在GitHub上找到沛励。

image

我們?yōu)槭裁匆P注iOS ARKit?

每個有經(jīng)驗的開發(fā)人員都可能意識到AR是一個古老的概念炮障。我們可以確定AR的第一次嚴重開發(fā)目派,以便開發(fā)人員可以從網(wǎng)絡攝像頭訪問各個幀。當時的應用通常用于改變你的面貌胁赢。然而企蹭,人類并沒有花很長時間才意識到將面孔變成兔子并不是他們最迫切的需求之一,很快就會褪色智末!

我相信AR一直缺少兩個關鍵的技術飛躍谅摄,使它變得有用:可用性和沉浸感。如果您追蹤其他AR炒作系馆,您會注意到這一點送漠。例如,當開發(fā)人員從移動攝像頭訪問各個幀時由蘑,AR炒作再次起飛闽寡。除了偉大的兔子變形金剛的強大回歸代兵,我們看到一波應用程序在打印的QR碼上放下3D對象。但他們從未作為一個概念起飛。它們不是增強現(xiàn)實,而是增強QR碼企垦。

然后谷歌用一部科幻小說谷歌玻璃讓我們感到驚訝。兩年過去了思币,當這個神奇的產(chǎn)品有望復活時,它已經(jīng)死了羡微!許多評論家分析了谷歌眼鏡失敗的原因支救,將責任歸咎于從社交方面到谷歌推出該產(chǎn)品的枯燥方法。但是拷淘,我們在這篇文章中關注的原因有一個 - 沉浸在環(huán)境中各墨。雖然Google Glass解決了可用性問題,但它仍然只是在空中繪制的2D圖像启涯。

像微軟贬堵,F(xiàn)acebook和蘋果這樣的科技巨頭心中學到了這個苛刻的教訓。2017年6月结洼,Apple公布了其漂亮的iOS ARKit庫黎做,將沉浸感放在首位。拿著電話仍然是一個很大的用戶體驗攔截器松忍,但Google Glass的教訓告訴我們硬件不是問題蒸殿。

我相信我們很快就會走向一個新的AR炒作高峰,通過這個新的重要支點鸣峭,它最終可以找到它的本土市場宏所,讓增強現(xiàn)實應用程序開發(fā)成為主流。

但是有足夠的歷史摊溶,讓我們用代碼弄臟手爬骤,看看蘋果增強現(xiàn)實!

ARKit浸入式功能

ARKit提供兩個主要功能; 第一個是3D空間中的攝像機位置莫换,第二個是水平面檢測霞玄。為了實現(xiàn)前者,ARKit假設您的手機是在真實3D空間中移動的相機拉岁,因此在任何點丟棄一些3D虛擬對象將錨定到真實3D空間中的該點坷剧。對于后者,ARKit會檢測水平平面喊暖,如表格惫企,以便您可以在其上放置對象。

那么ARKit如何實現(xiàn)這一目標呢哄啄?這是通過一種名為Visual Inertial Odometry(VIO)的技術完成的雅任。別擔心风范,就像企業(yè)家在你弄清楚他們的創(chuàng)業(yè)公司名稱背后的傻笑一樣發(fā)現(xiàn)他們的笑聲時咨跌,研究人員發(fā)現(xiàn)他們試圖解讀他們提出的任何術語的頭部劃痕的數(shù)量沪么。命名他們的發(fā)明 - 讓我們讓他們享受他們的樂趣,繼續(xù)前進锌半。

VIO是一種技術禽车,通過該技術,相機框架與運動傳感器融合刊殉,以跟蹤設備在3D空間中的位置殉摔。通過檢測特征,或者換句話說记焊,圖像中具有高對比度的邊緣點(例如藍色花瓶和白色桌子之間的邊緣)來跟蹤來自相機幀的運動逸月。通過檢測這些點相對于彼此從一幀移動到另一幀的程度,可以估計設備在3D空間中的位置遍膜。這就是為什么ARKit在面向無特征的白色墻壁時放置時或者當設備移動得非惩胗玻快而導致圖像模糊時無法正常工作的原因。

iOS中的ARKit入門

截至撰寫本文時瓢颅,ARKit是iOS 11的一部分恩尾,它仍處于測試階段。因此挽懦,要開始使用翰意,您需要在iPhone 6s或更高版本以及新的Xcode Beta上下載iOS 11 Beta。我們可以從New> Project> Augmented Reality App開始一個新的ARKit項目信柿。但是冀偶,我發(fā)現(xiàn)使用官方Apple ARKit示例啟動此增強現(xiàn)實教程更方便,該示例提供了一些基本代碼塊渔嚷,尤其有助于平面檢測蔫磨。那么,讓我們從這個示例代碼開始圃伶,先解釋其中的要點堤如,然后為我們的項目修改它。

首先窒朋,我們應該確定我們將使用哪種引擎搀罢。ARKit可以與Sprite SceneKit或Metal一起使用。在Apple ARKit示例中侥猩,我們使用的是Apple SceneKit榔至,這是Apple提供的3D引擎。接下來欺劳,我們需要設置一個可以渲染3D對象的視圖唧取。這是通過添加類型視圖來完成的ARSCNView铅鲤。

ARSCNView是一個名為SceneKit主視圖的子類SCNView,但它使用一些有用的功能擴展了視圖枫弟。它將來自設備相機的實時視頻輸入渲染為場景背景邢享,同時它自動將SceneKit空間與現(xiàn)實世界相匹配,假設該設備是這個世界中移動的相機淡诗。

ARSCNView它本身不進行AR處理骇塘,但它需要一個AR會話對象來管理設備攝像頭和運動處理。所以韩容,首先款违,我們需要分配一個新的會話:

上面的最后一行添加了一個可視指示器,可以直觀地幫助用戶描述平面檢測的狀態(tài)群凶。Focus Square由示例代碼提供插爹,而不是ARKit庫,這是我們開始使用此示例代碼的主要原因之一请梢。您可以在示例代碼中包含的自述文件中找到有關它的更多信息赠尾。下圖顯示了投影在桌子上的焦點方塊:

使用Apple ARKit將焦點正方形投影在桌子上

下一步是啟動ARKit會話。每次出現(xiàn)視圖時重新啟動會話都是有意義的溢陪,因為如果我們不再跟蹤用戶萍虽,我們就可以不使用以前的會話信息。所以形真,我們將在viewDidAppear中啟動會話:

在上面的代碼中杉编,我們首先設置ARKit會話配置來檢測水平平面。在撰寫本文時咆霜,Apple不提供除此之外的選項邓馒。但顯然,它暗示將來會發(fā)現(xiàn)更復雜的物體蛾坯。然后光酣,我們開始運行會話并確保我們重置跟蹤。

最后脉课,每當攝像機位置(即實際設備方向或位置)發(fā)生變化時救军,我們都需要更新焦點廣場。這可以在SCNView的渲染器委托功能中完成倘零,每次要渲染3D引擎的新幀時都會調(diào)用它:

此時唱遭,如果您運行應用程序,您應該會在相機流上看到焦點方塊搜索水平平面呈驶。在下一節(jié)中拷泽,我們將解釋如何檢測平面,以及如何相應地定位焦點平方。

在ARKit中檢測平面

ARKit可以檢測新平面司致,更新現(xiàn)有平面或刪除它們拆吆。為了以方便的方式處理平面,我們將創(chuàng)建一個虛擬的SceneKit節(jié)點脂矫,該節(jié)點保存平面位置信息和對焦點方塊的引用枣耀。平面在X和Z方向上定義,其中Y是表面的法線羹唠,即奕枢,如果我們想讓它看起來好像在平面上打印娄昆,我們應該始終將我們的繪圖節(jié)點位置保持在平面的相同Y值內(nèi)佩微。 。

平面檢測通過ARKit提供的回調(diào)函數(shù)完成萌焰。例如哺眯,每當檢測到新平面時,都會調(diào)用以下回調(diào)函數(shù):

回調(diào)函數(shù)為我們提供了兩個參數(shù)扒俯,anchornode奶卓。node是一個正常的SceneKit節(jié)點,放置在平面的確切位置和方向撼玄。它沒有幾何形狀夺姑,因此它是不可見的。我們使用它來添加我們自己的平面節(jié)點掌猛,該節(jié)點也是不可見的盏浙,但保存有關平面方向和位置的信息anchor

那么如何保存位置和方向 ARPlaneAnchor荔茬?位置废膘,方向和比例均以4x4矩陣編碼。如果我有機會選擇一個數(shù)學概念供你學習慕蔚,那毫無疑問就是矩陣丐黄。無論如何,我們可以通過如下描述這個4x4矩陣來避免這種情況:一個包含4x4浮點數(shù)的明亮的二維數(shù)組孔飒。通過將這些數(shù)字以某種方式乘以3D頂點v1灌闺,在其局部空間中,它會生成一個新的3D頂點v2坏瞄,它代表世界空間中的v1桂对。因此,如果v1 =(1,0,0)在其局部空間中惦积,并且我們希望將其置于世界空間中的x = 100接校,則v2將相對于世界空間等于(101,0,0)。當然,當我們添加關于軸的旋轉(zhuǎn)時蛛勉,這背后的數(shù)學變得更加復雜鹿寻,但好消息是我們可以在不理解它的情況下做到(我強烈建議從中檢查相關部分)這篇優(yōu)秀文章深入解釋了這個概念)。

checkIfObjectShouldMoveOntoPlane 檢查我們是否已經(jīng)繪制了對象并檢查所有這些對象的y軸是否與新檢測到的平面的y軸相匹配诽凌。

現(xiàn)在毡熏,回到上updateFocusSquare()一節(jié)中描述的。我們希望將焦點方塊保持在屏幕的中心侣诵,但是投影在最近的檢測平面上痢法。下面的代碼演示了這一點:

sceneView.hitTest通過將此2D點投影到最近的平面下方,搜索與屏幕視圖中的2D點對應的真實平面杜顺。result.worldTransform是一個4x4矩陣财搁,它保存檢測到的平面的所有變換信息,同時result.worldTransform.translation是一個只返回位置的便捷函數(shù)躬络。

現(xiàn)在尖奔,我們獲得了在屏幕上給出2D點的情況下在檢測到的曲面上放置3D對象所需的所有信息。那么穷当,讓我們開始畫畫提茁。

畫畫

讓我們首先解釋在計算機視覺中繪制跟隨人類手指的形狀的方法。繪制形狀是通過檢測移動手指的每個新位置馁菜,在該位置放下頂點茴扁,以及將每個頂點與前一個頂點連接來完成的。如果我們需要平滑輸出汪疮,頂點可以通過簡單的線連接峭火,或通過貝塞爾曲線連接。

為簡單起見铲咨,我們將采用一些天真的繪圖方法躲胳。對于手指的每個新位置,我們將在檢測到的計劃上放下一個圓角非常小的盒子纤勒,高度幾乎為零坯苹。它看起來好像是一個點。一旦用戶完成繪制并選擇3D按鈕摇天,我們將根據(jù)用戶手指的移動更改所有掉落對象的高度粹湃。

以下代碼顯示了PointNode表示點的類:

您將在上面的代碼中注意到我們將幾何體沿y軸平移了一半的高度。這樣做的原因是為了確保對象的底部始終位于y = 0泉坐,以便它出現(xiàn)在平面上方为鳄。

接下來,在SceneKit的渲染器回調(diào)函數(shù)中腕让,我們將使用相同的PointNode類繪制一些像筆尖點一樣的指示器孤钦。如果啟用了繪圖歧斟,我們將在該位置放置一個點,或者如果啟用了3D模式偏形,則將繪圖提升為3D結(jié)構(gòu):

virtualObjectManager是一個管理繪制點的類静袖。在3D模式中,我們估計與最后位置的差異俊扭,并使用該值增加/減少所有點的高度队橙。

到目前為止,我們正在繪制檢測到的表面萨惑,假設虛擬筆位于屏幕的中心【杩担現(xiàn)在為了有趣的部分 - 檢測用戶的手指并使用它而不是屏幕中心。

檢測用戶的指尖

Apple在iOS 11中引入的一個很酷的庫是Vision Framework庸蔼。它以非常方便和有效的方式提供了一些計算機視覺技術解总。特別是,我們將使用對象跟蹤技術來實現(xiàn)增強現(xiàn)實教程朱嘴。對象跟蹤的工作原理如下:首先倾鲫,我們?yōu)樗鼈兲峁┮粋€圖像和一個正方形的坐標粗合,用于我們想要跟蹤的對象的圖像邊界萍嬉。之后我們調(diào)用一些函數(shù)來初始化跟蹤。最后隙疚,我們輸入一個新圖像壤追,其中該對象的位置發(fā)生變化,并且前一個操作的分析結(jié)果也是如此供屉。鑒于此行冰,它將返回對象的新位置。

我們將使用一個小技巧伶丐。我們將要求用戶將他們的手放在桌子上悼做,就像他們握筆一樣,并確保他們的縮略圖面向相機哗魂,之后他們應該點擊屏幕上的縮略圖肛走。這里有兩點需要詳述。首先录别,縮略圖應具有足夠的獨特功能朽色,可通過白色縮略圖,皮膚和表格之間的對比來追蹤组题。這意味著較深的皮膚色素將導致更可靠的跟蹤葫男。其次,由于用戶將他們的手放在桌子上崔列,并且由于我們已經(jīng)將桌子檢測為平面梢褐,因此將縮略圖的位置從2D視圖投影到3D環(huán)境將導致手指的幾乎準確位置。表。

下圖顯示了Vision庫可以檢測到的功能點:

iOS ARKit Vision庫檢測到的要素點

我們將按照以下步驟初始化縮略圖跟蹤:

上面最棘手的部分是如何將點擊位置從UIView坐標空間轉(zhuǎn)換為圖像坐標空間盈咳。ARKit為我們提供了displayTransform從圖像坐標空間轉(zhuǎn)換到視口坐標空間的矩陣趣效,但不是相反。那么我們怎么做反過來呢猪贪?通過使用矩陣的逆跷敬。我真的試圖在這篇文章中盡量減少對數(shù)學的使用,但在3D世界中它有時是不可避免的热押。

接下來西傀,在渲染器中,我們將以新圖像的形式輸入以跟蹤手指的新位置:

一旦對象跟蹤完成桶癣,它將調(diào)用回調(diào)函數(shù)拥褂,我們將在其中更新縮略圖位置。它通常是在點擊識別器中編寫的代碼的反轉(zhuǎn):

最后牙寞,我們將self.lastFingerWorldPos在繪圖時使用而不是屏幕中心饺鹃,我們就完成了。

ARKit和未來

在這篇文章中间雀,我們已經(jīng)演示了AR如何通過與用戶手指和現(xiàn)實生活表的交互來沉浸其中悔详。隨著計算機視覺的進步,以及為小工具(如深度相機)添加更多AR友好的硬件惹挟,我們可以訪問我們周圍越來越多的物體的3D結(jié)構(gòu)茄螃。

雖然尚未向大眾發(fā)布,但值得一提的是微軟如何通過其Hololens設備贏得AR競賽非常認真连锯,該設備將AR定制的硬件與先進的3D環(huán)境識別技術相結(jié)合归苍。你可以等著看誰將贏得這場比賽,或者你可以通過開發(fā)真正的沉浸式增強現(xiàn)實應用程序來參與其中运怖!但請拼弃,請人類幫忙,不要將活物變成兔子摇展。

原文:https://www.toptal.com/swift/ios-arkit-tutorial-drawing-in-air-with-fingers
作者:

Osama AbdelKarim AboulHassan

Osama AbdelKarim AboulHassan吻氧,埃及

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市吗购,隨后出現(xiàn)的幾起案子医男,更是在濱河造成了極大的恐慌,老刑警劉巖捻勉,帶你破解...
    沈念sama閱讀 206,214評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件镀梭,死亡現(xiàn)場離奇詭異,居然都是意外死亡踱启,警方通過查閱死者的電腦和手機报账,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評論 2 382
  • 文/潘曉璐 我一進店門研底,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人透罢,你說我怎么就攤上這事榜晦。” “怎么了羽圃?”我有些...
    開封第一講書人閱讀 152,543評論 0 341
  • 文/不壞的土叔 我叫張陵乾胶,是天一觀的道長。 經(jīng)常有香客問我朽寞,道長识窿,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,221評論 1 279
  • 正文 為了忘掉前任脑融,我火速辦了婚禮喻频,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘肘迎。我一直安慰自己甥温,他們只是感情好,可當我...
    茶點故事閱讀 64,224評論 5 371
  • 文/花漫 我一把揭開白布妓布。 她就那樣靜靜地躺著姻蚓,像睡著了一般。 火紅的嫁衣襯著肌膚如雪秋茫。 梳的紋絲不亂的頭發(fā)上史简,一...
    開封第一講書人閱讀 49,007評論 1 284
  • 那天,我揣著相機與錄音肛著,去河邊找鬼。 笑死跺讯,一個胖子當著我的面吹牛枢贿,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播刀脏,決...
    沈念sama閱讀 38,313評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼局荚,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了愈污?” 一聲冷哼從身側(cè)響起耀态,我...
    開封第一講書人閱讀 36,956評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎暂雹,沒想到半個月后首装,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,441評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡杭跪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,925評論 2 323
  • 正文 我和宋清朗相戀三年仙逻,在試婚紗的時候發(fā)現(xiàn)自己被綠了驰吓。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,018評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡系奉,死狀恐怖檬贰,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情缺亮,我是刑警寧澤翁涤,帶...
    沈念sama閱讀 33,685評論 4 322
  • 正文 年R本政府宣布,位于F島的核電站萌踱,受9級特大地震影響迷雪,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜虫蝶,卻給世界環(huán)境...
    茶點故事閱讀 39,234評論 3 307
  • 文/蒙蒙 一章咧、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧能真,春花似錦赁严、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至蝙泼,卻和暖如春程剥,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背汤踏。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評論 1 261
  • 我被黑心中介騙來泰國打工织鲸, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人溪胶。 一個月前我還...
    沈念sama閱讀 45,467評論 2 352
  • 正文 我出身青樓搂擦,卻偏偏與公主長得像,于是被迫代替她去往敵國和親哗脖。 傳聞我的和親對象是個殘疾皇子瀑踢,可洞房花燭夜當晚...
    茶點故事閱讀 42,762評論 2 345

推薦閱讀更多精彩內(nèi)容