アバターを使ってZoomミーティングに参加する手順
1. 準備
①Webカメラを使ってリアルタイムにアバターを操作するソフトウェアを実行
↓
②映像をOBS(ストリーミング配信ソフト)上に表示
↓
③映像ソースとしてZoomに流し込む
OBS上に表示している映像がそのままZoomに送られます
複数のソースを組み合わせることで、さらに背景や字幕を重ねることも可能です
2. アバターの表示
概要
アバター表示ソフト
アバターのモデルデータ( VRM形式)
アバター表示ソフトの使用例
3. Zoom導入
Zoomアカウントの作成
Zoomのインストール
仮想カメラ対応パッチのインストール
4. OBS導入
OBSのインストール
5. Zoom上にアバター映像を表示
【BlendShapeBuilder】Unity単体でVRMモデルにほっぺモーフを追加する
準備
Blend Shape Builder
+ボタンをクリックするとFrameを追加します
これによりFaceメッシュのコピーがScene上に追加されます
VetrexTweaker
今回は、横に広げる+前に出す の2ストローク動かしています
ただし、Faceオブジェクトのインスペクタに追加されたcheekPuffモーフは
スライダーを動かしてもScene上のモデルの表情に反映されません
FaceID
公開されており
UnityとPhotoshopでふつうに作るAR写真
概要
趣味でカメラを始めたら、使いみちのない写真が毎日増える
キャラクター3Dモデルの背景に使うことで有効活用したい
作例に基づいて作成手順を書きました
ふつうにUnityで画像作って ふつうにフォトショで合成してるだけです
【当エントリは おきゅたんbot アドベントカレンダー2019 の6日目の記事です】
VRすきまガールズ! / おきゅたんbot Advent Calendar 2019
https://adventar.org/calendars/3941
https://hub.vroid.com/characters/8571450162826387711/models/7130334606365861657
鹿さんはオノッチさんからお借りしました!
作業の流れ
今回の画像の作業時間は(モデルを用意したりの環境構築を除くと)Unityでのポージングに30分、撮影と微調整を繰り返しながら画像を出力するのに1時間(たのしいので…)、Photoshopでの合成と後工程に1時間 という感じです 慣れるともっと速いよ
Unityでグリーンバック画像を作成
■PC用
・まじかる☆ですくとっぷ (テスト版)v0.15 #MagicalDesktop #VRoid #VRoidHub - BOOTH
・VRMお人形遊びPC版 - 120byte - BOOTH
■スマホアプリ
・VPocket
Google Play:http://play.google.com/store/apps/details?id=com.BooApps.VPocket
App Store:http://itunes.apple.com/jp/app/vpocket-vrm-viewer/id1426245522?mt=8
・Vismuth Model Uploader - Vismuth Model Uploader
・BNUT - Vスタンプ (App Store, Google Play)
キャラクターを配置する
おきゅたんVRMはVRoidではないため、VRoid用のお洋服をVRoid Studio上で着せることができない
おきゅたんに体型を近づけたVRoidモデルをVRoid Studioで新たに作ります
(まじかる☆ですくとっぷでターゲットモデルを表示させながら調整するとらくちん)
※髪は作らない、ベースヘアー非表示、頭を小さめにする
好きな服を着せてVRM出力
Unityに読み込み、おきゅたんモデルと重ねて配置
VRoidモデルはfaceを非表示に
おきゅたんモデルは首から下を非表示に(テクスチャが頭部と共通の箇所については、テクスチャの該当部分をPhotoshop等で透明化)
同じモーションを再生することで、おきゅたんがVRoid服を着た状態にできる
さくまさんのチェック柄ボアコート
Saku*saku チェック柄ボアコート | 蒼空の下の市場 https://t.co/sxjnCRuVVN #booth_pm #VRoid
— さくまさん/クラウドファウンディング「こうしす!EE」 (@sakuman45) 2019年11月30日
ユウヘイさんのタクティカルブーツ
NEW RELEASE!
— ユウヘイ|YUHEI (@yuhei_info) 2019年11月15日
TACTICAL BOOTS | YUHEI
🛍️ https://t.co/Z9IoJVxVJm
ショート丈(バッシュ)/ミドル丈/ロング丈
黒/白/グレー/カーキ/ベージュの5色+各色ソール2色
全30パターンです!!!#VRoid #VRoid用テクスチャ pic.twitter.com/1H4nu4FStJ
アクセサリーを追加する
オブジェクトをモデルの子に配置する
マフラーはneckの子にしています
潮だまりさんのマフラー マフラー - 潮だまり - BOOTH
手に物を持たせる
くろすけさんの紙袋 てさげぶくろ - くろすけの物置 - BOOTH
canvasに写真を貼る
写真がカメラに追従するため、カメラアングルを自由に動かして背景との位置を合わせながらポージングが行える
(撮影のときは非表示にすること)
接地感を意識すると最終成果物のクオリティが上がる
演技をつける
今回はVeryAnimationを使用
既存のモーションから改変すると作りやすいかも
無料のモーションがいっぱい入ったアセット(モデルもかっこいいよ)
Taichi Character Pack - Asset Store
ポーズだけでも写真は撮れるけど、動かしながら撮るととてもたのしい
全身のバランスのとりかたについては篠房六郎せんせいの一連のツイートを指針にしています といいつつもむずかしい~~
11月24日のコミティアでこーいう本を出します。内容は一部抜粋、首の稼働について① pic.twitter.com/AV5qU8ippT
— 篠房六郎 (@sino6) 2019年11月17日
プロシージャルな演技
手付けアニメーションにスクリプト制御を追加すると簡単にいきいきと動いてくれる
また、ランダム性が生まれるため差分を無限に生成できてお得です
・視線追従(VRMのオプション)
HeadにモデルのHeadを設定
空(から)のオブジェクトをシーンに追加してTargetに設定
LateUpdateにしないと動かない
・ランダムまばたき [Unity]BlendShapeBlink - ブレンドシェイプでまばたき
・微細眼球運動 Unityで微細眼球運動っぽい何か · GitHub
・呼吸 スクリプトで呼吸させる - 第2回 | Unity3D - MEBIUSTOSのブログ
メッシュ頂点を微調整
Blend Shape Builder & Vertex Tweaker
https://github.com/unity3d-jp/BlendShapeBuilder
Unity上でメッシュ頂点を直接編集できる
髪をマフラーの中におさめたり、マフラーの形を整えたりしました
撮影
自分はたまたま持っているAVPro Movie Captureを使ってキャプチャ出力してますが
Unity提供のUnity Recorderで同じことができるようだ
連番ファイルを30枚くらいずつ出力しては眺めてかわいいショットを選ぶ
貫通や破綻を見つけたらモーション修正に戻る
これ!という絵が撮れたら写真と合成します
Lightroomで現実の写真を読み込む
最終的な仕上がりをイメージしてざっくり色調整
加工は合成後に行うのでここではあまり細かくさわらない
「他のツールで編集」でPhotoshopに送る(こうすることによりLightroom上でバージョン管理される)
Photoshopでグリーンバック画像と写真を合成
グリーンバックを透過
開いた画像にキャラクターのグリーンバック画像を重ねる
グリーンバック画像のグリーンを[選択範囲]>[色域指定]で削除
これがキャラクターのレイヤーになります
オクルージョン
写真に写っている現実のオブジェクトでキャラクターの一部が隠れると実在感が上がる
背景レイヤーから、キャラクターより前面にくる部分を選択してコピー・ペーストで新規レイヤーを作成
([編集]>[特殊ペースト]>[同じ位置にペースト]でペーストすると位置がずれない)
このレイヤーと背景レイヤーでキャラクターのレイヤーを挟む
背景を加工した場合は加工後の画像に差し替えるのを忘れずに
(加工で境界が不明瞭になるときれいに選択できない あらかじめオクルージョン用のレイヤーを作成しておき、加工後の背景をコピーしてクリップするのがよさそう)
ポスタリゼーション
背景写真から情報量を減らしアウトラインをつけてキャラクター画像となじみやすくする
また、画面の中で情報量を保ちたい部分と減らしたい部分をコントロールする
今回は中央のクリスマス飾りは残したい、映り込んだ人の姿はぼかしたい
中央エリアを矩形で範囲選択、選択範囲を反転
[選択範囲]>[選択範囲を変更]>[境界をぼかす] でぼかしたい領域の境界をぼかす
[フィルター]>[ぼかし]>[ぼかし(ガウス)] で情報量を減らす
[フィルター]<[フィルターギャラリー] でエッジのポスタリゼーション実行
ガウスぼかしされた周辺部分は粗く、中央部分はディテールが残った状態でポスタリゼーションされる
※フィルターギャラリーがグレーアウトしている場合
画像ファイルが16bitだとフィルターギャラリーが無効
[イメージ]>[モード]>[8bit/チャンネル]8bitに変換する
キャラクターの色調整
[フィルター]>[Camera Rawフィルター]
背景の色温度に合わせる
色が薄くコントラストが低い場合は[かすみの除去]でくっきりさせる
彩度を調整して背景に合わせる
キャラクターに影をつける
キャラクターのレイヤーを複製し、元のレイヤーの上に置く
複製したレイヤーのキャラクター部分を背景色で塗りつぶし、レイヤーの透明度を下げる
レイヤーをずらすと影っぽくなる 適宜回転させたりして調整
クリッピングマスクをかけると本体からはみだした部分が非表示になる
拡大するとわかるけどほぼずらしただけです 省エネ
背景にキャラクターの影をつける
足元に影を落とすと実在感が上がる
背景にクイックマスクモードの選択ブラシで影領域を作成
マスク解除し、選択部分を反転 調整レイヤーでこの部分を暗くする
今回は[レイヤー]>[新規調整レイヤー]>[トーンカーブ] でカーブを下振れさせています
バランス調整
キャラクターにも適宜ガウスぼかし+ポスタリゼーションを行って背景とのバランスをとる
今回は鹿さんの色が背景に埋もれてしまったので、重なった部分の背景を調整レイヤーで明るくして浮き上がらせてみました
終わったらPhotoshop上で保存
Lightroomで最終調整
Photoshop上で保存された画像がLightroom上に表示される
仕上げです
白く目立ちすぎるところは補正ブラシで露光を下げる
右上のビルの光、白い看板やスタッフさんの服を暗くする
周辺光量補正でまわりを暗くして主題を目立たせる
Lightroomには多彩なフィルターとプリセットがあるのでいろいろ試してあそぼう
Lightroomから最終画像を出力して完成です
スマホのフィルターアプリで追加加工するのもたのしいよ
kirakira+
https://apps.apple.com/jp/app/kirakira/id955687901
Adobe Caractor Animator(下書き中)
サイクルレイヤー:アニメーションを追加(髪の揺れ、手を振る、など)
フェーダー:フェードイン、フェードアウト
サイクルの一時停止:アニメーションを停止
スワップセット:パーツの置換
WinMR Headset のセットアップとアプリ作成
HP Windows Mixed Reality Headset (開発者版)が届いたので使ってみました。
※日本HPの通販分ではなく、米国の友達に頼んでいたもの
以下セットアップの手順など
まだスクリーンショットを貼っただけなので諸々あとで書き足します~~
外観写真
軽いしかさばらないし、個人的にはすごく着け心地いいです(たまたま頭の形に合っただけかも)
箱の外観
同梱物 本体とケーブル、取り扱い説明書
後頭部のつまみをカチカチと回すことで絞めたり緩めたりできます。簡単!
両レンズの間に脱着センサー
スポンジは面ファスナーマジックテープで固定されています。簡単に交換できそう。(交換部品は販売されてません)
レンズ部分はフラップ機構になっています。
頭に装着したままでレンズだけカチッと上げることができます。(ただし、上げるとバランスが崩れてヘッドバンドがズレてしまう…)
上げたところ
Acerのヘッドセットはベルトがもっとコンパクトですね。
セットアップ手順
DLファイルは Windows Dev Center Installation checklist for immersive headsets を参照
USBとHDMIケーブルをPCに接続
WindowsUpdateを実行
OS再起動後、仮想現実ポータル画面が起動します。
開発者モードに設定
Windows 10 Creators Updateをインストール
もういちど仮想現実ポータルを起動
(机の周りが狭かったのでスキップしてしまいました)
仮想現実ポータル(あとで書き足します)
HMDをつけない状態でストアからHoloTourを選択しても起動しない
仮想現実ポータルの内部から起動する必要がある
でもこの画面から先に進めない…
Unityでアプリをつくる
Windows Insider Preview SDK をインストール
DLには上記の開発者モード(Windows Insider program)が有効になっている必要がある
MS推奨の対応UnityバージョンはUnity 2017.2 Beta4
なおMMD4MecanimはUnity 2017.2 Betaに未対応(後日対応予定とのこと)
(あとで書きたします)
設定項目
HEARTalk UU-001であの子とおしゃべり
HEARTalk™ UU-001
ふあーーーHEARtalkめっちゃたのしいです!!テレル!!(音源については個人的な楽しみのためのあれなのでご容赦ください…) pic.twitter.com/cQf1YGfhiF
— はいぬっか (@hinzka) 2017年6月21日
ヤマハ株式会社が開発した自然応答技術の呼称が「HEARTalk™」(ハートーク)
これを搭載した基板が『HEARTalk™ UU-001』です。
体験者が発話する内容の「音律」・「長さ」・「語尾変化(上げ下げ)」を自動的に判断し、対応する音声データを選択して機敏に再生します。
音源にはwavファイルを使っていて、ユーザーが自由に差し替えることができます。
つまりこれを使うと、任意の「声」ときわめて自然な雰囲気で対話することができてしまうのです。これはヤバイ。
詳しくはこちら
やったことざっくり書いておきます。
①音源作成
・wavファイル、モノラル、16ビット
・ABCとEFGの6グループそれぞれに1種類以上の音声を用意
・冒頭の空白はなるべく削除(応答を機敏にするため)
・本体の容量が小さいのと、自然な応答になりにくいので、あまり長い音声はNG
会話に対して応答する音声を作成。
自分の声をスマホで録音したり、既存の音源をむにゃむにゃしたり。
mp3データなどはiTunesでwavファイルに変換できます。
トラックの編集やピッチシフトができるフリーソフトも色々あります。
製品公式アカウントさんからのおすすめ
https://t.co/vPXhbUBZtw
— HEARTalk UU-001 (@HEARTalk_UU001) 2017年6月27日
vocalshifterを使ってみてください。
無料版でかなりのことができます。
よく分からない音程の問題も解決するかも。
②音源整理、リネーム
グループの特性を考慮しながら音源を整理。
下記のような表を作って埋めていく感じ。
(音律のことよくわからないので相対的な高低でなんとなく並べました)
表に従い、対応するファイル名にリネーム。 例:A05.wav(=Aグループでファの音律)
ABC、EFGの6グループそれぞれに最低1つファイルがあればとりあえずOK。
ピッチ変換ソフトで別音階のファイルを作ってもいいかも。
③HEARTalk UU-001に接続
PCにUSBで接続するとUU-001に電源が入り、PC上に外部記憶装置として表示される。
④デフォルトの音声データを削除
(新しい音源と古い音源が混ざらないように古いほうは削除しておく)
公式サイトから"allclr"ファイルをDL。
これをHEARTalk UU-001のrootにドラッグ&ドロップでコピー(メモリ内の音声データが削除される)
⑤音声データを転送
④同様、rootにドラッグ&ドロップでコピーすることでデータが書き込まれる。
(同名のファイルは上書きされる)
HEARTalk UU-001のrootにコピーしたファイルはUSBの抜き差しで消えますが、内部のデータはちゃんと書き換わっています。
UU-001をスピーカーにつないで話しかけてみると相槌をうってくれるはず。
こちらの声を認識すると緑のランプが点滅します。
ヒミツのくまちゃんに接続
HEARTalk が届いたので、ヒミツのクマちゃんにつないでみました。音声は東北きりたんです。コミュ障なので何を話しかけたら良いかよくわからない、、、。 #HTUU-001 pic.twitter.com/oRiVbH1INv
— ミクミンP/Kazuhiro Sasao (@ksasao) 2017年6月13日
ミクミンPさんの真似をして買ってみました。ぬいぐるみ型トランシーバーユニットです。Amazonで3000円くらいで購入できます(2017年6月現在)。
ヒミツのくまちゃんには本体に単三電池3本、ハートシーバー側に単四電池3本が別途必要です。また、電池フタを開けるのに小さいドライバーが必要です。
右の背中にポケットがあり、オーディオミニジャックを差し込むことができます。
HEARTalk UU-001と接続して電源を入れると、応答の音声がスピーカーから聞こえ、それにあわせてくまちゃんが首ふり動作をします。