[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,內含許多教學模組以及教室建置功能
:::
---
<!--
### ![](https://i.imgur.com/QBS9sCB.png =10%x)CoSpaces Edu
* 辨識方式:空間辨識
* 最低價格:免費
* 創作平台:Web、IOS、Android
* 儲存位置:雲端
* 支援安卓:O
* 內建資源:免費素材庫、支援圖片、文字、影片、聲音、立體模型
* 分享格式:Embed、QRcode、link
* 具WebAR:否
* 其他特色:
* 無限制專案數量
* 無限制QRcode辨識圖
* 免費模組化專案
* 自製辨識圖x1 (免費版)
* 官方網站:
{%youtube %}
:::info
:information_desk_person: ==個人意見==
1.
:::
---
### ![](https://i.imgur.com/NQPi9SY.png =10%x)Arloopa
* 辨識方式:空間辨識
* 最低價格:免費
* 創作平台:Web、IOS、Android
* 儲存位置:雲端
* 支援安卓:O
* 內建資源:免費素材庫、支援圖片、文字、影片、聲音、立體模型
* 分享格式:Embed、QRcode、link
* 具WebAR:否
* 其他特色:
* 無限制專案數量
* 無限制QRcode辨識圖
* 免費模組化專案
* 自製辨識圖x1 (免費版)
* 官方網站:
{%youtube %}
:::info
:information_desk_person: ==個人意見==
1.
:::
-->
to be continue...
#### 電腦端製作
<!--
- [電腦端製作](/0utdBgGLRjqYGzxJ5dc3fQ)
- [手機端製作](/3qpnrGnXS-GN66YrviR93Q)
---
- [補充資源:]
https://uxpro.cc/toolbox/reality/ar/
[張原禎老師大學墊](http://163.20.119.100/f2blog/index.php?job=tags&seekname=ar)
-->
---
## 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
{"metaMigratedAt":"2023-06-17T06:54:53.178Z","metaMigratedFrom":"YAML","title":"[AR創作工具](https://hackmd.io/@jojohn/B1aurt_05)","breaks":true,"contributors":"[{\"id\":\"01d5c326-d2c6-4b32-95ae-f862dadfddb1\",\"add\":10133,\"del\":4315}]"}