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

BuriKaigi2025での発表資料を一部修正したものです。
3Dグッズ作成ツール:https://lp.suzuri.jp/3d-t-shirt

Transcript

1. 1 3Dモデル作成から販売までを⾏う Webアプリケーションの裏側 ugo(a.k.a yukyu) BuriKaigi 2025 2025.02.01
2. 2 ⾃⼰紹介 GMOペパボ株式会社 メタバース推進室 エンジニアリングリード 深野 悠吾 Fukano Yugo • 2022年: GMOペパボ株式会社へ新卒⼊社 • 〜2024年：SUZURI事業部にてSUZURIの開発 • 2025年〜：メタバース推進室へ異動 • SNS ◦ X：@yukyu30 ◦ https://yukyu.net • 3DCG、映像作成などをはじめとした 創作全般が好き
3. SUZURIについて 3
4. 現場紹介 4 SUZURIはPCやスマホからイラスト‧写真 をアップロードするだけで、 オリジナルアイテム作成‧販売‧購⼊でき るサービス クリエイター向けECプラットフォーム「SUZURI」
5. クリエイター向けECプラットフォーム「SUZURI」 5 デジタルコンテンツの販売‧購⼊も グッズだけではなく、データ販売も
6. クリエイター向けECプラットフォーム「SUZURI」 6 コミッションも ファンからのリクエストを受け付けて、直接作品データを納品できる機能
7. 3Dグッズ作成ツール 3Dグッズ作成ツールの公開 7 2024年7月11日にデジタルコンテンツの機能の一環として、 3Dグッズ作成ツールを公開 画像をアップロードするだけで、 3Dグッズの作成、販売が可能に
8. 8 • Blender 利⽤したWebアプリケーションの構築⽅法 • 3Dモデル作成‧販売をシームレスに⾏うためアーキテクチャの⼀例 はなすこと
9. 9 • ER図やアーキテクチャ図、コードは説明の都合上、 省略されている部分があります。 • カンファレンスの登壇は初めてで緊張しています。お⼿柔らかにお願いします お願い
10. 10 アジェンダ 1. 背景 2. 3Dモデルの⽣成を⾏うシステムの構築 3. 3Dモデルの作成、販売の統合 4. 実際の処理 5. まとめ
11. 1. 背景 11
12. 3Dモデル作成ツール 12 • 🙆 VRChatをはじめとしたVRSNSの拡⼤ ◦ 3Dアバター、3D⾐装といった3Dモデルの需要 • 󰢄 3Dモデルの作成にはハードルがある 背景 「画像をアップロードしてグッズ販売できる」という SUZURIの体験を3Dモデルにも拡張したい
13. SUZURIの体験 とは 13 • アップロードするものは画像だけ • SUZURIで価格やタイトルを⼊⼒して販売開始 • 3Dグッズ作成ツールも4ステップで完結させる グッズ出品は4ステップで完結 販売開始 情報入力 アイテム選択 画像 アップロード
14. 4ステップに収めるためには 14 • 3Dモデル⽣成を⾏うシステムの構築 • 3Dモデルの作成、販売のシステム統合 課題
15. 2. 3Dモデルの⽣成を⾏うシステムの 構築 15
16. 3Dモデルの⽣成を⾏うシステムの構築 16 • Tシャツにイラストなどをプリント SUZURIのTシャツで考える
17. 3Dモデルの⽣成を⾏うシステムの構築 17 • Tシャツのメッシュ対してのテクスチャで⾊情報を付与 ◦ Tシャツのモデルは1種類 3Dモデルでも同様
18. 3Dモデルの⽣成を⾏うシステムの構築 18 • サーバー上で • 3Dモデルのテクスチャを差し替え、 • エクスポートする つまり
19. 3Dモデルの⽣成を⾏うシステムの構築 19 • 今回は最終的にVRChatでの使⽤を想定 • VRChatで使⽤されるアバターや⾐装のデータはFBX形 式が主流 よく使われる3Dモデルは FBX形式
20. 3Dモデルの⽣成を⾏うシステムの構築 20 • FBX Python SDK、FBX Python バインディング ◦ 最新のバージョンが2020.3.7 ◦ 今後更新されるかがわからない • Blender ◦ オープンソース3DCGソフトウェア。FBXを書き出すことができる ◦ 開発も活発に⾏われている ◦ Pythonでスクリプトを書いて処理も実⾏もできる ◦ GUIアプリケーションだが、CLIからヘッドレスモードで実⾏できる FBXの⽣成にBlenderを利⽤
21. 3Dモデルの⽣成を⾏うシステムの構築 21 • Blenderをバックグラウンドで起動 • script.pyを実⾏、スクリプトへ渡す引数は--の後に書く • Rubyであれば以下のコードでコマンドを実⾏できる • Open3.capture3(blender -b -P script.py -- –-dir model) Blender をCLIから使う $ blender -b -P script.py -- –-dir model
22. 3Dモデルの⽣成を⾏うシステムの構築 22 CLIの引数を取得するコード例 import sys argv = sys.argv input = argv[argv.index("--") + 1:] dir = input[input.index("--dir") + 1] # dir = model
23. 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'])
24. 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時のみ有効 )
25. 3Dモデルの⽣成を⾏うシステムの構築 25 • Blenderをインストールしたサーバー上で • Blenderで3Dモデルのテクスチャを差し替え、 ◦ Pythonスクリプトを実⾏ • FBXモデルとしてエクスポートする
26. 3Dモデルの⽣成を⾏うシステムの構築 26 • Blenderをインストールしたサーバー上で ◦ Lambdaで実⾏ • Blenderで3Dモデルのテクスチャを差し替え、 ◦ Pythonスクリプトで実⾏ • FBXモデルとしてエクスポートする ◦ S3に保存
27. 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を採⽤した理由
28. 3Dモデルの⽣成を⾏うシステムの構築 28 • Lambda関数のHTTP エンドポイント • 標準 HTTP メソッドがサポートされている ◦ https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/urls-configuration.html • API Gatewayでも同様なことを実現できるがシンプルに 使えるLambda関数URLを利⽤ Lambda関数URL
29. 3Dモデルの⽣成を⾏うシステムの構築 29 • Ruby AWSベースイメージに BlenderとPythonをインス トールし、コンテナイメージを作成 • コンテナイメージをLambdaにデプロイ • エフェメラルストレージに⼀時データを保存 ◦ /tmpディレクトリ内に提供される⼀時的なストレージスペース ◦ 512MBから10GBまで設定できる ◦ zipに圧縮する前のFBXなどを保存 LambdaでBlenderを動かすために
30. 3Dモデルの⽣成を⾏うシステムの構築 30 • Blenderをインストールしたサーバー上で ◦ Lambdaで実⾏ • Blenderで3Dモデルのテクスチャを差し替え、 ◦ Pythonスクリプトで実⾏ • FBXモデルとしてエクスポートする ◦ S3に保存 実現のための技術が揃った
31. 3Dモデルの⽣成を⾏うシステムの構築 31 • テクスチャを合成 • Blenderでスクリプトを実⾏ ◦ テクスチャを差し替え、 • 3Dモデルをzipに圧縮 • S3へ保存 3Dモデル⽣成アプリ内でやること
32. 処理の流れ 32 3Dモデル 生成アプリ 3Dモデル 生成アプリ 3Dモデルのobject key、画像のobject key S3
33. 処理の流れ 33 3Dモデル 生成アプリ 3Dモデル 生成アプリ 3Dモデルのobject key、画像のobject key 画像やblendファイルなどをリクエスト 必要なファイルをダウンロード S3
34. 処理の流れ 34 3Dモデル 生成アプリ 3Dモデル 生成アプリ 3Dモデルのobject key、画像のobject key 画像やblendファイルなどをリクエスト 必要なファイルをダウンロード S3 • テクスチャの画像合成 • Blenderでテクスチャの差し替 え、FBXの書き出し • zipに圧縮
35. 処理の流れ 35 3Dモデル 生成アプリ 3Dモデル 生成アプリ 3Dモデルのobject key、画像のobject key 画像やblendファイルなどをリクエスト 必要なファイルをダウンロード zipファイルを指定されたobject keyでアップロード object keyを返す object keyを返す S3 • テクスチャの画像合成 • Blenderでテクスチャの差し替 え、FBXの書き出し • zipに圧縮
36. まとめ 36 • Lambda実⾏時間は平均8-9秒 • バックグラウンドジョブでの⽣成リクエストが必要 パフォーマンス
37. 3. 3Dモデルの作成、販売の統合 37
38. 3Dモデルの作成、販売の統合 38 • Productが名前や説明、価格をもつ • Contentが実際にダウンロードする ファイルの情報をもつ デジタルコンテンツについて
39. 3Dモデルの作成、販売の統合 39 • 3Dモデルを⽣成した後に、Contentレコードを作成 • ContentをProductと紐づける ファイルをアップロード後、Contentレコード作成すると おもっていたが実際のコードを⾒たら違った 思いついた⽅法
40. 実際のファイルアップロードの流れ 40 アップロードをリクエスト User SUZURI SUZURI DB DB S3
41. 実際のコンテンツアップロードの流れ 41 アップロードをリクエスト Contentレコードを追加 ここでS3のobject key が一意に決まる User SUZURI SUZURI DB DB S3
42. 実際のコンテンツアップロードの流れ 42 アップロードをリクエスト Contentレコードを追加 Contentレコードを返す 署名付きURLを返す ここでS3のobject key が一意に決まる User SUZURI SUZURI DB DB S3
43. 実際のコンテンツアップロードの流れ 43 アップロードをリクエスト Contentレコードを追加 Contentレコードを返す 署名付きURLを返す ファイルをs3へダイレクトアップロード object keyを返す ここでS3のobject key が一意に決まる User SUZURI SUZURI DB DB S3
44. 3Dモデルの作成、販売の統合 44 • ❌ 3Dモデルを⽣成した後に、Contentレコードを作成 • ⭕ Contentレコードによってobject keyが決まり、その object keyでアップロードする 3Dモデル⽣成アプリもContentレコードによって決まる object keyでファイルを保存することにした
45. 処理の流れ 45 3Dモデル 生成アプリ 3Dモデル 生成アプリ 3Dモデルのobject key、画像のobject key 画像やBlendファイルなどをリクエスト 必要なファイルをダウンロード zipファイルを指定されたobject keyでアップロード object keyを返す object keyを返す S3 3Dモデル⽣成アプリもContentレコードによって決まる object keyでファイルを保存することにした
46. 4. 実際の処理 46
47. 全体の流れ 47 3Dモデルの生成リクエスト User SUZURI SUZURI DB DB 3Dモデル 生成アプリ 3Dモデル 生成アプリ
48. 実際のコンテンツアップロードの流れ 48 3Dモデルの生成リクエスト User SUZURI SUZURI DB DB 3Dモデル 生成アプリ 3Dモデル 生成アプリ Materialレコードを取得 Materialレコードを返す ユーザーが事前に アップロードした画像
49. 実際のコンテンツアップロードの流れ 49 3Dモデルの生成リクエスト Contentレコードを追加 Contentレコードを返す User SUZURI SUZURI DB DB 3Dモデル 生成アプリ 3Dモデル 生成アプリ Materialレコードを取得 Materialレコードを返す ここでS3のobject key が一意に決まる
50. 実際のコンテンツアップロードの流れ 50 3Dモデルの生成リクエスト object keyを返す User SUZURI SUZURI DB DB 3Dモデル 生成アプリ 3Dモデル 生成アプリ 生成リクエスト Materialレコードの取得 Contentレコードの追加 Materialのobject key、保存時の object keyなどを送信
51. 実際のコンテンツアップロードの流れ 51 3Dモデルの生成リクエスト object keyを返す User SUZURI SUZURI DB DB 3Dモデル 生成アプリ 3Dモデル 生成アプリ 生成リクエスト 生成完了を通知 Materialレコードの取得 Contentレコードの追加
52. 4. まとめ 52
53. まとめ 53 • Blenderを使うことで3Dモデルの⽣成は⽐較的に実現 できた • Lambda関数URLなどで⽴ち上げが素早くできた • 他のAWSサービスとの相性が良い よかった点
54. まとめ 54 • Lambdaは開発環境を整えるのが難しい ◦ Lambda関数URLの挙動が本番環境と開発環境で異なった ◦ POSTメソッドでtokenを送ると、event[body]の中にtokenがあるが、ローカルだと event[token]に含まれる 改善点
55. まとめ 55 • LambdaにBlenderをインストールしたコンテナイメー ジをデプロイ • LambdaでBlenderを実⾏、3Dモデル出⼒、S3へ保存 • 3Dモデル⽣成アプリをobject keyを⼊⼒として受け取 り、そのobject keyに従い保存することで、SUZURIと の整合性を保つ 3Dグッズ作成‧販売を実現のために...
56. 56 ご清聴ありがとうございました！