WebAR制作に役立つツールとは？使いこなしてクオリティを上げよう！

WebAR制作の際に役立つツールをいくつかご紹介いたします。

​

◇Three.js
Three.jsはHTMLで表現できるJavaScriptのことです。Three.jsを使うことで簡単に3Dコンテンツが制作できます。少ないコードで制作できるので、非常にわかりやすいのも人気の理由です。

もし初心者の方でコードがわからない場合はサンプルコードがありますので、そういったものからコピーして、自分で変えたい部分だけ表記変更することで表現できます。
Three.jsでドーナツ制作、マテリアル制作、メッシュ制作などができます。
HTMLで表現できるA-frameもその一つです。

​

◇8thWall
8thWallはWebAR制作用に作られたプラットフォームで、デモをダウンロードしてブラウザ上で動かすことができます。
iOS、Androidの両方に対応した表示が可能なため、スマホ所有者のほとんどの方に対してアプローチすることができます。

なお、iOSの主要ブラウザはSafari、Androidの主要ブラウザはChromeとFirefoxです。

8thWallでできることは3Dキャラクターを実装し、現実世界に投影できることです。
例えば、目の前のテーブルにキャラクターを置いたり、街中に置いたりすることも可能です。歩きながらARのキャラクターを動かすこともできます。

​

◇AR.js
AR.jsは、HTML上に数行のコードを記載するだけで表現できるJavaScriptです。
AR.jsでマーカーにカメラを向けると、オブジェクトを動かしたり、表示したりすることができます。他にも、360度動画再生やobjファイル表示が可能になります。
それぞれを組み合わせてアニメーション制作も可能です。

​

◇Babylon.js
Babylon.jsはWeb GLを扱うためのJavaScriptです。
Babylon.jsで3Dグラフィックのアニメーション表示ができます。
キャラクターが歩いているアニメーション、3Dゲームの作成などが可能です。

スマホでタップして動かすこともできますし、パソコンならマウスやキーボードを使って視点を変えたり、キャラクターを動かしたりすることができます。グラフィックもかなり綺麗で、クオリティの高いゲームが作れます。

​

◇tracking.js
tracking.jsはブラウザ上で人や物体などを認識するJavaScriptです。
画像を認識することもできますし、動画で認識することもできるので、リアルタイムトラッキングで街中の様子を認識することもできます。

これにより、例えば人を特定してその人の向きや色、形などを変えることもできます。
もともとスマホに備わっているカメラなどを駆使して利用可能です。

A-frameならHTMLで制作可能！ハイクオリティを目指すならLevelenterへ

WebAR制作に役立つツールをご紹介いたしました。HTML上の記載で役立つJavaScriptが多いのが特徴です。自作してみたい方は、いくつかツールを活用してみましょう。

​

Levelenterでは、HTMLタグで制作可能なA-frameなどを駆使してハイクオリティのWebAR制作を行います。まずはお気軽にお問い合わせください。