*

pmhe

デブでもできた!macを使ったプロジェクションマッピングの作り方#1

公開日: : column , ,

ここ数年よく聞くようになった単語の一つ、プロジェクションマッピング。手を出してみたいけど、何から手を出したらいいのか全くよくわからんってのが本音でした。でも落ち着いて考えたら、あんなものはプロジェクターでなんかに照らしてるだけであって、何年も前からある技術な気がしてきました。

プロジェクションマッピングというと、東京駅のやつが大変有名で、あんなのは自分に作れる気はしないけど もっとお手頃なやつだったら出来るんじゃないかな?と思えたのでチャレンジしてみました。

前知識がなかったので色々試行錯誤が必要でした。僕は動画を作ったりすることはできるので、2時間もあれば出来るだろう と高を括っていたのですが、どうにもこうにも思い通りにいかない。

結果、コツをつかむまでに5時間くらいかかってしまいました。macとその他なんか色々あれば、こうすればできるよ!ってのがわかってきたのでご紹介します。

このエントリは、プロジェクションマッピングを仕事にしようと思っている方に推奨されるブログではありません。たぶん効率の悪い方法がいくつも書いてあります。どちらかというと、原理をなんとなく理解し、趣味の範囲内でやってみたいなーって思った人の手助けになったらいいな程度の気持ちで書いたものでございます。

プロジェクションマッピングって何

Wikipedia氏によると、プロジェクションマッピングとは、プロジェクション(投影)という単純な映写ではなく、マッピングという言葉が加わった言葉で、投影する対象に映像を貼り合わせる という意味合いがある。欧米ではビデオマッピング・マッピングプロジェクション 建物に対して映し出すものは、アーキテクチャルマッピングと呼ばれる。他にも3Dマッピングなど・・・という

とりあえず、色んな名前があるらしい。

僕なりにこう理解した

プロジェクションマッピングとは、2面以上の投影対象に投影を行う技法である。非現実的で、なんかたのしいやつをプロジェクションマッピングと呼ぶ。そんでもって、投影対象が2面以上あるので、それをマッピング(割り当て)なくてはいかんので、そういう技術が必要

…なんだ、簡単そうじゃないか!

僕が考えたプランはざっくり言うと、こんな感じでした。

  1. プロジェクターのサイズを1024*768だとして、同じ解像度・同じ画角の写真を取る。
  2. プロジェクターをサブディスプレイとして使う。(ミラーリングしない)
  3. そこでサブディスプレイでQuickTimeで全画面表示にしたときに合わせた時のピクセルの点をつないだ面ごとにPhotoshopでレイヤーを作って、Motionに読み込ませる。
  4. そこからプロジェクターを動かさずに、そのレイヤーを作業用レイヤーとして使って動画をつくる。
  5. 再生ボタンを押す。
  6. おしまい。

実際にやってみましたが、、

僕は浅はかな大ばか者でした。
まず、同じ解像度で同じ画角の写真を撮ることができませんでした。どうしてもズれてしまいます。プロジェクターのレンズの画角は、そのプロジェクター(EPSON)の公式サイトを調べればわかるのでしょうが、自動補正などをするので意味をなさなくなってしまうのです。そして、画角が同じカメラのレンズを持っている保証もありません。すなわち画角など、調べる気もおきない。
そこで思いついたのは、実際に投影物に映しながらPhotoshopで実物をトレースするようにマッピングしてレイヤーをつくる作業でした。実際にやるには、地獄のような作業でした。

  • 100%表示にしなくてはならない。
  • 対象面が多面体なので、自分が何を触ってるのかわからなくなる
  • Fを押してフルスクリーンにしても、上にメニューバーが出ているし、そもそも画面がロックできないから、ペンツールなんて使えない

どう考えても、プロジェクションマッピング用のmacのアプリが必要な気がしてきました。

GrandVJ(お試し版)導入します。要は無料でプロジェクションマッピングごっこが出来ます!ひゃっほーーーーー!

grandVJ
ググってみたところ、VJの人が使うアプリ GrandVJの最新verがあれば、プロジェクションマッピングが出来るっぽいです。試用版もあるので、GrandVJを使ってみることにしました。
基本的には英語だらけです。ただ、デブで素人な僕にも扱いやすくできています。ただ、明らかに全ての機能を使えてはいませんが、僕のわかる範囲で説明します。正しい使い方をご存知の方、コメント欄とかで教えてもらえるとすっごい嬉しいです。
一応、僕のわかる範囲でとりあえずプロジェクションマッピングっぽいことができるまでのやり方を説明しておきますと

GrandVJ XTの使い方(プロジェクションマッピング用暫定版)

GrandVJをインストールし、GrandVJを立ち上げます。(1/14)

ここから試用版がダウンロード可能です。
インストールは、各々うまいことやってください。インストールが完了したら、色んなアプリが入りますが、GrandVJを立ち上げます。
青色に白でvjと書かれたアイコンのそれをクリックして立ち上げて下さい。

一番下の GrandVJ XT のデモモードを使ってみます。(2/14)

p-1
一番下のを選んで下さい。これがプロジェクションマッピングの出来る、GrandVJ XTの試用版です。
そんでアプリが立ち上がったら、そのまま、NEWを押して下さい。
p-2

マッピングテンプレートとかいうやつを適当に決定します。(3/14)

この辺は正直よく意味がわかりませんので、適当にEnter連打です。
p-3

demo用の操作画面に変えます(4/14)

p-4
さっきEnter連打して選んじゃったけど、何か不都合があるといけないので、demo用っぽい何かがあるのかわかりませんが、とりあえずこんな感じで選んでみました。
あと、意味はよくわかりませんが、上メニューの “View”を MixerMode とSynthModeと切り替えると、なんかモードが変わります。

左上のGrandVJ内のPreferencesの中のDisplayをVideoMapper modeに変更します。(5/14)

ここが一番わかりにくいところでした。
GrandVJ内の環境設定(Preferences)を開いて、Displayのモードを変更します。
p-5
すると、VideoMapperというアプリが立ち上がります。

VideoMapperでSurfaceをつくるよ!(6/14)

この時点でプロジェクターをセットして、投影したいものに光を当てて、Surface面を切り取っていきます。
p-6

外部ディスプレイ(プロジェクター)側にマッピングしていく(7/14)

MainディスプレイとA1・A2となっているものは、たぶんmacの認識している外部ディスプレイです。これに合うようにディスプレイをキレイに縁っていきます。
p-7

surfaceを追加して、なんとなく縁取っていきます。(8/14)

p-8
四角形と三角形を追加して、なんとなく、Surfaceを追加していきましょう。

フルスクリーンにしてチェックしながら。(9/14)

VideoMapper側で、command+Fを押して、ちょくちょくフルスクリーン表示でチェックしながら縁取っていきましょう。キレイに面を作れば作るほど、あとで感動しまっせ

面を更に微調整(10/14)

p-10
Edit Grid というやつにチェックをいれると、角が細かく調整できます。これでSurface(投射面)を区分けして書き出しましょう。

Surface最終確認(11/14)

command+Fできちんと映したい面ごとにsurfaceができたらOKです。もうプロジェクターを触ってはいけません。
そこまでできたら、VideoMapperは閉じずに、GrandVJに戻ってきましょう。

GrandVJをMixerModeに(12/14)

MixerModeじゃない場合は、上部Viewの中から、MixerModeに変更します。

各レイヤーにアニメーションとかをあてていく(13/14)

一番右の8つあるのがレイヤーです。今、この図では、Surface1に 青に黄色のアニメーション、Surface9では黒に灰色のアニメーション 全てのSurfaceに3色の水玉が表示されています。
p-13
それぞれ、1〜8のレイヤーをクリックして、上部写真にあるピンクの丸で囲まれたボタンをクリックすると それぞれのレイヤーとSurfaceが紐付けれるようになります。
Surfaceに色々なアニメーションや画像を指定したら、VideoMapperに戻ってきます。
(※ちなみに MacのFaceTimeHDカメラや、iTunesに入っている動画などを流すこともできます。)

さあ、プロジェクションマッピング投影だ!(14/14)

p-14
VideoMapperに戻って、この写真のような感じでsurfaceに動画があたってそうな感じになってたらOK。
command+Fを押して、フルスクリーン表示にしたら、出来上がりです!!

ってことで、僕も作ってみました!


・・・思ったより全然おもしろくいかないものです。見てる分には楽しいんですけど、動画にすると楽しさは3分の1くらいに薄れてしまいます。

出来上がったものの・・

このGrandVJというソフトは名前の通り、VJ(Video-Jockey)用のソフト。目の前にオーディエンスがいて、それに合わせて映像を変える人が使うソフトなのかなって感じがしました。音楽の流し方もよくわかりません。もしかしたら流すことができないかもしれません。
このとき、プロジェクションマッピングは大きくわけて2つあるのではないか?とこの時思いましたz。
1つは、VJがやるようなリアルタイム性の高いもの。
もう1つは、再生ボタンを押したら、あとは途中でmacが落ちないことを祈り続けるだけのもの。
前者は、クラブとかライブとかでやるような感じかな?この先どうなるかがわからないから、VJとかPA的な人たちがなんかかっこいい感じに処理する。
後者は、なんか作りこんで、音と共に再生するだけのもの。
僕は後者がやりたいなと思いました。なので、このマッピングデータを使って、Motionで動画を作ることにしました。
要はおもしろい動画を変な面に映し出して楽しくする!って感じのものを作ってみますよ。

長くなってしまったので、続きはこちら

Ad

関連記事

chrome

Chromeアドレスバーに x を押すと落ちるようになった話

Chromeの検索バーに、xから始まる単語を打つと落ちるようになってしまいました。今のところ対策法は

記事を読む

パンチ

昔に書いたランサーズのエントリが今更バズった話&少しだけ後日談

放置してたブログの放置してた記事が気持ち良いくらいにバズりました。はてブ数1000まであと15な

記事を読む

pmhe

デブでもできた!macを使ったプロジェクションマッピングの作り方#2

(前回の記事:デブでもできた!macを使ったプロジェクションマッピングの作り方#1)の続きの記事です

記事を読む

timecapsule

【絶対に真似しないで下さい】比較的手軽に、自分が神様になる方法

インターネットってすごいよなあとはここ15年くらい毎日思ってるんですが、インターネットに情報が永

記事を読む

no image

アダムは泣きましたが、僕はランサーズから世界を救いました。

なんかこんなに反響もらっていいんですか って感じで眺めてます。地雷クライアント、流行語大賞狙って

記事を読む

helloworldagain

blogを続けるための想像以上に簡単なたった6つの秘術を悟ってしまった

ブログとか、ブログ的なものを作っては消し、作っては消し。 まるでメンヘラかまってちゃんがTwi

記事を読む

写真

Starbucks Reserveでノマド気取るどころか貴族になっちまった話

「やっぱ仕事はスタバだと捗りまくるよね★」みたいな信仰を否定するわけでも過信するわけでもない

記事を読む

68452_10152585661748135_1289817422_n

僕が都知事選で家入さんを断固支持する理由

1年半くらい前に講演会の後に、家入さんと飯をご一緒する機会があって、その時に家入さんと色んな話をしま

記事を読む

lancers

ランサーズやってみたけど地雷クライアント案内所にしか見えない

クラウドソーシングサービスなどというサービスにちょっと手を出してみました。結論からいうと、正直あ

記事を読む

sethgodin2011

セス・ゴーディン氏『顧客を愛してます?』俺氏『顧客て何だっけ』

セス・ゴーディン氏の言う『あなたは顧客を愛してますか?』 セス・ゴーディン氏と言えば、『バイラ

記事を読む

Ad

Comment

  1. 通りすがり より:

    おお。意外とカンタンにできそうですね。
    参考になったのでやってみます。

    ちなみに、macは古くても大丈夫ですか?

    • kosuke より:

      古くても大丈夫かはわかりませんが、GrandVJは結構重いソフトです。
      ある程度のスペックは必要でしょう。
      参考になるかわかりませんが僕のmacのスペックは
      2011earlyモデル macbookpro 17 2.3Ghz ci7。メモリは増設したので 16GBです。
      OSは10.9.1。ソフトは全てmarvericksに対応していました。
      プロジェクターはマシンスペックを問わないと思います。(たぶん)
      そして、動画作成もやはり高いスペックが必要となるので、最低でも8GBはあると良い気がします。
      参考になれば幸いです

kosuke にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Ad

PAGE TOP ↑