Monthly Archive: 4月 2019

こんにちは！
デザイナーの伊東（@ALAKIWebVRAR1）です。

※TwitterでもWebARの事を中心に情報発信中！
よかったらフォローお願いしますm(_ _)m
Follow @ALAKIWebVRAR1

前回は決められたマーカーではなく、完全オリジナルのマーカーを作成して、認識させる技術をどう実装するかをご紹介しました。

WebARはじめてみませんか？〜第4回 tracking.jsで完全オリジナルのマーカーを実現 / 画像認識編〜

その記事を公開して数日後の2019年4月17日、なんと8th Wall Webが画像認識に対応したとのニュースが発表されました！

Release 11: Image Targets & More

8th Wall Web登場以前は、iOS12以降に実装されたARの「クイックビュー」、決められた規定の中で作成したマークを読み取る「マーカー型AR」の2種類が主流だったWebAR。
画像認識機能の発表により、WebARの可能性が大きく広がったと感じています。

今日は、最新の技術であるWebARの画像認識機能を実際に利用するための方法をご説明します。

今日の記事を最後まで学ぶと、こんなものが作れるようになります。

続きを読む

こんにちは！
デザイナーの伊東（@ALAKIWebVRAR1）です。

※TwitterでもWebARの事を中心に情報発信中！
よかったらフォローお願いしますm(_ _)m
Follow @ALAKIWebVRAR1

アプリをインストールする必要がなく、ブラウザで簡単に体験していただけるWebAR。
これまでARkit2や8th Wall WebによるマーカーレスWebAR、AR.jsを利用したマーカー型WebARをご紹介してきました。
今、話題の「5G」により、世間でも話題の注目の技術になってきた実感があります。

今回チャレンジしたいのは、通常の四角い黒の線に囲まれたマーカーではなく、自由に指定した特定の画像に対して3Dオブジェクトを表示させる、というものです。
ありもののプラットフォームを利用して簡単に開発するというよりは、ARの「認識」と「出力」という仕組みを分離して実現するため、中級〜上級者向けの内容になっているかと思います。

この記事では、

1. 任意の画像の特徴点と、Webカメラに映った映像の特徴点の抽出
2. 抽出した類似点同士を比較して、類似点を検出する

という、ARの「認識」の部分の仕組みを構築していきたいと思います。

そこで今回使用するのが、tracking.jsという画像認識に特化したプラグインです。
「認識」にtracking.jsを利用し、最終的には「出力」部分にAR.jsを利用して実現するというところを目標にやっていきたいと思います。

最後までよろしくお願いします！

続きを読む