見出し画像

[WebAR] Letsee で マーカー認識

韓国スタートアップ Letseeから「Letsee WebAR SDK」が提供されました。今回はマーカー認識をサクッと試してみたいと思います!Letseeについての詳細は、以下の記事をご参照ください。

はじめての方へ

まずは、Letsee の Hello World を実行を完了しておいてください。(今回のマーカー認識は、このHello Worldをベースとし修正を実施します。)

マーカー認識までの手順

マーカーを選ぶ。

以下から、使用したいマーカーを選びます。選び終えた際、選択したマーカーの画像サイズを事前に調べておいてください。

JSON構成ファイルの修正

以下の構成ファイルにある"letseeMarkerId"に選択したマーカーID(マーカーを選んだPNGファイルを除いたファイル名)を設定します。

"size"には事前に調べておいたマーカーの画像サイズを設定します。

{
 "uri":"letsee-marker.json",
 "name":"Letsee Web AR SDK",
 "size":{
   "width": 500,
   "height": 500
 },
 "scale": 1,
 "letseeMarkerId":"marker_0"
}

HTMLファイルの修正

config の "trackerType"には、"MARKER"を設定します。

<script>
       const key = ((new URL(document.location)).searchParams).get('key');
       const config = {
           "appKey": key,   // Replace the app key here with your own app key
           "trackerType": "MARKER",     // For planar image tracking, trackerType should be IMAGE
       };
       const letsee = new Letsee(config);
</script>

スマホから起動

画像1

スマホをマーカーにかざすと、マーカー上に文字が表示されます。

まとめ

基本、画像認識とほぼ同じ方法でマーカー認識のWebARアプリを作ることができます。(事前に画像ファイルを用意することなく実現できます。)

最後に

OnePlanetは、AR技術をベースに未来のユーザー体験/ユースケースを創造することに挑戦しているARスタートアップです。
様々なテクノロジーにより現実とバーチャルの境界は日々曖昧になり、すでに信じられないような感動体験ができる世の中になりつつあります。

そんなOnePlanetでは、参加してくれるメンバーを募集中です!

よりインタラクティブでパーソナライズされた次の時代のユーザー体験を一緒に創造しませんか?

OnePlanet Tech Magazine

弊社のテックマガジン公開中!この記事以外にも技術記事を配信中!!

#AR #3D #WebAR #Letsee