趣味と遊びにフォーカスしたブログです
クリエイティブ

アバター×リアル画像を合成できるアプリFumiFumiでアバターを「実体化」させるコツまとめ

こんにちは。なんでもクリエイターのBUSSAN（ぶっさん）です！
僕は日常的にVRアバターで色んな活動をしているのですが、その中でリアルの背景にアバター画像をPhotoshopで合成して、実在感を出したいと思う事が度々ありました。
ただ、その１枚の画像を作るためにわざわざPhotoshopを起動してアバター画像に色んな効果を付けて試行錯誤しながら合成し、数時間かけてやっと書き出す、みたいな事をやっていました…。この作業がわずか10分ほどでできちゃう「FumiFumi」というアプリがリリースされたので早速ダウンロードして遊んでみたところ…思いのほか良い感じに”実体化”が成功し、なんと“ねとらぼ”に引用されるなど…ちょっとした話題になってしまいました。

そこで今回はこの記事で、アバターとリアル画像を良い感じに合成して”実体化”させるコツをまとめてみたいと思います。あくまで僕がやっている個人的な内容ですので参考程度に考えて頂けると嬉しいです。また、”実体化”の度合いは個人の主観によるものです。そして、この合成の感動すべきところは「10分程度の時間でできる」という部分でして、Photoshopやその他ペイントソフトを駆使して数時間かけて行う作業ではない、という事を前提に考慮頂けると嬉しいです。

2022/08/21追記
タイトルサムネに「完成版」と記載されていますが、これはこの記事が公開当時書きかけだったので、記事が完成したよ！という意味で付けており、特にアプリに関係するものではなく、この記事に関係する言葉として記載しています！

もくじ

バーチャルアバター撮影アプリ「FumiFumi」について


FumiFumiはVRM形式のアバターと写真を合成することが出来るアプリです。
VRMアバターのポーズ、表情、ポジション、角度、ライト、影まで、なんとスマホ（iPhone）だけで調整して画像と合成することができます。
詳しい解説はFumiFumiのAppStoreページを参照ください。また、FumiFumiの公式TwitterアカウントがFumiFumiで作られた画像を頻繁にリツイートしてくれていますので、そちらも併せて参照頂けると何となく何ができるアプリかお分かり頂けるかと思います。

FumiFumiのAppStoreページ
FumiFumiの公式Twitterアカウント

 

 

このアプリでどんな画像が作れるのか？

まずはFumiFumiで作った写真を見て頂ければと思います。（実際にTwitterに投稿したものを埋め込みました）

最後の2枚については、Focosという写真加工アプリを追加で使ってみた事例になります。（Lucasさんがオススメされていたものを参考にさせて頂きました！）
※実を言うと数年前に僕自身もFocosのレビュー記事を書いており、そういえば！となりました。

 

アプリを使う前の前提

そもそもですが、FumiFumiを使う前に注意しなければならない前提がありますので、簡単に記載します。

  1. FumiFumiが使えるのはiPhoneだけ
  2. ご自身のVRMアバターを持っている（※無くてもサンプルがあります）

 

FumiFumiはiOSアプリ

まず、FumiFumiはiOSアプリですので、Android端末には対応していない点に注意してください。（今後開発される可能性はありますが、2022年8月現在はiOSのみとなっています）

FumiFumiでアバターが作れるわけではない

FumiFumiはアバターが作れるアプリではありません。（※サンプルアバターでの合成も可能ですが、オリジナルのアバターを作る機能はありません）
オリジナルなアバターはご自身で準備頂く必要があります。また、この記事ではアバターの作り方、VRMアバターへの変換方法、VRMアバターのインポート方法などは全て省略させて頂き、あくまでも「画像加工の方法」のみにフォーカスしたいと思います。

 

FumiFumiをダウンロードし、アバターをiPhoneにインポートすることが出来た！という方を前提とした記事となっておりますので、何卒ご了承頂けますと幸いです。

アバターを”実体化”させるコツ！

では本題の加工のコツについて、僕が行っている方法を書いていきます。あくまでも僕の個人的なやり方となりますので分かりづらい部分もあるかもしれませんが、ご了承頂けると～！

実体化させやすい写真を選ぶ


今回は↑の画像を使います。

実は、実体化させやすい写真にはある程度の条件があります（と勝手に思っています）
箇条書きにすると次の通りです。

 

  1. 光が強く、影がくっきりしている
  2. 光がどこから照らしているか分かりやすい（影の方向がわかりやすい）
  3. 人間のサイズ感がわかりやすい
  4. どこが地面かわかりやすい

今回、上の画像が①～④に当てはまっていたので使ってみる事にしました。
どういうことか少し解説します。

光と影がくっきりしていると良い理由

個人的に、実体感の正体は立体感だと思っています。リアルに存在しないような色使いや形のものだったとしても、光と影の法則さえ守っていればかなり実物に近く見えます。影の存在は、その物体が空間に存在して光を遮っているという証拠になります。
影の方向が分かると良い、というのもそれが理由です。上の画像は丁度真夏の昼下がりに撮った写真で、太陽はほぼ正午の位置にあり、影がくっきり出ている状態です。まさに条件に当てはまっています。

人間のサイズ感がわかりやすい

最初にお伝えすると、アバターが人型である必要はありません！また、人型でないアバターに実体感がない、という事でもありません！ありませんが、人間は人間を基準に実体感を感じやすいと、個人的には思っています。なので、人間のサイズが想像しやすい写真、例えばドアや手すり、自動販売機、自転車、フェンスなど、自分がその場に居たらどれくらいの大きさか、が想像できるものが近くにあるとサイズ感を把握しやすくなります。逆に、何もない地平線だけだと大きさを想像するのが難しくなります。
また、地に足が付いた状態だとより実体を感じやすくなるので、地面がどこかわかる画像が良さそうと思います。上の写真はお店正面にドアがあり、サイズ感が分かりやすいため条件に当てはまっています。

 

では、実際にFumiFumiの画面をお見せしながら説明していきます。

現実にアバターのスケールを合わせる


これはFumiFumiに画像を読み込んだだけの状態です。このままではドアのサイズよりもアバターが大きいので違和感を感じます。


そこで、だいたいこんなもんかな～と思うくらいにサイズ調整します。
ちょっと現実と比べると多少のズレはあるかもしれませんが、それっぽく見えればOKという事で一旦こんな感じにしています。このポーズのままだとちょっと違和感があるので…


お好みのポーズを設定します。上のポーズは「ポーズ」からテンプレートを選び、「手」で右手をピースにしてみました。表情はデフォルトです。（再現できることを示したいので、あえて元画像とは違うポーズにしています）

 

現実の床面の角度とアバターの靴底の角度を合わせる

ごめんなさい。記事の項目を作った後に上の参考画像だと説明できないな～と気づきました。なので別の画像になるのですが…

地面が見えている場合は地面とアバターの靴底の角度を合わせると違和感が減ると思います。アバターの地面に対する角度は右のバーを上下させることで調節できます。
何を基準にどうやって丁度よく角度を合わせるの？？？と聞かれそうですが…
本来だと、パースのの消失点を探し、それを基準に決めるのが良いのだと思います。

消失点とは？
消失点（しょうしつてん 英：vanishing point）とは、透視図法（遠近法）において、視点を通り、描く直線と平行な直線が画面（又はその延長面）と交わる点である。
引用：Wikipedia

しかし、線を引いて消失点を探すのはとても面倒です…そこは…感覚でやってしまっています。この写真だとおそらく消失点は頭の後ろぐらいにあるはずです。（歩道の脇の線をとフェンスの線を伸ばしていくと交差する場所がそれにあたります。）
面倒な時はぐりぐり回して、ここなら丁度いいかな…と思うところで合わせるようにしています。（でも、サイズが合っていれば違和感を感じなくなるポイントは必ず発見できるはずです）

 

写真の影とアバターの影を揃える


すみません、元の参考画像に戻ります。このままだと光と影に違和感があり、まだ実体感が感じられません。そこでまずは影の方向を揃えます。「ライト」から「向き」を選択し、
スライダーを良い感じに動かして写真の影の角度とアバターの影の角度を合わせます。
この写真では左上から右下に向かって斜めに影が入っているので、アバターの影も同じになるようにします。（この時、ライトは左上から右下に向かって照射されるはずで、こうすることで太陽と同じ方向にライトがある事になります）ただ、これだけではまだ違和感があります。

 

写真の影の濃さとアバターの影の濃さを揃える



少し補足のために元画像の解説も貼ります。
写真の影の濃さと、アバターの「体の影の濃さ」を合わせます。こうすることで、同じ強さの光が当たっているように見せる事ができます。この時点でぐっと違和感が減ったかと思います。

 

光源の色とライトの色を揃える


今回はほぼ変えていないのですが、ライトの色を光源と合わせると違和感がぐっと減ります。太陽光は黄色にすると馴染みやすかったりします。もちろん太陽光源の色は天気と時間で変化します。例えば、夕日はオレンジ～赤に近くなったりするので、夕日が光源の場合はライト色をオレンジにします。


こんな感じです。こうすることでいかにも太陽からの光を浴びているように見えます。
ここまでがFumiFumiでの調整となります。ただ、もうひと手間加える事でさらに写真を良い感じにできます。それは、iPhoneのデフォルトの「編集機能」です。

 

iPhoneの編集機能で色味を整える


iPhoneには、優秀な画像編集機能がデフォルトで備わっています。画像を選択し右上の「編集」から画像にフィルターをかけることができます。今回は「ドラマチック（冷たい）」を選んでみました。そしてフィルター以外に「自動」で各パラメーターを最適化してみました。するとこうなります。


Twitterに投稿したものと若干色味は変わってしまいましたが、これはこれでいいような気もします。今回はiPhoneのデフォルトの編集機能を使いましたが、フィルターを掛ける事ができれば何でもOKです。Instagramのフィルター機能やTwitterのフィルター機能でも良いと思います。
フィルターをかけると、現実とCGという素材の違う２つの絵に、上からうっすらと同一の色を乗せる事になるので、別々の素材が一気に一体感を持つようになる…気がします。イラストで言うと、絵全体に薄めのカラーオーバーレイを乗せる効果と同じです。背景とキャラクターをなじませる時によく使います。

 

 

逆光の場合ってどうしたらいい？

FumiFumiはライトの位置を自由に動かす事ができるので、被写体の後ろに光源がある、いわゆる「逆光」のシチュエーションでの加工も簡単にできます。

逆光（ぎゃっこう）は、撮影において、カメラのレンズが光源の方向、またはそれに近い方向に向けられた状態を言う。引用：Wikipedia

この時の加工のしかたもちょっとしたコツがあります。

被写体の左右斜め後ろに光源がある画像を使う


実体感の演出には、光が当たっている事がわかりやするくする事が必要です。なので、光と影をアバターに両方反映させるのが理想的だと、個人的には感じています。そのため逆光のような被写体が影に覆われている写真はちょっと表現が難しくなります。なので光源を左右どちらかに寄せて、「逆光ぎみ」にすることでアバターに光の当たる部分をつくります。
例えばこんな感じです。


この背景写真は本当は逆光ではない…のですが、ライトを当てて逆光のように見えるようにしています。絵が飾ってある上に光源があるので、そこから光が当たっていることにして、斜め左後ろから光を当てる事で、肩や髪に光を当てています。

 

 

Focosと組み合わせると更に実体感のある仕上がりに！

FumiFumiだけでも充分スゴイのですが、そこからさらに別のアプリで画像を加工すると、もっといい感じに実体感を演出できます。

Focosとは、既に撮影された写真に後から「レンズぼかし」の効果を付けることができるアプリです。なんと画像から被写界深度を分析してフォーカスしたい場所にピントを合わせることが出来るという魔法のようなアプリです。

被写界深度とは：
被写界深度（ひしゃかいしんど、英語:Depth of field(DOF)）とは、写真撮影でピントを合わせた部分の前後のピントが合っているように見える範囲をいう。
引用：Wikipedia

 

フォーカスポイントを変えてみよう

画像の方が分かりやすいと思うので、実際にお見せするとこんな感じです。


今回はこの画像を使って説明します。


アバターにフォーカスを合わせるとこんな感じ。


背景にフォーカスを合わせるとこんな感じです。アバターを前ボケとして使う事ができます。ちなみに、この時に使う画像も「フォーカスが合っている感」を演出しやすい画像とそうでないものがあります。

 

フォーカスが合っている感を演出しやすい写真の選び方

フォーカスが合っている感を演出しやすい写真の条件はずばり、「被写体が大きく写っている」です。FumiFumiの場合だと、「アバターが大きく写っている」写真がそれかと思います。もっと厳密な言い方をすると「被写体がカメラの近くに写っている」写真、となります。では、そうではない写真だとどうなるのかを下に参考例として掲載します。


これは海の写真とアバターを合成したもので、アバターにフォーカスを合わせて海をぼかしたものです。一見良い感じにボケているようにも見えますが…どことなく非現実感というか、ゲーム画面のような印象を受けるかと思います。それはなぜかというと、現実では、焦点距離が長いほどボケやすい＝被写体が近い写真、もしくは背景が遠い写真ほどボケるという光学的な法則があるからです。（こちらのサイトでボケの原理について分かりやすく説明されています）現実では、被写体が遠くにいるのに背景がボケている、という写真はあまり見かけません。（被写体を遠くに置いて背景をさらに更に遠くに置けば撮れはしますが…）

なので、アバターの事を考えるならば「顔が近い写真」などはかなり映えるのではないかと思います。

 

Focosでライトを追加してみよう

実を言うと、Focosはピントを変えるだけでなく、被写界深度が反映されたライティングを行う事も可能だったりします。これがとんでもない機能なので…これも画像で説明します。


Focosのメニューから「ライティング」を選ぶと、なんと複数の光源を、しかも種類別に設置することができます。今回は「電球」を追加してみました。
これを利用するとどんなことができるかというと…例えば逆光だけど手前から別の光が当たっている（スマホの光とか、お店のネオンの光とか）みたいな写真を作る事ができます。


追加したライトは「カラー」から色を変更することもできます。
これを画像として書き出すと…

 


こうなります。どことなく手前から何かの画面の光のようなものが当たっている感が演出できます。もうCGだこれ。応用したらもっとリッチな写真が作れそうです。アプリだけでここおまで出来るのにちょっと感動です。光源が複数あるような屋内の写真にも対応できるかもしれません。

 

 

Typeroopでサクッとテキストアニメーションをつけてみよう


ここまで良い感じの実体感がある写真を産み出せたら、もうちょっとリッチにしたいと思いませんか…？僕は思いました。なので、「Typeroop」というアプリでサクッと文字アニメーションをつけてみました。

このアプリがあれば、イチから作ると動画編集ソフトが必要になるようなアニメーションが、テンプレートから選んでスライダーを動かすだけでできてしまいます。実際に上のTwitterにアップロードした動画は朝、寝起きの15分くらいで作ったものです。

 

 

FumiFumiに課金するとこんな事が出来る（一部のみ紹介）

僕が使っている機能だけ言及させてください。（使えていない事はコメントできないため…）また、これは2022年8月時点のものです。アップデートにより変更となる可能性があります。

画像サイズの変更ができる


デフォルトのままだと画像サイズは固定ですが、課金すると9:16のような縦長や1:1のような正方形などを選ぶことができます。もちろん16:9などYouTubeでお馴染みのサムネサイズも選ぶことが出来ます！これは便利！！！！！

ロゴマークが消せる


デフォルトだと必ず画面右下にFumiFumiのロゴマークが入るようになっていますが、課金するとこのロゴマークが消せます。つまり？気兼ねなくYouTubeの配信サムネイルを作ることだってできちゃいます！PCで作るとちょっと手間になりがちなサムネですが、スマホだけで作る事もできちゃいます。

 

 

皆さんも是非FumiFumiで充実した”リアルバーチャルライフ”を！


リアルとバーチャル、この間には無限とも思える「スキマ」が存在しており、中々同居するのは難しいものです。しかし、このFumiFumiがあれば、そのスキマをぎゅっと縮める事ができます。これはとっても素晴らしい事であり、僕たちのようなV的な存在（あえてVTuberとは書かずにとても広い意味でのVと記載します。）にとってはとても心強いツールになるんじゃないかと思っています。僕らは画面の中でしか存在できない生き物なのですが、実際に生きています。それをCGの世界だけでなく、現実世界の写真に投影することでさらに色濃く表現できるようになるのではと思います。是非有効活用して楽しいリアルバーチャルライフを送っていく事ができたら幸せだなと思います。

FumiFumiのAndroid版が切望されているところ…

「FumiFumi android」でTwitter検索すると、多くの方がandroid版を待っているようです。これについて、開発されるかどうかはiOS版を使っている僕たちがどれだけ盛り上げて話題化できるか、というところが重要だとおもっていまして…沢山アプリを使い、多くの人に拡散し、広め、知ってもらい、そして多くの「Android版が欲しい！」という声を届けてあげることで、Android版の開発が実現される可能性が高まるのでは…？と思っています。（もし開発予定がなかったらごめんなさい…）ただ、開発予定がもし無かったとしても、大きな話題になることでAndroidアプリエンジニアがチームに参加することになる可能性だってありますし、そうでなかったとしても話題化することは開発者にとって大きなモチベーションに繋がります。なので、現在の僕らに出来る最大の支援は、アプリをたくさん使って画像を投稿し、皆で拡散して多くの人に知ってもらう事だと思います。

 

2023追記！Android版が遂にリリース！

 

ついに！Android版がリリースされました！！！待っていた方が本当にたくさんいらっしゃると思うのでこれはめちゃくちゃ嬉しいですね…！Android搭載のタブレットでの加工もできるようになるので、デバイスの選択肢がグッと広がりました。

 

開発者の青空フミさんとトーク配信しました！

僕が勝手にやっている番組「Vと人」で青空フミさんとトークしました！
Vと人は「バーチャルとリアルのスキマに切り込む」というコンセプトでVRChatからYouTubeにお届けするライブトークセッションです。
開発の経緯やこだわり、今後の展開などもお聞きしました！是非アーカイブを見て頂けると嬉しいです！

 

この記事を書いた人

BUSSAN（ぶっさん）といいます！上のYouTubeの埋め込みの動画を見て貰えると1分でぶっさんが分かるかもしれません。2020年にVRChatと出会い、現在はイラスト・デザイン・写真・動画・ブログなど、物づくりをしながら、Twitterスペースやイベント主催を行っています。つい最近（2022年7月）YouTubeをはじめました！チャンネル登録はしなくていいので、僕の配信、動画など是非見て頂けると嬉しいです！そして面白い事やってんな…と思って頂けた時に是非チャンネル登録やいいねボタンを押して頂けるととても励みになります…また、気軽にTwitterで絡めるので、軽い気持ちでリプやDMを送ってみて頂けると喜びます！

 

▼アバターを持っている人にはこんな記事もオススメです！

VRChatを1年やって自分に起きた変化と学びをまとめてみました※この記事は2021年に書いたものです。 こんにちは。BUSSANです。 僕は2020年の10月頃からVRChatで遊ぶようになり、...
営業だった僕がやっているVRChatでのコミュニケーションの取り方【VRチャット会話術】こんにちは。多趣味人間ぶっさんです。 VRChat（VRチャット）にはまって数カ月、楽しくてあっという間に時間が過ぎてしまいましたが、...
VRChatで女の子になった夫を横で見ていた妻にぶっちゃけどう思ったのか聞いてみたこんにちは。多趣味人間BUSSANです。 僕は2020年の秋ごろからVRChatにめちゃくちゃハマってしまい、今は週に何回かVR空間の...
OculusQuest2の使い心地について写真多めでレビューします！（Eliteストラップもあるよ）こんにちは。多趣味人間BUSSANです。 いよいよOculusQuest2発売！ということで、世界中のレビューサイトやブログで色々なレ...
fumifumi アバター 画像加工
「おうち時間」を快適に！

今、世間的にも世界的にも全人類が、史上最も「家に居る」んじゃないかと思います。
そして多分今後もしばらく家に居そう‥。そう思った僕は家の中の「おうち時間」を快適にするために、色んなアイテムを買いました。今回は、インドア派の僕がなぜそれを買ったのか、買った結果どうなったのかを簡単にまとめてみました。
↓の画像クリックで記事に飛びます！

RELATED POST