WebARはじめてみませんか？〜第4回 tracking.jsで完全オリジナルのマーカーを実現 / 画像認識編〜
こんにちは！
デザイナーの伊東です。
アプリをインストールする必要がなく、ブラウザで簡単に体験していただけるWebAR。
これまでARkit2や8th Wall WebによるマーカーレスWebAR、AR.jsを利用したマーカー型WebARをご紹介してきました。
今、話題の「5G」により、世間でも話題の注目の技術になってきた実感があります。
今回チャレンジしたいのは、通常の四角い黒の線に囲まれたマーカーではなく、自由に指定した特定の画像に対して3Dオブジェクトを表示させる、というものです。
ありもののプラットフォームを利用して簡単に開発するというよりは、ARの「認識」と「出力」という仕組みを分離して実現するため、中級〜上級者向けの内容になっているかと思います。
この記事では、
- 任意の画像の特徴点と、Webカメラに映った映像の特徴点の抽出
- 抽出した類似点同士を比較して、類似点を検出する
という、ARの「認識」の部分の仕組みを構築していきたいと思います。
そこで今回使用するのが、tracking.jsという画像認識に特化したプラグインです。
「認識」にtracking.jsを利用し、最終的には「出力」部分にAR.jsを利用して実現するというところを目標にやっていきたいと思います。
最後までよろしくお願いします！
