ダークサイドにようこそ!

旅行 / 散歩 / プログラミング / 映像制作 / ブレイクダンス

【A-Frame】iPhoneのLiDARでスキャンした3DモデルをWebブラウザ上で見れるようにする【Three.js】

※こちらはWebグラフィックス Advent Calendar 2021 22日目の記事です。

新しめのiPhoneiPad(の一部)にはLiDAR(Light Detection and Ranging)という光を用いたリモートセンシング技術が搭載されており、対応アプリをインストールすると誰でもお手軽に3Dスキャンをすることができます。

ja.wikipedia.org

 

本記事はそんなiPhone搭載のLiDARを使ってスキャンした3DモデルをWebブラウザ上でじろじろ観察できるようにしてみます。

 

3D Scanner Appで何かスキャンする

今回はLaan Labs社の無料アプリ「3D Scanner App」を使用して3Dスキャンを行います。ちなみにLiDARで3Dスキャンできるアプリは他にも色々ありまして、@iwamah1さんのまとめ画像が参考になるかと思います(ここで紹介する手順も別アプリでやってもOK)。

3d Scanner App™

3d Scanner App™

  • Laan Labs
  • ユーティリティ
  • 無料

apps.apple.com

 

3D Scanner Appによるスキャンの手順をざっくりご紹介しますと……

 

f:id:hahaeatora:20211221171639p:plain

スキャン対象の前で赤丸ボタンを押下しスキャン開始(もっと分かりやすいスキャン対象にすればよかった)。

f:id:hahaeatora:20211221171912p:plain

スキャン中……同じ箇所は何度も撮影しない方が良いらしい。

f:id:hahaeatora:20211221172319p:plain

切りの良いところでスキャン完了。緑のStartボタンを押下するとテクスチャを貼ってくれます。

 

f:id:hahaeatora:20211221172603p:plain

けっこう時間がかかる。

 

f:id:hahaeatora:20211221172659p:plain

「Process Scan」が完了したら3DモデルをPC側へ共有します。私はGLBファイルにしました。

 

スキャンした3DモデルをA-Frameで表示する

上記手順で共有した3Dモデル(.glbファイル)をWebブラウザ上で見れるようにします。今回は「A-Frame」という3D/AR/VRコンテンツ開発用のWebフレームワークを使用します。こちらを使うとHTMLタグをちょこちょこ書くだけでお手軽に3D&WebXRなコンテンツを作ることができます。とはいえ細かいことをやりだすとマークアップだけでは厳しくなるので実際にはコードも書くのですが(A-FrameはThree.jsベースなのでそちらのAPIも使えます)。

aframe.io

 

そんなA-Frame(+Three.js)で3DモデルをWeb上で見れるようにしてみました。以下のデモページより実際に体験できます。モデルの選択は画面左上のセレクトボックスより。HMDを持っていないので分かりませんが画面右下よりVR表示もできる?

followthedarkside.github.io

 

f:id:hahaeatora:20211220233836p:plain

いくつかスキャンしたモデルをご紹介します。こちらは都内の某シューズロッカーとゲーム機。

 

f:id:hahaeatora:20211220234509p:plain

東大の赤門。

 

f:id:hahaeatora:20211220234606p:plain

ビーチで波打ち際をスキャンしようとしましたがうまくいきませんでした泣。

 

ソースコードは以下。なんだか色々雑な気がしますが許してください。

github.com

 

おまけ

3D Scanner Appでは.plyファイルも出力できるのでそれをTouchDesignerで表示してみました(ポイントクラウド)。オーディオリアクティブにしたり点群をぐわんぐわん動かしたりするのに良いです。

 

他にもWebARコンテンツとして表示もできます(ここではAR.jsを使用)。

 

さいごに

以上、iPhoneのLiDARでスキャンした3DモデルをA-Frame(+Three.js)を使いWebブラウザ上で表示するまでの紹介でした。まあ、Webで共有するだけならSketchfabとか使った方が楽ですかね……

LiDARを使えるようになってから引っ越すたびに賃貸のスキャンをしているので、生きた記録として全部Webにアーカイブしようかな。

 

hahaeatora.hateblo.jp

hahaeatora.hateblo.jp

hahaeatora.hateblo.jp