3Dモデル作成から販売までを行うWebアプリケーションの裏側 BuriKaigi 2025
by
ugo
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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-configuration.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 ご清聴ありがとうございました!