Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

PWA+WebARをECサイトで使ってみたい

595 views

Published on

2020.6.17
PWA Night vol.17 ~PWA × EC~

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

PWA+WebARをECサイトで使ってみたい

  1. 1. 2020年6月17日 PWA+WebARを ECサイトで使ってみたい PWA Night vol.17 バルテス・モバイルテクノロジー株式会社
  2. 2. 自己紹介 2 名前 山下大輔(やました だいすけ) 所属 開発部 マネージャー 出身 横浜市青葉区(たまプラーザ) 住まい 宝塚市(兵庫県) 趣味 競馬、陸上 得意分野 3D全般(OpenGL、DirectX、Unity) SNS Facebook:@longjumper.daisuke Instagram:@deepimpact_daisuke Twitter:@jumper_daisuke 資格 Android技術者Basic、JSTQB FL
  3. 3. 3 •はじめに •システム構成 •システム概要 •用語解説(補足説明) •デモ(動画) •最後に アジェンダ
  4. 4. はじめに 4 現在Web3Dの技術も進んで、ブラウザ上でインタラクティブ なVRやAR体験が出来るようになりました。 しかし、3D技術は敷居が高いです。基本的な概念(シー ングラフ)の理解やsin、cos、tan等の幾何計算で大概の 人が挫折してしまいます。。。 今回この技術を使えば、基本的な知識不要です。すべてライ ブラリ任せで、インタラクティブなECサイトを簡潔に構築するこ とが出来、顧客の購買意欲が上がる期待があります。
  5. 5. システム構成 5 サーバー ECサイト AR Quick Look ARモード Scence Viewer model-viewer.js
  6. 6. システム構成 6 開発環境・・・Visual Studio Code(以下VSCode) フレームワーク・・・Nuxt.js(SPA)、model-viewer.js サーバー(ホスティングサービス)・・・Firebase ARライブラリ・・・ARKit(iOS)、ARCore(Android) VSCode拡張・・・npm、glTF Tool 基本的にすべて無料で構築できます。
  7. 7. システム概要 7 3Dデータの表示のさせ方 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. システム概要 8 3Dデータ表示結果
  9. 9. システム概要 9 • 3Dデータ作成のワークフロー – 3DCGツール(Blender)でデータ作成 • Blenderは無料の3DCGツール • 他の有料版の3DCGツールでは対応しているソフトが多い – GLTFにエクスポート • GLB(バイナリ形式)へのエクスポートも可能 • Visual Studio Code上のglTF Toolを使ってプレビュー – Reality Converterで(Macが必須)USDZにコンバート • GLTF→USDZに変換
  10. 10. システム概要 10 • GLTFプレビュー
  11. 11. 用語説明 11 • model-viewer – インタラクティブな3DモデルをWeb上に表示出来、簡単に ARに表示できる、フリーのJavaScriptライブラリ。 – ARモード時にAndroidであればScence Viewer、iOSで あればAR Quick Lookを呼び出してくれる。 • GLTF – GL Transmission Formatの略でJsonフォーマット – WebGLと親和性が高い(実行時処理を最小化) – PBRテクスチャ、アニメーション対応
  12. 12. 用語説明 12 • USDZ – Universal Scene Descriptionの略でピクサーが開発した 3Dフォーマット – PBRテクスチャ、アニメーション対応 • PBR – Physically-based Renderingの略で、物理法則をベー スとした表現方法 – 複数のテクスチャを使うことによって、質感を上げることが可能
  13. 13. デモ 13 こちらの動画を ご覧下さい。
  14. 14. デモ 14
  15. 15. 15 最後に 【最後に】 - WebARはmodelviewer.jsを使えば比較的簡単に作れる - iOS用の3Dデータ変換にはMacが必須 - PBRテクスチャを作ってモデルを作ると現実感が増す。 - リアルなモデルを作ると顧客の購買意欲が上がる可能性がある。 - キャッシュレスな時代でも、キャッシュは必須。 - この構成でシステム構築のコストは削減できるが、モデル作成コストは 見ておく必要あり(外注したほうがいい)
  16. 16. 16 最後に -3Dに関するご相談は、いつでも私ま でお問い合わせください。
  17. 17. ご清聴ありがとうございました。 17

×