你好讀者朋友：希望您能在閱讀之前可以點一下“關注”，友善今後的分享和讨論，在下會持續更新讓您有不一樣的參與感，謝謝您的支援。
文案 |名錘青史
編輯 |名錘青史
如今，基于浏覽器的增強現實技術正受到越來越多的關注。Web AR技術是一種輕量級的增強現實解決方案，利用Web技術的跨平台和易傳播特性，為實作和推廣AR内容提供了堅實基礎。
目前，大多數增強現實（AR）應用仍然基于特定裝置和專門的應用程式來實作。而基于Web的增強現實應用由于受到多方面的限制，其推廣受到一定限制。其中，三維模型的建立困難是一個主要的限制因素，因為非專業人士很難進行模組化工作，導緻Web AR應用難以普及。是以，建立基于Web的AR應用平台，可以實作出色的互動體驗。
基于Web三維形體模組化方法與實作
目前，現有的Web增強現實應用大多基于某一特定領域的應用，并且使用預先設定好的模型，限制了其在不同領域的應用和使用者需求的滿足。由于非專業人士很難使用專用模組化軟體建立令人滿意的三維模型，Web端缺乏使用者所需的三維模型，這是影響Web AR未廣泛應用的主要原因之一。
為了使使用者能夠在Web浏覽器端建立個性化的三維模型，設計一個友善使用者線上操作的Web三維模型編輯環境。該編輯環境将為使用者提供可編輯操作的界面，使使用者能夠通過簡單的操作來建立和編輯個性化的三維模型。
在設計互動式編輯環境時，使用者體驗是首要考慮的因素。該設計遵循以使用者為中心的設計原則，着重在使用者操作友善、修改靈活、界面清晰、互動一緻和環境相容等方面展開。編輯器将簡潔直覺的界面呈現給使用者，以確定使用者可以輕松上手，并且提供了各種功能，如建立模型、選擇圖元、編輯模型等，使使用者能夠自由地表達創意和需求。
通過基于浏覽器端的三維模型編輯器，使用者将獲得一種便捷而直覺的方式來建立個性化的三維模型。編輯環境的靈活性将使使用者可以随時進行修改和調整，以滿足不同的創意和設計要求。使用者可以在互動式界面中實時預覽模型的外觀，進而更好地了解和掌控模型的形态和結構。
在該系統中，使用者可以通過編輯器進行三維模型的建立和編輯，并進行相關的三維資訊計算。系統的主要功能包括模型存儲和模型浏覽，這樣使用者可以将建立好的模型存儲在伺服器上，以便後續使用，并且可以通過浏覽功能對模型進行整體和局部的檢視。
三維模型編輯器的主要頁面設計是根據需求功能而精心建構的，可以為使用者提供友好的界面和流暢的操作體驗。
根據三維模組化的功能需求，三維模型編輯器頁面中共設計了6個功能區，每個功能區在頁面上有明确的位置和布局。
編輯區：位于頁面的中央部分，是使用者進行三維模型編輯的主要區域。在編輯區，使用者可以通過滑鼠操作進行模型的建立、選擇、編輯、縮放、旋轉等操作。實時預覽功能使使用者可以在此處直接檢視編輯後的效果。
基本圖元模型選擇區：位于頁面的左側或頂部，提供常見的基本圖元模型供使用者選擇和建立。使用者可以從預設的圖元庫中選擇所需的形狀，如立方體、球體、圓柱體等，作為模型的基礎建構塊。
顔色選擇區：通常位于編輯區下方或右側，允許使用者選擇模型的顔色或應用紋理貼圖。使用者可以通過調色闆或上傳自定義貼圖來實作模型的外觀個性化。
拆解設定控件：在特定情況下，為了展示複雜農具的結構，可能需要進行模型的拆解展示。拆解設定控件位于編輯區或工具欄，允許使用者對模型進行拆解、旋轉群組合，以展示模型的内部構造。
模型上傳控件：位于頁面的上方或側邊，允許使用者從本地裝置上傳現有的三維模型檔案，以便在編輯器中進行後續的修改和處理。
“傳回”控件：位于頁面的左上角或右上角，提供一個傳回或退出編輯器的功能按鈕。使用者在編輯完成後，可以使用此控件儲存或退出編輯狀态。
頁面區域劃分采用HTML和CSS樣式進行設計，以確定界面布局的合理性和美觀性。使用Vue.js進行頁面互動邏輯的設計，增強編輯器的使用者友好性和響應速度。同時，還考慮了界面的自适應性，使系統在不同分辨率的浏覽器界面上都能夠正常顯示和使用，提高編輯器的可用性和适用性。
為了豐富平台的增強現實部分互動方式，本次研究在三維形體模組化階段為基本圖元模型添加了拆解屬性，以使複雜模型在AR展示時能夠被拆解并進行檢視。拆解屬性設定靈活，允許使用者根據需要進行調整。當使用者希望模型具有拆解功能時，可以通過打開基本圖元模型拆解設定控件來實作。啟用該控件後，使用者在添加基本圖元模型時可以選擇是否設定拆解屬性。
在三維模型資料上傳的階段，使用者完成三維形體模組化後，可以通過上傳控件将模型上傳至平台。一旦上傳控件被觸發，平台會對數組資料進行Json格式整合，并結合模型的預覽圖和使用者ID等資訊一同通過網絡傳輸，将資料上傳至資料庫。
基于Web的AR技術的實作
在了解三維模型後，可以基于Web的AR應用中涉及識别、跟蹤和渲染技術的實作方案。為了提升AR應用的性能，我們還将部分AR計算任務進行了遷移，并選用了适合的算法，最終實作了一個輕量型的“瘦”浏覽器的Web AR應用。
Web AR子產品是本文的核心工作之一，也是平台的主要功能子產品之一。在Web AR模型展示部分，我們充分應用了增強現實技術與WebGL技術，并借助Three.js架構進行模型渲染，以實作出色的展示效果。
在本次研究中，基于Web平台進行了AR技術的研究與應用，充分利用了浏覽器的跨平台特性，使AR工作能夠在多端上實作。在AR浏覽子產品中，我們通過浏覽器調用攝像頭，運用WebRTC技術來擷取真實環境的實時視訊畫面，以便識别真實環境中用于AR的标記圖檔，并進行追蹤和渲染模型。
Web子產品的工作流程中，模型清單是使用者登入首頁後的一個重要功能。當使用者登入進入首頁時，通過HTTP協定，使用POST方式向伺服器發送擷取請求，以擷取模型的基本資訊。伺服器會周遊資料庫中的模型表，并将相應的模型資訊傳回給前端頁面進行展示。
進入AR模式後，裝置的浏覽器将會打開攝像頭并擷取實時視訊流。系統會掃描視訊流中的每一幀圖像，尋找AR标記圖檔進行識别。AR标記圖在視訊流中的位置對應着模型渲染的位置。一旦在單幀圖像中識别到AR标記圖，系統将對其進行解析，并與資料庫中的标記圖進行比對。當比對成功後，系統擷取到對應的三維模型資料資訊。
得到模型資訊後，系統進行模型渲染，并将渲染好的模型結構傳回到用戶端。這樣，使用者在本平台上建立的模型将會顯示在真實場景中，使用者可以通過平台提供的互動功能對模型進行縮放、旋轉、移動、拆解等操作。
通過呈現基于Web的AR技術方案設計，使得AR應用可以直接在使用者的浏覽器上實作，無需安裝任何額外的應用程式。
使用者可以通過Web浏覽器打開攝像頭，擷取實時視訊流，從中掃描圖像來識别AR标記。一旦标記被成功識别，系統就會将相應的三維模型資料加載并進行渲染，将虛拟模型與真實環境結合起來展示給使用者。
基于雲平台的Web AR系統平台的實作與測試
雲端伺服器在本平台中起着關鍵的支援作用，主要涵蓋多個功能子產品以確定平台的正常運作。這些功能包括網站運作的支援、平台資訊邏輯處理、增強現實任務計算以及平台資料的管理與存儲。
伺服器的開發選擇了易于開發的PHP語言，并采用了基于ThinkPHP架構的整體架構設計，以規範化應用的搭建過程，快速建立應用程式。伺服器通過API接口對外提供服務，外界可以調用相應的API接口并傳入資料以特定格式通路伺服器。
伺服器的網站處理采用MVC三層結構，主要分為三個層次。Model（模型層）：負責資料的操作，包括與資料庫的互動、資料的增删改查等。Model層提供對資料庫表的處理功能，并将處理結果傳回給上一級，即Controller層。
View（視圖層）：負責前台頁面的顯示，即展示給使用者的界面。View層将資料從Controller層擷取後，以使用者友好的方式呈現在網頁上。
Controller（控制器層）：描述功能和邏輯上的業務處理。Controller層為外界提供接口，接收來自外部的資料，并進行資料處理。在Controller層中，資料經過相應的運算和處理後，可以調用Model層進行資料庫操作。如果需要操作資料庫，Controller層将尋找Mapper層來執行SQL語句。
這種設計模式使得伺服器的開發結構清晰，并且實作了各個功能的分離和子產品化。Model層負責資料的存取，View層負責資料的展示，而Controller層作為中間層，負責處理業務邏輯和連接配接Model和View，使得整個應用程式更易于維護和擴充。
基于以上實驗測試結果，我們可以得出：基于Web端的平台在三維模型展示和增強現實應用方面具備良好的性能和可用性。該平台的實作不僅滿足了使用者對于個性化三維模型的需求，而且增強現實功能的實作也為使用者帶來了全新的互動體驗。
結論：
本次研究成果主要包括基于Web的三維模組化和增強現實應用方面的關鍵技術和解決方案。通過這些技術和方案的實作，可以為使用者提供了一個功能全面、易于使用的Web平台，使使用者能夠輕松建立個性化的三維模型，并将其應用于增強現實環境中。這為教育工作和其他領域的發展帶來了便利和創新.
參考文獻：
[1]Elbasiouny E.R, Medhat T, Sarhan A, et al. Stepping into augmented reality[J]. IJNCM: International Journal of Networked Computing and Advanced Information Management, 2011, 1(1):40-47.
[2] 王彪，陳前，張鵬龍，宋曉磊．探究基于雲計算服務與WebGL的Web AR建構[J]．電腦程式設計技 巧與維護，2019(09)：86-88．
[3] Fan Wen, Xiuquan Qiao. Template-based Web AR service rapid generation platform[J]. IOP Conference Series: Materials Science and Engineering, 2019, 490(4):15-20.
[4] 文帆．基于模闆的Web AR服務生成與管控平台[D]．北京：北京郵電大學，2019．
[5] 張向輝，黃佳慶，吳康恒，雷志斌．基于WebRTC的實時視音頻通信研究綜述[J]．計算機科學， 2015，42(02)：1-6+32．