WebAR開発について調べた。

みたかシロフード

WebARについて調べてたら1日過ぎてた。

てっとりばやくWebARが可能かどうかを箇条書きでメモしていたモノを
ここにまとめているのでソース先までは全部追えていない。信頼性の薄い個人まとめです。

今回求めていたwebARの仕様は

・一般的なブラウザで実装

・独自マーカー(画像)が可能

の2点

 

専用ブラウザやインストールが必要なアプリは不可

独自マーカーは複数の非正方形画像
マーカーの種類によって表示する中身を切り替えたかったので、QRコードタイプ、正方形タイプ、マーカーレスは不可。

 

この条件で1日かけて調べてみたが無料の開発環境は見つけられなかった。

一部条件だけ満たすのはいくつかあった。

 

●AR系javascript

ブラウザでARが実装できる代表的なモノ

・three.js

・A-frame

・AR.js

これは基本の仕組みが同じ。（three.js→A-frame→AR.jsという流れ？）
そのため、マーカーがQRコードのような正方形ブロックマーカーじゃないと実装できない。

 

マーカージェネレーターで枠いっぱいまで画像を設定してみたが駄目だった。

PatternRatioが標準では0.5、これを変更した場合は下記赤文字部分を追加する必要がある。

ほぼコピペ

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
<title></title>
</head>
<body style=”margin:0px; overflow:hidden;”>
<!– A-Frame ライブラリの読み込み –>
<script src=”https://aframe.io/releases/0.6.1/aframe.min.js”></script>
<!– AR.js ライブラリの読み込み –>
<script src=”https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js”></script>

<!– A-Frame の VR空間に AR.js を紐づける（デバッグUIは非表示） –>
<a-scene embedded arjs=”debugUIEnabled:false;patternRatio:0.9;“>
<a-marker type=”pattern” url=”https://～～～/pattern-marker.patt”>

<!– マーカーの場所に箱を置く（見やすいようにワイヤーフレーム表示） –>
<a-box position=”0 0.5 0″ wireframe=”true”></a-box>
</a-marker>

<!– AR用のカメラを置く –>
<a-entity camera></a-entity>

</a-scene>
</body>
</html>

 

正方形じゃないと認識できなかった。

 

・three.AR.js

ARCore対応端末なら2仕様の実現可能っぽい。ただ対応端末の制限があるので却下

・Processing.js
Processingのjavascript版。
ProcessingがARできたからjavascript版ならwebARできるかなと思って調べたがヒットしなかった。
・p5.js
Processing.jsの改良版？同。

 

●Vuforia

独自マーカーは可能。
以前VuforiaでAndroidのARアプリは作ったことがあったので
webGLで書き出せば動くとおもったがwegGL非対応。

Vuforia+argon.jsで近いことはできるが、argonに対応しているブラウザが必要のため却下

 

●SmartAR

ソニーの開発したARエンジン。発表された時のニュースでは見ていたがあまり話を聞かない。
unity2018で取り込んだがビルドでエラー落ち。調べてみたら5.6じゃないと動かないし
ビルドに到達するまでにかなり苦労するガチガチの仕様っぽい。
というかこれもモバイルやwindows対応だけでwebGLに対応していなかったので却下

 

●KudanAR

こっちも発表時にネット記事で見て触った記憶があるが最近話を聞かない。
これもモバイル用。webGL非対応。

 

●zappar
30日間は無料。たぶんやりたいことはできるが有料なので却下。
今回やりたいことはお金をかけてまでやるものじゃないので。

●WakingApp AR Studio
7日間は無料。こちらも同じくやりたいことできるが有料却下。

 

●8thWallWeb
マーカーレスなので却下。
ただし、マーカーレスWebARするならかなり有力候補。

 

●Amazon Sumerian

VRだけのイメージだったけどARも対応していた。
1年間は無料で使えるが、最新＆高度すぎて情報がない。
webGLには対応してるみたいなので多分可能だが結局有料なので却下。

 

 

 

結果：惨敗

QRコードタイプのマーカーでよければAR.js

マーカーレスでよければ8thWallWeb

という結論になりました。

 

この1日でAR開発環境たくさん触れたので良しとする。

関連記事



コメントを残す

※コメントは承認後に表示されます。
　コメントを公開されたくない場合、名前の後に「：非公開」とつけてください。