🐈

【LiDAR×three.js】iPhone12 Proで撮影したPointCloudをWebで表示するまで

2 min read

はじめに

(ソフトバンクの48回分割払いで)iPhone12 Pro買いました。
フロントエンドエンジニアとして気になるのは、やはりLiDAR機能です。
今回はそのLiDARで撮影した3Dデータ(PointCloud)を、three.jsを使用してWebに表示させるところまでやってみます。

PointCloudってなに

絵でご覧いただいた方が早いと思うので、完成形を以下に。

PointCloudとは日本語で言うと「点群データ」であり、つまりは「多くの点によって立体を表現したデータ」です。
iPhone12 Proに搭載されたLiDARは、スキャンしたい対象物の点群、つまりはxyz座標をぶわーーーーっと取得できるという訳です(色情報【rgb】はカメラの方で取得?)
Webというよりは、建築の測量などでよく使用されているようです。

使用アプリ

PointCloudを取得するためにはアプリを使用します。
有名どころとしてpronoPointsScanというアプリがあるのですが、今回はたまたまタイムラインで目に入ったSiteScapeというアプリを使ってみました。

アプリの使い方は上記ツイートの通りめちゃくちゃ簡単です。

plyという形式で出力されるのですが、three.jsにはPLYLoaderというものがあるので簡単にWebで読み込めます。

three.jsでply読み込み

点群なので、THREE.Pointsを使います。
ポイントとなる部分だけ記述します。

const plyLoader = new THREE.PLYLoader();
const material = new THREE.PointsMaterial({
    vertexColors: true,//頂点の色付けを有効にする
    size: 0.03,
});
plyLoader.load('xxx.ply', (geometry) => { //引数にはpositionとcolorを持つBufferGeometryが入ってる
    const particles = new THREE.Points(geometry, material);
    scene.add(particles);
});

これだけです!簡単ですね!


3Dデータなので、俯瞰で見れちゃいます。


看板の文字は、さすがに視認できないですね


植物のスキャン具合。木はスキャンしづらいです。


頂点数ですが、2613681/3 = 871227個で、plyファイルは13MBくらいです。

まとめ

慣れれば、計測から出力・実装まで10分かからないかもしれません。
今回はただ表示させただけなのですが、これをGLSLの頂点シェーダーでアニメーションさせれば面白いことになりそうです。今度やってみたい。

この記事に贈られたバッジ

Discussion

ログインするとコメントできます