3Dモデル作成から販売までを行うWebアプリケーションの裏側 BuriKaigi 2025

by ugo

Slide 1

Slide 1 text

1 3Dモデル作成から販売までを⾏う Webアプリケーションの裏側 ugo(a.k.a yukyu) BuriKaigi 2025 2025.02.01

Slide 2

Slide 2 text

2 ⾃⼰紹介 GMOペパボ株式会社メタバース推進室エンジニアリングリード深野悠吾 Fukano Yugo ● 2022年: GMOペパボ株式会社へ新卒⼊社 ● 〜2024年：SUZURI事業部にてSUZURIの開発 ● 2025年〜：メタバース推進室へ異動 ● SNS ○ X：@yukyu30 ○ https://yukyu.net ● 3DCG、映像作成などをはじめとした創作全般が好き

Slide 3

Slide 3 text

SUZURIについて 3

Slide 4

Slide 4 text

現場紹介 4 SUZURIはPCやスマホからイラスト‧写真をアップロードするだけで、オリジナルアイテム作成‧販売‧購⼊できるサービスクリエイター向けECプラットフォーム「SUZURI」

Slide 5

Slide 5 text

クリエイター向けECプラットフォーム「SUZURI」 5 デジタルコンテンツの販売‧購⼊もグッズだけではなく、データ販売も

Slide 6

Slide 6 text

クリエイター向けECプラットフォーム「SUZURI」 6 コミッションもファンからのリクエストを受け付けて、直接作品データを納品できる機能

Slide 7

Slide 7 text

3Dグッズ作成ツール 3Dグッズ作成ツールの公開 7 2024年7月11日にデジタルコンテンツの機能の一環として、 3Dグッズ作成ツールを公開画像をアップロードするだけで、 3Dグッズの作成、販売が可能に

Slide 8

Slide 8 text

8 • Blender 利⽤したWebアプリケーションの構築⽅法 • 3Dモデル作成‧販売をシームレスに⾏うためアーキテクチャの⼀例はなすこと

Slide 9

Slide 9 text

9 • ER図やアーキテクチャ図、コードは説明の都合上、省略されている部分があります。 • カンファレンスの登壇は初めてで緊張しています。お⼿柔らかにお願いしますお願い

Slide 10

Slide 10 text

10 アジェンダ 1. 背景 2. 3Dモデルの⽣成を⾏うシステムの構築 3. 3Dモデルの作成、販売の統合 4. 実際の処理 5. まとめ

Slide 11

Slide 11 text

1. 背景 11

Slide 12

Slide 12 text

3Dモデル作成ツール 12 ● 🙆 VRChatをはじめとしたVRSNSの拡⼤ ○ 3Dアバター、3D⾐装といった3Dモデルの需要 ● 󰢄 3Dモデルの作成にはハードルがある背景「画像をアップロードしてグッズ販売できる」という SUZURIの体験を3Dモデルにも拡張したい

Slide 13

Slide 13 text

SUZURIの体験とは 13 ● アップロードするものは画像だけ ● SUZURIで価格やタイトルを⼊⼒して販売開始 ● 3Dグッズ作成ツールも4ステップで完結させるグッズ出品は4ステップで完結販売開始情報入力アイテム選択画像アップロード

Slide 14

Slide 14 text

4ステップに収めるためには 14 ● 3Dモデル⽣成を⾏うシステムの構築 ● 3Dモデルの作成、販売のシステム統合課題

Slide 15

Slide 15 text

2. 3Dモデルの⽣成を⾏うシステムの構築 15

Slide 16

Slide 16 text

3Dモデルの⽣成を⾏うシステムの構築 16 ● Tシャツにイラストなどをプリント SUZURIのTシャツで考える

Slide 17

Slide 17 text

3Dモデルの⽣成を⾏うシステムの構築 17 ● Tシャツのメッシュ対してのテクスチャで⾊情報を付与 ○ Tシャツのモデルは1種類 3Dモデルでも同様

Slide 18

Slide 18 text

3Dモデルの⽣成を⾏うシステムの構築 18 ● サーバー上で ● 3Dモデルのテクスチャを差し替え、 ● エクスポートするつまり

Slide 19

Slide 19 text

3Dモデルの⽣成を⾏うシステムの構築 19 ● 今回は最終的にVRChatでの使⽤を想定 ● VRChatで使⽤されるアバターや⾐装のデータはFBX形式が主流よく使われる3Dモデルは FBX形式

Slide 20

Slide 20 text

3Dモデルの⽣成を⾏うシステムの構築 20 ● FBX Python SDK、FBX Python バインディング ○ 最新のバージョンが2020.3.7 ○ 今後更新されるかがわからない ● Blender ○ オープンソース3DCGソフトウェア。FBXを書き出すことができる ○ 開発も活発に⾏われている ○ Pythonでスクリプトを書いて処理も実⾏もできる ○ GUIアプリケーションだが、CLIからヘッドレスモードで実⾏できる FBXの⽣成にBlenderを利⽤

Slide 21

Slide 21 text

3Dモデルの⽣成を⾏うシステムの構築 21 ● Blenderをバックグラウンドで起動 ● script.pyを実⾏、スクリプトへ渡す引数は--の後に書く ● Rubyであれば以下のコードでコマンドを実⾏できる ● Open3.capture3(blender -b -P script.py -- –-dir model) Blender をCLIから使う $ blender -b -P script.py -- –-dir model

Slide 22

Slide 22 text

3Dモデルの⽣成を⾏うシステムの構築 22 CLIの引数を取得するコード例 import sys argv = sys.argv input = argv[argv.index("--") + 1:] dir = input[input.index("--dir") + 1] # dir = model

Slide 23

Slide 23 text

3Dモデルの⽣成を⾏うシステムの構築 23 テクスチャを差し替えるコードの例 import bpy # 画像を読み込み image = bpy.data.images.load(f"{dir}/texture.png") # main_matはMaterial # テクスチャを差し替え tex = main_material.node_tree.nodes.new('ShaderNodeTexImage') tex.image = image principled = main_mat.node_tree.nodes.get('Principled BSDF') main_mat.node_tree.links.new(tex.outputs['Color'], principled.inputs['Base Color'])

Slide 24

Slide 24 text

3Dモデルの⽣成を⾏うシステムの構築 24 FBXとしてエクスポートするコードの例 #fbxとしてエクスポート bpy.ops.export_scene.fbx( filepath=f"tmp/t-shirt.fbx", embed_textures=True, #FBXバイナリにテクスチャを埋め込む path_mode='COPY' #embed_textures=TrueはCOPY時のみ有効 )

Slide 25

Slide 25 text

3Dモデルの⽣成を⾏うシステムの構築 25 ● Blenderをインストールしたサーバー上で ● Blenderで3Dモデルのテクスチャを差し替え、 ○ Pythonスクリプトを実⾏ ● FBXモデルとしてエクスポートする

Slide 26

Slide 26 text

3Dモデルの⽣成を⾏うシステムの構築 26 ● Blenderをインストールしたサーバー上で ○ Lambdaで実⾏ ● Blenderで3Dモデルのテクスチャを差し替え、 ○ Pythonスクリプトで実⾏ ● FBXモデルとしてエクスポートする ○ S3に保存

Slide 27

Slide 27 text

3Dモデルの⽣成を⾏うシステムの構築 27 ● 従量課⾦でコストを抑えることができる ○ アジアパシフィック(東京)で1024MBのメモリを持ったLambdaを1秒実⾏で 0.0000166667ドル ● BlenderをLambda上で実⾏して、シーンをレンダリングするという先⾏事例があり、実績もあった ○ Rendering Blender scenes in the cloud with AWS Lambda : https://blog.theodo.com/2021/08/blender-serverless-lambda/ AWS Lambdaを採⽤した理由

Slide 28

Slide 28 text

3Dモデルの⽣成を⾏うシステムの構築 28 ● Lambda関数のHTTP エンドポイント ● 標準 HTTP メソッドがサポートされている ○ https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/urls-conﬁguration.html ● API Gatewayでも同様なことを実現できるがシンプルに使えるLambda関数URLを利⽤ Lambda関数URL

Slide 29

Slide 29 text

3Dモデルの⽣成を⾏うシステムの構築 29 ● Ruby AWSベースイメージに BlenderとPythonをインストールし、コンテナイメージを作成 ● コンテナイメージをLambdaにデプロイ ● エフェメラルストレージに⼀時データを保存 ○ /tmpディレクトリ内に提供される⼀時的なストレージスペース ○ 512MBから10GBまで設定できる ○ zipに圧縮する前のFBXなどを保存 LambdaでBlenderを動かすために

Slide 30

Slide 30 text

3Dモデルの⽣成を⾏うシステムの構築 30 ● Blenderをインストールしたサーバー上で ○ Lambdaで実⾏ ● Blenderで3Dモデルのテクスチャを差し替え、 ○ Pythonスクリプトで実⾏ ● FBXモデルとしてエクスポートする ○ S3に保存実現のための技術が揃った

Slide 31

Slide 31 text

3Dモデルの⽣成を⾏うシステムの構築 31 ● テクスチャを合成 ● Blenderでスクリプトを実⾏ ○ テクスチャを差し替え、 ● 3Dモデルをzipに圧縮 ● S3へ保存 3Dモデル⽣成アプリ内でやること

Slide 32

Slide 32 text

処理の流れ 32 3Dモデル生成アプリ 3Dモデル生成アプリ 3Dモデルのobject key、画像のobject key S3

Slide 33

Slide 33 text

処理の流れ 33 3Dモデル生成アプリ 3Dモデル生成アプリ 3Dモデルのobject key、画像のobject key 画像やblendファイルなどをリクエスト必要なファイルをダウンロード S3

Slide 34

Slide 34 text

処理の流れ 34 3Dモデル生成アプリ 3Dモデル生成アプリ 3Dモデルのobject key、画像のobject key 画像やblendファイルなどをリクエスト必要なファイルをダウンロード S3 ● テクスチャの画像合成 ● Blenderでテクスチャの差し替え、FBXの書き出し ● zipに圧縮

Slide 35

Slide 35 text

処理の流れ 35 3Dモデル生成アプリ 3Dモデル生成アプリ 3Dモデルのobject key、画像のobject key 画像やblendファイルなどをリクエスト必要なファイルをダウンロード zipファイルを指定されたobject keyでアップロード object keyを返す object keyを返す S3 ● テクスチャの画像合成 ● Blenderでテクスチャの差し替え、FBXの書き出し ● zipに圧縮

Slide 36

Slide 36 text

まとめ 36 ● Lambda実⾏時間は平均8-9秒 ● バックグラウンドジョブでの⽣成リクエストが必要パフォーマンス

Slide 37

Slide 37 text

3. 3Dモデルの作成、販売の統合 37

Slide 38

Slide 38 text

3Dモデルの作成、販売の統合 38 ● Productが名前や説明、価格をもつ ● Contentが実際にダウンロードするファイルの情報をもつデジタルコンテンツについて

Slide 39

Slide 39 text

3Dモデルの作成、販売の統合 39 ● 3Dモデルを⽣成した後に、Contentレコードを作成 ● ContentをProductと紐づけるファイルをアップロード後、Contentレコード作成するとおもっていたが実際のコードを⾒たら違った思いついた⽅法

Slide 40

Slide 40 text

実際のファイルアップロードの流れ 40 アップロードをリクエスト User SUZURI SUZURI DB DB S3

Slide 41

Slide 41 text

実際のコンテンツアップロードの流れ 41 アップロードをリクエスト Contentレコードを追加ここでS3のobject key が一意に決まる User SUZURI SUZURI DB DB S3

Slide 42

Slide 42 text

実際のコンテンツアップロードの流れ 42 アップロードをリクエスト Contentレコードを追加 Contentレコードを返す署名付きURLを返すここでS3のobject key が一意に決まる User SUZURI SUZURI DB DB S3

Slide 43

Slide 43 text

実際のコンテンツアップロードの流れ 43 アップロードをリクエスト Contentレコードを追加 Contentレコードを返す署名付きURLを返すファイルをs3へダイレクトアップロード object keyを返すここでS3のobject key が一意に決まる User SUZURI SUZURI DB DB S3

Slide 44

Slide 44 text

3Dモデルの作成、販売の統合 44 ● ❌ 3Dモデルを⽣成した後に、Contentレコードを作成 ● ⭕ Contentレコードによってobject keyが決まり、その object keyでアップロードする 3Dモデル⽣成アプリもContentレコードによって決まる object keyでファイルを保存することにした

Slide 45

Slide 45 text

処理の流れ 45 3Dモデル生成アプリ 3Dモデル生成アプリ 3Dモデルのobject key、画像のobject key 画像やBlendファイルなどをリクエスト必要なファイルをダウンロード zipファイルを指定されたobject keyでアップロード object keyを返す object keyを返す S3 3Dモデル⽣成アプリもContentレコードによって決まる object keyでファイルを保存することにした

Slide 46

Slide 46 text

4. 実際の処理 46

Slide 47

Slide 47 text

全体の流れ 47 3Dモデルの生成リクエスト User SUZURI SUZURI DB DB 3Dモデル生成アプリ 3Dモデル生成アプリ

Slide 48

Slide 48 text

実際のコンテンツアップロードの流れ 48 3Dモデルの生成リクエスト User SUZURI SUZURI DB DB 3Dモデル生成アプリ 3Dモデル生成アプリ Materialレコードを取得 Materialレコードを返すユーザーが事前にアップロードした画像

Slide 49

Slide 49 text

実際のコンテンツアップロードの流れ 49 3Dモデルの生成リクエスト Contentレコードを追加 Contentレコードを返す User SUZURI SUZURI DB DB 3Dモデル生成アプリ 3Dモデル生成アプリ Materialレコードを取得 Materialレコードを返すここでS3のobject key が一意に決まる

Slide 50

Slide 50 text

実際のコンテンツアップロードの流れ 50 3Dモデルの生成リクエスト object keyを返す User SUZURI SUZURI DB DB 3Dモデル生成アプリ 3Dモデル生成アプリ生成リクエスト Materialレコードの取得 Contentレコードの追加 Materialのobject key、保存時の object keyなどを送信

Slide 51

Slide 51 text

実際のコンテンツアップロードの流れ 51 3Dモデルの生成リクエスト object keyを返す User SUZURI SUZURI DB DB 3Dモデル生成アプリ 3Dモデル生成アプリ生成リクエスト生成完了を通知 Materialレコードの取得 Contentレコードの追加

Slide 52

Slide 52 text

4. まとめ 52

Slide 53

Slide 53 text

まとめ 53 ● Blenderを使うことで3Dモデルの⽣成は⽐較的に実現できた ● Lambda関数URLなどで⽴ち上げが素早くできた ● 他のAWSサービスとの相性が良いよかった点

Slide 54

Slide 54 text

まとめ 54 ● Lambdaは開発環境を整えるのが難しい ○ Lambda関数URLの挙動が本番環境と開発環境で異なった ○ POSTメソッドでtokenを送ると、event[body]の中にtokenがあるが、ローカルだと event[token]に含まれる改善点

Slide 55

Slide 55 text

まとめ 55 ● LambdaにBlenderをインストールしたコンテナイメージをデプロイ ● LambdaでBlenderを実⾏、3Dモデル出⼒、S3へ保存 ● 3Dモデル⽣成アプリをobject keyを⼊⼒として受け取り、そのobject keyに従い保存することで、SUZURIとの整合性を保つ 3Dグッズ作成‧販売を実現のために...

Slide 56

Slide 56 text

56 ご清聴ありがとうございました！