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に興味のある方は、ぜひ公式サイトをのぞいてみてください!

1

0

AUTHOR

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

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

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

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

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

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

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

sasakki デザイナー

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

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

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

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

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

はらた

はらた エンジニア

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

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP