WebAR制作に役立つツールを使ってクオリティアップ！HTMLで表現できるA-frame

トップ　＞　コラム一覧　＞　WebAR制作に役立つツールを使ってクオリティアップ！HTMLで表現できるA-frameル

「WebARを自分で制作したい！」

「WebARって自分で調べてどうにかなるの？」

「WebARに必要なツールがあれば制作会社に頼まなくても大丈夫？」

とお考えでしたら、まずはLevelenterへご相談ください。

WebVRやWebARの開発制作を行っているLevelenterには、上記のようなご相談がよく寄せられます。

WebARは自分でも作れますが、その代わりツールの使い方などは勉強しておく必要があるのです。そこでこちらでは、知っておくと便利なWebAR制作ツールをご紹介いたします。クオリティの高いWebARの制作に役立てましょう。

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です。
画像を認識することもできますし、動画で認識することもできるので、リアルタイムトラッキングで街中の様子を認識することもできます。

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