這篇教學是給使用AWS學術教學資源，透過AWS Elastic Beanstalk服務建立WebAR，也就是使用網頁就可以做到的SLAM AR服務所寫的教學，當然如果你有商業用的AWS帳號，只要能使用Elastic Beanstalk也能夠用相同的方法建立WebAR，只是就不需要前面登入學術帳號的步驟，可以跳到步驟11看。本教學分兩個部分，最前面是以已經完成WebAR內容後[配置AWS Elastic Beanstalk服務]的教學，第二部分是[製作WebAR基礎入門教學]。本篇教學建立時間為2023/5/8，未來平台或作法可能會有變化的話~在自行應變囉。
[配置AWS Elastic Beanstalk服務]
1.如果你有學生或老師帳號，可以從 https://www.awsacademy.com/vforcesite/LMS_Login 這個網址登入，是學生帳號就選Student(上)，老師帳號選Educator(下)，如下圖
2. 登入後會進入儀表板/Dashboard，畫面如下圖。
3. 如果你的學校有開設課程資源，並將你加入課程中，例如：以小樽在教授「智慧數位實務專題」為例，點選左方Menu的「課程/Class」會列出你的課程，因帳號不同，課程名稱內容會不同，小樽因為交了幾次課程所以有好幾個教室，如果修單一課程的同學可能會只有一個，點選你所屬的 AWS Academy Learner Lab – Associate Services
4. 例如小樽選擇了17465這個課程，進入後會看到畫面如下，點擊Modules
5.點擊 Learner Lab – Associate Services
6. 點擊Start Lab
7. 服務啟動會需要一些時間，會有個V在畫面中轉圈圈，左上角AWS顯示黃燈，請耐心稍等一下。
8. 服務成功啟動後AWS的文字旁就會顯示綠燈
9. 點選畫面右方的 AWS Details，下方的Cloud Access最下方有個Download URL按鈕，點擊下載本次服務產生的動態網址。
10. 打開剛剛下載的 ssourl.txt檔案，會看到像下面一大串亂碼組成的網址，每一個人產生的網址都不會一樣，每一次啟動這個服務的網址也不會一樣，複製完整的網址，打開你的瀏覽器把它貼到網址列。
11.打開後頁面如下，這是AWS服務標準的主控台頁面，如果你直接從amazon AWS服務官網註冊登入也是長這樣。
12. 如果你是第一次使用，最近瀏覽頁面會是空的，點擊這個區塊下方的檢視所有服務。
13. 點擊運算下方的Elastic Beanstalk，這是一個讓使用者可以快速佈署Web程式，跳過從伺服器建置開始的步驟的服務，相當輕巧好用。更多資訊請洽官網說明。
14. 進入服務後，畫面結構非常單純，從應用程式頁面點擊建立應用程式。
15. 接著至少輸入應用程式名稱，小樽在此輸入WebAR-APP
16. 接著需要建立這個服務所需要的環境，點擊畫面下方的建立環境。
17. 設定環境中，預設我們使用Web伺服器環境，這裡不用動，往下拖動畫面。
18. 滑到平台的地方，請在平台下拉選單選擇PHP(如下圖)，AWS會幫你選擇預設的平台分支與平台版本，這個部分我們不用去改動它，除非你了解這些平台的差異並具備相關知識，有對應的需求才需調整。選好後繼續往下滑。
19. 點選「上傳程式碼」，在下方選擇「本機檔案」，然後點擊「選擇檔案」，把你打包好的WebAR檔案上傳。在此小樽把一個作好的名叫Kiwi.zip的壓縮檔上傳上去。
20. 按下一步後需要設定服務存取，這個步驟很關鍵，請按照下方的配置作選擇。
21. 接下來「設定網路功能、資料庫和標籤 – 選用」和「設定執行個體流量和擴展 – 選用」「設定更新、監控和記錄 – 選用」「檢閱」的部分我們目前沒有需要設定的東西，都直接按下一步，最後按「提交」送出。爾後你會看到畫面如下，AWS會開始按照你的環境配置來部屬你的應用程式，需要等待一下。
22. 跑完後，運作狀態會從Pending轉化為綠色的ok，這時候就大功告成了，下方「網域」的地方產生的網址就是我們要的結果，點開或複製這個網址貼到瀏覽器上~
23.你就可以看到你要的結果囉~下面這個就是KIWI本人
24. 如果用手機打開這個網址，會出現更多UI，以iOS為例，會出現提示你可以旋轉畫面的提示，你可以單指旋轉模型，雙指縮放或移動模型，如下圖，如果你想用AR模式，點擊下方View in your space。
25. 讓攝影機畫面在平面(桌子或地板都可以，被辨識的面積夠大就行)上輕微的左右移動，當手機正確偵測到平面後就會產生擴增，如下圖，此時仍可以用手指移動旋轉縮放喔。
[製作WebAR基礎入門教學]
如果你還不知道怎麼建立WebAR，這裡提供一個簡易入門教學，這篇教學的作法是model-viewer，來源在這。
目前WebAR所支援的3D格式(基本上應該說瀏覽器支援的3D檔案格式)還沒統一天下，iOS(Apple)有自己支援的格式-USDZ，Android(Google)有自己支援的格式-glTF/glb，所以如果要雙平台支援，光3D檔案就要準備兩份，兩種格式對製作的要求和能包含的資訊有小小的不同，不過這個就有機會再說。
首先為了滿足檔案需求，小樽在這邊介紹一個平民簡易入門款方法-讓Sketchfab幫我們轉檔-w-，你可以把sketchfab想像成3D屆的Youtube，你可以在上面看到、下載或購買許多不同使用者上傳的3D內容，目前免費註冊就可以上傳自己的檔案，只是免費必須要公開，要設定加密或非公開需要付費帳號，相關規範估計也會一直有調整，請以官方公告為主。
1. 上傳模型後點選你上傳的模型可以看到後台如下圖。點擊Edit Properties
2. 畫面的右下角會有個Download your model，只要你的模型轉檔上沒有遇到問題 (通常靜態模型基本上都不會有太大的問題，但是有動畫的模型就不一定)，你會看到這個平台會自動幫你轉成所有需要的格式，原因是因為這個平台也必須能做到這樣才能支援網頁上顯示3D或AR的功能，所以寫了這樣的功能，剛好也是我們需要的YA~請下載.glb和.usdz格式。這裡小樽將下載的檔案都命名為3D(所以是3D.glb和3D.usdz)
3. 下載小樽整理好的這包WebAR教學包，原始的model-viewer很樸素，這包已經整理了有loading畫面特效和AR掃描圖示效果，所以裡面已經有一些現成的檔案如下(包含模型)，你可以用你的模型覆蓋掉小樽這包的模型。感謝幫忙整理這包教學的助教張翔華同學。
4.接著請用你任何習慣使用的文字編輯器，小樽在此使用老牌開源的notepad++，打開index.html檔案，程式碼如下
<!doctype html>
<html lang="en">
<head>
<title>webARTest</title> <!--這邊的webARTest可以改成你想要的網頁標題 -->
<meta charset="utf-8">
<meta name="description" content="這是一個測試"> <!--這是一個測試的描述可以修改 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" href="./styles.css" rel="stylesheet"/>
<!-- OPTIONAL: The :focus-visible polyfill removes the focus ring for some input types -->
<script src="https://unpkg.com/[email protected]/dist/focus-visible.js" defer></script>
</head>
<body>
<!-- <model-viewer> HTML element ，下方"3D.glb" 請替換成你glb檔案的路徑與名稱，"3D.usdz" 請替換成你usdz檔案的路徑與名稱，loading_PIC.png是讀取頁面的底圖，可以修改路徑也可以替換圖片 -->
<model-viewer enable-pan src="3D.glb" ios-src=3D.usdz ar ar-modes="webxr scene-viewer quick-look" camera-controls poster="loading_PIC.png" shadow-intensity="1" autoplay exposure="0.54">
<div class="progress-bar hide" slot="progress-bar">
<div class="update-bar"></div>
</div>
<button slot="ar-button" id="ar-button"> <!--View in your space是你觸發AR按鈕中的顯示文字，可以修改 -->
View in your space
</button>
<div id="ar-prompt">
<img src="ar_hand_prompt.png"> <!--AR圖示路徑，可以修改 -->
</div>
</model-viewer>
<!-- Loads <model-viewer> for browsers: -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
</body>
</html>4.如同註解所標示，可以快速修改的部分小樽已經寫註解如果你還是怕看漏，框起來給你看如下圖，紅色是一定要改的地方，除非你跟我的檔名一模一樣。橘黃色是可改可不改，可以自己斟酌，如果檔案名稱和路徑跟我不一樣，記得自己改喔。
5. 改好程式碼後存檔，確定要替換的3D檔案或圖片也都替換好了，把剛剛下載的和修改的所有檔案一起壓縮成一個zip檔，你沒有其他事情可以做了~如果要用AWS的服務來佈署這個WebAR，請回到 [配置AWS Elastic Beanstalk服務]的教學。
這篇教學主要讓非資訊相關科系，沒有Web相關知識基礎的同學也能快速入門作出成果，如果有基礎的同學，想要研究更多細節可以在model-viewer官方網站找到資訊，對Web3D有強烈興趣的同學，可以研究three.js與babylon.js，現在有ChatGPT在世，小樽相信未來學習技術技能的門檻會慢慢降低~有機會讓人人都能有專屬的技術家教~祝大家學習愉快。