皆さんこんにちは。
私は普段スーパーで働いておりデジタルに関しては初心者ですが、幸運にもデジタルや最新ツールを学ぶ機会に恵まれ、現在は自己投資としての学習に毎日真剣に取り組んでいます。
今回は業務でも日常生活においても、今後活用できそうな素晴らしいツールを紹介していきます。
誰でも簡単にできるネットショッピングの新体験
eコマース(EC、ネット販売)が拡大し、24時間家にいて買い物ができるようになり非常に便利になりました。
その反面、リアル店舗のような実際のモノに触れることが出来ないという欠点もあります。
（寸法だけではイメージが湧きずらい・・・など）
今回はそんな問題を解消し、「誰でも簡単に出来る！」を目標にPalanARで WebAR を作成していきます。
使用するツール
・PalanAR
・Blender
・TripoSR
30秒でフローを紹介
簡単！
— Ry7081031 (@Ry40562466201) June 26, 2024
画像から3Dモデル作成→AR pic.twitter.com/ZnEATHxivU
画像から3Dモデルを簡単に作成！
まずは TripoSR で3Dモデルを作成します。
TripoSRとは
画像から３次元メッシュモデルを作成してくれる生成AIのオープンソースなモデルの一つ
ARで取り出したい画像データを用意してください。
今回は大型テレビを例にしております。
高さ、幅、奥行きなどの数値も必要です。
この辺りは販売のページに記載されている事が多いので問題ないと思います。
サイトによっては画像をダウンロードできない所もあると思いますが、スクリーンショットでも構いません。全体像が映っていれば大丈夫です。
こちらの画像を3Dオブジェクトにしていきましょう。
TripoSR はローカル環境で構築可能ですが、今回はお手軽に利用できるデモ版を使用します。
下記のサイトへアクセスしてください。
①画像の赤枠①へドロップ、もしくはクリックして作成したい画像を選択
② Generate を押す
③画像赤枠③番のところに自動生成される
実際に上のテレビの画像データを入れるとこんな感じに出力されました。
最後に、完成した3Dモデルを保存して TripoSR は終了です。
3Dモデルのサイズ調整
TripoSR で作成した3DモデルをそのままARで出すことも可能ですが、実物に近づけたいので Blender にて調整していきます。
Blender は「誰でも簡単に！」が難しいと思うかもしれませんが、画像のインポートとサイズ変更、エクスポートしかしないので操作方法は知らなくても大丈夫です。
起動した後は、どれでも良いのですが 新規ファイル → 全般 を選択していきます。
開くと四角形のモデルが最初からあるので、Shift+Xキーで削除してください。
ファイル → インポート → WaveFront(obj) で作成した3Dモデルを読み込みしてください。
3Dモデルにマウスカーソルを合わせて、Nキー を押すと、右側にトランスフォームが出てきます。
そこの 寸法 の数値を変更していきます。
軸の説明
X : 幅
Y : 高さ
Z : 奥行き
単位はメートル(m)なのでそれに合わせて実寸を入力してください。
もしここで読み込んだ3Dモデルが斜めになっていたりしたら、トランスフォームの位置のXYZ軸を弄って真っ直ぐにしておくと良いと思います。
※3Dモデルを作成する際に元データ画像が斜めになっていたりすると、斜めに作られることがありました。
最後にこのデータを保存していきます。
ファイル → エクスポート → glTF2.0(glb/.gltf)
以上で Blender は終了です。
自分の部屋に出してみよう！
いよいよARで現実世界に作ったモデルを投影していきましょう。
まずは PalanAR を使用できるように会員登録をして下さい。
※会員登録は無料です。
会員登録してログインが出来たら、作成/管理 から +新規作成 を選択
平面認識AR を選択してください。
作成ボタンを押したら、
プロジェクト名 と URL を入力するページが出てきます。
こちらは任意のものを入力してください。
自由に作成 を選択して次へを押してください。
左側に必要項目が出てくるので上の画像で赤枠に囲っている箇所を入力していきます。
プロジェクト名 と URLは最初から入っているのでそのままで大丈夫です。
GLB の ファイル選択 を押して、Blender でエクスポートした画像を選択します。
下の方にいき、常に100%サイズで表示する にチェックマークを入れてください。
画像にはありませんが、下にスクロールしていくとAR配置場所が出てくるので
床 を選択しておいてください。（壁に掛けるテレビや時計などの場合は壁を推奨）
他にも色々項目はありますが、最低限これらをすればOKです。
あとは、一番下の保存する を押して、一番右上にある ARを体験 を押してください。
あとはスマートフォンでURLを入力するか、カメラからQRコードを読み込んでください。
モデル画像が表示されるので、ARを体験するボタン を押して画面の指示に従い、カメラを動かしていると3Dモデルが表示されます。
実際に部屋に配置できました！
発生したトラブルの共有
今回はテレビで作成しましたが、画像を用意する上でテレビの中に何かが移っている画像が結構多いと思います。
この状態のまま、TripoSR で画像を取り込むと・・・
画像のようにうまくモデリングできないと思います。
Blender が得意な方はここから簡単に手直しできるかもしれませんが、
今回は「誰でも簡単に！」をコンセプトにしているので、一番簡単な方法を提案します。
画像を塗りつぶせ
テレビに映像が映っている画像は何のアプリでも良いので、画像編集ツールで映っている面を黒く塗りつぶしましょう。
私はペイントで四角図形をテレビの形に置いて、黒色で塗りつぶしました。
今回作成したテレビの3Dモデルは、この失敗した画像を加工して作ったものになります。
なのでこちらの方法でモデリングに関してはクリアできると思います。
課題点
課題点①
PalanARのページ上に表示されているモデルは色が反映されているのですが、AR体験をすると白色になってしまいます。
配置や場所の感覚を知りたいだけであれば問題ないのですが、部屋に置いて色味も一緒に見たい！となると活用できません。
恐らくGLBの下にある、USDZ というモデルファイルを選択することによりマテリアルのカラーなどが表示されるようなのですが、USDZ で作成して読み込んでみても上手く反映されませんでした。
課題点②
TripoSR で画像から作成しているので、細かい描写までうまくモデリング出来ません。
今回で言うと、テレビの足の部分がテレビの奥行きに合わせて薄くなってしまっているので、この辺は妥協するかBlender を勉強して修正するしかなさそうです。
最後に
誰でも簡単に3Dモデルを作成してARで表示できたのではないかと思います。
ネットショッピングのシェアが高まっている今、身近に活用できるツールになると思います。
私の会社でもeコマース（EC、ネット販売）は取り組みを強化しており、こういったサービスを提供することで、よりお客様のニーズに繋げられるかもしれません。
実際すでに有料でそういったサービスは出ていますが、今回のツールは全て無料で手軽にできるので、ぜひ活用してみてください。