Uploaded June 2013 | Updated September 2026, 2 weeks ago
市販のUSB接続のWebカメラ１台とPCプロジェクタ１台を使ってプロジェクション・マッピングに挑戦してみました。比較的簡単な壁でプロジェクション・マッピングの実験を行いました。壁の段差は35cmあります。普通に投影すると映像は大きく歪んでしまいます。
Webカメラからキャプチャした映像を解析して、壁面の凹凸をテクスチャー・マッピングというCG処理を使って補正する方法を考えました。実際の実験では、最初の座標測定時に壁の段差が精確に取得できていないため少しガタが発生してしまいました。というより時間がなくて慌てて測定して膝でWebカメラのテーブルに触れたせいかもしれません。
PC用プロジェクタ(800×600画素)とWebカメラを使用
今回は原理検証レベルのため、ソフトウェアはHTML5+JavaScript、Excel VBA、Movie Makerなどの混合で実現。改めてHTML5+JavaScriptで移植の予定。
基本的に近似するポリゴンの数を増やせば、より複雑な形状のスクリーンへのマッピングも可能になることが確認できた。資料作成には時間を要するのと、まだ改良途中なので、機会を見つけて公開の予定。
HTML5+JavaScriptに置き換え中
【CANVASで３次元グラフィックス】『NTL3D.js』
neo-tech-lab.co.uk/Canvas/index.htm
【サンプル】
neo-tech-lab.co.uk/Canvas/NTL3D_TextureMapping.htm
neo-tech-lab.co.uk/Canvas/NTL3D_TextureMapping2.htm
neo-tech-lab.co.uk/Canvas/NTL3D_TextureMapping3.htm
市販のUSB接続のWebカメラ１台とPCプロジェクタ１台を使ってプロジェクション・マッピングに挑戦してみました。比較的簡単な壁でプロジェクション・マッピングの実験を行いました。壁の段差は35cmあります。普通に投影すると映像は大きく歪んでしまいます。
Webカメラからキャプチャした映像を解析して、壁面の凹凸をテクスチャー・マッピングというCG処理を使って補正する方法を考えました。実際の実験では、最初の座標測定時に壁の段差が精確に取得できていないため少しガタが発生してしまいました。というより時間がなくて慌てて測定して膝でWebカメラのテーブルに触れたせいかもしれません。
PC用プロジェクタ(800×600画素)とWebカメラを使用
今回は原理検証レベルのため、ソフトウェアはHTML5+JavaScript、Excel VBA、Movie Makerなどの混合で実現。改めてHTML5+JavaScriptで移植の予定。
基本的に近似するポリゴンの数を増やせば、より複雑な形状のスクリーンへのマッピングも可能になることが確認できた。資料作成には時間を要するのと、まだ改良途中なので、機会を見つけて公開の予定。
HTML5+JavaScriptに置き換え中
【CANVASで３次元グラフィックス】『NTL3D.js』
neo-tech-lab.co.uk/Canvas/index.htm
【サンプル】
neo-tech-lab.co.uk/Canvas/NTL3D_TextureMapping.htm
neo-tech-lab.co.uk/Canvas/NTL3D_TextureMapping2.htm
neo-tech-lab.co.uk/Canvas/NTL3D_TextureMapping3.htm
