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

近年來出現了大量關于開發者利用增強現實來幫助人們發揮創意的酷炫例子。從創作藝術到故事書，當你將幾何畫板和屏幕結合起來時，有趣的事情就會發生。

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

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

在我吐糟了多次失敗的節日賀卡后，我們中的幾個人開始討論視頻和畫板之間的視線來回問題：如果無需選擇字帖或視頻，我們是否可以利用AR直接在面前展示視頻呢？如果應用關于涂鴉，Hand-Lettering和英文書法的YouTube教程，并直接在AR中葫蘆畫瓢，效果又會如何呢？無需視頻博主的任何額外付出，我們是否可以實現酷炫的學習體驗呢？在這個過程中，我們又能學習到什么與增強現實視頻UX相關的經驗呢？我們決定進行實驗并分享相關的結果。

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

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

1. 制作原型

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

1.1 疊加視頻

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

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

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

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

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

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

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

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

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

1.3 把視頻帶到AR

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

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

2. UI/UX

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

對于阿曼達等視頻博主而言，她們渴望什么樣的AR視頻體驗呢？視頻創作者可能需要將已有的視頻轉換為AR型體驗，是否存在無需任何視頻編輯即可實現的功能呢？

第二個挑戰尤為有趣。阿曼達制作視頻已經五年時間，這意味著她已經上傳了大量的作品。我們如何確保她本人只需少量，甚至完全為零的工作量即可把先前的視頻支持AR呢？為了 盡可能簡化創建者和學習者的操作管道，我們專注于6個主要方面，而你可能會發現它們對你的AR視頻項目而言非常便利。

2.1 調整視頻位置

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

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

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

2.2 補償視頻的原始速度

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

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

2.3 避免手臂勞累

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

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

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

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

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

2.4 可見性

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

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

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

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

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

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

通過結合不透明度和色度摳圖，我們能夠令你更容易地跟著教程葫蘆畫瓢，同時不會給視頻創作者增加任何負擔。

3. 結果

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

一些話題適用于阿曼達的視頻，以及人們希望專門為其開發AR應用程序的其他教學性內容。

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

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

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

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

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

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

來源：映維網