2019年4月5日

8th Wall Web入門!【これからはじめるWebAR】

目次

  1. はじめに
  2. どんなサービス?
  3. 8thWall Webデモ
  4. 無料版でできること
  5. アカウント作成の参考サイト
  6. まとめ

はじめに

近年VRをはじめとして、AR、MRなどの技術が浸透しはじめてきました。
中でもARアプリはゲームから日常で役立つものまで様々なジャンルが登場しています。

まだ国内ではあまり事例がないですが、最近ではアプリ不要でブラウザ上で体験できるWebARも少しずつ注目を浴びてきています。

今回はそのWebARを簡単に実装できる「8thWall」についてご紹介します。

公式サイト

– 8th Wall | Augmented Reality
https://www.8thwall.com/

どんなサービス?

8thWallはAR開発者のために作られた、簡単にWebARを作成できるプラットフォームです。
無料アカウントを作るだけで、Githubから数種類のWebARのデモを実際にダウンロードし、ローカルで動かすことができます。

8thWall Webのメリット

– iOS、Androidの両方に対応したWebAR開発ができる
→「ARKit2」は iOS12以上対応、「ARCore」はAndroid対応のみ

– 主要なブラウザに対応: iOSではSafari / AndroidではChrome、Firefox

– 開発に必要なものはNPM, githubからデータをダウンロードするだけ

– ARでインタラクティブな操作やリアルな3Dモデルの配置、また3Dモデルに影をつけたり、歩いて後ろに回り込んだりすることが可能

8th wallでできること

→ 画面をタップしたところに3Dキャラクターを移動させることができる
また、その場所に3Dの木を生やしたり、モノを投げることができる

→ どこでもドアに入る感覚で、AR異世界や現実世界を行ったり来たりできる

→歩きながらARの世界を体験できる(3Dキャラクターに近づいたり、遠ざかったり、背面に歩いて回れるなど)

8thWall デモ

公式サイトのトップページにある「Made with 8th Wall Web」から実際に作られたサービスのデモ動画を見ることができます。
https://www.8thwall.com/

– スパイダーマン: Into the Spider Verse (スマホ・タブレット、Safari対応)
https://www.intothespiderverse-ar.com/

– JINI
https://apps.8thwall.com/8w/jini/

– スマホでQRコードを読み取って体験できます。
https://github.com/8thwall/web/tree/master/examples/aframe

など

無料版でできること

8th Wall Web SDK
Custom Web AR Experiences
Limited to 1,000 Views per month
Local Development Only
→有料会員になると、ビューの制限がなくなったり、広告料やウェブサイトで使用できるみたいです。

3種類のワークスペースが使用可能

– 8th Wall Web
→JSやWebGLを使ってモバイルでのWebAR作成が可能

– AR Camera
→コーディング不要で3DモデルをアップロードするだけですぐにWebAR作成が可能

– XR Developer
→ARアプリの作成が可能。Unityを使用。
iOS, Androidへ同時にデプロイができる。

アカウント作成の参考サイト

アカウントの作成方法については、こちらの記事で丁寧に紹介されていますので、こちらを参考に進めてみてください。

「WebARはじめてみませんか?〜第3回 8th Wall WebでAndroidにも対応のマーカーレスWebARを実装する〜」
https://alaki.co.jp/blog/?p=3160

「8thwallweb アカウント作成方法」
http://sgi-don.hatenablog.com/entry/2018/12/31/201409

公式サイトでのチュートリアル(英語)
https://docs.8thwall.com/camera/#tutorial

まとめ

以上、8thWall Webについてのサービス内容やWebARのデモ、アカウント作成について紹介しました。

次回は実際に8thWall Webを使ってデモを作成する様子をご紹介する予定です。
WebARに興味のある方は、ぜひ公式サイトをのぞいてみてください!

WebAR/VRのお仕事に関するご相談

Bageleeの運営会社、palanではWebAR/VRに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

6

1

AUTHOR

ゲスト bagelee

ゲスト bagelee

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

ゲスト bagelee

ゲスト bagelee

かっきー

かっきー

まりな

まりな

suzuki

suzuki

taro

taro

xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

kobari

taishi kobari

フロントエンドの開発を主に担当してます。Blitz.js好きです。

shogokubota

kubota shogo

サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!

nishi tomoya

aihara

aihara

グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。

nagao

SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

CONTACT PAGE TOP