ドローンの資格取得から3D Gaussian Splatting生成、Webビューワーで可視化までやってみました。 / 開発者向けブログ・イベント

はじめに

「GMOインターネットグループ Advent Calendar 2025」、4日目の記事を担当します。GMOグローバルサイン・ホールディングス CTO室所属のはが（@mxcn3）です。

今年、二等の無人航空機操縦者技能証明と第二種機体認証を取得しました。今回の記事では、これらの資格と認証機体（DJI Mini 4 Pro）の映像から、3D Gaussian Splatting（3DGS）の生成、そしてWebビューワーでの可視化まで、一連の流れを体験しましたので、その知見を共有します。

無人航空機操縦者技能証明（二等）の取得

資格取得にはドローンスクールを活用しました。6月の試験合格から申請手続きを経て、8月に無人航空機操縦者技能証明書が手元に届きました。

時期	内容
5月	ドローンスクール入校
6月15日	実技審査合格
6月中旬	学科試験合格
6月中旬〜7月	各種申請手続き
8月15日	無人航空機操縦者技能証明が届く

撮影機材

今回使用したドローンはDJI Mini 4 Proです。

選定理由

この機体を選んだ理由は、第二種型式認証を取得していることです。DJI Mini 4 Proは2025年に第二種型式認証（第6号）を取得しており、国土交通省のHPでも確認できます。資格取得のタイミングでちょうど「型式認証対応モデル（DJI RC 2付属）」が販売されていたため、スムーズに導入できました。

DJI Mini 4 Proの型式認証対応モデルは背面に「TC No.6」というシールが貼られています。

第二種機体認証取得のスケジュール

時期	内容
8月22日	機体（DJI Mini 4 Pro）購入
8月23日	機体の新規登録（登録記号発行）
8月24日	第二種機体認証の申請
8月26日	検査手数料の納付
8月27日	第二種機体認証書の交付

ドローン情報基盤システム（DIPS 2.0）にて、第二種機体認証の申請を行いました。手続きは非常にスムーズで、短期間で完了しました。これで無人航空機操縦者技能証明書と第二種機体認証を持つ機体を取得することができました。

撮影場所

神奈川県内の河川敷にて撮影を行いました。当該エリアはDID（人口集中地区）外であり、カテゴリーⅠ飛行（特定飛行に該当しない）の範囲内で実施しています。事前に神奈川県のWebサイトで公開されている「河川敷におけるドローン飛行に関する注意点」を確認したうえでフライトを行いました。

3D Gaussian Splattingの生成

撮影した映像（MP4）から3DGSへの変換には、Windows環境で Postshot を使用しました。Postshotは動画ファイルからカメラ位置推定（アライメント）と3D Gaussian Splattingの生成が行えるため、環境構築等をする手間が省けます。

生成時の環境

・CPU: Intel Core Ultra 7 プロセッサー 265K ( 20コア・20スレッド)
・GPU: NVIDIA GeForce RTX 5070 Ti

以下が、アライメントの結果と生成結果です。

ドローンの上空からの視点を含めることで、死角の少ないアライメント結果が得られました。

データの調整

次に、対象物（車）をWebで表示するために準備を行います。生成された生データ（.ply）には、背景の空や遠景など、不要な点群が含まれます。これらの不要なデータを取り除くためにブラウザベースのエディタ SuperSplat にて、対象物以外の不要なデータを削除しました。

対象物以外の点群を編集して削除をしたデータはこのようになりました。

データ	内容
点群数	382,000個
ファイルサイズ	21.4MB
ファイル形式	.ply

Webビューワーの実装 (React + PlayCanvas)

生成した .ply データをWebブラウザ上で閲覧するため、PlayCanvas と React を組み合わせたビューワーを実装しました。Gaussian Splattingのデータの可視化には、「playcanvas/react」をベースにしたWebビューワーを実装しました。

Webビューワー: https://gsplat.org/viewer/8a8g5

PlayCanvasのSplatコンポーネントを使用し、Reactのライフサイクル内で3Dシーンを管理します。以下は実装例の抜粋です。

// 実装のサンプル
import { Entity } from "@playcanvas/react";
import { Camera, Light, GSplat } from "@playcanvas/react/components";
import { OrbitControls } from "@playcanvas/react/scripts";
import { useSplat } from "../../utils/hooks";

const Scene = () => {
  /// plyファイルをロード
  const { data: model, isPending: isModeLoading } = useSplat("./◯◯.ply", { autoRelease: true });
  if (isModeLoading || !model) return null;
  return (
    <>
      <Entity name="light">
        <Light type="directional"/>
      </Entity>
      <Entity name="camera">
        <Camera />
        <OrbitControls />
      </Entity>
      {/* 3D Gaussian Splattingのデータを表示 */}
      <Entity name="model">
        <GSplat asset={model} />
      </Entity>
    </>
  );
};

実装の詳細は、以前の私の記事「ReactでPlayCanvasが使えるライブラリが公開されたので早速使ってみました！」でも解説していますので、併せてご覧ください