Upgrade to Pro — share decks privately, control downloads, hide ads and more …

8thWallWebで始めるWebAR / WebAR Getting started wit...

sgidon
March 30, 2019

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

2019/2/2および3/30、4/6に行った8thwallwebを使ったWebARハンズオン資料です。

https://xr-fukuoka.connpass.com/event/114279/
https://xr-fukuoka.connpass.com/event/124923/
https://xr-fukuoka.connpass.com/event/124923/

誰でも簡単にWebARできるハンズオンになっています。
ご興味のある方はぜひ一読願います。

変更履歴
----
2019/02/02: 初版作成
2019/03/30: iOS12.2対応。glTFモデルを明るくする方法追加。A-Frame0.9.0対応

In English document
https://speakerdeck.com/sgidon/webar-getting-started-with-8th-wall-web-in-english

#AR_Fukuoka

sgidon

March 30, 2019
Tweet

More Decks by sgidon

Other Decks in Technology

Transcript

  1. 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
  2. 必要なもの • 8thWallのアカウント → https://8thwall.com/ でアカウントを作成します。 • 開発用のPC • 動作確認用のスマートフォンブラウザ → iPhone/iPad(Over

    iOS11): Safari、Android: Chrome/Firefox • Webサーバ → 今回は https://glitch.com/ を使用します。 → Github/Facebook/emailでログインすれば、glitch上に保存できます
  3. 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タグでここに記載する。
  4. 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/
  5. 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> 追加
  6. カメラの設定 <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>
  7. モデルの配置 <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> 4つのオブジェクト を削除
  8. 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機能の追加。画面タップ時に実行
  9. ソースコード全体 <!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>
  10. 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
  11. 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: 1回のアニメーション時間 from: アニメーション開始時の値 to: アニメーション終了時の値 loop: 繰り返し回数 true=無制限 https://aframe.io/docs/0.9.0/components/animation.html
  12. 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> 資料上2行で表示されていますが、1行 で記載しても大丈夫です。