READING0%
作品一覧へ戻る

WEB / 2026

ハンドトラッキング・パーティクルシステム

カメラで両手の骨格を追跡し、開閉・傾き・左右の役割によって3Dパーティクルの分解、再構築、回転、モデル切替を操作するWebGLインタラクションです。

担当
インタラクション設計・WebGL実装・ハンドトラッキング・最適化
状態
公開中
技術
  • Three.js
  • MediaPipe Hands
  • WebGL
  • GLTF
  • 1-Euro Filter
  • JavaScript
ハンドトラッキング・パーティクルシステム — カメラで両手の骨格を追跡し、開閉・傾き・左右の役割によって3Dパーティクルの分解、再構築、回転、モデル切替を操作するWebGLインタラクションです。
  • 01左右の手をリアルタイム認識
  • 02低遅延の1-Euro Filter
  • 03カメラ映像を保存・表示しない設計
01

課題と目標

マウスやタッチではなく、身体の動きをそのまま3D表現へ接続する操作体験を試作しました。ジェスチャーは直感的である一方、カメラ入力の揺れや誤認識がそのまま画面酔いと操作ミスにつながります。

02

技術的な挑戦

左右の手に別々の役割を持たせながら、開閉状態と手首の傾きを低遅延で判定することが課題でした。さらに、多数のパーティクル、GLBモデル、Bloom後処理を同時に動かしつつ、入力のちらつきを抑える必要がありました。

03

解決方法

MediaPipe Handsのランドマークから左右・開閉・傾きを判定し、1-Euro Filterで速度に応じて平滑化の強さを調整しました。左手は分解と再構築、右手は回転とモデル切替に限定し、操作の衝突を避けています。映像そのものは表示せず、骨格だけを描画するプライバシー配慮も行いました。

04

結果と学び

手を開く・握る・傾けるという少数のジェスチャーで、粒子の爆発、再構築、軌道回転、モデル変更を操作できるデモを完成させました。ビルド工程を必要としないVanilla構成で、GitHub Pages上からカメラを許可して体験できます。