夢色☆でじたりあん

マイコン、SBC、デジタルガジェット・・・怪しくていい加減な実験工房(旧:夢色あんどろいど)

全天球画像のAI自動生成サービス

前々回のエントリで全天球画像を使ったモデリング(ほぼ)ゼロ!の簡単メタバース空間をご紹介しましたが、今回はそれの続編です。

その時、全天球画像は作成がネック!というお話をしましたが、今、流行りのAIを使ってキーワード(プロンプト)に沿った全天球画像を自動生成してくれるサービスがあることを最近知りました。

そもそもはスカイボックスと呼ばれるゲーム制作などで使われる背景画像を生成するサービスだそうで、背景用としては問題ないとしても中~近景用には向き不向きがあるようですが、同じキーワートでもその都度結果が変わるので、それを上手く利用すればちょっとした街並とかを作ることは可能です。

↓Skybox lab
https://skybox.blockadelabs.com/

a2023030105.jpg

そういうことで4枚の全天球画像でシーンを作ってみました。構造は前々回のエントリと同じやり方で床面に非表示にした板ポリを置いただけの簡易構造。モデリングもクソもありませんから小一時間ほどで完成します。面倒なのは位置合わせだけです。

Mozilla Hubs上のサンプルルームは↓
https://hubs.mozilla.com/link/UPpxfo9

a2023030103.jpg


画像間の接続は[Link]と[Way Point] を使ってワープさせるのが一般的だと思いますが、ここでは長方形の板ポリを渡して自力で移動するようにしてあります。説明用とかだとリンク形式の方が良い場合もありますが、こういうクエストっぽいのではリンク画像が視界の邪魔になる上、行き先の景色を先に見せてしまってつまらなくなるからです
端の方は歪みが大きくなりますが、境目で横を向いたりしない限り案外違和感は少ないです。なお、通行可能な道には誘導用の矢印を表示してあります。これはただのGIFアニメージョンです。

a2023030102.jpg

まだまだナゾの多いサービスで、今のところ単語の列挙より成句にした方がヒット率が高そうな気がする程度で、果たしてMidJouneyのように細かな条件付与や参照とかが出来るかなどもよく判りません。そのため、なかなか思い通りの画像が得られるわけではありませんが、同じようなテイストの絵は得られるので、出来た画像に合わせて構成を考えていけば一応カタチにはなると思います。まあ、何にしてもオリジナルの全天球画像がいくらでも手に入るというのはありがたい話です。

↓こういう一見Googleストリートビュー風画像も生成出来る。
a2023030104.jpg



スポンサーサイト



モデリング(ほぼ)ゼロでオリジナルのメタバース空間を作る(その2)

前のエントリで、全天球画像と板ポリだけで作る簡易型メタバース空間をご紹介しましたが、今回は全天球画像を使わない、即ち全天球カメラがなくても出来る方法です。

全天球画像の代わりになるのは「絵」。立方体に絵を貼り付けたものが基本形です。屋外シーンも工夫すれば作れると思いますが、やはり室内が圧倒的に作りやすいです。

絵が上手い必要は全くありません! 色付き見取り図みたいなのが書ければ良いので画像の切り貼りで十分です。

ソフトはSketchUpの無料のWEB版を使います。絵の貼り付けがBlenderと比べて直感的で扱いやすいからです。BlenderはGLB形式への変換にのみ使います。

ここでは和室(6畳間)を作ってみることにします。洋モノの空間であれば、SketchUpに元々入っているマテリアルを適当に使ってもそれっぽいものが作れてしまいますので、真面目に作ろうと思うとちょっと面倒な題材を選んでみました。

部屋のサイズは、間口:3,600mm×奥行:2,700mm×高さ:2,200mmとして「絵」の準備をします。建具や柱、梁のサイズも想定しておきます。
ネットでの素材集めが基本ですが、まずは参考資料としてイメージに近い室内の写真を集めることからはじめます。壁、柱、建具の取り合いとか意外とアヤフヤなことが多いのでじっくり観察しておきます。それとこれは大前提ですが、そんなに都合良くイメージ通りの真っ正面からの画像が落ちているワケはありませんので、部品を集めて再構成するのが基本となります。黒枠長方形に黒丸…の襖なんかは探すより描いた方が早いですし・・・

で、私が集めてきたのは襖と壁の絵と障子、6畳間分の畳、天井。襖の壁の襖の部分を障子に差し替えて1面作成。残り2面は襖の壁の壁、柱、襖の部分を切り貼りして作成しました。

a2023022501.jpg

ここからはSketchUpの使い方解説。世の中には判りやすい動画チュートレアルが沢山あるのですが、何故か無料のWEB版でマテリアルをインポートして使うのが見当たりませんので、手順だけ書いておきます。

まず、SketchUp for WWEBを起動して新規作成を選択。いつものおじさんは消して、画面右側のアイコンから[シーン]を開いて上面ビューに切り替えます。
[長方形ツール](ショートカットはR)で適当なサイズの四角形を書いて、"3600mm,2700mm[Enter]"と入力。ちなみにSketchUpのツール類はショートカットを常用すると作業効率が格段に上がります。

a2023022511.jpg

a2023022512.jpg

[スペースキー]で選択モードにして続いて[プッシュプルツール](P)で面を少し持ち上げてから"2200mm[Enter]"と入力すると部屋の立方体が完成です。
a2023022513.jpg

さて、ここからが今回のキモの部分。本来なら室内を作るため、作成した立方体の面をすべて反転して、閉じた空間の中で貼り付け作業をすることになりますが、表示/非表示を何度も切り替えたりと結構面倒臭い作業になります。そこで今回は反則技を使います。反転せずにそのまま外側に画像を貼ってBlenderへ持って行きます。Blenderでは室内は裏面を見ていることになりますが見た目の差はありません。もちろんBlenderでも裏は裏なので追加の作業をする場合は法線の向きを変更する必要がありますが...

ではマテリアルのインポートの手順は・・・

貼り付けたい面を選択状態にしてから、画面左上のハンバーガーアイコン[三]から[インポート]>[自分のデバイス]を選択。
a2023022521.jpg

[ファイルのインポート]ウィンドウの[自分のデバイス]をクリックして貼り付ける画像を選択。
a2023022522.jpg

[ファイルのインポート]ウィンドウの[マテリアル]をクリックする。
a2023022523.jpg

貼り付け開始位置(通常は左下隅)を左クリックしてから面に沿って拡大し終点位置(通常は右上隅)で再度左クリックすると確定します。縦横比率は変えられません。
a2023022524.jpg

位置の修正は面を選択して右クリック[テキスチャ]>[配置]で画像を移動できます。修正が終わったら右クリック[完了]。ここで反転(上下、左右)や回転も出来ます。
a2023022525.jpg

a2023022526.jpg

完成したらハンバーガーアイコンの[ダウンロード]>[SKP]で自分のPCにデータを保存します。
a2023022531.jpg

出力形式は現状[2021年以降]で大丈夫です。
a2023022532.jpg

後はBlenderでデータを読み込んでGLB形式で出力すれば完了です。

Mozilla Hubs上にサンプルルームを作りましたのでご覧ください。

https://hubs.mozilla.com/link/C3NVaHC

a2023022542.jpg

なお、ここで作成したシーンは当然ながら凹凸が全くない平面的な空間です。SketchUpでは画像を線ツールや長方形ツールなどでなぞってプッシュプルツールで押し出したり凹ませたりすることで立体化することが結構簡単に出来ます。↑のサンプルルームで比較出来るようにしてありますので見比べてみてください。ただ、あんまり劇的な差は出ないようですけどね...

a2023022541.jpg

あと、6畳間というのは密会用?でもないかぎりメタバース空間としてはとても狭いです。少し制作難度は上がりますが二間続きとかにすると実用性が向上するかも知れません。

a2023022543.jpg




モデリング(ほぼ)ゼロでオリジナルのメタバース空間を作る

最近、「メタバース商店街」というのをよく見かけます。当方の地元~大阪でも中心部のとある商店街が最近、DOOR.nttに登場しています。

全体の造りは至ってシンプルで、昨今流行りのフォトグラメトリみたいなリアルさはありませんが、実物通りに全店舗が並んでいるのはなかなか圧巻です!
a2023021501.jpg

しかも店舗はすべて入店可能になっていて、…と言っても、店内にはWEBサイトのリンクやちょっとした情報があるだけで、特に買い物が出来たり、店主と話が出来たりするわけでもありませんが、多くの店では全天球画像による店内ビュー状態になっていて、雰囲気が判るのが良いです。私もこの商店街はよく歩いていますがほとんどの店に入ったことがなかったので非常に新鮮でした。

a2023021502.jpg

ただ、ひとつ惜しいな~と思ったのは全天球画像があまり見えないこと。恐らくこのために撮影された、客などの写り込みがない「わざわざ撮った画像」なのに、トレイ?みたいな床に阻まれて、ただの背景と化してしまって、店内の様子があんまり伝わって来ないのです。
そもそもこの床要るんか?とということで、どうせアバターが宙に浮いているんだからリンクやキャラの接地に拘る必要ないやろ~とか思っていてふと閃いたことが...

それは、全天球画像を使ったモデリング不要のメタバース空間制作!

DOOR(Mozilla Hubs)では全天球画像は衝突判定やフロアプランの対象にはならないので、何らかの床面が必要になりますが、そこで思い出したのが、オブジェクトは非表示にしても無効にしないかぎりそこに存在し続けること。以前、この技?でバリケードにしたことがあったのです。
つまり全天球画像の球体の中に見えない床を置けば、交流機能と共有機能を持つ最低限のメタバース空間になるわけで、さらにそれを複数リンクすればGoogleストリートビューの進化形みたいなのも作れるということです。

こうなると作るのは簡単! 早速試作を開始しました。
床の形は、丸い全天球画像との取り合いや回転のしやすさ、そしてなるべくポリゴン数を減らしたいことから八角形にすることにしました。
簡単な形状なのでBlenderでもSketchUpでも手間はほぼ同じです。無理なら正方形でも円盤でも良いですし、編集ツールに予め用意されている建築パーツの床パーツでも構いません。マテリアル設定も不要です。

a2023021503.jpg

位置合わせが済んだら床オブジェクトのステータス欄の[Visible]のチェックを外します。
a2023021504.jpg

↓上記と同じ店舗の全天球画像を拝借して試作してみた。一応店内を見て回れる。
a2023021506.jpg

a2023021505.jpg

複数の地点を繋ぐのは、[Link]と[Way Point]で問題なく移動出来ます。ただ、地点数が多いと管理が煩雑になるのが難点です。そういう場合は物理的な通路で繋ぐのもアリかと思います。試しにやってみたところ意外と違和感がありませんでした。

全天球画像を使う手法の最大のネックは撮影に専用機材を必要とすることです。スマホのカメラを使う簡易的な撮影ツールも今は姿を消してしまいました。まあ、Googleストリートビューには厖大な画像が蓄積されていますので試作には不自由しませんし、フリー素材もあるので背景用などは問題ないと思いますが、自分が思い描く風景を得るにはカメラを手に入れる以外の代替策がありません。この辺は次の課題として考えたいと思います。

最後に、Mozilla Hubs上でフリー素材を使ってサンプルルームを作ってみましたのでご覧ください。

https://hubs.mozilla.com/NwBLfiC
a2023021511.jpg



DOOR.ntt用のシーンデータを公開しました!

DOOR.nttではそのまま使ったり改造も出来るテンプレートが複数種類用意されていますが、どちらかというと交流イベント用が多く、展示用は実質「ギャラリー」と「イベントホール」の2つだけで、ギャラリーは狭すぎるしイベントホールは逆にちょっと大きすぎて見て回るのが面倒・・・と、すべてのニーズに応えるのは難しいようです。それでも、ギャラリーよりかは使い勝手が良いイベントホールが多用されてるみたいで結構頻繁に見かけます。でも、見る側からすると前述の通りで、展示に連続性が希薄なのも気になるところですし...

そういうことで、イベントホールと同程度の展示ボリューム(最大20面)を持ちながらよりコンパクトな空間を作ってみました。演出要素皆無の素っ気ない空間ですが、その分空間自体は非常に軽量です。そのまま使えるルームデータを公開いたしますので、商用、非商用を問わず自由にお使いください。

サンプルルームは こちら 

データのダウンロードは こちら (ZIP形式 約2.8KB)
※DOOR.ntt専用です。Mozilla Hubsでは使えません。

↓展示室は2ゾーン構成になっている
a2023021201.jpg

↓ちょっとした講演なんかも出来るよう大きい展示枠を設置してある(ただし全館放送設備は未設置)
a2023021202.jpg


解凍後、"halld.spoke"をDOOR.nttの「オリジナルルームの作成」のページでインポートし、自分のルームとしてアップロードすれば使えるようになります。特に編集作業などは不要です。以下に手順を示します。

【導入方法】
1)DOOR.nttにログイン。

2)DOOR.nttトップページ右上の「マイページ」を開く。

3)「ルームを作る」を開いて「オリジナルのルームを作る」を選択。

4)「シーン一覧」の「+(新しいシーン)」を選択してて「+(空のシーンを使う)」を選択する。

5)開いたルーム作成ページの左上隅のハンバーガーアイコンを開いて[ファイル]>「spokeプロジェクトをインポート」を選択。
a2023021211.jpg

6)「spokeプロジェクトの読み込み」ウィンドウで[OK]を押して"halld.spoke"を選択すると読み込みが開始。
a2023021212.jpg

7)読み込みが完了したら画面右上の「シーンを公開」を押して保存とアップロードを画面指示に従って行う。プロジェクト名、シーン名、帰属を適宜変更する。(これは随時変更可能)
a2023021213.jpg

8)これで一応完成! ルーム内に入って展示の準備作業(現実世界では「搬入作業」とも…)を行う。


【使い方】
一見何もない空間ですが、壁にはメディアフレームと言う、画像などのオブジェクトを一定のサイズで固定する枠が設置されています。展示したいアイテムを画面内にドラッグ&ドロップしてそれを左クリックして保持すれば水色の枠が表示されますので、そのままゆっくりと枠に近付いて行けば、枠に嵌まったように見える位置がありますので、そこでクリックを解除すれば位置決めは完了。後はスペースキーか右クリックで「ピン留め」をすれば退室後も固定が維持されるようになります。

アイテムを左クリックして保持すると固定可能な水色の枠が表示される
a2023021222.jpg

アイテムを保持したままゆっくり枠に近付くと枠に嵌まったように見える位置があるのでそこで離す。
a2023021224.jpg

アイテム上でスペースキーを押すとパイメニューが表示されるので上の「ピン留め」をクリックすると固定完了。
a2023021225.jpg


なお、ピン留めした画像などは、シェア時やマイルームに表示されるプレビュー画像には反映されませんので、そのままでは空っぽの空間が表示されます。そこでこのルームには任意のサムネール画像を表示出来るように仕掛をしてあります。

使い方は、ルーム内の任意の場所でスクリーンショットを撮り幅1920pix(16:9ディスプレイ使用時)で任意の名前で保存しておき、ルームの編集ページを開いて画面右側の[ヒエラルキー]欄の一番下、"THUM"という画像オブジェクトを選択して↓の赤枠部分に先に作成したサムネール用画像をドラッグ&ドロップして「シーンの公開」(再アップロード)を行えばOKです。
a2023021226.jpg


↓プレビューではだいたい黄色い破線枠の部分が表示される
a2023021221.jpg


あと、初期登場地点の後背部に壁一面のメディアフレームを設置してあります。ここにエレベータやエントランス部の画像を貼るなど演出用にご使用ください。ほかにベンチやカウンター、テーブルなどを設置するのも良いと思います。
a2023021233.jpg


ご活用いただけましたら幸いです!


SketchUp(SKP)データをBlender経由でCLBデータに変換する時の注意点

前回のエントリの続きで、SketchUpで作成したSKP形式の3DモデルデータをBlender経由でGLB形式に変換する方法について解説します。
これがうまく出来ればDOOR.ntt(Mozilla Hubs)だけでなく、他のメタバースプラットホーム、例えば、SpatialへはそのままGLBで、Cluster、VRChatはFBX形式(Blenderのエクスポートメニューで言うと一つ上...)への出力で対応することが可能になります。

ただ、Blender本体とインポータのバージョンの組み合わせが非常にシビアであることは前のエントリで触れた通りですが、それ以外にも、特にBlemderでの作業を読み込みと書き出しだけに留めるためには注意すべき点がいくつかあります。

まず、最も注意しないといけないのは面の向きです。SketchUpの「面」には表裏があり、Blenderでは表面に設定されたマテリアルしか有効になりません。SketchUp上ではどちらにも設定でき、無料のWEB版では一度設定してしまうと確認が難しくなりますので、細心の注意を払う必要があります。

↓表裏の違い コンテキストメニュー「面の反転」で反転可能
a2023020901.jpg

次に気を付けないといけないのは透明度のあるマテリアルです。基本的にBlender上で再設定を行わない限り透明度のあるマテリアルは使用出来ません。また、SketchUpの内部的なマテリアル設定によって透明度を得ている単色カラーやJPEG画像はBlender上で置き換えが必要でかなり複雑な作業になります。透過PNGの画像テキスチャが最も扱いやすいです。

↓サムネイルが「/」になっているもの(赤枠部分)は要注意!
a2023020902.jpg

他に、イメージ画像も無効になります。予めテキスチャに変更しておく必要があります。

最後に、前回のエントリで紹介した、SketchUpのライブラリ(3D WareHouse)で公開されているモデルデータを無加工でBlender経由で出力したGLBデータで作成したMozilla Hubs上のルームのURLを公開しておきます。マテリアルの雰囲気などをご覧いただければと思います。無加工でこれぐらいの感じですが、さらに粗さや光沢、バンプマップの設定などを行うとクオリティがもう少し上がります。Blenderに少し慣れたらやってみると良いと思います。

現場へは↓から
https://hubs.mozilla.com/idh4gMZ

a2023020903.jpg

天井がなかったので付けました。(て言っても黒い板を置いただけ・・・)



 | ホーム |  古い記に行く »

文字サイズの変更

プロフィール

よっしい

Author:よっしい
FC2ブログへようこそ!

最新記事

カテゴリ

未分類 (0)
ニュース (10)
PC一般 (0)
スマートフォン (34)
中華パッド/タブレットPC (106)
ミニPC/SBC (25)
マイコン (89)
アプリ (14)
ICT (26)
アクセサリ (14)
CNC機器 (16)
実験 (15)
工作 (13)
その他 (16)

月別アーカイブ

最新コメント

リンク

このブログをリンクに追加する

検索フォーム

RSSリンクの表示

ブロとも申請フォーム

この人とブロともになる

QRコード

QR

Template by たけやん