画像から3Dモデル作成

―

―

GitHub

React

AWS

Python

JavaScript

Progateハッカソンカニチーム制作物 写真から3Dモデル

gakupixelmon

oxydol

yakizyake

推しアイデア

投影図のように撮影しても、どこがどこに対応するのか、また写真では傾きなく綺麗に撮ることが難しいが、ユーザーが実長が見えている線分を指定することによって補正できるようにした。

作った背景

機械工学科や教養学部で投影図について習ったが、それを簡単に3Dにできたら嬉しいと思ったから。3Dモデルを使った制作活動をしていて、写真でとったものを即座にモデルにできたら便利だと思ったから。

推し技術

視体積交差法を用いて、投影図のような写真から3Dモデルを作成した。 その際、画像撮影の向きが多少ズレることを考慮して、ユーザが基準となる線分を指定できるようにした。

プロジェクト詳細

プロダクト説明

3Dのモデルを作るのって面倒じゃないですか？例えばCADの一つAutodesk Fusionを用いて作成する場合、図形を頭に描いて幾何学的な条件を理解し、必要な平面を構築してそれぞれの平面のスケッチに書き起こして、立ち上げる。 複雑な形状なら手間をかける価値があっても単純な形状をいちいち時間をかけて作成するのは面倒ですよね。 そこで私たちは制作時間を短縮したり立体物のイメージをすぐさま想像できるような方法を考えました。

中学生の時に投影図って習いましたよね。習いはしたけど入試問題には出てこないあれです。中学生のとき、大抵の場合2面のみから立体図形を想像させるような問題がよくでていました。2枚の画像から3Dモデルのglbファイルを作成するようにしました。

3Dモデルを画像から作成することができます。画像は正面からと左方からとった場合に限定しています。画像を回転させれば真上から見たものでも左方からだと見なせるので大きなデメリットはありません。

ターゲット
  • インテリアの購入を検討している人。
  • 立体の製図を使う人(機械系や建築系)
  • 3D制作をする人

技術スタック
  • フロントエンド 　- フレームワーク : React 　- 言語 : JavaScript
  • バックエンド 　- webフレームワーク : Fast API 　- 言語 : Python

AWS活用点
  • EC2 : Webアプリのホスティング、3D幾何学演算、およびBedrockやS3との連携処理として活用。
  • S3 : ストレージとしてglbの保存、管理に活用。
  • AWS Bedrockのamazon.titan-image-generator-v2:0 : 背景の切り取りに活用。(元々はAWSについて何も知らず、rembgというAIを活用して切り取りを行なっていたが、AWSをなるべく活用すべく、変更した。)

アプリ紹介
  • このアプリは3Dモデルにしたい被写体に対して正面と側面から水平に撮った写真3枚を用いることで簡易的な3Dモデルを作ることを目的としたアプリです。これにより本来被写体の写真を数十枚単位で必要とする3Dモデル作成のハードルを大きく下げるとともに必要なデータも写真3枚と少ないため短時間での3Dモデル作成を可能にしました。

アプリの実装方法
  • ①3Dモデル作成のための下準備(フロントエンドを使用)
    • 3Dモデルを作成するためには3枚の画像とその画像の中で対応する同じ長さの箇所(基準線に並行)を指定する必要があります。そのためまず下準備として画像のアップロードとその画像内の対応する二つの同じ長さの箇所を指定し、その座標を②で使用するためにバックエンドに送信します。 image 上図のような場合は下図のように点を取る。 image 次に、別方向については下図のように点を取る。 image イレギュラーな場合（上面と正面でボトルのサイズが違う）は下図のように点を取る。 image
  • ②3Dモデルの作成(バックエンドを使用)
    • 3Dモデルの作成において正面と側面の3枚の画像と先ほど指定した座標を受け取ります。そして画像から対象物をAI(AWS Bedrockのamazon.titan-image-generator-v2:0)によって抜き出すという操作を正面と側面の画像の二つに対して行います。 そして立方体の箱を正面から見た時の物体の外枠の内部にあたる箇所だけ残し、残った物体の側面から、側面で見た時の物体の外枠の内部にあたる箇所だけを残したものを3Dモデルの素体とします。
    • 3Dモデルの素体が出来たら画像検出の際に使わなかった面についている模様を素体に付けていきます。この際正面と側面からしか画像を取っていない為裏面は正面の画像と同じ、片方の側面はもう片方の側面と同じ模様とすることで補完します。
    • この3DモデルをS3に入れ、それにアクセスするためのURLをフロントに送信します。
  • ③3Dモデルの表示(フロントエンドを使用)
    • フロントエンドから受け取ったURLを用いてS3から3Dモデルのデータを受け取ります。そしてそれを表示します。その際に背景の色や3Dモデルの質感の変更、どのような骨組みになっているのかの確認をできるようにします。

開発の流れ
  1. 事前開発でUIをyakizyakeが、バックエンドの部分をoxydolとryo3683が実装し、バックエンド側で制作したglbファイルをフロント送り、フロントエンド側で表示できる段階（ローカル）まで実装した。（yakizyakeはフロント言語初、oxydol・ryo3683はpythonを多少）
  2. 1日目はフロントエンドとバックエンドのコードを共存させ、ローカル環境でフロント側から画像を受け取り、バックエンド側でglbファイルを返し、表示できるようにした。
  3. 2日目は1日目に作成したコードをAWSを活用してデプロイまでを行った。昨日中にコードの保存場所やストレージについてもAWSの何を使うのか、視体積交差法の精度を上げるために画像の削り出しを何で行うのかを相談して決めていたのでスムーズに進めることができた。

この手法の利点と欠点
  • 利点
    • 必要な写真の枚数が3枚と言う手軽さ
    • 容量が~1MBほどと3Dモデルではかなり軽量
    • 生成にかかる時間が30秒未満と高速
  • 欠点
    • 底面に模様をつけることができない。
    • 底に窪みがあるコップのような物体には上手く対応できない

gakupixelmon

@a32607abc819cc79