1. 2020年6月17日
PWA＋WebARを
ECサイトで使ってみたい
PWA Night vol.17
バルテス・モバイルテクノロジー株式会社

2. 自己紹介
2
名前 山下大輔（やました だいすけ）
所属 開発部 マネージャー
出身 横浜市青葉区（たまプラーザ）
住まい 宝塚市（兵庫県）
趣味 競馬、陸上
得意分野 ３D全般（OpenGL、DirectX、Unity）
SNS
Facebook：@longjumper.daisuke
Instagram：@deepimpact_daisuke
Twitter：@jumper_daisuke
資格 Android技術者Basic、JSTQB FL

3. 3
•はじめに
•システム構成
•システム概要
•用語解説（補足説明）
•デモ（動画）
•最後に
アジェンダ

4. はじめに
4
現在Web３Dの技術も進んで、ブラウザ上でインタラクティブ
なVRやAR体験が出来るようになりました。
しかし、３D技術は敷居が高いです。基本的な概念（シー
ングラフ）の理解やsin、cos、tan等の幾何計算で大概の
人が挫折してしまいます。。。
今回この技術を使えば、基本的な知識不要です。すべてライ
ブラリ任せで、インタラクティブなECサイトを簡潔に構築するこ
とが出来、顧客の購買意欲が上がる期待があります。

5. システム構成
5
サーバー
ECサイト
AR Quick Look
ARモード
Scence Viewer
model-viewer.js

6. システム構成
6
開発環境・・・Visual Studio Code（以下VSCode）
フレームワーク・・・Nuxt.js（SPA）、model-viewer.js
サーバー（ホスティングサービス）・・・Firebase
ARライブラリ・・・ARKit（iOS）、ARCore（Android）
VSCode拡張・・・npm、glTF Tool
基本的にすべて無料で構築できます。

7. システム概要
7
３Dデータの表示のさせ方
model-viewer.jsを定義（詳細は省きます）
model-viewerのタグを設定
<model-viewer
src=“tv/model.gltf”
ios-src="tv/model.usdz"
shadow-intensity="1"
ar
ar-modes="webxr scene-viewer quick-look fallback"
camera-controls>
</model-viewer>

8. システム概要
8
３Dデータ表示結果

9. システム概要
9
• ３Dデータ作成のワークフロー
– ３DCGツール（Blender）でデータ作成
• Blenderは無料の３DCGツール
• 他の有料版の３DCGツールでは対応しているソフトが多い
– GLTFにエクスポート
• GLB（バイナリ形式）へのエクスポートも可能
• Visual Studio Code上のglTF Toolを使ってプレビュー
– Reality Converterで（Macが必須）USDZにコンバート
• GLTF→USDZに変換

10. システム概要
10
• GLTFプレビュー

11. 用語説明
11
• model-viewer
– インタラクティブな３DモデルをWeb上に表示出来、簡単に
ARに表示できる、フリーのJavaScriptライブラリ。
– ARモード時にAndroidであればScence Viewer、iOSで
あればAR Quick Lookを呼び出してくれる。
• GLTF
– GL Transmission Formatの略でJsonフォーマット
– WebGLと親和性が高い（実行時処理を最小化）
– PBRテクスチャ、アニメーション対応

12. 用語説明
12
• USDZ
– Universal Scene Descriptionの略でピクサーが開発した
３Dフォーマット
– PBRテクスチャ、アニメーション対応
• PBR
– Physically-based Renderingの略で、物理法則をベー
スとした表現方法
– 複数のテクスチャを使うことによって、質感を上げることが可能

13. デモ
13
こちらの動画を
ご覧下さい。

14. デモ
14

15. 15
最後に
【最後に】
- WebARはmodelviewer.jsを使えば比較的簡単に作れる
- iOS用の３Dデータ変換にはMacが必須
- PBRテクスチャを作ってモデルを作ると現実感が増す。
- リアルなモデルを作ると顧客の購買意欲が上がる可能性がある。
- キャッシュレスな時代でも、キャッシュは必須。
- この構成でシステム構築のコストは削減できるが、モデル作成コストは
見ておく必要あり（外注したほうがいい）

16. 16
最後に
-３Dに関するご相談は、いつでも私ま
でお問い合わせください。

17. ご清聴ありがとうございました。
17