Drawalong AR是谷歌創(chuàng)意實(shí)驗室的一項AR實(shí)驗，并旨在將教育性YouTube藝術(shù)教程變成虛擬描圖紙。獨(dú)立游戲開發(fā)者簡·弗里德霍夫（Jane Friedhoff）參與了這一項目，并于日前分享了自己在開發(fā)Drawalong AR時所學(xué)習(xí)到的經(jīng)驗教訓(xùn)。下面是映維網(wǎng)的具體整理：

近年來出現(xiàn)了大量關(guān)于開發(fā)者利用增強(qiáng)現(xiàn)實(shí)來幫助人們發(fā)揮創(chuàng)意的酷炫例子。從創(chuàng)作藝術(shù)到故事書，當(dāng)你將幾何畫板和屏幕結(jié)合起來時，有趣的事情就會發(fā)生。

這不禁令我思考AR可以為我的一個新愛上的興趣提供幫助：學(xué)習(xí)Hand-Lettering（Hand-Lettering是指畫字，屬于繪制字的藝術(shù)；不同于英文書法Calligraphy，亦即手寫字的藝術(shù)）。是一種放松的好方式，但學(xué)習(xí)起來是出人意料的困難。在字詞之間實(shí)現(xiàn)優(yōu)雅的過渡涉及大量微妙的調(diào)整：正確地握筆，有效地發(fā)力，并且勾勒出合適的弧線。從肩膀到紙張的一切都非常重要。

由于在現(xiàn)實(shí)世界缺乏Hand-Lettering老師，我只能選擇字帖或視頻進(jìn)行學(xué)習(xí)，但兩者都并非我的本意。字帖對粗線條有用，但對于我來說，一步接一步的性質(zhì)無法提供額外的精細(xì)信息。另一方面，盡管視頻教程有豐富的細(xì)節(jié)，但它們同樣存在問題：我需要來回看著屏幕和描圖紙。你可以想象，這個過程通常不會順利。

在我吐糟了多次失敗的節(jié)日賀卡后，我們中的幾個人開始討論視頻和畫板之間的視線來回問題：如果無需選擇字帖或視頻，我們是否可以利用AR直接在面前展示視頻呢？如果應(yīng)用關(guān)于涂鴉，Hand-Lettering和英文書法的YouTube教程，并直接在AR中葫蘆畫瓢，效果又會如何呢？無需視頻博主的任何額外付出，我們是否可以實(shí)現(xiàn)酷炫的學(xué)習(xí)體驗?zāi)兀吭谶@個過程中，我們又能學(xué)習(xí)到什么與增強(qiáng)現(xiàn)實(shí)視頻UX相關(guān)的經(jīng)驗?zāi)兀课覀儧Q定進(jìn)行實(shí)驗并分享相關(guān)的結(jié)果。

為了參考專家的意見，我們邀請了著名YouTuber AmandaRachLee來幫助我們。我們原本就是她的粉絲，而且她的粉絲非常多。阿曼達(dá)（AmandaRachLee）的YouTube頻道有130萬的訂閱者，而她會分享關(guān)于英文書法和繪圖等主題的分步演示，深入淺出地向觀眾講解困難的地方。她親切又實(shí)用的教學(xué)風(fēng)格已經(jīng)幫助培育了一個龐大的社區(qū)，大家都非常積極地進(jìn)行模仿創(chuàng)作，并形成了自己獨(dú)有的風(fēng)格。

下面我將向你介紹我們是如何制作Drawalong AR的原型，這款工具的用法，一些最佳實(shí)踐，以及關(guān)于UI/UX可供性的建議，而你可能會希望在自己的項目中予以借鑒。

1. 制作原型

在開始思考YouTube視頻在AR中的UI/UX之前，有些技術(shù)問題需要我們考慮：疊加視頻；維持非常高的追蹤保真度；并且把YouTube視頻帶到Unity。

1.1 疊加視頻

為了設(shè)置我們的AR世界，我們創(chuàng)建了一個全新的Unity ARCore項目。然后，我們可以輕松地從HelloAR示例開始著手。HelloAR示例包含處理尋找平面和可視化平面的代碼，以及處理光線投射和將虛擬對象錨定至相關(guān)表面的代碼。我們只需將AR視頻“描圖紙”替換默認(rèn)的預(yù)制件即可。

不過，盡管放置視頻十分簡單，但確保其維持在原位，尤其是對于畫字這樣的精確用例，事情變得相當(dāng)棘手。

1.2 維持非常高的追蹤保真度

繪畫對增強(qiáng)現(xiàn)實(shí)而言是一項不簡單的用例，因為我們一般希望在平滑的空白表面中進(jìn)行繪畫，但平滑的空白表面對AR而言通常意味著“氪星石”（會令超人失去超能力的元素）。

AR應(yīng)用程序一般是通過檢測所謂的“特征點(diǎn)”來獲取對世界的理解。特征點(diǎn)是攝像頭圖像中的顯著特征，它可以幫助AR應(yīng)用確定具體的方位。具有獨(dú)特紋理，輪廓，以及顏色變化的區(qū)域都屬于優(yōu)秀的特征點(diǎn)。這有點(diǎn)像是當(dāng)來到一座陌生城市時，你在黑夜和白天判斷方位的情形對比：如果沒有可以幫助判斷方位的顯著建筑物，你更能難以確定自己所在的位置。

幾何畫板通常不存在特征點(diǎn)：它就是要設(shè)計成空白和平整。所以，AR應(yīng)該如何掛接并精確地定位呢？一個非常關(guān)鍵的字詞是“精確”。因為你顯然希望超高的精度。盡管你可能不會注意到虛擬凳子偏移了一英寸或兩英寸，但在繪圖時些許的誤差都非常重要。

AR開發(fā)者已經(jīng)通過眾多不同的方法來解決高保真度追蹤的問題。下面是一些有用的技巧：

將圖像鎖定至屏幕中的一點(diǎn)：有AR開發(fā)者繞開了所有的追蹤問題，他們單純地把圖像鎖定在一個特定的屏幕位置。但這種方法一般需要完美靜止的攝像頭，而我們需要UX支持用戶握持智能手機(jī)，并自由旋轉(zhuǎn)，縮放和改變?yōu)g覽角度。在繪圖之前先制作AR標(biāo)記：AR開發(fā)者采用的另一個戰(zhàn)略是選擇獨(dú)特的標(biāo)記。通過關(guān)聯(lián)虛擬對象和標(biāo)記，這可以幫助虛擬對象鎖定至物理空間。這種標(biāo)記可以是印刷圖像或手繪圖像。AR標(biāo)記通常是非常牢固的錨點(diǎn)，你同時可以用多個標(biāo)記來實(shí)現(xiàn)超級穩(wěn)定的追蹤。但是，我們沒有選擇標(biāo)記，因為它們通常需要用戶進(jìn)行額外的設(shè)置，它們同時需要繪圖平面為空白或特定的大小。進(jìn)行態(tài)AR標(biāo)記和其他計算機(jī)視覺/機(jī)器學(xué)習(xí)方法：行業(yè)有一些關(guān)于將用戶繪圖作為一組進(jìn)行態(tài)標(biāo)記的計算機(jī)視覺和機(jī)器學(xué)習(xí)有趣算法研究，它可以對準(zhǔn)教程圖像和繪制圖像，并確保一切維持原位。SketchAR的團(tuán)隊一直在深入這種算法，并有介紹了他們的方法。我認(rèn)為這種方法非常酷炫，但由于我們希望進(jìn)行快速實(shí)驗，以激發(fā)與視頻創(chuàng)作者的對話，并且分享關(guān)于一些關(guān)于在AR中展示YouTube教程的UI/UX想法，所以我們決定把這個問題留給產(chǎn)品團(tuán)隊，而我們則利用已有的開源資源來進(jìn)行實(shí)驗。穩(wěn)定環(huán)境：最后一種方法是確保繪圖環(huán)境匹配AR。在這一情況下，亦即意味著將幾何畫板置放于一個含有紋理和顏色變化的表面，并盡量確保所述表面時刻都能有一點(diǎn)點(diǎn)位于框架之中。

這時，我們需要決定：這個項目是關(guān)于解決計算機(jī)視覺的“白紙問題”嗎，是屬于一種產(chǎn)品向的解決方案嗎？還是說更多只是關(guān)于未來YouTube教程的探索與討論。我們最終認(rèn)為后一點(diǎn)更為有趣：邀請不同的人群來體驗原型，構(gòu)思新的用例，測試不同的視頻UX可供性，并且向其他開發(fā)者分享我們的見解。由于“穩(wěn)定環(huán)境”是最快速的手段，并且在運(yùn)行阿曼達(dá)的視頻時效果可以，所以我們決定把計算機(jī)視覺問題留給工程師們，并直接選擇“穩(wěn)定環(huán)境”這一策略。

1.3 把視頻帶到AR

為了加速開發(fā)過程，我們利用了Unity Asset Store中的YouTube播放器組件（根據(jù)實(shí)際情況，你可以選擇相同的asset，編寫自己的asset，使用不同的視頻服務(wù)，或者直接通過Unity VideoPlayer上傳自己的靜態(tài)視頻）。這個asset允許我們搜索YouTube，并且流式傳輸視頻。

接下來，我們可以以HelloAR示例項目作為基礎(chǔ)，用我們定制的視頻播放器替換默認(rèn)的Android預(yù)制件。這個播放器預(yù)制件隨后可以置放于水平或垂直表面，對準(zhǔn)法線，并且馬上葫蘆畫瓢。

2. UI/UX

在構(gòu)思原型時，我們主要對兩個地方感興趣：

對于阿曼達(dá)等視頻博主而言，她們渴望什么樣的AR視頻體驗?zāi)兀恳曨l創(chuàng)作者可能需要將已有的視頻轉(zhuǎn)換為AR型體驗，是否存在無需任何視頻編輯即可實(shí)現(xiàn)的功能呢？

第二個挑戰(zhàn)尤為有趣。阿曼達(dá)制作視頻已經(jīng)五年時間，這意味著她已經(jīng)上傳了大量的作品。我們?nèi)绾未_保她本人只需少量，甚至完全為零的工作量即可把先前的視頻支持AR呢？為了 盡可能簡化創(chuàng)建者和學(xué)習(xí)者的操作管道，我們專注于6個主要方面，而你可能會發(fā)現(xiàn)它們對你的AR視頻項目而言非常便利。

2.1 調(diào)整視頻位置

位置調(diào)整是一個相當(dāng)明顯的用例，你可能希望在不失位的情況下改變下筆位置，尤其是如果存在追蹤不穩(wěn)并需要重新調(diào)整視頻位置的情況。但是，我們同時將它視為一種與AR繪圖互動的方式。

我們看到了兩種利用AR字帖的主要方式：作為一種獨(dú)立繪圖方式；以及一種修飾已存在作品的方法。以一個繪圖教學(xué)視頻為例，比方說阿曼達(dá)的“50 Bullet Bullet Doodle Ideas”。在第一種情況下，你可能希望在空白表面對著AR字帖葫蘆畫瓢，并繪作自己的作品。在第二種情況下，你可能已經(jīng)創(chuàng)作一件藝術(shù)品，并希望添加裝飾。這時，AR可以作為一種可擴(kuò)展和可移動的模板。你可以投影AR視頻，并從一個位置開始模仿，暫停，然后移動或縮放視頻，并在另一個位置繼續(xù)。這帶來了我們都非常喜歡的自由度。

阿曼達(dá)的大多數(shù)視頻都不會超過頭頂，但對于相反的視頻，我們同樣考慮添加了偏斜/扭曲/透視功能。這可能有助于彌補(bǔ)可能以輕斜角度拍攝的視頻（或者說，這可以為復(fù)古藝術(shù)字開辟了新途徑）。

2.2 補(bǔ)償視頻的原始速度

不同的YouTube藝術(shù)家以不同的方式拍攝視頻：有人堅持實(shí)時教程，而其他人則喜歡定時間隔。我們知道我們希望用戶能夠控制視頻的速度，這樣觀眾就可以跳過已經(jīng)明白的內(nèi)容，并放慢不熟悉的教學(xué)過程。

我們同時考慮添加一個暫停功能：當(dāng)用戶將手指放在屏幕的任何一個位置，視頻將暫停，直到手指抽走。在我們的示例中，如果把暫停按鈕設(shè)置在屏幕底部，你很容易就會碰到。盡管我們覺得我們自己不需要，但對于以不同方式握持手機(jī)，并且可能無法以所需精度點(diǎn)擊按鈕的用戶而言，這是一個很好的補(bǔ)充。

2.3 避免手臂勞累

每當(dāng)你通過VR，AR或手勢界面進(jìn)行工作時，你必須考慮所謂的“少數(shù)派報告”問題：如果用戶需要長時間舉起手臂，手臂最終可是會累的。由于我們觀看的大部分繪畫教學(xué)視頻至少有5-10分鐘，我們知道我們不能簡單地假設(shè)所有用戶都能長時間舉起手臂。我們必須批判地考慮AR模式真正有用的地方，可能不需要的地方，以及如何避免因AR而引起的任何勞累問題。

我們決定添加一個全屏按鈕，允許你在AR模式和更類似于YouTube全屏風(fēng)格的模式之間切換。當(dāng)你沒有在畫字時，你可以像往常一樣切換回全屏模式并瀏覽視頻。對于全屏模式，我們只需在攝像頭饋送疊加視頻即可。追蹤仍然在幕后工作，而來回切換快速且簡單。

這聽起來很簡單，但將AR作為短期會話，而不是完整用于5-10分鐘的教學(xué)視頻，這引發(fā)了關(guān)于Drawalong AR其他使用方式的有趣討論。例如：

你可以在全屏模式下舒適地觀看大部分視頻，然后在希望跟著畫字時切換到AR模式。可以按照全屏（非AR）模式進(jìn)行操作，然后切換到AR以對比視頻和你自己的作品，從而判斷兩者的差異。

設(shè)計AR應(yīng)用程序的一個重要部分是，確確實(shí)實(shí)地了解用戶可以/愿意接受的AR會話時長。如果用戶的手臂開始出現(xiàn)血液循環(huán)不暢，這會是一個巨大的問題。你需要思考一下如何在AR和非AR體驗之間有效切換，以幫助提高工作效率。在這個過程中，你可能會發(fā)現(xiàn)有趣的用例。

2.4 可見性

要將現(xiàn)有的YouTube視頻轉(zhuǎn)換為可追蹤AR對象，最棘手的部分之一是用戶可見性：用戶需要能夠看到視頻，但用戶同時需要清楚手的位置。如果是閉著眼睛，我們大多數(shù)人都畫不好。當(dāng)你看不到自己正在做什么的時候，你很容易迷失方向并陷入困境。

我們怎樣才能確保AR對象能夠允許用戶清楚地看到視頻，同時又清楚地看到自己的手部呢？我們通過兩種簡單的技術(shù)來解決這個問題：不透明度和色度摳圖。

不透明度是指整個圖像的透明度，亦即alpha。較高的不透明度意味著用戶將看到更多的視頻部分，而非更多的畫字部分。較低的不透明度則意味著相反：圖像變得更加透明，用戶可以更容易地看到描圖紙。我們的不透明度滑塊允許用戶將AR圖像像素設(shè)置為介于0（完全透明）和1（完全不透明）之間。

但這并沒有解決我們的問題。大多數(shù)教程都是從一頁白紙開始，而白色像素同時會投射到用戶描圖紙表面。在這種情況下，所述的白色像素是不需要的信息：當(dāng)用戶學(xué)習(xí)如何畫字時，她們需要看到的是線條，也許包括老師的雙手，但顯然不是白紙。不透明度會令白紙更加透明，但由于它同樣適用于所有其他像素（不僅僅是白色像素），你更難以看清繪圖。這意味著不透明度本身并不是一個足夠好的工具。

這時，我們開始探索色度摳圖（我們在應(yīng)用程序中將其稱為“See-Through”透視模式）。色度摳圖可允許用不同的顏色或背景來替換圖像或視頻中的特定色調(diào)。它實(shí)際上與綠幕效果相同。我們意識到均勻的白色表面可能對我們有利，因為它的均勻性意味著我們可以相對輕松地實(shí)現(xiàn)摳圖：我們可以令這些像素變得透明，又或者是使用視頻饋送視頻來替換它們。代表實(shí)際繪圖和老師手部的彩色像素將保留。這非常有用，可以幫助你跟著YouTube視頻進(jìn)行畫字。即使不是非常美觀，最笨拙的色度摳圖著色器都可以極大地提升體驗。

我們最終沒有實(shí)現(xiàn)的一個功能是，我們沒有用這個著色器來補(bǔ)償在色度摳圖后變得難以看清的線條。之所以沒有添加這個功能，是因為我們已經(jīng)可以非常容易地看到阿曼達(dá)的線條了，而且我們不希望增加本應(yīng)該是快速實(shí)驗的復(fù)雜性。假設(shè)視頻中的老師是用淡黃色墨水繪圖，而且觀眾希望將在一張白紙上進(jìn)行復(fù)刻還原。即使在色度摳圖后，白色表面也可能難以看到淡黃色。不用擔(dān)心：我們可以在著色器中添加顏色色調(diào)，使不透明像素更暗，更容易看到。這個功能對于通常需要更高對比度的用戶來說非常有幫助。

通過結(jié)合不透明度和色度摳圖，我們能夠令你更容易地跟著教程葫蘆畫瓢，同時不會給視頻創(chuàng)作者增加任何負(fù)擔(dān)。

3. 結(jié)果

在與阿曼達(dá)測試原型時我們度過了一段非常愉悅的時間。隨著我們嘗試不同的視頻，我們探討了這種類型的AR視頻將如何給觀眾和視頻博主帶來便利。

一些話題適用于阿曼達(dá)的視頻，以及人們希望專門為其開發(fā)AR應(yīng)用程序的其他教學(xué)性內(nèi)容。

第一個是將AR視頻作為表達(dá)手部位置和角度的方式。阿曼達(dá)提到，經(jīng)常有粉絲反饋很難理解如何握筆，以及如何在不同角度之間轉(zhuǎn)換以產(chǎn)生不同線條厚度（我可以確認(rèn)，實(shí)際操作起來確實(shí)非常困難）。我們非常喜歡這種視頻方法可以幫助觀眾仔細(xì)觀察那些小細(xì)節(jié)，不再是使用難以說明中間微妙過程的靜態(tài)步驟。

我們同時非常喜歡它可以用來為任何主題生成AR字帖。我們使用這款A(yù)R應(yīng)用程序來練習(xí)英文草體，但它同樣可以幫助你練習(xí)不同的語言。例如，在阿拉伯語中，具體取決于它們在單詞中的位置及其旁邊的字母，字母的寫法會有所不同。另外，字母同時可以呈現(xiàn)完全不同的形狀和風(fēng)格。對于漢語和日語這樣的語言，漢字和平假名提供了特定的筆畫順序。

對于我這樣的新手而言，字帖真的有助于建立肌肉記憶。但像阿曼達(dá)這樣的創(chuàng)作者沒有時間將視頻整理成字帖。另外，傳統(tǒng)的字帖只能表達(dá)出最終筆畫的寬度和方向性，無法說明具體是如何實(shí)現(xiàn)。我們喜歡這個想法，它可以作為一種字帖生成器，適用于任何教學(xué)性場景。

即使不改變視頻內(nèi)容，我們都非常喜歡將視頻變成個性化的AR體驗。我們可以保留有用的AR疊加層，同時自由地移動，放大和調(diào)整視頻，從而適配我們想要繪制的任何內(nèi)容。這令我覺得視頻創(chuàng)作者仿佛就在同一個房間。看著阿曼達(dá)的涂鴉活靈活現(xiàn)地出現(xiàn)在自己的素描板中，你總是會有一種很棒的感覺。我們所有人都非常期待更多創(chuàng)作者制作AR教學(xué)性視頻。

與阿曼達(dá)一起涂鴉非常開心，而我們希望這篇博文可以幫助你思考AR視頻教學(xué)的可能性。

原文鏈接：https://yivian.com/news/60209.html

來源：映維網(wǎng)