Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Nao Sasaki
February 21, 2021

 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.

Nao Sasaki

February 21, 2021
Tweet

More Decks by Nao Sasaki

Other Decks in Technology

Transcript

  1. 3D表現を⽤いたECサイトと従来サイトにおける
    購買率⽐較実験に向けた表現⼿法調査
    ©Nao Sasaki|Lanberb 2020

    View full-size slide

  2. 研究背景
    3Dオブジェクトの描画⼿順
    OpenGLと WebGL,及びGLSLの関係
    Three.jsによる描画処理例
    参考⽂献
    02
    ©Nao Sasaki|Lanberb 2020

    View full-size slide

  3. 研究背景
    03
    ©Nao Sasaki|Lanberb 2020

    View full-size slide


  4. 研究背景 近年のECサイトの動向
    ECサイトの市場規模が10兆円を突破
    0
    200
    400
    600
    800
    1,000
    (単位:百億円)
    2019(年)
    2018
    2017
    2016
    2015
    2014
    物販系分野のBtoC- EC市場規模 全体の市場規模
    商取引市場におけるEC化率
    17兆 985億円
    19兆 361億円
    (伸び率:8.09%)
    (2018年と2019年を⽐較)
    (2018年と2019年を⽐較)
    6.22% 6.76%
    の商取引がEC化
    ◯EC化率:電話、FAX、E メール、相対(対⾯)等も含めた全ての商取引⾦額(商取引市場規模)
          に対する EC 市場規模の割合と定義する。
          (参考:経済産業省 令和2年「電⼦商取引に関する 市場調査 報告書」17.)
    10兆 515億円
    ©Nao Sasaki|Lanberb 2020

    View full-size slide

  5. 研究背景 ECサイトを利⽤するメリット
    従来の購買⾏動
    ユーザ
    ⾞や徒歩で移動
    商品の物⾊・検討
    購⼊⼿続き/決済
    ◯店舗へ移動
     ・⾞や交通機関に依存しやすい
     ・購買以外の消費も考えられる
    ◯商品の物⾊/検討
     ・店舗を移動を繰り返して、⽬当ての
      商品を探す
     ・店舗スタッフとの相談等を踏まえた
      購⼊の検討
    ◯購⼊⼿続き/決済
     ・現⾦の準備が必要
     ・⾃宅への持ち帰りが必要
    ECサイトがもたらした変化
    ©Nao Sasaki|Lanberb 2020

    View full-size slide

  6. 研究背景 ECサイトを利⽤するメリット
    ECサイトがもたらした変化
    従来の購買⾏動
    ECサイトがもたらした購買⾏動
    ユーザ
    ⾞や徒歩で移動
    商品の物⾊/検討
    購⼊⼿続き/決済
    ユーザ
    ネット決済
    商品の⼀覧検索
    デバイス
    インターネット
    ◯店舗へ移動
     ・⾞や交通機関に依存しやすい
     ・購買以外の消費も考えられる
    ◯購⼊⼿続き/決済
     ・現⾦の準備が必要
     ・⾃宅への持ち帰りが必要
    →移動の必要がない
    ◯商品の物⾊/検討
     ・1つのデバイス内で多くの店舗を
      往来できる
     ・多くの商品を⼀覧表⽰で⽐較
    →短時間で多くの商品を⽐較/検討
    →現⾦の⽤意が必要ない
    ©Nao Sasaki|Lanberb 2020

    View full-size slide

  7. 研究背景 リアルとの乖離点
    現在のECサイトが再現できない体験
    デバイス インターネット ECサイト
    ユーザと商品が分断
    「商品を⼿に取って購⼊の検討をする」
    「ECサイトでも、リアルに商品に触れられないだろうか?」
    ©Nao Sasaki|Lanberb 2020

    View full-size slide

  8. 3Dオブジェクトの描画⼿順
    ©Nao Sasaki|Lanberb 2020

    View full-size slide

  9. 3Dオブジェクトの構造
    3Dオブジェクトの描画⼿順 3Dオブジェクトの構造
    3Dオブジェクトが描画される⼿順
    ❶ 頂点シェーダで頂点位置の制御
    ❷ ラスタライズでピクセル化
    ❸ ピクセルに⾊情報を付与
    頂点と囲まれた部分の⾊情報で表現する
    3Dオブジェクトは三⾓形の集合体
    ©Nao Sasaki|Lanberb 2020

    View full-size slide

  10. 頂点シェーダとラスタライズの役割
    3Dオブジェクトの描画⼿順 頂点シェーダの役割とラスタライズ
    ❶ 頂点シェーダ ❷ ラスタライズ
    x
    Y
    x
    Y Y
    x
    x
    Y
    Z
    頂点に囲まれた部分を
    ピクセルに置き換える
    3D座標を2D座標に置き換える
    変換前 変換後 処理前 処理後
    ©Nao Sasaki|Lanberb 2020

    View full-size slide

  11. 頂点シェーダとラスタライズの役割
    3Dオブジェクトの描画⼿順 頂点シェーダの役割とラスタライズ
    ❶ 頂点シェーダ ❷ ラスタライズ
    x
    Y
    x
    Y Y
    x
    x
    Y
    Z
    頂点に囲まれた部分を
    ピクセルに置き換える
    3D座標を2D座標に置き換える
    変換前 変換後 処理前 処理後
    ©Nao Sasaki|Lanberb 2020

    View full-size slide

  12. ピクセルの⾊情報を制御
    3Dオブジェクトの描画⼿順 フラグメントシェーダの役割
    ❸ 頂点情報からピクセルに⾊をつける
    Y
    x
    Y
    x
    頂点に含まれる⾊情報(RGB)によってピクセルに着⾊する
    処理前 処理後
    画⾯に表⽰
    などのAPIを⽤いて処理する
    ©Nao Sasaki|Lanberb 2020

    View full-size slide

  13. OpenGLと WebGL,及びGLSLの関係
    ©Nao Sasaki|Lanberb 2020

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  18. Three.jsによる描画処理例
    ©Nao Sasaki|Lanberb 2020

    View full-size slide

  19. Three.jsによる描画処理例 まずはご覧ください
    カメラで読み込んでください
    https://cryptic-ridge-63036.herokuapp.com/
    もし読み込めない場合…
    からもアクセスできます。
    ©Nao Sasaki|Lanberb 2020

    View full-size slide

  20. 照明とカーソル操作の実装
    Three.jsによる描画処理例 照明とカーソル操作の実装
    陰影効果なし 陰影効果あり
    ©Nao Sasaki|Lanberb 2020

    View full-size slide