この記事の要約
ダラダラ書いたら無駄に長くなった上に、後半につれて割愛の度合いが強くなってしまったので、ここだけ読めばいいよう要約を添えておきます。
旅行とか行ったらLiDARスキャンして、シーン作ってSTYLYにアップしようぜ
Blenderで要らない部分をごっそり削除
ポリゴンリダクションしてサイズ減らす
Unityに持ってきてCollider付けて、TextMeshProでコメント置いて
STYLYにアップして完成
はじめに
みなさんはよく旅行しますか？
私は温泉サウナ好きの友人に連れられて、年に何度か旅行します。
そして良い宿に泊まったり、観光スポットを訪れた際に当然やることと言えば。
はい、そうですね。LiDARスキャンです。
iPhone12以降のpro系にはLiDARスキャナが搭載されているので、スマホ一つでササッとスキャンできて良いですね。
過去に作ったシーンを幾つか
とりあえず無目的にスキャンしたデータなんかを雑に並べて、STYLY上にシーンを作ったりしています。
野沢温泉
確か、初めて旅行でLiDARスキャンしたのは2021年に野沢温泉で外湯巡りをした際だったと記憶している。
この時はスキャンデータを、本当にただ並べただけ。
九州サウナ温泉旅行
三泊四日の九州旅行で、あちこちのサウナと温泉を巡った時に作ったシーン。
バラバラの土地で撮ったものをわざと繋げて置いたり、ちょっとしたコメントを残してみた。
あと、適当に昔作った変な曲をBGMにした。
サーマルクライムスタジオ富士
できたばかりのサウナ施設が撮影OKだったので、小分けにして全体をスキャンした。
この頃から少しBlenderの使い方を覚えて、多少のバリ取りとかをし始めている。
道志村12498番地
山梨のサウナ付き貸別荘へ行った際のスキャン。
室内と屋外の２スキャンで構成しているので、テクスチャ解像度はやや粗め。
室内のColliderを工夫した。
あとTextMeshProを使ってみた。
本題
さて、これらのシーンはさして作り込んだわけでもないものに見えます。
しかし実際にはスキャンデータを置いただけではなく、複数のツールにまたがる処理フローを経ていたりします。
そのため基礎的な知識だったり、ツールの基本操作だったりを分かってないと、すんなりと作れなくて躓くかなと思いました。
とは言えわざわざチュートリアルを一通りやるほど真面目にそのツールを使い始めたいわけでもなく、ただ最低限の操作だけ知りたかったりすると思うんですよね。
てなわけで、一連のフローについてピンポイントかつ詳細な手順を示すことで、スキャンシーンをSTYLYで公開できるまでのフローを身に付けよう！というのが本稿の狙いであり願いであります。
大まかなフロー
- LiDARスキャン
- Blenderでのバリ取り
- ポリゴンリダクション
- Unityでのシーン作成
- STYLYで公開
スキャン編
iPhoneユーザーであれば、まぁScaniverseがメジャーではないかと思います。
LiDARセンサー非搭載機種でもフォトグラメトリでスキャンできます。
AndroidユーザーならWIDARとかRealityScanあたりでしょうか。
大概のアプリはスキャンデータをfbxなりobjなりglbなりで出力できると思うので、ひとまずはそこまでこだわらなくても良いかと思います。
スキャンの仕方というのもなかなか奥が深いものです。
LiDARなのかフォトグラメトリなのかでちょっと違ったり、屋内か屋外か、スキャンする広さは、光源は、どういう用途でどの程度のクオリティが欲しいか、などなど。
ケースバイケースなので一概にこうすれば良いと断言できないです。
かなり広いエリアや、複数の部屋で構成された建物内部をスキャンする場合は、１回のスキャンで撮ろうとすると最終的に面積当たりのテクスチャ解像度が低くなってしまいます。
なのでこういう場合は部屋単位とかでスキャンしておいたものを、後でうまく繋ぎ合わせる方が綺麗に仕上がります。
ひとまずスキャンしたデータをfbxでexportした、ということで以降を説明していきます。
Blender編
先に断っておくと、私はあまりBlenderスキル高くないです。
というよりも、自分にとって必要な機能の使い方以外は全く触ったことすらないです。
でもね、別に本格的にCGアーティストを目指すとかってことでもなければそれでいいと思うんですよ。
基礎からちゃんとチュートリアルをやらねば、みたいに気負っちゃうと面倒くさくて結局いつまで経ってもやらないままなんで、その時の自分に最低限必要な使い方だけ覚えていけばいいんですよ。
そんなわけでスクショを添えつつ説明しますね。
Blenderを起動したらデフォルトでcubeがあると思うので削除しときましょう。
ここで選択してxキーを押すと削除できます。
メニューからfbxをインポートします。
ここらへんを押すとテクスチャが表示されます。
ここでstatics表示しておきましょう。
左の方に頂点数などが表示されます。
屋内をスキャンした場合、裏ポリゴンが表示されると確認しづらいことがあるので、ここにチェックを入れてカリングしちゃいましょう。
ではここから不要な頂点を手作業で削除していきます。
まずMeshを選択して左上の部分でEditModeにします。
この選択ツールは長押しするとサブメニューみたいなものが開きます。
SelectCircleにしておきましょう。
面の裏側に隠れた頂点も選択できた方が作業しやすいので、ここにもチェックを入れておきます。
こんな感じでガサッと選択し、xキーでdeleteメニュー開いてVerticesを選択して削除します。
不要な部分をちまちまと手作業で削除していきます。
今の自分にはこのぐらいのことしかできませんが、もっとBlender力をつければより綺麗にモデルを修正できそうですね。
STYLY Magazineに参考になりそうな記事があったので、こちらも参考にしてみると良いかと思います。
【Bledner】3Dスキャンしたモデルを修正する方法まとめ
では編集したモデルをexportしましょう。
fbxのexport設定には少し注意が必要です。
PathModeをCopyにして隣りのアイコンを押すと、textureをfbxファイルの中に含めることができます。
また、ObjectTypesも大抵の場合はMesh以外は不要なので外しておくと良いかと思います。
そもそもtextureをfbxファイルに含めるかべきかどうかは、ワークフローとかに依るところはあるかと思います。
含めた方が1ファイルで受け渡しできるので楽です。
しかしtexture自体をペイントツール等で修正したりする場合は、fbxファイルに含めず相対パス指定で分けておいた方がバージョン管理はし易いかもしれません。
ポリゴンリダクション編
ポリゴンリダクションとは、元の形状をなるべく保ちながらメッシュのポリゴン数を削減する処理のことです。
リダクションすべきかどうかは、最終的に１シーンにどれだけのスキャンモデルを置くつもりなのかだったり、どういうデバイスを対象としているかなどに依ります。
なので、一部屋スキャンしてみたものをただ置いただけのシーンを作る場合なんかはやらないことが多いです。
しかし幾つものスキャンデータを繋ぎ合わせて大きなシーンを作ったりする場合は、データをある程度削減しておいた方が良いでしょう。
また、ごっそりと削減したデータの使い道は色々あるのですが、その一例は後述します。
ポリゴンリダクションを行えるツールやサービスは幾つかあります。
高度なツールだと特定の領域は崩れないように指定したりだとか、特定のカメラから見えない範囲だけ削ったりだとか、そういう機能があったりします。
このリダクションだけでもかなり大きなトピックになるので、今回はサラッと流します。
以前、BlenderのDecimateとSimplygonとRapidCompactでのリダクション結果を比較するシーンを作りました。
頂点数を50%、25%、10%にしたデータを並べています。
BlenderのDecimateはただ頂点を削ってるだけっぽいので、かなり穴だらけになりますね。
RapidCompactもSimplygonもかなり綺麗ですね。
10%まで落としてもかなりクオリティを残している感じがします。
個人的には、サーバ側で処理してくれるRapidCompactが便利かなと思います。
無料プランでも月20モデルほど処理できるので試してみると良いでしょう。
Unity編
fbxをimportする
ではexportしたfbxファイルを、UnityEditorに取り込んでみましょう。
おや？テクスチャが貼られずに真っ白になってしまいますね。
基本的にBlender上でのmaterial設定は、UnityEditorと互換性があるものではありません。
なので改めてmaterial設定しましょう。
まずfbxアセットを選択して、Inspectorのmaterialsページを開いてください。
ここのExtract MaterialsとExtract Texturesのボタンを押します。
するとこんな感じでmaterialとtextureを取り出せます。
ではmaterialを設定していきましょう。
デフォルトだとShaderはStandardになっているかと思います。
これをUnlit/Textureにしちゃいましょう。
意図的にLightingの影響を与えるようにしたい場合でなければ、ひとまずは何も考えずUnlit/Textureで良いです。
ついでにtextureも設定します。
はい、これでテクスチャも反映されました。
Colliderを設定する
※本項は自分でも書いててちょっと結論が揺らぐところがあって、ちょっと冗長です。
ここまでの状態で完成でも良いのですが、VR版STYLYでは当たり判定を使ったraycastでのワープ移動方式を採用しています。
そのため当たり判定がないとVRでシーン内を歩き回ることができません。
ちなみに話が少し前後してしまいますが、STYLYでVRシーンを作成するとデフォルトでTransparentFloorというアセットが置かれています。
これは高さ0の位置に置かれた透明な床です。
これがあるので一応移動できますが、ちょっとした三和土や小上がりなどの段差あると足元がめり込んだり浮いてしまったりしがちです。
また、こんな感じのスキャンだと階段にColliderがないと、上の階に上がることができません。
スキャンモデル自体にMeshColliderを付けるのが、一番手っ取り早い方法かと思います。
ただ、スキャンモデルってやたらに頂点が多かったりするんので、それにMeshCollider付けるのはパフォーマンス的になんだかな、と個人的には思っちゃうんですよね。
実際に自分の目的通りに動いてるならそれでいいはずなんですけど、なるべくサイズや処理負荷は軽くしたい欲求というか。
なので、私はよくProBuilderを使って当たり判定用のオブジェクトを置いたりしていました。
別にProBuilderじゃなくてもいいんですが、階段を作る機能が非常に使い勝手が良いんですよね。
ProBuilder自体の説明はこれまた長くなるので割愛します。
こんな感じで色分けしながら当たり判定用にオブジェクトを置いといて、後でMeshRenderをオフにします。
ただ、やっぱりMeshColliderじゃないとうまく対応し辛いパターンもあったりします。
例えば、こういう自然環境とかだと緩やかに傾斜や凹凸があったりするので、MeshColliderを入れる方が実際にVRで移動しやすいと思います。
じゃぁそもそも全部MeshColliderでいいんじゃないか、という考えが復活してきますね。
でも処理負荷の問題とは別の問題もあります。
一般的な日本の住宅とかをスキャンすると、廊下とかが狭いんですよね。
この状態でMeshCollider付けちゃうと、レイがやたらと壁やら何やらにぶつかって快適に移動しづらいです。
この問題もあってMeshColliderを使わずにProBuilderで頑張ってたんですが、つい最近良い方法を思いつきました。
それがこれです。
膝丈以上の高さをごっそり削った当たり判定用のモデルを用意します。
このモデルにMeshColliderを適用して非表示にすることで、結構イイ感じになりました。
もちろん穴がある部分はすぐ下に適当なCubeとかを置いて落っこちないようにします。
この方法だと細かい起伏に対してもColliderが効く上に、作業コストもかなり安いのが良いですね。
更に負荷やサイズが気になるようなら、この当たり判定用のモデルをかなりがっつりとポリゴンリダクションしちゃえば良いです。
こういう、見た目以外にモデルを利用するケースもあったりするのでポリゴンリダクションについて触れたりしたんですね。
TextMeshProでコメントを残す
さて、いよいよ大詰め。
せっかくのスキャンデータをただ置いただけってのも味気ないので、自分なりに旅の思い出を一言コメントとかで置いていきましょう。
単純にuGUIのCanvasを、RenderModeをWorldSpaceにして置いていくというのが簡単かもしれません。
ただこれだとプラットフォームによっては日本語がちゃんと表示されなかったり漢字が変だったりします。
なのでTextMeshProを使いましょう。
uGUIのTextよりも色々装飾できたり、綺麗に表示できるので基本機能として覚えておいた方が今後の役に立ちます。
が、細かい説明は割愛します。
まぁTextMeshProの使い方の記事はググればたくさんあるので。
特に網羅的で詳しい解説をしていた記事を紹介しておきます。
一点注意しておきたいことがあります。
TextMeshProで日本語を表示する方法としてよく紹介されているものに、日本語文字コード範囲指定のtxtデータをCustomCharacterListとして使用するものがあります。
必ずしもこの方法が駄目というわけではないですが、当然フォントアセットのサイズは大きくなるので注意しましょう。
ユーザーの自由入力テキストがなく、トータルの文章量も限られているなら使用文字だけでフォントアセットを作る方が良いと思います。
これは冒頭で紹介した道志村12498番地のシーンに配置したテキストの内容です。
テキスト
山の夜は冷えるが、暖炉がとても心地良い
ここは寝室
追加の布団もある
キッチンには食器や調理器具だけでなく、スパイスが揃っている
リビングはとっても良い感じ
ソファには毛皮があったり、トルコランプがたくさんあって素敵
夜はここで焚き火を囲んで、お酒を呑みつつ長々と話をした
人数が多いとこの離れも使えるらしい
薪サウナは自分で好みの温度に調整できて非常に良い
更衣室らしきスペースだが、これまた凝っている
右の小さいのが水風呂
左の大きいのはお風呂で、三人ぐらいは入れるサイズ
椅子がうまくスキャンできていないけど、ここが整いスペース
プロジェクター(オプション)を借りれば、このスクリーンに映したりできる
ここにも焚き火スペースがある
とにかく広い！
ここはトイレとお風呂
スキャンしてないが、ここはテラススペース
ハンモックを吊るしたりできる
ここでバーベキューをした
Character SetをCharacters from Fileにして、Character Fileに指定すると重複を除外して使用されている文字だけでフォントアセットを作ることができます。
この辺りはワークフローにも関わってくるので、機能を把握した上で自分の作業の流れと合わせてうまいやり方を見つける必要がありますね。
私の場合はスキャンモデルを配置してみて、どこにどういうコメントを置きたいのかを先にイメージしてテキストに起こしてから、フォントアセットを作成してテキスト配置をしています。
人によっては前述の日本語文字コード範囲全部のフォントアセットをひとまず作って、テキストを考えながら配置した後で、実際使われている文字だけでフォントアセットを作り直す方がやりやすいかもしれません。
trouble shooting
実際に文字を配置して実機確認した際に、文字の周りが白い矩形で囲われてしまうという現象に遭遇しました。
以下の記事を参考に、Paddingの値を引き上げることで解決したので困ったら試してみてください。
STYLY編
公式ドキュメントがあるので、この通りやれば特に難しい部分はないと思います。
総括
さて、かなり駆け足で流れをざっくり説明しました。
こんな感じで旅先の宿やら、何やらをスキャンしてシーンを作ってみると楽しいものですよ。
ただ冒頭に紹介したシーンをVRで見ると、圧倒的に足りないものがあることに気付くと思います。
それは音です。
無音の空間ってリミナルスペース的な不気味さがあるんですよね。
となると自分の次の課題はフィールドレコーディングなのかな、なんてことを考えたり。
宣伝
STYLYではUnityエンジニア・サーバーサイドエンジニアを募集しています！！
ご応募お待ちしています！！