【フォトグラメトリ×WebGL】ECサイトに「3D商品モデル」を導入してみた！｜Labo｜株式会社トライム

はじめに

皆さんは、ECサイトで商品をご覧になっている時、こんな風に思ったことはありませんか？

「写真では、後ろからの見た目がはっきりと分からない」
「明るい場所と暗い場所で、どのくらい印象が変わるのか知りたい」

実際に商品を見て触れられる店舗とは違い、多くのECサイトでは商品の掲載写真を見ることしかできません。そのためもっと詳しく見たうえで買うかどうか決めたいと思ったことのある方も多いはず。

従来の2D写真では、決められたアングルでしか商品を見ることができません。しかし現在では「フォトグラメトリ」という多面的に撮影された2D写真を合成して3Dモデルを作成する技術があります。3Dモデル作成といっても決して難しいものではなく、近年ではスマホで撮影した写真をアップロードするだけで3Dモデルを作成してくれるアプリやサービスもあります。

これを活用して商品の3Dモデルを作成し、Webページ上に掲載することができれば、ユーザーは店舗のように様々な角度から自由に商品を見ることができるはずです。

検証内容

そこでトライムでは、ユーザーが商品を360°から自由に眺められる「3D商品モデル」を導入したECサイトを想定し、誰でも手軽にできる3Dモデルの作成方法とWebブラウザ上で3Dモデルを表示する方法の2つを検証してみました。

フォトグラメトリとは

フォトグラメトリとは、被写体を様々な角度から撮影し、その画像データを分析・統合することで、立体的な3DCGモデルを生成する手法のことです。

専用の計測機器を準備する必要がなく、スマホやデジカメなどで撮影した写真から生成できるのが大きな特徴です。モデル生成には、およそ100枚前後の画像データを必要とします。カップやフィギュアなど身近なものから、風景や建築物といった大規模なものまで、3Dモデルとしてデータ化することができます。

また最近のiPhoneの一部モデルではLiDARと呼ばれる3Dレーザースキャン機能が搭載されており、技術的な違いはありますが、こちらでもフォトグラメトリ同様3Dモデルを作成することができます。

WebGLとは

WebGLとは、Webブラウザで3Dなどのコンピュータグラフィックスを描画するための規格です。

昔流行ったFlash Playerはブラウザにプラグインが実装されている必要がありましたが、WebGLはJavaScript（ブラウザ上で動かせるプログラム）で動作するため、PCだけでなくスマホでも問題なく動作することができます。

詳しくは過去の記事でもまとめています。気になった方はこちらも併せてお読みください。

【WebGLってなに？】いまさら調べてまとめてみた

WebGLの後継技術：WebGPUって何？

3Dモデルの作成

導入するにあたって、ECサイトで取り扱っている商品を3Dモデル化する必要があります。まずはトライムでもスマホを使って「手軽に3Dモデルを作成できるかどうか」にチャレンジしてみました。

被写体の撮影

スマホに標準で搭載されているカメラアプリ、もしくはストアからダウンロードした専用アプリで被写体の撮影を行います。被写体を全方位から囲むイメージで、様々な角度と高さから撮影することがポイントです。1枚1枚写真を撮る場合は100枚程度を目安に撮ります。

専用アプリの代表例には以下のようなものが挙げられます。

• WIDAR（iOS / Android）
• Scaniverse（iOS / Android）
• Metascan（iOS）

撮影画像のモデル化

標準のカメラアプリで撮った写真は、WebサービスPolyCamを使用して3Dモデル化を行います。無料プランでは150枚までの画像を読み込むことができます。

https://poly.cam/capture/3657a70f-e904-4b5e-b96f-3b0d4dfb89d1
https://poly.cam/capture/f4c217be-855c-415d-857f-9a223c5bf459

専用アプリを利用する場合は、アプリ内の機能で3Dモデル化します。専用アプリは編集機能も充実しているので、作成後のモデルを簡単に編集できます。意図しない箇所がモデル化されて削ぎ落としたい場合などに便利です。
※アプリによっては3Dモデル生成時に課金が必要な場合があります

ファイルのエクスポート

PolyCamでは無料プランでもglTF形式でエクスポートすることができます。専用アプリを利用する場合は、アプリ内の機能でエクスポートします。

DRACO圧縮

エクスポートしたファイルは、このまま使ってもよいのですが、容量を軽量化するため圧縮を行います。

Dracoは、Googleによって開発された3Dモデルの圧縮技術です。頂点や法線、テクスチャといったデータを圧縮します。元のモデルと同等の視覚的品質を保ちながら、ファイルサイズを大幅に削減することができます。

ここではNode.jsのパッケージを使った方法を紹介します。

gltf-pipelineのインストール

npm install -g gltf-pipeline

圧縮実行

gltf-pipeline -i hoge.glb -o hoge_compressed.glb -d

元ファイルにもよりますが手元のファイルでは以下の圧縮結果になりました。

• 2.1MB→1.3MB
• 2.8MB→1.9MB
• 2.1MB→627KB

サンプルページで3Dモデルを描画

過去の記事でも取り上げたWebGLライブラリ「Three.js」を使って、3DモデルをWebブラウザ上に表示してみます。

サンプル紹介

サンプルソースは以下の通りです。

See the Pen labo-three-sample by fukuda-trym (@hqjgroqg-the-styleful) on CodePen.

挙動はこちらからも確認できます。

サンプルページ

コード解説

ポイントは、使用する3Dモデルに応じてカメラの位置、モデルの倍率、モデルの位置を適切に設定することです。今回のサンプルでは以下のように設定しています。

カメラの位置

camera.position.set(1, 2, 1);

モデルの倍率

model.scale.set(2.5, 2.5, 2.5);

モデルの位置

model.position.set(0, -0.75, 0);

また操作可能なズーム量や回転量、オンオフを設定することもできます。「いくらでも拡大して見られるのは困る」「撮影できなかった角度を見せたくない」といった場合でも、これで調整が可能です。

ズーム量

controls.userZoom = true;
controls.userZoomSpeed = 1;
controls.maxDistance = 5;
controls.minDistance = 2;

回転量

controls.userRotate = true;
controls.minPolarAngle = Math.PI / 2 - (Math.PI / 4);
controls.maxPolarAngle = Math.PI / 2 + (Math.PI / 4);

ECサイトの制作

以上を踏まえて、ユーザーが商品を360°から自由に眺められる「3D商品モデル」を導入したECサイトを想定し、デモページを制作してみました。

デモページ①

TRYM VELOCITYFLEX EVORUN: DYNAMIC ATHLETIC SNEAKERS | TRYM SHOES公式サイト

デモページ②

ルフィ ギア5 フィギュア ワンピース KING OF ARTIST THE MONKEY.D.LUFFY GEAR5 ルフィ フィギュア ギア5 ニカ 公式 | Trym Hobby EC SHOP

ズームおよび回転操作を実行でき、まるで商品が目の前にあるかのように自由に閲覧できます。また光量レンジを動かすことで、明るい場所・暗い場所での見え方を比較することもできます。

この他にも、

• 家具をARで室内へ配置し、実物のスケールや雰囲気を確認
• 生活雑貨を擬似的にページ上で操作し、実物の使い方や使い心地を体験

といった活用例も期待できます。

考察とまとめ

検証結果として、身近なものをフォトグラメトリで手軽に3Dモデル化することができました。机の上に置けるようなサイズ感の固形物は問題なく出力できましたが、洋服のような厚みのないものはうまく出力できず、トルソーや回転台などの準備を整えたうえで撮影をする必要があると感じました。

次に、3Dモデルのブラウザ上でのレンダリングは、WebGLライブラリ「Three.js」を用いることで実現することができました。モデル描画やカメラコントロールの実装方法について習得する良い機会になりました。3DCGは今後、AIに支えられてより早く、より容易に生成可能になることも予想されます。3DCGをフロントエンド領域から扱うための知見を得られたことは、トライムにとってプラスに繋がったと思いました。

さらにECサイトのデモページを制作し、上記のリンクから実際にご覧いただければご理解いただけると思いますが、2D写真と比較してかなり商品イメージが湧きやすくなりました。「この技術がより一般的になれば理想的なのに」と感じました。

この技術を自社のECサイトでも活用したいとお考えの方は、どうぞお気軽に↓のリンクからトライムまでご連絡ください。