前往
大廳
主題 達人專欄

【Unity ARWT 與 AR.js】基礎接觸AR.js,並做個Web AR

%%鼠 拒收病婿 | 2022-01-19 01:03:56 | 巴幣 3138 | 人氣 2961

前言:
以前:AR遊戲要分輸出ios跟安卓系統
不遠的以前:遊戲都做網頁版
現在:AR遊戲要做網頁版

花了一天除錯跟學基本AR.js



Unity + ARWT

ARWT目的在於充當Unity與AR.js的橋樑,是基於AR.js函式庫,讓使用者在Unity中能使用Web AR功能。目前功能不多,主要提供圖片追蹤。
在官方有使用教學,使用起來跟Vuforia差不多簡單。

優點:
  • 不需要寫ar.js
缺點:
  • 比較穩定的是單張圖片的追蹤,多張操作等可能會執行不起來。 (我這邊是遇到out of memory的error)
其他:有個類似的repo,只是比較老。

AR.js

基於three.js + A-Frame + jsartoolkit5的輕量級AR函式庫,提供以下功能:
  • 圖片追蹤
  • GPS定點AR
  • 標記追蹤
(圖片取自AR.js文件

圖片追蹤:
在特定的圖片平面上出現物體(可以是3D模型、圖片、影片。)

GPS定點AR:
在特定經緯度座標下出現物件。

標記(Marker)追蹤:
比圖片追蹤更穩定且更輕,但限制圖片要是正方形,且圖片周圍有黑框(越粗辨識度越好)。
生產Marker可使用AR.js Marker Training工具。
(超粗黑框)

實作:

官方有完整的程式教學,也可以使用ar.js studio快速生成模板。

實作多標記追蹤
(UI沒什麼功用,只是做個示範畫面)

快速生成的模板大概如下,將html與asset的檔案host起來就能直接使用!

多組標記便是在a-scene下多個a.marker標籤:

多組gps AR實作:


其他:
除了host在github page,我個人比較喜歡host在firebase上,主要是deploy完成後再開啟就是新的檔案,但github page則是要等一下才會套用。

若使用firebase hosting,記得將測試的檔案放在public資料夾下,然後下 firebase deploy 指令進行線上發布。



後續推薦:
學習three.jsA-Frame

送禮物贊助創作者 !
0
留言

創作回應

蘇姆INKO_IQ
我昨天剛好學這個
2022-01-19 04:57:08
%%鼠 拒收病婿
好奇是什麼契機開始學這個的?@@
2022-01-19 12:27:19
腥羽
剛好在思考要想做這方面耶,讚讚
2022-01-19 15:47:27
%%鼠 拒收病婿
+U[e22] [e22] [e22]
2022-01-19 17:41:29
%%鼠 拒收病婿
期待成果
2022-01-19 17:41:54
毛毛
請問如果要做出按鈕照相應該怎麼做比較好?其他文章都是關於app的
2023-04-27 20:44:52
%%鼠 拒收病婿
如果你只是要做按鈕的UI,建議學css,將按鈕的圖層至頂。

如果是要拍照截圖功能,有種做法是將圖像複製一分到canvas,再用原生功能把圖片寫下來。https://github.com/hiukim/mind-ar-js/discussions/73
2023-04-27 23:40:17
追蹤 創作集

作者相關創作

更多創作