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.
2020年6月17日
PWA+WebARを
ECサイトで使ってみたい
PWA Night vol.17
バルテス・モバイルテクノロジー株式会社
自己紹介
2
名前 山下大輔(やました だいすけ)
所属 開発部 マネージャー
出身 横浜市青葉区(たまプラーザ)
住まい 宝塚市(兵庫県)
趣味 競馬、陸上
得意分野 3D全般(OpenGL、DirectX、Unity)
SNS
Facebo...
3
•はじめに
•システム構成
•システム概要
•用語解説(補足説明)
•デモ(動画)
•最後に
アジェンダ
はじめに
4
現在Web3Dの技術も進んで、ブラウザ上でインタラクティブ
なVRやAR体験が出来るようになりました。
しかし、3D技術は敷居が高いです。基本的な概念(シー
ングラフ)の理解やsin、cos、tan等の幾何計算で大概の
人が挫折し...
システム構成
5
サーバー
ECサイト
AR Quick Look
ARモード
Scence Viewer
model-viewer.js
システム構成
6
開発環境・・・Visual Studio Code(以下VSCode)
フレームワーク・・・Nuxt.js(SPA)、model-viewer.js
サーバー(ホスティングサービス)・・・Firebase
ARライブラリ・・・...
システム概要
7
3Dデータの表示のさせ方
model-viewer.jsを定義(詳細は省きます)
model-viewerのタグを設定
<model-viewer
src=“tv/model.gltf”
ios-src="tv/model.u...
システム概要
8
3Dデータ表示結果
システム概要
9
• 3Dデータ作成のワークフロー
– 3DCGツール(Blender)でデータ作成
• Blenderは無料の3DCGツール
• 他の有料版の3DCGツールでは対応しているソフトが多い
– GLTFにエクスポート
• GLB(...
システム概要
10
• GLTFプレビュー
用語説明
11
• model-viewer
– インタラクティブな3DモデルをWeb上に表示出来、簡単に
ARに表示できる、フリーのJavaScriptライブラリ。
– ARモード時にAndroidであればScence Viewer、iOSで...
用語説明
12
• USDZ
– Universal Scene Descriptionの略でピクサーが開発した
3Dフォーマット
– PBRテクスチャ、アニメーション対応
• PBR
– Physically-based Renderingの...
デモ
13
こちらの動画を
ご覧下さい。
デモ
14
15
最後に
【最後に】
- WebARはmodelviewer.jsを使えば比較的簡単に作れる
- iOS用の3Dデータ変換にはMacが必須
- PBRテクスチャを作ってモデルを作ると現実感が増す。
- リアルなモデルを作ると顧客の購買意欲が...
16
最後に
-3Dに関するご相談は、いつでも私ま
でお問い合わせください。
ご清聴ありがとうございました。
17
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
What to Upload to SlideShare
Next
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Share

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

Download to read offline

2020.6.17
PWA Night vol.17 ~PWA × EC~

Related Books

Free with a 30 day trial from Scribd

See all
  • 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

2020.6.17 PWA Night vol.17 ~PWA × EC~

Views

Total views

1,836

On Slideshare

0

From embeds

0

Number of embeds

1,467

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×