Suche senden
Hochladen
PWA+WebARをECサイトで使ってみたい
•
0 gefällt mir
•
2,837 views
Daisuke Yamashita
Folgen
2020.6.17 PWA Night vol.17 ~PWA × EC~
Weniger lesen
Mehr lesen
Ingenieurwesen
Melden
Teilen
Melden
Teilen
1 von 17
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
UnityによるVR開発 - 基本編 -
UnityによるVR開発 - 基本編 -
Tomonori Takata
Part3 unityを使ったvrアプリ作成入門
Part3 unityを使ったvrアプリ作成入門
kinneko
あらゆるイベントを可視化する! RaspberryPiで作るLED警告灯ソリューション
あらゆるイベントを可視化する! RaspberryPiで作るLED警告灯ソリューション
infinite_loop
UnityでVRアプリを作ってみよう! (講演編)
UnityでVRアプリを作ってみよう! (講演編)
Masahiro Ide
Unityで意外と簡単・・・だけど難しいVRコンテンツ
Unityで意外と簡単・・・だけど難しいVRコンテンツ
infinite_loop
Unityを使ったVRアプリ作成入門 ABCD2015金沢編
Unityを使ったVRアプリ作成入門 ABCD2015金沢編
kinneko
Unity上でMMDを動かしてみた
Unity上でMMDを動かしてみた
infinite_loop
Introduction of Leap Motion
Introduction of Leap Motion
hagino 3000
Empfohlen
UnityによるVR開発 - 基本編 -
UnityによるVR開発 - 基本編 -
Tomonori Takata
Part3 unityを使ったvrアプリ作成入門
Part3 unityを使ったvrアプリ作成入門
kinneko
あらゆるイベントを可視化する! RaspberryPiで作るLED警告灯ソリューション
あらゆるイベントを可視化する! RaspberryPiで作るLED警告灯ソリューション
infinite_loop
UnityでVRアプリを作ってみよう! (講演編)
UnityでVRアプリを作ってみよう! (講演編)
Masahiro Ide
Unityで意外と簡単・・・だけど難しいVRコンテンツ
Unityで意外と簡単・・・だけど難しいVRコンテンツ
infinite_loop
Unityを使ったVRアプリ作成入門 ABCD2015金沢編
Unityを使ったVRアプリ作成入門 ABCD2015金沢編
kinneko
Unity上でMMDを動かしてみた
Unity上でMMDを動かしてみた
infinite_loop
Introduction of Leap Motion
Introduction of Leap Motion
hagino 3000
【Unity道場スペシャル 2017札幌】おっさんでも美少女になれる?!VRアイドルの作り方
【Unity道場スペシャル 2017札幌】おっさんでも美少女になれる?!VRアイドルの作り方
Unity Technologies Japan K.K.
ミニ四駆でPython on Windows Azure
ミニ四駆でPython on Windows Azure
Takahiro Fujiwara
NVIDIAのエンジニア向けコミュニティ活動&CUDA最新情報
NVIDIAのエンジニア向けコミュニティ活動&CUDA最新情報
NVIDIA Japan
ゲームサーバ開発現場の考え方
ゲームサーバ開発現場の考え方
Daisaku Mochizuki
Unityプロファイラについて
Unityプロファイラについて
Mio Ku-tani
Adobe AIR で作る カジュアルゲーム開発
Adobe AIR で作る カジュアルゲーム開発
KLab Inc. / Tech
ディープラーニングでラーメン二郎(全店舗)を識別してみた
ディープラーニングでラーメン二郎(全店舗)を識別してみた
knjcode
ゲームエンジンの中の話
ゲームエンジンの中の話
Masayoshi Kamai
Unityとスマートフォンアプリの最適化
Unityとスマートフォンアプリの最適化
COLOPL, Inc.
Unibook3執筆ガイドライン
Unibook3執筆ガイドライン
Keigo Ando
UNIBOOK2執筆ガイドライン
UNIBOOK2執筆ガイドライン
Keigo Ando
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~
Web Technology Corp.
『ポコロンダンジョンズ』エフェクトや演出制作ノウハウ
『ポコロンダンジョンズ』エフェクトや演出制作ノウハウ
GameCreators,CyberAgent
ガールアックス:リアルタイム通信処理の効率的な実装
ガールアックス:リアルタイム通信処理の効率的な実装
dena_study
CrystalFantasiaを支えきった技術と技術だけではどうにもならなかった話
CrystalFantasiaを支えきった技術と技術だけではどうにもならなかった話
Keisuke Utsumi
Unity+Vuforiaで始めるARアプリ開発
Unity+Vuforiaで始めるARアプリ開発
Takashi Suzuki
年の瀬リアルタイム通信サーバ勉強会
年の瀬リアルタイム通信サーバ勉強会
モノビット エンジン
【GCC2019】モノビットエンジンがついにクラウド化!しかし、インフラでまさかのAzureを利用!?本当に大丈夫なの?
【GCC2019】モノビットエンジンがついにクラウド化!しかし、インフラでまさかのAzureを利用!?本当に大丈夫なの?
モノビット エンジン
ARコンテンツ作成勉強会:UnityとVuforiaではじめるAR [主要部分]
ARコンテンツ作成勉強会:UnityとVuforiaではじめるAR [主要部分]
Takashi Yoshinaga
phpck
phpck
Takenori Nakagawa
Azure Remote Renderingを試す
Azure Remote Renderingを試す
Takahiro Miyaura
さくらのIoT Platformを使ってみよう ~Developers in KOBE編~
さくらのIoT Platformを使ってみよう ~Developers in KOBE編~
法林浩之
Weitere ähnliche Inhalte
Was ist angesagt?
【Unity道場スペシャル 2017札幌】おっさんでも美少女になれる?!VRアイドルの作り方
【Unity道場スペシャル 2017札幌】おっさんでも美少女になれる?!VRアイドルの作り方
Unity Technologies Japan K.K.
ミニ四駆でPython on Windows Azure
ミニ四駆でPython on Windows Azure
Takahiro Fujiwara
NVIDIAのエンジニア向けコミュニティ活動&CUDA最新情報
NVIDIAのエンジニア向けコミュニティ活動&CUDA最新情報
NVIDIA Japan
ゲームサーバ開発現場の考え方
ゲームサーバ開発現場の考え方
Daisaku Mochizuki
Unityプロファイラについて
Unityプロファイラについて
Mio Ku-tani
Adobe AIR で作る カジュアルゲーム開発
Adobe AIR で作る カジュアルゲーム開発
KLab Inc. / Tech
ディープラーニングでラーメン二郎(全店舗)を識別してみた
ディープラーニングでラーメン二郎(全店舗)を識別してみた
knjcode
ゲームエンジンの中の話
ゲームエンジンの中の話
Masayoshi Kamai
Unityとスマートフォンアプリの最適化
Unityとスマートフォンアプリの最適化
COLOPL, Inc.
Unibook3執筆ガイドライン
Unibook3執筆ガイドライン
Keigo Ando
UNIBOOK2執筆ガイドライン
UNIBOOK2執筆ガイドライン
Keigo Ando
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~
Web Technology Corp.
『ポコロンダンジョンズ』エフェクトや演出制作ノウハウ
『ポコロンダンジョンズ』エフェクトや演出制作ノウハウ
GameCreators,CyberAgent
ガールアックス:リアルタイム通信処理の効率的な実装
ガールアックス:リアルタイム通信処理の効率的な実装
dena_study
CrystalFantasiaを支えきった技術と技術だけではどうにもならなかった話
CrystalFantasiaを支えきった技術と技術だけではどうにもならなかった話
Keisuke Utsumi
Unity+Vuforiaで始めるARアプリ開発
Unity+Vuforiaで始めるARアプリ開発
Takashi Suzuki
年の瀬リアルタイム通信サーバ勉強会
年の瀬リアルタイム通信サーバ勉強会
モノビット エンジン
【GCC2019】モノビットエンジンがついにクラウド化!しかし、インフラでまさかのAzureを利用!?本当に大丈夫なの?
【GCC2019】モノビットエンジンがついにクラウド化!しかし、インフラでまさかのAzureを利用!?本当に大丈夫なの?
モノビット エンジン
ARコンテンツ作成勉強会:UnityとVuforiaではじめるAR [主要部分]
ARコンテンツ作成勉強会:UnityとVuforiaではじめるAR [主要部分]
Takashi Yoshinaga
phpck
phpck
Takenori Nakagawa
Was ist angesagt?
(20)
【Unity道場スペシャル 2017札幌】おっさんでも美少女になれる?!VRアイドルの作り方
【Unity道場スペシャル 2017札幌】おっさんでも美少女になれる?!VRアイドルの作り方
ミニ四駆でPython on Windows Azure
ミニ四駆でPython on Windows Azure
NVIDIAのエンジニア向けコミュニティ活動&CUDA最新情報
NVIDIAのエンジニア向けコミュニティ活動&CUDA最新情報
ゲームサーバ開発現場の考え方
ゲームサーバ開発現場の考え方
Unityプロファイラについて
Unityプロファイラについて
Adobe AIR で作る カジュアルゲーム開発
Adobe AIR で作る カジュアルゲーム開発
ディープラーニングでラーメン二郎(全店舗)を識別してみた
ディープラーニングでラーメン二郎(全店舗)を識別してみた
ゲームエンジンの中の話
ゲームエンジンの中の話
Unityとスマートフォンアプリの最適化
Unityとスマートフォンアプリの最適化
Unibook3執筆ガイドライン
Unibook3執筆ガイドライン
UNIBOOK2執筆ガイドライン
UNIBOOK2執筆ガイドライン
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~
『ポコロンダンジョンズ』エフェクトや演出制作ノウハウ
『ポコロンダンジョンズ』エフェクトや演出制作ノウハウ
ガールアックス:リアルタイム通信処理の効率的な実装
ガールアックス:リアルタイム通信処理の効率的な実装
CrystalFantasiaを支えきった技術と技術だけではどうにもならなかった話
CrystalFantasiaを支えきった技術と技術だけではどうにもならなかった話
Unity+Vuforiaで始めるARアプリ開発
Unity+Vuforiaで始めるARアプリ開発
年の瀬リアルタイム通信サーバ勉強会
年の瀬リアルタイム通信サーバ勉強会
【GCC2019】モノビットエンジンがついにクラウド化!しかし、インフラでまさかのAzureを利用!?本当に大丈夫なの?
【GCC2019】モノビットエンジンがついにクラウド化!しかし、インフラでまさかのAzureを利用!?本当に大丈夫なの?
ARコンテンツ作成勉強会:UnityとVuforiaではじめるAR [主要部分]
ARコンテンツ作成勉強会:UnityとVuforiaではじめるAR [主要部分]
phpck
phpck
Ähnlich wie PWA+WebARをECサイトで使ってみたい
Azure Remote Renderingを試す
Azure Remote Renderingを試す
Takahiro Miyaura
さくらのIoT Platformを使ってみよう ~Developers in KOBE編~
さくらのIoT Platformを使ってみよう ~Developers in KOBE編~
法林浩之
WebARで作るDukeが飛び出すカード
WebARで作るDukeが飛び出すカード
Hideyuki Fujikawa
Boost.勉強会 #13 @仙台 鳥小屋
Boost.勉強会 #13 @仙台 鳥小屋
Yuto M
Algyan@how to dragon board410c20170930
Algyan@how to dragon board410c20170930
Hiroshi Hasegawa
ngCore engine for mobage platform
ngCore engine for mobage platform
Toru Yamaguchi
.NET Micro Framework の基礎
.NET Micro Framework の基礎
Yoshitaka Seo
さくらのIoT Platformを使ってみよう ~OSC大阪編~
さくらのIoT Platformを使ってみよう ~OSC大阪編~
法林浩之
Cerebro for VFX / Animation Japan
Cerebro for VFX / Animation Japan
CineSoft
2017 0824 io tlt勉強会_掲載用
2017 0824 io tlt勉強会_掲載用
yasuyuki_suzuki
Azure のポータル画面で、AI フレーバな BOT の作成ハンズオン
Azure のポータル画面で、AI フレーバな BOT の作成ハンズオン
Yasuaki Matsuda
クラウドのご紹介
クラウドのご紹介
Junpei Nakada
Android & Nui & Physical Computing
Android & Nui & Physical Computing
Takahiro KUREBAYASHI
これからはじめるIoTデバイス mbed入門編
これからはじめるIoTデバイス mbed入門編
Naoto Tanaka
CardboardのUXをカメラで向上する (droidkaigi 2015/04)
CardboardのUXをカメラで向上する (droidkaigi 2015/04)
Kenichi Takahashi
3Dリッチコンテンツビジネス活用のご提案ver3.1
3Dリッチコンテンツビジネス活用のご提案ver3.1
ITDORAKU
GTMF2012 SpriteStudio と "Unity" と "CoronaSDK" と "ngCore" ! ~組み合わせて改善する 2D ワーク...
GTMF2012 SpriteStudio と "Unity" と "CoronaSDK" と "ngCore" ! ~組み合わせて改善する 2D ワーク...
Web Technology Corp.
3Dリッチコンテンツビジネス活用のご提案ver3.1
3Dリッチコンテンツビジネス活用のご提案ver3.1
CRI Japan, Inc.
OpenJDKのコミッタってどんなことしたらなったの?解決してきた技術課題の事例から見えてくる必要な知識と技術(JJUG CCC 2023 Spring)
OpenJDKのコミッタってどんなことしたらなったの?解決してきた技術課題の事例から見えてくる必要な知識と技術(JJUG CCC 2023 Spring)
NTT DATA Technology & Innovation
ゲームエンジン導入セミナー【UDK編】
ゲームエンジン導入セミナー【UDK編】
Junya "Jun" Shimoda
Ähnlich wie PWA+WebARをECサイトで使ってみたい
(20)
Azure Remote Renderingを試す
Azure Remote Renderingを試す
さくらのIoT Platformを使ってみよう ~Developers in KOBE編~
さくらのIoT Platformを使ってみよう ~Developers in KOBE編~
WebARで作るDukeが飛び出すカード
WebARで作るDukeが飛び出すカード
Boost.勉強会 #13 @仙台 鳥小屋
Boost.勉強会 #13 @仙台 鳥小屋
Algyan@how to dragon board410c20170930
Algyan@how to dragon board410c20170930
ngCore engine for mobage platform
ngCore engine for mobage platform
.NET Micro Framework の基礎
.NET Micro Framework の基礎
さくらのIoT Platformを使ってみよう ~OSC大阪編~
さくらのIoT Platformを使ってみよう ~OSC大阪編~
Cerebro for VFX / Animation Japan
Cerebro for VFX / Animation Japan
2017 0824 io tlt勉強会_掲載用
2017 0824 io tlt勉強会_掲載用
Azure のポータル画面で、AI フレーバな BOT の作成ハンズオン
Azure のポータル画面で、AI フレーバな BOT の作成ハンズオン
クラウドのご紹介
クラウドのご紹介
Android & Nui & Physical Computing
Android & Nui & Physical Computing
これからはじめるIoTデバイス mbed入門編
これからはじめるIoTデバイス mbed入門編
CardboardのUXをカメラで向上する (droidkaigi 2015/04)
CardboardのUXをカメラで向上する (droidkaigi 2015/04)
3Dリッチコンテンツビジネス活用のご提案ver3.1
3Dリッチコンテンツビジネス活用のご提案ver3.1
GTMF2012 SpriteStudio と "Unity" と "CoronaSDK" と "ngCore" ! ~組み合わせて改善する 2D ワーク...
GTMF2012 SpriteStudio と "Unity" と "CoronaSDK" と "ngCore" ! ~組み合わせて改善する 2D ワーク...
3Dリッチコンテンツビジネス活用のご提案ver3.1
3Dリッチコンテンツビジネス活用のご提案ver3.1
OpenJDKのコミッタってどんなことしたらなったの?解決してきた技術課題の事例から見えてくる必要な知識と技術(JJUG CCC 2023 Spring)
OpenJDKのコミッタってどんなことしたらなったの?解決してきた技術課題の事例から見えてくる必要な知識と技術(JJUG CCC 2023 Spring)
ゲームエンジン導入セミナー【UDK編】
ゲームエンジン導入セミナー【UDK編】
Mehr von Daisuke Yamashita
PWANight Vol.31 Flutterで簡単PWA
PWANight Vol.31 Flutterで簡単PWA
Daisuke Yamashita
Pwa night vol.20~初めてのPWA開発で学んだ事~
Pwa night vol.20~初めてのPWA開発で学んだ事~
Daisuke Yamashita
コミュニティの楽しみ方~私はこうやって楽しんでる~
コミュニティの楽しみ方~私はこうやって楽しんでる~
Daisuke Yamashita
Monaca X PWA X 3D
Monaca X PWA X 3D
Daisuke Yamashita
Monacaを使ってアプリ開発ビジネスを加速させ、そして色々と苦労した話~
Monacaを使ってアプリ開発ビジネスを加速させ、そして色々と苦労した話~
Daisuke Yamashita
MonacaでPWAを作ってデプロイしよう!~MonacaでPWAをとりあえず公開したい!!~
MonacaでPWAを作ってデプロイしよう!~MonacaでPWAをとりあえず公開したい!!~
Daisuke Yamashita
ARVRを始める前の3Dの基本的な事~3つの壁に挑もう!!~
ARVRを始める前の3Dの基本的な事~3つの壁に挑もう!!~
Daisuke Yamashita
Monaca ug osaka_20190522
Monaca ug osaka_20190522
Daisuke Yamashita
探偵Monacaスクープ!~monaca&onsen uiあるある小ネタ集~
探偵Monacaスクープ!~monaca&onsen uiあるある小ネタ集~
Daisuke Yamashita
MonacaxVRで楽しもう!~3D/VRの基本も楽しもう!
MonacaxVRで楽しもう!~3D/VRの基本も楽しもう!
Daisuke Yamashita
Manacaの常識を覆せ!!~monacaで試す3d/vr/arの可能性~
Manacaの常識を覆せ!!~monacaで試す3d/vr/arの可能性~
Daisuke Yamashita
Manacaあるある(とあるパートナー失敗談) vmt
Manacaあるある(とあるパートナー失敗談) vmt
Daisuke Yamashita
Mehr von Daisuke Yamashita
(12)
PWANight Vol.31 Flutterで簡単PWA
PWANight Vol.31 Flutterで簡単PWA
Pwa night vol.20~初めてのPWA開発で学んだ事~
Pwa night vol.20~初めてのPWA開発で学んだ事~
コミュニティの楽しみ方~私はこうやって楽しんでる~
コミュニティの楽しみ方~私はこうやって楽しんでる~
Monaca X PWA X 3D
Monaca X PWA X 3D
Monacaを使ってアプリ開発ビジネスを加速させ、そして色々と苦労した話~
Monacaを使ってアプリ開発ビジネスを加速させ、そして色々と苦労した話~
MonacaでPWAを作ってデプロイしよう!~MonacaでPWAをとりあえず公開したい!!~
MonacaでPWAを作ってデプロイしよう!~MonacaでPWAをとりあえず公開したい!!~
ARVRを始める前の3Dの基本的な事~3つの壁に挑もう!!~
ARVRを始める前の3Dの基本的な事~3つの壁に挑もう!!~
Monaca ug osaka_20190522
Monaca ug osaka_20190522
探偵Monacaスクープ!~monaca&onsen uiあるある小ネタ集~
探偵Monacaスクープ!~monaca&onsen uiあるある小ネタ集~
MonacaxVRで楽しもう!~3D/VRの基本も楽しもう!
MonacaxVRで楽しもう!~3D/VRの基本も楽しもう!
Manacaの常識を覆せ!!~monacaで試す3d/vr/arの可能性~
Manacaの常識を覆せ!!~monacaで試す3d/vr/arの可能性~
Manacaあるある(とあるパートナー失敗談) vmt
Manacaあるある(とあるパートナー失敗談) vmt
PWA+WebARをECサイトで使ってみたい
1.
2020年6月17日 PWA+WebARを ECサイトで使ってみたい PWA Night vol.17 バルテス・モバイルテクノロジー株式会社
2.
自己紹介 2 名前 山下大輔(やました だいすけ) 所属
開発部 マネージャー 出身 横浜市青葉区(たまプラーザ) 住まい 宝塚市(兵庫県) 趣味 競馬、陸上 得意分野 3D全般(OpenGL、DirectX、Unity) SNS Facebook:@longjumper.daisuke Instagram:@deepimpact_daisuke Twitter:@jumper_daisuke 資格 Android技術者Basic、JSTQB FL
3.
3 •はじめに •システム構成 •システム概要 •用語解説(補足説明) •デモ(動画) •最後に アジェンダ
4.
はじめに 4 現在Web3Dの技術も進んで、ブラウザ上でインタラクティブ なVRやAR体験が出来るようになりました。 しかし、3D技術は敷居が高いです。基本的な概念(シー ングラフ)の理解や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 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 3Dデータ表示結果
9.
システム概要 9 • 3Dデータ作成のワークフロー – 3DCGツール(Blender)でデータ作成 •
Blenderは無料の3DCGツール • 他の有料版の3DCGツールでは対応しているソフトが多い – GLTFにエクスポート • GLB(バイナリ形式)へのエクスポートも可能 • Visual Studio Code上のglTF Toolを使ってプレビュー – Reality Converterで(Macが必須)USDZにコンバート • GLTF→USDZに変換
10.
システム概要 10 • GLTFプレビュー
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 • USDZ – Universal
Scene Descriptionの略でピクサーが開発した 3Dフォーマット – PBRテクスチャ、アニメーション対応 • PBR – Physically-based Renderingの略で、物理法則をベー スとした表現方法 – 複数のテクスチャを使うことによって、質感を上げることが可能
13.
デモ 13 こちらの動画を ご覧下さい。
14.
デモ 14
15.
15 最後に 【最後に】 - WebARはmodelviewer.jsを使えば比較的簡単に作れる - iOS用の3Dデータ変換にはMacが必須 -
PBRテクスチャを作ってモデルを作ると現実感が増す。 - リアルなモデルを作ると顧客の購買意欲が上がる可能性がある。 - キャッシュレスな時代でも、キャッシュは必須。 - この構成でシステム構築のコストは削減できるが、モデル作成コストは 見ておく必要あり(外注したほうがいい)
16.
16 最後に -3Dに関するご相談は、いつでも私ま でお問い合わせください。
17.
ご清聴ありがとうございました。 17
Jetzt herunterladen