こんにちは！
デザイナーの伊東（@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を利用して実現するというところを目標にやっていきたいと思います。

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

続きを読む

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

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

昨年9月に、WebブラウザからマーカーレスAR体験が可能な「8th Wall Web」というプラットフォームをご紹介しました。
8thWallが8thWallWebを発表！WebブラウザからでもマーカーレスARが体験可能に

その時点ではまだデモ動画しか公開されていない状態でしたが、先日ついに正式版がリリースされました！

8th Wall Webリリース前にも、ARkit2を利用したマーカーレスWebARは実装可能でした。
ただ、ARkit2を利用するということは、動作環境がiOS12以上の端末に限られることになります。
8th Wallは、OSに依存しない、Androidにも対応したWebAR開発を実現します。

今回はその8th Wall Webのアカウントの作成から、アプリケーションの作成、実装方法までご紹介します！
下の動画のような、インタラクティブなWebARのサンプルが作れるようになるところまでを目標に進めていきます。

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

続きを読む

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

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

今日は、WebARについて書こうと思います。
昨年書いたWebARの記事の内容をベースに、今回は3Dオブジェクトの操作方法について詳しく掘り下げていきます。

前回の記事は、下記リンクからご確認ください！
WebARはじめてみませんか？〜第1回 AR.jsで簡単WebAR〜

続きを読む