【開発ノート】点群データを手軽に扱えるブラウザ表示ツールをThree.jsで実装してみた
NEWS
2022.02.08
ブログ 開発ノート
こんにちは。
エム・ソフトのエンジニアのhanawaです。
エム・ソフトでは、ARやXRのアプリを日々開発しています。
開発に役立ちそうな情報やメモなどを不定期で公開していきたいと思います。
はじめに―点群データをブラウザ上で手軽に参照したい
昨今、点群データ(ポイントクラウド)が様々な業界で注目されています。
その大きな理由の一つに、「点群データを簡単に取得できるようになった」という点が挙げられます。
特に、ここ数年で発売されたiPad ProやiPhone Proシリーズには「LiDARスキャナ」が搭載されており、点群データの取得が手軽にできるようになりました。
例えば、こちらはエム・ソフトが開発した点群取得と参照ができるアプリ「デジスキャン」の3Ⅾスキャンのデモ動画です。
見て分かるように、端末のカメラで現地の様子を写していくだけで、簡単に点群データ(とメッシュデータ)を取得することができます。
このように点群データを簡単に取得でき、活用の幅がさらに広がったことは間違いないのですが、
一方で、「専用ソフトを使わずもっと気軽に点群を見たい。。。」といった悩みをお持ちの方もいらっしゃるのではないでしょうか?
そこで今回は、JavaScriptライブラリ「Three.js」を用いて点群データをブラウザで表示するツールを作成してみました。
思ったより簡単に作ることができるので、今回はその方法をご紹介します。
点群とは
そもそも点群とは、「3次元の座標データや色情報などを持つ点の集まり」のことを言います。
一般的には3Dレーザースキャナーなどの機器を用いて点群を取得します。
空間の3次元情報を点の集合体として記録するので、地形や物体の情報を画像よりも詳細に管理することが可能です。
こういった特徴から、以下のような用途での活用が注目されています。
- 橋梁、トンネル、高速道路などのインフラメンテンナンス
- 建造物の形状保存(デジタルアーカイブ)
- 寸法、面積、体積などの測量
- プラント設備などの設計シミュレーション、保全管理
- 建設現場での施工管理、品質管理
- その他、3次元データの活用推進の一環として
点群データのブラウザ表示ツール実装方法
それでは、実装方法をご紹介します。
点群データのファイル形式には様々なフォーマットがありますが、今回は「ply」形式のファイルを使用します。
また、表示に必要な最低限の部分のみとなります。
.plyファイルを読み込むのにPLYLoaderを使用し以下のように実装しました。
var loader = new THREE.PLYLoader();
var mat = THREE.PointsMaterial({
vertexColors: true, // plyファイルから読み込んだ色を反映させる
size: 0.01, // 点の大きさ
});
// ロード
loader.load(‘path-to-ply-file’, function(geo) {
// ロード完了したら、点群がジオメトリに設定される
geo.computeVertexNormals(); // 法線の修正
// 点群をメッシュとして作成
const mesh = new THREE.Points(geo, mat);
// シーンに追加
scene.add(mesh);
// 点群を表示するdomに追加(ここで指定した位置の子供にcanvasが追加されます)
document.querySelector(‘#id-for-view-area’).appendChild(renderer.domElement);
// 表示
renderer.render(scene, camera);
});
これによってできたツールを動かしてみました。
見てお分かりのように、メッシュの部分の対応のみで点群をシーンに追加できるので、色々楽しめそうです。
作成したツールはこちらでも動かせますので、良かったらご参照ください。
点群データがより手軽に
このように、Webブラウザで簡単に点群データを参照できるようになりました。
少し前までの点群データといえば、「高価な3Ⅾスキャナーを用いてデータを取得し、専用ソフトを導入して点群データを参照」といったように、利用するまでの敷居が結構高かったように思います。
ですが、このWebブラウザでの表示ツールによって、専用ソフトよりも手軽に点群データを参照することが可能です。
もちろん、専用ソフトの方が多機能なことは間違いありません。ですが、このようにWeb上で点群データを確認できる手軽さというのも非常に大きな利用価値があると考えています。
また、「はじめに」でも書いたとおり、最近ではiPhone、iPadで簡単に点群の取得も可能になりました。
これらの技術によって小さなコストで点群の取得、確認ができるようになり、点群データ活用のハードルが格段に低くなっています。
点群アプリ「デジスキャン」や点群データの活用をご検討中の方は、ぜひお問合せください。
まとめ
点群データは今後様々な業界で活用される時代になると考えています。
現状では点群活用している企業は決して多くはありません。
ですが5年後10年後の未来では「点群データを使うのが当たり前」といった時代になっている可能性も大いにあり得ます。
もしそのような時代になれば、あらゆる企業の業務が点群によって効率化されていることでしょう。
点群には本当に大きな利用価値がありますので、「まだ活用できていない」「どのように使えるかわからない」といった方は、まずは上記のようなWebブラウザ表示ツールなどを使って点群データに触れてみる、ということも大事だと思います。
エム・ソフトも、点群で業務改善、DXしたいと考えている方向けに、「どのように点群を活用できるか」を日々検討しながらアプリ、ソリューションの開発に努めていきます。
今後も群についてはもちろん、AR、XRの開発についてのノウハウや解説など、開発者にとってお役に立てるような情報を随時発信してきますので、楽しみにしていてください。
エム・ソフトでは、iOSのVR、ARアプリ製品の開発、また点群を使ったアプリ等の開発を行って
これらの技術を活用したアプリケーション開発のご相談や、各種デモ・事例紹介のご依頼など、お気軽にご相談下さい。
- CATEGORY
- Pinspect
- RayBrid KeyMaker
- ブログ
- 開発ノート
- セミナー・イベント
- 【終了済】セミナー・イベント
- メディア
- イベント
- 資料