ふぁメモ

主に技術系のメモをしたいけどやっぱり適当日記。たまにPHPコード載ってるけどメモ書き程度のスクリプトなのでそのまま使っちゃダメ。

内輪公開用3Dモデルアップローダーを作ろうとして頓挫した話

LiDAR搭載のiPhone13Proを手に入れた

昨年末のことであるが、iPhone11ProMax(256GB)のストレージが枯渇していたため、iPhone13ProMax(512GB)を購入した。 新しく3Dスキャナ(LiDAR)というオモチャを手に入れたのだ。

各種3Dスキャンアプリを試し、サブスクリプション課金のあるアプリを避けると残るのはまあ無難にScaniverseである。 身の回りのどうでもいい小物や建物、散らかった部屋などをスキャンして遊んでいる。

細かいところが潰れてしまうので精度はイマイチであるが、通常では難しい角度から写真が撮れるという観点では非常に面白いオモチャである。

3Dスキャンモデルの共有

で、当然作成したモデルを誰かに見せたくなるわけだ。が。これが案外敷居が高い、ような気がしている。

Scaniverseから直接アップロードできるSketchfabがメジャーどころであり機能が充実しており申し分ないのだが、限定公開は有料なのだ。

適当に撮った私的な3Dスキャンでありクォリティも微妙なものであり近所や自分の家や職場のモデルなんて恥ずかしくて全世界OPENな場所に公開したくはない。 URLを知っている人だけ閲覧できるアップローダーに置いて知り合いに見せて完結、そんなレベルのシェア機能でいいのだが、Sketchfabの限定公開機能はモデルを売買する際のプレビューに使うようなビジネス用途を想定した機能なのでやけに高額なのである。

STYLYとやらも同様に限定公開は有料、DOORは無料ではあるが3Dモデルを配置する作業がなかなか面倒である。 PolyというGoogleがやっていたらしいサービスは終了してしまった。 3DCGARTSみたいなクリエイティブなところにスキャンデータを上げるのは違う気がする。

え、先人たちはどこでモデルを公開しているの?、プライベートとか気にせずSketchfabなの???

もちろんモデルデータをそのままGoogleドライブとかDropboxにアップロードして知り合いに配布して各自でモデルビューアで見てもらえばそれで済む話ではある。ブラウザで見れるタイプのビューアーもある。 でもできればURLを渡したらそのままブラウザで手軽にモデルを見てもらいたい。

ないものは自分で作ろう

ちょっと調べると3DモデルをHTMLに埋め込むのに便利なライブラリはmodel-viewerとかa-frameとかThree.jsなどがあって、これらを利用すれば比較的簡単に3DモデルのWeb埋め込みは実現できるみたい。 じゃあアップローダと組み合わせて埋め込んで表示するサイトを自分で作ってみよう、と思い立った。

作ってみた

想定外の利用をされては困るのでメールアドレスが必須だったりなぜか有名どころの無料転送アドレスが使えなかったりするのは実験的な意味もある。

アップローダとしてはさておき。

実際にやってみるとなかなかうまくいかないものである。

問題点

ブラウザが落ちちゃう

ルームレベルでスキャンしたモデルは大きなものになりがち。Scaniverseが自動的に小さくしてくれてはいるが、そのままブラウザで表示させようとするとだいたいメモリ不足でブラウザが落ちる。落ちなくても光があたらなくなってモデルが真っ黒になる。視点を変えようとしても動かなかったりする。快適な閲覧環境を提供できているとはとても言えない。

何かサーバー側でモデルを小さくする方法はないか探ってみたが、圧縮方法を変えることができても大して効果はなかった。

Scaniverseが保存用の精密モデルと共有用の軽量モデルを両方生成できるようにしてくれればいいのだけど今のところそういった機能はないみたい。

Metascanではできたけどサブスクリプション課金が結構高いので微妙である。

サムネを作ることができない

自分で用意しなくても自動的にサムネを作りたいなと思っていたのだが、実現方法がない。assimpとかいうのでできるかと思ったができなかった。

ブラウザ上でモデルを表示してスクリーンショットを撮ることはできたのでblobをアップロードする手順にすればできないことはなさそうな気がしたけど公開手順が煩雑になるので諦めた。

PCとスマホで体験が異なる

同じライブラリを使っているのにスマホで見ると自動的にスマホ用のビューアになってしまってPCブラウザで使えるように用意したプラグインの意味がなくなる。

ジャイロを使うと許諾画面が出てきてユーザーに優しくない。初見殺し。

ジャイロを使わないと上下の視点移動ができない。でも時には視点移動できないほうが動きやすい場合もある。

カメラ操作が微妙

Scaniverseのビューアはよくできている。見たい場所をダブルタップするとぐいーんと入り込める。これをWebビューアでも実現したい。

基本的に3Dモデルのカメラの設定は予めビューポイントを決めておくものが多く、あとはWASDで上下左右に動かせるとか、スマホの加速度センサを使って見渡せるといったものが多い。 JavaScriptで如何様にもカスタマイズできるようなのだが、そんなスキルはない。 きっとUnityが使える環境ならば壁や床を認識させて無理のない動きで視点移動ができるんじゃないかと思うのだけど、JavaScriptでうまいことやってくれるライブラリを見つけることができなかった。

ダブルタップするとちょっと動くようにできたけど思い通りには動かない。

WASDはキーが足りない。マウスと組み合わせるのが前提なのだろうけどせめてX軸Y軸Z軸で6キー用意しておいてほしい。

タップしてると前に進むUIは導入できたけどカメラを動かすだけでも前に進んでしまうので操作感はいまいち。

上に視点移動するにはまず上を向いてからタップすることでなんとか移動できるけどわかりにくい。

画面にコントローラ的な操作ボタンを表示してそれを押すようなUIにしたいけどうまくいかない。実現してる人のソースを真似すればいいのだけどA-Frameの古いバージョンを使っていたりして互換性がない。ライブラリのバージョンを合わせると表示がうまくいかなくなる。

Oculus Questを使っている時はスティック操作で動かしたいけどコントローラのビジュアルが出るだけで操作はできない(自分で作る必要がある)。

Oculus Questで行きたい場所にビームを出してテレポートできるUIもあったけど新しいバージョンのA-Frameでは動作しない。

飽きた

そんなわけでもっと簡単に使える便利なライブラリを誰かが作ってくれたり便利な共有サイトを誰かが作ってくれるのを待つばかりとなった。

後日談

Scaniverseの3/22のアップデートでScaniverseのコミュニティにモデルをアップロードする機能がついた。無料でUnlisted(非公開)が選べる。ブラウザで見た時のカメラの動きは同じではないが、アプリで開ければぐいーんといける。パスワード付けたりはできないけど、これが求めていたものだよ…。

5/14のアップデートでスキャンデータRAW保存して精密モデルと軽量モデル別々に生成できるようになった。