8thWallWebで始めるWebAR / WebAR Getting started with 8th Wall Web

8thWallWebで始めるWebAR ARコンテンツ作成勉強会

自己紹介杉井　庸一 Youichi sugii youichi.sugii @sgidon 福岡のITエンジニアです。仕事はWebとは全く関係なく、いわゆるSIer。 WebVR/ARと、バイクと
Chromebookが好きです。 XR系の仕事を探しています

それでは本題

WebARとは？ ARとは、”Augmented Reality”の略で”拡張現実感”と訳されます。現実世界をベースに3Dモデルやグラフィックスを利用して情報を加えることで、現実世界を”拡張”します。 WebARとは、ARをWebブラウザで利用できる技術です。 URLでアクセスするためアプリのインストールが不要で、手軽にARを利用することができます。

マーカー式AR / マーカーレスAR マーカーを起点としてオブジェクトを表示。位置合わせの精度は高い現実空間（床面など）を認識し、そこを起点にオブジェクトを表示。表現の自由度が高い。

AR.js ARKit ARCore 8thWallWeb マーカー式マーカーレス供給元 Github Jerome Etienne
Apple Google 8thwall デバイスほぼすべてのデバイス iOS 12 iPhone6S over Android Oreo 限られた端末 iOS/ Android ブラウザほぼすべてのブラウザ Safari Chrome Canary iOS Safari/ Android Chrome プロダクト WebAR ジェネレータ AR Quick Look - AR Camera いろいろなWebAR

8thWallWebの概要モバイルブラウザ上でWebARを実現するライブラリマルチプラットフォームで動作します（iPhone/iPad/Androidの垣根がない） 3D Javascript フレームワーク（Three.js/A-Frame/Amazon Sumerian）を利用して簡単に開発することができます。 8thWallWebの動作要件は以下の通り iPhone/iPad:
iOS11以上。Safariブラウザ Android: Chrome、Firefox 8thWallが発行するAPIキーが必要。1000アクセス/月以上は有料プラン。

8thWallWebの概要

Web Developer まずは体験から AR Camera

A-Frame概要 Webブラウザ上でVRなどの3D表現を簡単に実現できるフレームワーク HTMLタグを書くだけで3Dオブジェクトを配置できる Firefox、Chrome、Edgeなど主要なブラウザで動作する。 WindowsMR、HTC ViveなどのHMD、スマホVRにも対応外部ライブラリを組み合わせることで様々な機能を利用可能

やっぱり体験から https://aframe.io/

やっぱり体験から回転：マウスドラッグ前後：[W][S]キー左右：[A][D]キー https://aframe.io/

本日のゴール

ハンズオン手順 8thWallアカウントの作成（事前作成済み）モデルデータの取得 AR CameraでARコンテンツの作成 A-Frameの基礎操作を覚える Web DeveloperでARコンテンツの作成もくもく会

必要なもの • 8thWallのアカウント →　https://8thwall.com/ でアカウントを作成します。 • 開発用のPC • 動作確認用のスマートフォンブラウザ →　iPhone/iPad(Over
iOS11): Safari、Android: Chrome/Firefox • Webサーバ →　今回は https://glitch.com/ を使用します。 →　Github/Facebook/emailでログインすれば、glitch上に保存できます

8thWall アカウント作成 8thWallのWebページからアカウントを作成

8thWallアカウント作成 https://8thwall.com/ １）Create Account ３）必要事項を入力してGet Started ２）Web Developer

8thWallアカウント作成１）日本を選択、携帯番号を入力して認証します。 “0”から始まる11桁の番号で、先頭の”0”を除いたり、”+81”をつける必要はありません。２）SMSで送られてきたコードを入力してクリック

8thWallアカウント作成おめでとうございます。これでアカウント作成されました。コンソール画面からAPI KEYの発行などが可能となります。登録したメールアドレスに、チュートリアルなどの情報が送られます。確認してみましょう。

モデルデータの取得 Polyのデータを使ってみよう

POLY https://poly.google.com/

POLY astronaut と入力

POLY ここをクリック

モデルの入手ダウンロード ↓ glTFファイル

モデルの入手ダウンロード

ファイル変換（glTF -> GLB） https://glb-packer.glitch.me ３ファイルを一度にドラッグ＆ドロップ Astronaut.glbに名前変更

AR Camera ノンコーディングで WebARコンテンツを作ろう

コンソール画面 https://console.8thwall.com/ Sign in

WORKSPACEの設定１）WORKSPACES ２）Create a New Workspace

WORKSPACEの設定サインイン１）AR Camera ２）Create

AR Cameraの作成１） AR Camera ２） Dashboard ３） Create a
new camera

AR Cameraの設定 Astronaut.glbをドラッグ＆ドロップ

AR Cameraの設定自由に設定変更する。動作確認する

AR Cameraの設定 Published 変更の反映には、毎回 Publishをクリックする必要があります。スマートフォンで読み込む

A-Frame A-Frameの基礎操作を覚えよう

基本サンプルコードをGlitchへ https://aframe.io/ クリック

基本サンプルコードをGlitchへクリック

基本サンプルコードをGlitchへ１）どれかを選んでサインイン２）サインイン後にクリック

Glitchでの動作確認クリックソースを修正すると自動反映される

A-Frameソース説明 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello, WebVR! •
A-Frame</title> <meta name="description" content="Hello, WebVR! • A-Frame"> <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script> </head> <body> <a-scene background="color: #ECECEC"> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane> </a-scene> </body> </html> ライブラリ読み込み表示するオブジェクトや背景設定は、 HTMLタグでここに記載する。

A-Frameソース説明 <a-scene background="color: #ECECEC"> <a-box position="-1 0.5 -3" rotation="0 45
0" color="#4CC3D9" shadow> </a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane> </a-scene> position: 位置（x y z）座標位置をスペース区切り rotation: 回転（x y z）0〜360度をスペース区切り color: 色（カラーコード）#000000〜#FFFFFF shadow: 影 a-sphere a-box a-cylinder a-plane 各タグの詳細情報は https://aframe.io/docs/

座標位置・回転・スケール（X Y Z） X軸 Y軸 Z軸 Z軸は後ろがプラス（Y-up 右手系）軸のプラス方向に
右ネジが進む向き（右手系）インスペクターで確認 CTRL+ALT+i

座標位置・回転・スケール（X Y Z） a-box 値を変更インスペクター上の変更は反映されません設定値はHTMLソースに手動で反映しましょう

自由演習自由にソースを修正してみましょう。修正した結果を確認してみましょう。画面を左右半分に分けて表示すると便利です

Web developer A-Frameで WebARコンテンツを作ろう

コンソール画面 https://console.8thwall.com/ Sign in

WORKSPACEの設定１）WORKSPACES ２）Create a New Workspace すでにWORKSPACEを作っている場合は、 Web Appの作成に進んでください。

WORKSPACEの設定１）Web Developer ２）Create

Web Appの作成１）WORKSPACE ２） Dashboard ３） Create a new Web
App

Web Appの作成 Application Nameを入れて、Create

Web Appの作成 Web Appが作成されました

8thWallWebライブラリの設定元々のAFrame ライブラリを削除します

8thWall版のAFrameライブラリ https://docs.8thwall.com/web/ AFrame 8thWall版 AFrameをコピーします <script src="//cdn.8thwall.com/web/aframe/8frame-0.8.2.min.js"></script> 「8frame-0.9.0.min.js」に変更

8thWallWebライブラリの設定 8thWall版 AFrame ライブラリを貼付

AppKeyの発行３）Copy １） Dashboard ２）</>

8thWallWebライブラリの設定 AppKeyを貼付

xrwebコンポーネント追加 <a-scene background="color: #ECECEC" xrweb> <a-box position="-1 0.5 -3" rotation="0
45 0" color="#4CC3D9" shadow></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane> </a-scene> 追加

カメラの設定 <a-scene background="color: #ECECEC" xrweb> <a-camera position="0 8 8"></a-camera> <a-box
position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane> </a-scene>

Development Token の発行 Developer Mode

Development Token の発行 PCのブラウザを認証します。表示したQRCodeをスマートフォンで読み込みます。

モデルの配置１）assets ２）モデルファイルをドラッグ＆ドロップ４）copyをクリック３）ファイルをクリック

モデルの配置 <a-scene background="color: #ECECEC" xrweb> <a-camera position="0 8 8"></a-camera> <a-box
position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane> <a-gltf-model src="copyしたURL" shadow></a-gltf-model> </a-scene> ４つのオブジェクトを削除

iPhone/iPadの注意 Safariでは、デフォルトで「モーションと画面の向きのアクセス」「カメラとマイクのアクセス」を禁止しています。『設定』→「Safari」の順に画面を開き、プライバシーとセキュリティ欄にある２つのスイッチをオン(白 → 緑)にすればOKです。 Safariでアクセスした際、「カメラへのアクセ
スを求めています」とダイヤログがでて、キャンセル/許可を選択できるようになります。 ※「モーションと画面の向きのアクセス」は iOS12.2からの制限となります。

iOS12.2対応および Recenter機能の追加 https://github.com/8thwall/web xrextras

iOS12.2対応および Recenter機能の追加 <script src="//cdn.8thwall.com/web/aframe/8frame-0.9.0.min.js"></script> <script src="//apps.8thwall.com/xrweb?appKey=xxxxxxxxxxx"></script> <script src="//cdn.8thwall.com/web/xrextras/xrextras.js"></script> </head>
<body> <a-scene background="color: #ECECEC" xrweb xrextras-almost-there xrextras-loading xrextras-runtime-error xrextras-tap-recenter> <a-camera position="0 8 8"></a-camera> a-sceneタグ内に追加各コンポーネントの機能 ----- xrextras-almost-there →サポートデバイス・ブラウザの検知 xrextras-loading → カメラアクセス許可等のプロンプト制御 xrextras-runtime-error → 実行時エラー時制御。エラー画面表示 xrextras-tap-recenter → Recenter機能の追加。画面タップ時に実行

ソースコード全体 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello, WebVR! •
A-Frame</title> <meta name="description" content="Hello, WebVR! • A-Frame"> <script src="//cdn.8thwall.com/web/aframe/8frame-0.9.0.min.js"></script> <script src="//apps.8thwall.com/xrweb?appKey=xxxxxxxxxxx"></script> <script src="//cdn.8thwall.com/web/xrextras/xrextras.js"></script> </head> <body> <a-scene background="color: #ECECEC" xrweb xrextras-almost-there xrextras-loading xrextras-runtime-error xrextras-tap-recenter> <a-camera position="0 8 8"></a-camera> <a-gltf-model src="https://cdn.glitch.com/xxxxx%2FAstronaut.glb?xxxxx" shadow></a-gltf-model> </a-scene> </body> </html>

動かしてみましょう Show スマートフォンで読み取る

もくもく各自で好きなように作ってみましょう

Appendix

Appendix: 各種リンク 8thwall • 本家サイト https://8thwall.com/ • ドキュメント https://docs.8thwall.com/web/ •
Github https://github.com/8thwall/web • Slack https://8thwalldevs.slack.com/ A-Frame • 本家サイト https://aframe.io/ • ドキュメント https://aframe.io/docs/ • Github https://github.com/aframevr/aframe

Appendix: A-Frame(animation) Ver 0.9.0 動きのあるコンテンツを簡単に作ることができます。A-FrameのVer 0.9.0 からは動作させたいオブジェクトのコンポーネントとしてanimationを追加します。 <a-gltf-model src="https://xxxx〜"
shadow animation=”property:rotation; dur:10000; from:0 0 0; to:0 360 0; loop:true; “> </a-gltf-model> プロパティ property: アニメーションさせたい属性 dur: １回のアニメーション時間 from: アニメーション開始時の値 to: アニメーション終了時の値 loop: 繰り返し回数 true=無制限 https://aframe.io/docs/0.9.0/components/animation.html

Appendix: glTFモデルを明るく表示する SCENEのレンダラーに対して、gammaOutputオプションをTrueにすることで、暗かったglTFモデルを明るく表示できます。ただ、全体的に明るくなります。 <script src="//apps.8thwall.com/xrweb?appKey=xxxxx"></script> <script src="//cdn.8thwall.com/web/xrextras/xrextras.js"></script> </head>
<body> <a-scene xrweb xrextras-almost-there ~ renderer="gamma-output:true" > a-sceneタグ内に追加

Appendix: 床面へ影を落とすコンポーネントの設定 API-KEY以下に追加する。床面オブジェクトの作成 a-gltf-modelオブジェクト以下に追加する。 <script src="//apps.8thwall.com/xrweb?appKey=xxx"></script> <script> AFRAME.registerComponent('shadow-material',
{ init: function() { this.material = new THREE.ShadowMaterial() this.el.getOrCreateObject3D('mesh').material = this.material this.material.opacity = 0.4 } }) </script> </head> <body> <a-camera position="0 8 8"></a-camera> <a-gltf-model src="https://cdn.glitch.com/xxxxx%2FAstronaut.glb?xxxxx" shadow></a-gltf-model> <a-plane id=”ground” rotation="-90 0 0" width="1000" height="1000" shadow shadow-material></a-plane> <a-scene> 資料上２行で表示されていますが、１行で記載しても大丈夫です。

Appendix: Price Web Developer/AR Camera どちらもFree/Proプランが用意されています。 Proプランは、月額固定額＋ページビュー毎の従量課金料金が発生します。 Enterpriseプラン、Studentプランも用意されていま
す。

お疲れ様でした

8thWallWebで始めるWebAR / WebAR Getting started with 8th Wall Web

8thWallWebで始めるWebAR / WebAR Getting started with 8th Wall Web

More Decks by sgidon

Other Decks in Technology

Featured

Transcript