はじめに

FastLabel新卒エンジニア爲西です。

今回は、FastLabelの点群データのアノテーションで使われているthree.jsというライブラリについて簡単に紹介をします。

はじめに、FastLabelでのthree.jsが使われている部分について説明をします。

点群データとは

点群というのは、レーザー光を照射して、その反射光の情報をもとに対象物までの距離や対象物の形などを計測したデータのことです。この画像のような感じで、車や道路、奥の壁があることがわかります。
私は点群データの拡張子は”.pcd”で、こんな形式聞いたことがないという状態でした。

FastLabelでは、点群データに対して車がある位置を直方体でアノテーションをすることができます。この直方体のアノテーションを学習させることでAI開発をすることができます。

セグメンテーションで、車にアノテーションををつけた感じがこちらです！点群に対して色が割当られています。

three.jsについて

three.jsを勉強する際に、webGLについての理解も必要です。three.jsがwebGLをラップしているからです。

webGLとは、ウェブブラウザで実行する3DをレンダリングするためのJavaScript APIです。GPUを使うため、高速に描画可能になります。

WebGLを使用するために最初に必要なのはキャンバスです。webGLのコードは、JavaScript で記述する制御コードと、コンピューターの Graphics Processing Unit (GPU) で実行するシェーダーコード (GLSL) で構成されます。

シェーダーを利用すると表現力が向上します。ただ、扱い方がかなり難しいためここでは割愛をします。

主なコンポーネント

シーン

物体が配置される空間です。ワールドのことです。

カメラ

物体を映すカメラです。どこから、3D空間を見ているのかという視点になります。遠近感が適用されるカメラと、平行投影が適用されるカメラの2種類があります。

シーンに、オブジェクトを配置してそれをカメラで投影すると物体をcanvasに描画することができます。

オブジェクトの作成

オブジェクトの作成について覚えておかないといけない概念があります。ジオメトリ・マテリアル・メッシュです。

ジオメトリ

オブジェクトの形状、骨格を表します。

マテリアル

オブジェクトの色やマッピングする画像などを設定できます。

メッシュ

ジオメトリとマテリアルをいい感じに組み合わせて描画をしてくれます。

例えば大きさ１の立方体を描画をしたいときは、以下のようなコードになります。

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x000000} );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube

基本的に多角形・球などの物体を描画するときも、ジオメトリ・マテリアル・メッシュをセットで扱い、three.jsで用意されたクラス・コンポーネントを使えば何でも描画することが可能です。

最後に一言

以上がthree.jsの簡単な紹介になります。3D空間で物体を描画するのは意外に難しいんですよね、、

カメラの位置やオブジェクトの位置などの微調整がなかなか難しく、開発の工数がかかってしまいました。ただ、今はかなりthree.jsについての理解も深まり自由に扱えるように成長し、このライブラリの良さを身にしみて感じます。

ここでは、three.jsの説明について基本中の基本しか記載していないですが、別のところで発信をしていければと思っています。

FastLabel 採用情報

私のTwitter

FastLabel ドキュメント