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

by sgidon

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

それでは本題

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

8thWallWebの概要

Slide 9

Slide 9 text

Web Developer まずは体験から AR Camera

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

本日のゴール

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

POLY https://poly.google.com/

Slide 22

Slide 22 text

POLY astronaut と入力

Slide 23

Slide 23 text

POLY ここをクリック

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

A-Frameソース説明 Hello, WebVR! • A-Frame ライブラリ読み込み表示するオブジェクトや背景設定は、 HTMLタグでここに記載する。

Slide 42

Slide 42 text

A-Frameソース説明 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/

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

WORKSPACEの設定１）Web Developer ２）Create

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

8thWall版のAFrameライブラリ https://docs.8thwall.com/web/ AFrame 8thWall版 AFrameをコピーします「8frame-0.9.0.min.js」に変更

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

xrwebコンポーネント追加追加

Slide 60

Slide 60 text

カメラの設定

Slide 61

Slide 61 text

Development Token の発行 Developer Mode

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

モデルの配置４つのオブジェクトを削除

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

iOS12.2対応および Recenter機能の追加 a-sceneタグ内に追加各コンポーネントの機能 ----- xrextras-almost-there →サポートデバイス・ブラウザの検知 xrextras-loading → カメラアクセス許可等のプロンプト制御 xrextras-runtime-error → 実行時エラー時制御。エラー画面表示 xrextras-tap-recenter → Recenter機能の追加。画面タップ時に実行

Slide 68

Slide 68 text

ソースコード全体 Hello, WebVR! • A-Frame

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

Appendix

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

Appendix: glTFモデルを明るく表示する SCENEのレンダラーに対して、gammaOutputオプションをTrueにすることで、暗かったglTFモデルを明るく表示できます。ただ、全体的に明るくなります。 a-sceneタグ内に追加

Slide 75

Slide 75 text

Appendix: 床面へ影を落とすコンポーネントの設定 API-KEY以下に追加する。床面オブジェクトの作成 a-gltf-modelオブジェクト以下に追加する。 AFRAME.registerComponent('shadow-material', { init: function() { this.material = new THREE.ShadowMaterial() this.el.getOrCreateObject3D('mesh').material = this.material this.material.opacity = 0.4 } }) 資料上２行で表示されていますが、１行で記載しても大丈夫です。

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

お疲れ様でした