3D Visualization

システム概要

このシステムは、WebカメラからのリアルタイムビデオストリームをAIモデルで処理し、深度マップを生成するとともに、手の検出と追跡を行います。検出された手のジェスチャーに基づいて、3D空間内に様々なエフェクトを生成します。

深度マップとは、2次元画像の各ピクセルに対して、カメラからの距離（奥行き）情報を付加したものです。これにより、平面的な映像から立体的な空間認識が可能になります。本システムでは、最新のAI技術を用いて単眼カメラからでもリアルタイムに深度推定を行い、その情報を活用して没入感のあるインタラクティブな体験を提供します。

また、手の検出システムは、MediaPipeフレームワークを用いて21個の特徴点（ランドマーク）を高精度に追跡し、指の動きや手のポーズをリアルタイムで認識します。これにより、特定のジェスチャーをトリガーとしたエフェクト生成が可能になり、直感的な操作体験を実現しています。

主要コンポーネントの解説

1. GPUInferenceManager クラス

ONNXモデルをWebGPUまたはWebGLで実行するためのクラスです。深度推定AIモデルを読み込み、Webカメラからの映像フレームを処理して深度マップを生成します。

このクラスは、ブラウザの対応状況に応じて最適な実行環境（WebGPUまたはWebGL）を自動選択し、AIモデルの推論処理を効率的に行います。WebGPUが利用可能な場合は、その高速な並列計算能力を活用して推論速度を大幅に向上させます。

また、モデルのロード処理と推論処理を分離することで、初期化時の遅延を最小限に抑え、スムーズなユーザー体験を提供します。推論結果は、深度マップとして視覚化され、3D表現の基礎データとして利用されます。

class GPUInferenceManager {
    constructor(modelPath) {
        this.modelPath = modelPath;
        this.session = null;
        this.isWebGPUSupported = this._checkWebGPUSupport();
        this.inferenceConfig = {
            width: 512,
            height: 512
        };
    }
    
    // WebGPUサポートをチェック
    _checkWebGPUSupport() {
        return !!navigator.gpu;
    }
    
    // モデルを読み込む
    async loadModel() { /* ... */ }
    
    // 推論を実行
    async runInference(imageElement) { /* ... */ }
}

2. Webカメラ管理機能

ブラウザからWebカメラにアクセスし、映像ストリームを取得・表示します。複数のカメラがある場合は切り替え機能も提供します。

この機能は、MediaDevices APIを使用して利用可能なすべてのカメラデバイスを列挙し、ユーザーが最適なカメラを選択できるようにします。また、選択されたカメラから最高解像度の映像ストリームを取得し、システムのパフォーマンスを最大化します。

取得した映像ストリームは、HTMLのvideo要素に表示されるだけでなく、Three.jsのVideoTextureとしても利用され、3D空間内でのテクスチャマッピングに活用されます。これにより、リアルタイムの映像を3Dオブジェクトに投影することが可能になります。

async function setupWebcamDisplay() {
    // WEBカメラの映像表示用video要素を生成
    const videoElement = document.createElement('video');
    // ...
    
    // 利用可能なWEBカメラデバイスを取得
    const devices = await navigator.mediaDevices.enumerateDevices();
    // ...
    
    // カメラ選択用のUIエレメント（セレクタ）を生成
    const cameraSelector = document.createElement('select');
    // ...
    
    // 指定したカメラを選択し、最大解像度でストリームを取得する関数
    async function selectCamera(index) { /* ... */ }
    
    // Three.js用のVideoTextureを生成
    const videoTexture = new THREE.VideoTexture(videoElement);
    // ...
    
    return videoElement;
}

3. 深度マップ生成機能

AIモデルを使用してWebカメラの映像から深度マップを生成し、3D表示します。深度情報は物体の奥行きを表現するために使用されます。

この機能は、単眼深度推定（Monocular Depth Estimation）と呼ばれる技術を使用しており、単一のカメラ映像から奥行き情報を推定します。従来のステレオカメラやToFセンサーなどの特殊なハードウェアを必要とせず、一般的なWebカメラだけで深度情報を取得できる点が大きな特徴です。

生成された深度マップは、グレースケール画像として表現され、明るい部分は近く、暗い部分は遠くを示します。この深度情報は、3Dメッシュの変形やパーティクルエフェクトの配置など、様々な視覚効果の制御に活用されます。

深度マップは、画像内の各ピクセルがカメラからどれだけ離れているかを表す2D画像です。明るい部分は近く、暗い部分は遠くを表します。この情報は、3D空間内での物体の位置づけや、AR（拡張現実）アプリケーションでの現実世界とバーチャル要素の融合に不可欠です。本システムでは、最新のニューラルネットワークモデルを使用して、高精度な深度推定を実現しています。

4. 手の検出と追跡

MediaPipe Handsライブラリを使用して、Webカメラの映像から手を検出し、21の特徴点（ランドマーク）を追跡します。これにより、指の動きや手のジェスチャーを認識できます。

MediaPipe Handsは、Googleが開発した高性能な手の検出・追跡ライブラリで、機械学習モデルを使用して手の形状と動きをリアルタイムで分析します。各フレームで検出される21個のランドマークは、手首、指の関節、指先など、手の重要な部位を表しています。

これらのランドマークの相対的な位置関係を分析することで、「パー」「グー」などの基本的なジェスチャーだけでなく、指のピンチ動作や特定の指の曲げ伸ばしなど、複雑な動作パターンも認識できます。本システムでは、これらのジェスチャー認識結果に基づいて、様々なインタラクティブエフェクトをトリガーします。

手のランドマーク構造

5. エフェクト生成機能

検出された手のジェスチャーに基づいて、Three.jsを使用して3D空間内に様々なエフェクトを生成します。主なエフェクトには以下があります：

パーティクルエフェクト：手の位置から放射状に広がる粒子。手の動きに合わせて色や大きさ、放出方向が変化し、ダイナミックな視覚効果を生み出します。
ビームエフェクト：指の方向に発射される光線。指の向きや速度に応じてビームの太さや長さ、色が変化します。複数の指を使った場合は、それぞれから異なるビームが発射されます。
波紋エフェクト：手のひらを開いたときに発生する同心円状の波紋。手のひらの大きさに比例して波紋の大きさが変化します。
爆発エフェクト：特定のジェスチャー（例：素早く手を閉じる）をトリガーとして発生する爆発的な粒子効果。周囲の3Dオブジェクトに物理的な影響を与えることもできます。

これらのエフェクトは、Three.jsのパーティクルシステム、シェーダー、ライティング効果などを組み合わせて実現されています。各エフェクトは、手の動きやジェスチャーの変化に応じてリアルタイムに更新され、直感的で没入感のあるインタラクションを提供します。

// パーティクルエフェクトを作成する関数
function createParticleEffect(position, color, scale = 1.0) {
    // パーティクルグループを作成
    const particleGroup = new THREE.Group();
    scene.add(particleGroup);
    
    // グローエフェクト
    const glowGeometry = new THREE.SphereGeometry(5 * scale, 16, 16);
    const glowMaterial = new THREE.MeshBasicMaterial({
        color: color,
        transparent: true,
        opacity: 0.7
    });
    
    const glowSphere = new THREE.Mesh(glowGeometry, glowMaterial);
    glowSphere.position.copy(position);
    particleGroup.add(glowSphere);
    
    // パーティクルを生成
    const particleCount = Math.floor(50 * scale);
    
    for (let i = 0; i < particleCount; i++) {
        // ...パーティクル生成コード
    }
    
    // アニメーション関数
    const animateParticles = () => {
        // ...アニメーションコード
    };
    
    // アニメーションコールバックに追加
    window.animationCallbacks.push(animateParticles);
}

技術的特徴

WebGPUとWebGLの活用

AIモデルの実行にはWebGPUを優先的に使用し、サポートされていない環境ではWebGLにフォールバックします。これにより、高速な推論処理が可能になります。

WebGPUは、最新のグラフィックスAPIで、従来のWebGLと比較して大幅に高速な描画処理と計算処理を実現します。特に、コンピュートシェーダーの機能により、GPUの並列計算能力を活用した高速なAI推論が可能になります。本システムでは、ブラウザがWebGPUをサポートしている場合は自動的にこれを使用し、サポートされていない場合はWebGLにフォールバックする仕組みを実装しています。

また、シェーダープログラムを最適化し、GPUメモリの効率的な利用を図ることで、複雑な視覚効果を維持しながらも高いフレームレートを実現しています。

ONNXランタイム

深度推定モデルはONNX形式で提供され、ブラウザ上でONNXランタイムを使用して実行されます。これにより、複雑なAIモデルをWebブラウザ上で動作させることができます。

ONNX（Open Neural Network Exchange）は、異なる機械学習フレームワーク間でモデルを交換するための標準フォーマットです。本システムでは、PyTorchやTensorFlowで訓練された深度推定モデルをONNX形式に変換し、ブラウザ上のONNXランタイムで実行しています。

ONNXランタイムは、モデルの実行を最適化し、利用可能なハードウェアリソース（CPU、GPU、WebGL、WebGPU）を最大限に活用します。また、量子化やプルーニングなどの最適化技術を適用することで、モデルサイズを削減し、推論速度を向上させています。

Three.jsによる3D表現

深度マップと手の検出結果は、Three.jsを使用して3D空間内に表示されます。深度情報は3Dメッシュの変形に使用され、立体的な表現を可能にします。

Three.jsは、WebGLを抽象化し、複雑な3Dグラフィックスをブラウザ上で簡単に実現できるJavaScriptライブラリです。本システムでは、Three.jsを使用して以下の機能を実装しています：

深度マップに基づく3Dメッシュの生成と変形
手の検出結果を表示するための3Dマーカーの配置
パーティクルシステムによる様々な視覚効果
カスタムシェーダーによる高度な視覚表現
物理ベースのレンダリングによるリアルな光の表現

また、Three.jsのアニメーションシステムとカスタムシェーダーを組み合わせることで、深度情報の変化や手の動きに応じたスムーズな視覚効果の遷移を実現しています。

注意点： このシステムは高度なグラフィック処理とAI推論を行うため、高性能なGPUを搭載したデバイスでの実行を推奨します。モバイルデバイスでは動作が遅くなる可能性があります。特に、WebGPUは現時点ですべてのブラウザでサポートされているわけではなく、Chrome 113以降やEdge 113以降などの最新ブラウザが必要です。また、大量のメモリを使用するため、8GB以上のRAMを搭載したデバイスでの使用を推奨します。

システムフロー

Webカメラからビデオストリームを取得
ビデオフレームをAIモデルに入力し、深度マップを生成
MediaPipe Handsを使用して手の検出と追跡を実行
検出された手のジェスチャーに基づいてエフェクトを生成
Three.jsを使用して深度マップと手の検出結果を3D表示
アニメーションループで継続的に更新

WebGLとAIを活用した深度マップ生成と手の検出システム