[AR創作工具](https://hackmd.io/@jojohn/B1aurt_05)

--- tags: 開放式VR教育創作共享社群, description: --- [AR創作工具](https://hackmd.io/@jojohn/B1aurt_05) === [TOC] 取之開源，用之開源 0x00 小故事 --- - [Aurasma](/GxGoMxJFTze0Ud8D2gmHXw) 0x01 玩AR時考慮的問題 --- 自己在玩AR時也不曉得有什麼深入淺出的步驟，所以大多都是自己經驗上遇到的狀況，而後變成篩選的條件。 - [平台](/1pIdYHtdSrqhywOP2fP5Eg) - [製作方式](/CMPQdFIbQYW1GY3BIIMH3Q) - [AR辨識方式](/8xwqaZLQSweWIkEIoG0YpA) - [使用介面](/n1PkGosoR5Sridppi-XRRQ) - [補充:Gyroscope](/NYCkJiPSSSe2oiDl5FVJtA) 0x02 WebAR/WebVR --- 2020後開始考慮，如何節省下載時間以達到最佳的使用者經驗。一般使用者，重新下載新的app會降低使用意願學生使用者，設備受家長管控才能下載應用程式學校使用者，需要管理者共同派送才能安裝軟體因此，以不下載App的方式提供體驗，可能對於一般體驗者是相對友善 :poultry_leg: 聽說WebAR/WebVR是個好東西體驗連結: https://belowthesurface.resn.co.nz/ * **簡單說: 觀看展示不需要先下載app，有網路直接從手機中的瀏覽器呈現** ==WebAR優點:== 跨平台、免安裝、易操作 ==WebAR缺點:== 模型渲染有限、瀏覽器不一致更多介紹請點擊: * [WebAR/WebVR延伸閱讀](/5BW3FGrgRqKOGuA4SmxLLg) 軟體介紹 --- ### 製作方式: #### 手機端製作 - App製作: * IOS: JigSpace, Adobe Aero, Reality Composer, SkyLetter, ARki, ARvid * 雙平台: Assemblr, CoSpaces Edu, arloopa, Vectary, Thyng, AR動物園(無法自行製作) - 網頁製作: MyWebAR, kivicube, arloopa, echoAR > kivicube的前身應該就是RAVVAR，不過RAVVAR無法再行動端製作，必須使用電腦 --- ### ![JigSpace ](https://i.imgur.com/TXuwGtp.png =10%x)JigSpace * 辨識方式：空間辨識 * 最低價格：免費不限時、付費加值功能 * 創作平台：Win、Mac、IOS * 儲存位置：雲端 * 支援安卓：X * 內建資源：免費素材庫、支援圖片、影片、聲音、OBJ、FBX、STL、STP、SLDASM * 分享格式：Embade、QRcode、網址連結 * 具WebAR：是 * 其他特色： * 免程式編輯 * 小組模式，多人共編專案 * 具有空間掃描Room scan功能 * 官方網站：https://www.jig.space/ {%youtube CL0em5laXwc %} :::info :information_desk_person: ==個人意見== 1. 利用不同分頁功能做成關卡／循序漸進教學 2. 若要讓Android用戶的也能看到作品，建議製作成網頁嵌入式，也藉此才能啟動WebAR ::: --- ### ![Adobe Aero](https://i.imgur.com/8Ya3f1q.png =10%x)Adobe Aero * 辨識方式：圖片辨識、空間辨識 * 最低價格：免費 * 創作平台：Win、Mac、IOS * 儲存位置：雲端 * 支援安卓：X * 內建資源：免費素材庫、支援圖片、影片、聲音、立體模型、glb檔案 * 分享格式：Embade、QRcode、網址連結 * 具WebAR：是 * 其他特色： * 免程式編輯 * 可雲端串聯Adobe其他工具的作品(PS作圖完直接匯出到Aero) * 匯出成Behance project * 官網:https://helpx.adobe.com/tw/aero/user-guide.html {%youtube 7MW2_7sNlII %} :::info :information_desk_person: ==個人意見== 1. 內建模型具有動畫(rigged)，也可以安裝特定互動機制 2. 若本身已習慣Adobe生態系，創作起來會非常方便快速 ::: --- ### ![Reality Composer](https://i.imgur.com/IQftXlN.png =10%x)Reality Composer * 辨識方式：圖片辨識、空間辨識、人臉辨識、物件辨識 * 最低價格：免費 * 創作平台：Mac、IOS * 儲存位置：雲端、本地 * 支援安卓：X * 內建資源：免費素材庫、支援圖片、影片、聲音、立體模型、glb檔案、 usdz 檔案 * 分享格式：.reality檔、[usdz檔案](https://developer.apple.com/documentation/realitykit/exporting-a-reality-composer-scene-to-usdz) * 具WebAR：是 * 其他特色： * 物理效果(物體自然掉落) 範例:[骰子](https://www.youtube.com/watch?v=95U0VRwRLUY) * 匯出usdz檔案 *(行動載具需到設定中開啟:啟用USDZ輸出)* * 官方網站：https://developer.apple.com/augmented-reality/tools/ {%youtube RYcGOOsyhnU%} :::info :information_desk_person: 個人意見 1. 在蘋果生態系中，.reality檔和usdz檔案非常方便，可以直接執行 2. icloud空間不夠大，可使用sketchfab或其他雲端來分享檔案 3. 可搭配Procreate(付費軟體)繪製素材輸入ipad中的Reality Composer直接製作成AR ::: --- ### ![SkyLetter](https://i.imgur.com/FhsET2f.png =10%x)SkyLetter * 辨識方式：空間辨識 * 最低價格：免費 * 創作平台：IOS * 儲存位置：雲端 * 支援安卓：X * 內建資源：文字 * 分享格式：錄影 * 具WebAR：否 * 其他特色： * 快速簡單 * 內建高擬真音效 * 官方網站：https://katakoto.tokyo/product/skyletter/ {%youtube kQzYtIiCTxQ %} :::info :information_desk_person: ==個人意見== 1. 僅限文字功能，但能夠當作一種AR紙條的應用 ::: --- ### ![](https://i.imgur.com/gV6DV8O.png =10%x)ARki * 辨識方式：QRcode辨識、圖形辨識、空間辨識、物件辨識 * 最低價格：免費 * 創作平台：Win、Mac、IOS * 儲存位置：雲端 * 支援安卓：X * 內建資源：FBX立體模型 * 分享格式：錄影、照片、雲端同步專案(付費)、QRcode(付費) * 具WebAR：否 * 其他特色： * 大多為建築AR * 建築模型爆炸圖效果 * 動態光影模擬效果 * 透過Google drive匯入自己的FBX模型 * 註解功能 * 官方網站：https://www.darfdesign.com/learn.html {%youtube 2kpxFmJhU_c %} :::info :information_desk_person: ==個人意見== 1. 免費版使用內部AR模型(建築類)非常豐富。 2. 自己匯入的模型可以簡易觀看，大多額外動作分享都要付費。 ::: --- ### ![](https://i.imgur.com/QdoxtVw.png =10%x)ARvid * 辨識方式：空間辨識 * 最低價格：免費 * 創作平台：IOS * 儲存位置：雲端 * 支援安卓：X * 內建資源：免費素材庫、支援圖片、文字、立體模型(付費) * 分享格式：錄影、照片 * 具WebAR：否 * 其他特色： * 即時操控內建模型 * 空間繪畫 * 官方網站：https://arvid.app <iframe title="vimeo-player" src="https://player.vimeo.com/video/661291132?h=e1cf846c63" width="320" height="568" frameborder="0" allowfullscreen></iframe> :::info :information_desk_person: ==個人意見== 1. 即時操控模型有達到MR的效果 2. 內建模型也有許多不同表演動作可用於拍攝互動影片 ::: --- ### ![](https://i.imgur.com/a9rGk3Y.jpg =10%x)Assemblr * 辨識方式：圖片辨識、空間辨識 * 最低價格：免費 * 創作平台：Web、IOS、Android * 儲存位置：雲端 * 支援安卓：O * 內建資源：免費素材庫、支援圖片、文字、影片、立體模型 * 分享格式：Embed、QRcode、link * 具WebAR：是 (Android支援/iphone不支援) * 其他特色： * 無限制專案數量 * 無限制QRcode辨識圖 * 免費模組化專案 * 自製辨識圖x1 (免費版) * 官方網站：https://www.assemblrworld.com/ {%youtube GQlAvi-NnmQ %} :::info :information_desk_person: ==個人意見== 1. 官方說明WebAR只有ARcore，因此安卓才有WebAR的功能 2. Assemblr有另一款延伸應用程式: AssemblrEDU，內含許多教學模組以及教室建置功能 ::: ---  to be continue... #### 電腦端製作  --- ## XR Design Guide ![](https://i.imgur.com/MBPeLZK.png) ![](https://i.imgur.com/6606v94.png) Miro: https://is.gd/L8AeSB ```https://www.canva.com/design/DAFOnnrSwNI/invDrxmqc9vh5JEcV6GA4g/view?utm_content=DAFOnnrSwNI&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.