3D表現を用いたECサイトと従来サイトにおける購買率比較実験に向けた表現手法調査

研究テーマ発表で使用したスライドです。
スライドの流用は禁止しますが、デザインやアイデアを真似ることは構いません。一次盗用はお控えください。

This is a presentation slide.
Diversion of slides is prohibited, but it is okay to imitate designs and ideas. Please refrain from primary plagiarism.

Transcript

1. 3D表現を⽤いたECサイトと従来サイトにおける 購買率⽐較実験に向けた表現⼿法調査 ©Nao Sasaki｜Lanberb 2020
2. 研究背景 3Dオブジェクトの描画⼿順 OpenGLと WebGL，及びGLSLの関係 Three.jsによる描画処理例 参考⽂献 02 ©Nao Sasaki｜Lanberb 2020
3. 研究背景 03 ©Nao Sasaki｜Lanberb 2020
4. … 研究背景 近年のECサイトの動向 ECサイトの市場規模が10兆円を突破 0 200 400 600 800 1,000 (単位：百億円) 2019(年) 2018 2017 2016 2015 2014 物販系分野のＢtoＣ- EC市場規模 全体の市場規模 商取引市場におけるEC化率 17兆 985億円 19兆 361億円 (伸び率：8.09%) (2018年と2019年を⽐較) (2018年と2019年を⽐較) 6.22% 6.76% の商取引がＥＣ化 ◯EC化率：電話、FAX、E メール、相対（対⾯）等も含めた全ての商取引⾦額（商取引市場規模）       に対する EC 市場規模の割合と定義する。       (参考：経済産業省 令和2年「電⼦商取引に関する 市場調査 報告書」17.) 10兆 515億円 ©Nao Sasaki｜Lanberb 2020
5. 研究背景 ECサイトを利⽤するメリット 従来の購買⾏動 ユーザ ⾞や徒歩で移動 商品の物⾊・検討 購⼊⼿続き/決済 ◯店舗へ移動  ・⾞や交通機関に依存しやすい  ・購買以外の消費も考えられる ◯商品の物⾊/検討  ・店舗を移動を繰り返して、⽬当ての   商品を探す  ・店舗スタッフとの相談等を踏まえた   購⼊の検討 ◯購⼊⼿続き/決済  ・現⾦の準備が必要  ・⾃宅への持ち帰りが必要 ECサイトがもたらした変化 ©Nao Sasaki｜Lanberb 2020
6. 研究背景 ECサイトを利⽤するメリット ECサイトがもたらした変化 従来の購買⾏動 ECサイトがもたらした購買⾏動 ユーザ ⾞や徒歩で移動 商品の物⾊/検討 購⼊⼿続き/決済 ユーザ ネット決済 商品の⼀覧検索 デバイス インターネット ◯店舗へ移動  ・⾞や交通機関に依存しやすい  ・購買以外の消費も考えられる ◯購⼊⼿続き/決済  ・現⾦の準備が必要  ・⾃宅への持ち帰りが必要 →移動の必要がない ◯商品の物⾊/検討  ・１つのデバイス内で多くの店舗を   往来できる  ・多くの商品を⼀覧表⽰で⽐較 →短時間で多くの商品を⽐較/検討 →現⾦の⽤意が必要ない ©Nao Sasaki｜Lanberb 2020
7. 研究背景 リアルとの乖離点 現在のECサイトが再現できない体験 デバイス インターネット ECサイト ユーザと商品が分断 「商品を⼿に取って購⼊の検討をする」 「ECサイトでも、リアルに商品に触れられないだろうか？」 ©Nao Sasaki｜Lanberb 2020
8. 3Dオブジェクトの描画⼿順 ©Nao Sasaki｜Lanberb 2020
9. 3Dオブジェクトの構造 3Dオブジェクトの描画⼿順 3Dオブジェクトの構造 3Dオブジェクトが描画される⼿順 ❶ 頂点シェーダで頂点位置の制御 ❷ ラスタライズでピクセル化 ❸ ピクセルに⾊情報を付与 頂点と囲まれた部分の⾊情報で表現する 3Dオブジェクトは三⾓形の集合体 ©Nao Sasaki｜Lanberb 2020
10. 頂点シェーダとラスタライズの役割 3Dオブジェクトの描画⼿順 頂点シェーダの役割とラスタライズ ❶ 頂点シェーダ ❷ ラスタライズ x Y x Y Y x x Y Z 頂点に囲まれた部分を ピクセルに置き換える 3D座標を2D座標に置き換える 変換前 変換後 処理前 処理後 ©Nao Sasaki｜Lanberb 2020
11. 頂点シェーダとラスタライズの役割 3Dオブジェクトの描画⼿順 頂点シェーダの役割とラスタライズ ❶ 頂点シェーダ ❷ ラスタライズ x Y x Y Y x x Y Z 頂点に囲まれた部分を ピクセルに置き換える 3D座標を2D座標に置き換える 変換前 変換後 処理前 処理後 ©Nao Sasaki｜Lanberb 2020
12. ピクセルの⾊情報を制御 3Dオブジェクトの描画⼿順 フラグメントシェーダの役割 ❸ 頂点情報からピクセルに⾊をつける Y x Y x 頂点に含まれる⾊情報(RGB)によってピクセルに着⾊する 処理前 処理後 画⾯に表⽰ などのAPIを⽤いて処理する ©Nao Sasaki｜Lanberb 2020
13. OpenGLと WebGL，及びGLSLの関係 ©Nao Sasaki｜Lanberb 2020
14. OpenGLと WebGL，及びGLSLの関係 OpenGLとWebGL 様々なOSに親和性の⾼いAPI 《⾔語》C, C++ ・Microsoft社が公開しているAPI ・同社が提供しているWindows OSへの  依存性が⾼い ・DirectPlayやDirectSoundなどの拡張  性が⾼く、スタンドアローンな実装に  なりやすい ・他OSへの移植が難しく、Blenderのよ  うなモデリング操作に向かない ・アメリカの⾮営利団体 ・2D~3Dのグラフィック計算を主とし  たAPIや開発環境を公開 《公開例》 OpenCL：並列計算⽤API OpenKCam：カメラ操作⽤API OpenML：オーディオAPI OpenVG：2次元ベクター画像のAPI OpenWF：2次元画像の圧縮と表⽰API StreamInput：⼊⼒機器に関するAPI Vulkan：グラフィックス⽤API 《⾔語》C, C++, C#, Java ・MacOSやその他多くのOSに対応しているため、コードの移  植性と開発の⼿軽さに優れている 《⾔語》C, C++ ・HTMLのCanvas要素を使⽤して描画される ・OpenGLをブラウザ向けに使⽤するために作られた標準仕様 ©Nao Sasaki｜Lanberb 2020
15. OpenGLと WebGL，及びGLSLの関係 OpenGLとWebGL 様々なOSに親和性の⾼いAPI 《⾔語》C, C++ ・Microsoft社が公開しているAPI ・同社が提供しているWindows OSへの  依存性が⾼い ・DirectPlayやDirectSoundなどの拡張  性が⾼く、スタンドアローンな実装に  なりやすい ・他OSへの移植が難しく、Blenderのよ  うなモデリング操作に向かない ・アメリカの⾮営利団体 ・2D~3Dのグラフィック計算を主とし  たAPIや開発環境を公開 《公開例》 OpenCL：並列計算⽤API OpenKCam：カメラ操作⽤API OpenML：オーディオAPI OpenVG：2次元ベクター画像のAPI OpenWF：2次元画像の圧縮と表⽰API StreamInput：⼊⼒機器に関するAPI Vulkan：グラフィックス⽤API 《⾔語》C, C++, C#, Java ・MacOSやその他多くのOSに対応しているため、コードの移  植性と開発の⼿軽さに優れている 《⾔語》C, C++ ・HTMLのCanvas要素を使⽤して描画される ・OpenGLをブラウザ向けに使⽤するために作られた標準仕様 ©Nao Sasaki｜Lanberb 2020
16. OpenGLと WebGL，及びGLSLの関係 Three.jsとは JavaScript⽤ライブラリ “Three.js” ファイルサイズ (単位：バイト) メンテナンス (Github Commit) 利⽤者数 (Github repository) 570,088 370,000 多い (最終メンテナンス：1/26) 多い (最終メンテナンス：1/27) 12,287 2,351 ©Nao Sasaki｜Lanberb 2020
17. OpenGLと WebGL，及びGLSLの関係 Three.jsとは JavaScript⽤ライブラリ “Three.js” ファイルサイズ (単位：バイト) メンテナンス (Github Commit) 利⽤者数 (Github repository) 570,088 370,000 145,870 Three.js 多い (最終メンテナンス：1/26) 多い (最終メンテナンス：1/27) 多い (最終メンテナンス：1/27) 12,287 2,351 45,279 ©Nao Sasaki｜Lanberb 2020
18. Three.jsによる描画処理例 ©Nao Sasaki｜Lanberb 2020
19. Three.jsによる描画処理例 まずはご覧ください カメラで読み込んでください https://cryptic-ridge-63036.herokuapp.com/ もし読み込めない場合… からもアクセスできます。 ©Nao Sasaki｜Lanberb 2020
20. 照明とカーソル操作の実装 Three.jsによる描画処理例 照明とカーソル操作の実装 陰影効果なし 陰影効果あり ©Nao Sasaki｜Lanberb 2020