はいぬっかメモ

キャラクターモデルをVR空間で眺めたい

アバターを使ってZoomミーティングに参加する手順

 

f:id:hinzka:20200402075734p:plain

 
 
アバターとは、ユーザーの分身となって画面に表示されるキャラクターです
Windowsアプリを使ったZoomミーティングで、生身の自分のかわりにアバターを画面に表示させる手順について説明します
 
 

1. 準備

  全体的な流れ

 ①Webカメラを使ってリアルタイムにアバターを操作するソフトウェアを実行
   ↓
 ②映像をOBS(ストリーミング配信ソフト)上に表示
   ↓
 ③映像ソースとしてZoomに流し込む

 

 OBS上に表示している映像がそのままZoomに送られます
 複数のソースを組み合わせることで、さらに背景や字幕を重ねることも可能です

 
 必要なハードウェア
Webカメラおよびマイクが接続されたWindowsPC
  ※スマホ単体でZoomにアバター参加するのはいまのところ難しそう
 

2. アバターの表示

概要

アバター表示用ソフトウェアと、それに対応するモデルデータを用意します
 
アバターを表示・操作するソフトウェアには様々なものがあり、対応するモデルの形式も複数存在します
いずれもOBSを経由させることでZoom上に表示させることができます
 

アバター表示ソフト

Webカメラでユーザーの動きをキャプチャしてリアルタイムにモデルに反映する、簡易的なVtuber支援ソフトです
以下に一部を紹介します
 
・FaceRig(有料)Live2Dモデル対応※モデルはソフトウェアに同梱
  ※FaceRigを使う場合はこの記事ではなく以下を参照してください

qiita.com


 
・Luppet(無料体験版あり)VRMモデル対応

luppet.appspot.com

・3tene(無料版あり)Live2Dモデル・VRMモデル対応

3tene.com

・VMagicMirror(無償版・ブースト版あり)VRMモデル対応

アバターのモデルデータ( VRM形式)

主要な3Dアバター表示用ソフトウェアは、VRMという形式に対応しています
 
VRMのモデルデータは、たとえばVRoid Hubからダウンロードすることができます

f:id:hinzka:20200402124417p:plain

VRoidHubは、ユーザーが作成したキャラクターモデルを他の人と共有するためのサービスです
モデルごとに利用条件やダウンロードの可・不可が設定されており、
「他の人の利用 OK」となっているモデルはダウンロードして利用できます
ただし、ダウンロード可能なモデルでも、アバターとしての利用が制限されているものや、用途により利用不可なもの(商用利用など)、利用時にクレジット表記が必要なものなどがあります ライセンス内容に注意してください

f:id:hinzka:20200402124349p:plainf:id:hinzka:20200402124458p:plain

 
 
BOOTHなどで配布・有償販売されているモデルもあります
VRoid hubと同様に、アバター利用等が明示的に許可されているモデルを探してみましょう
 
 
 
使いたいVRMのキャラクターモデルをダウンロードしておきます
 

アバター表示ソフトの使用例

今回はVMagicMirrorで説明します
 
VMagicMirrorのZipファイルをダウンロードし、解凍してexeファイルを実行します
VRoid hubでダウンロードしたキャラクターのVRMファイルを読み込みます
顔のキャプチャに使うカメラを選択します

f:id:hinzka:20200402010734p:plain

使用するマイクを設定すると口パクしてくれます
視線の動きは マウスを追跡(デフォルト)/Webカメラから判定/固定 の3種から選択
その他、影のオンオフなどをここで設定できます
 
フリーカメラにチェックを入れ、必要に応じてキャラクターの向きを調整できるようにしておきましょう
 
 Webカメラに向かって頭を動かし、モデルの動作をテストします
 自分の動きに従って、画面上のキャラクターが動けばアバターの準備完了です
 
 
 

3. Zoom導入

Zoomアカウントの作成

Zoom公式サイトの「サインアップ」からアカウントを作成

f:id:hinzka:20200402103023p:plain

 

Zoomのインストール

f:id:hinzka:20200402102958p:plain

f:id:hinzka:20200402103014p:plain

 

仮想カメラ対応パッチのインストール

 Zoomの最新版ではカメラデバイスのチェック処理が追加されており、そのままではOBSの映像を表示させることができません
 仮想カメラを使用可能にするため、非公式のパッチを当てます(自己責任でお願いします)
 このページの下のほうにある「 ok_zoomer.zip」をクリックしてダウンロードし解凍
 Zoomが起動していない状態で実行してください
 (起動中だった場合Zoomを再起動するまで有効になりません Zoomを完全に再起動するにはOSの再起動が必要な場合があります)
 
 (最新バージョンの組み合わせでは不要になったようです)
 

4. OBS導入

OBSのインストール

f:id:hinzka:20200402102322p:plain

 Windowsインストーラをダウンロードしてインストール
 
 
OBSの映像ソースに、キャプチャ対象のウインドウ(今回はVMagicMirror)を追加します
ソースの「+」をクリックしてゲームキャプチャを選択します

f:id:hinzka:20200402162811p:plain

 新規作成を選び、新しい映像ソースに名前をつけます(デフォルトは「ゲームキャプチャ」)OKをクリックするとプロパティ画面が開きます

f:id:hinzka:20200402163525p:plain

 モードに「特定のウインドウをキャプチャ」
 ウインドウのメニューからアバター表示ソフトのウインドウ(今回は「VMagicMirror」)を指定します
 ※VMagicMirrorのウインドウは設定画面と表示画面の2つあるので注意
 OBSの画面にアバター表示ソフトの画面が表示されます
 「カーソルをキャプチャ」のチェックは外しておきましょう
 OKで設定画面を閉じます
 
 OBSの画面にきちんとおさまるように、アバター表示ソフトのウインドウをリサイズします
 また、画面内に表示されたアバターの位置を調整します
  OBS側でもキャプチャ対象ウインドウのリサイズや位置調整ができます

 OBS仮想カメラの追加

github.com

f:id:hinzka:20200402102346p:plain

 OBSが起動していない状態でインストールしてください

 

 
 OBSを起動すると、ツールのメニューにVirtualCamが追加されているはずですf:id:hinzka:20200402162657p:plain

 

 OBSのメニューから、ツール > VirtualCam を選択します
 VirtualCamのウインドウが表示されます

f:id:hinzka:20200402163915p:plain

 TargetCameraに「OBS-Camera」が選択されていることを確認して Start をクリックします
 (リストにはOBS-Camera、OBS-Camera2、OBS-Camera3、OBS-Camera4 の4つがあります ここで選択した仮想カメラと同じものをZoomで指定してください)
 VirtualCamのウインドウはバッテンで閉じます
 
 

5. Zoom上にアバター映像を表示

 Zoomを起動します
 右上の歯車マークをクリックし、設定ウインドウを開きます
 設定ウインドウの左のメニューから「ビデオ」を選択します
 カメラのプルダウンメニューから「OBS-Camera」を選びます
 上部のプレビュー画面にアバターの映像が表示されることを確認します
 ※ここで現実側のWebカメラを選択するとリアル側の映像が流れてしまいます
 
 設定ウインドウの仮想背景で任意の背景を選び
 ウインドウ下部の「グリーンスクリーンがあります」にチェックを入れます
 
 映像が表示されない場合、OBSのVirtualCamがStartされているかを確認してください
 
 
 
 
 
 

【BlendShapeBuilder】Unity単体でVRMモデルにほっぺモーフを追加する

iPhoneのFaceIDでフェイストラッキングしたい

・VRoidで作ったうちの子に表情を追加したい

・でもBlenderとかさわったことない…

 

⇒ ほっぺプクー 程度なら、Unityだけでもわりとかんたんに追加できたよ!

  という記事です

 

f:id:hinzka:20200210152742g:plain

 

Blend Shape Builder & Vertex Tweaker
UnityJapan提供のアセット
 
メッシュの頂点を動かしてBlendShapeを追加できるアセットです
 Blenderなどのモデリングツールを使わず、Unity単体でBlendShapeを追加できます
 
今回はこれを使って「ほっぺをふくらます」モーフを追加します
※モデルの改変を伴います ライセンスにご注意ください
 
 
また、そもそもiPhoneのFaceIDに対応させたくてBlendShapeを追加しているので
FaceIDについてもあとで追記します 
 

準備

VRMモデル
 
Unity 今回は2019.3.0f5を使用しました 
 
BlendShapeBuilder
 
UniVRM
 
 
 
Scene上にモデルを配置します

f:id:hinzka:20200210142843p:plain

必要アセットとモデルを配置した状態

Blend Shape Builder

HierarchyからモデルのFaceを選択
メニューの Window>Blend Shape Builder をクリック
BS Builderウインドウが開きます

f:id:hinzka:20200210142946p:plain

BlendShapeBuilderウインドウを開く

f:id:hinzka:20200210143114p:plain

Add BlendShapeBuilder to Face ボタンをクリック
BlendShape追加画面になります

f:id:hinzka:20200210143328p:plain

+ボタンをクリックするとFrameを追加します

これによりFaceメッシュのコピーがScene上に追加されます

f:id:hinzka:20200210143550p:plain

 
コピーされたメッシュを編集して、モーフ変化のターゲットを作っていきます
 ターゲットとなるFrameを複数作成すると(50%のときの形状、100%のときの形状など)変化量に応じた動きを設定することができます
今回は100のターゲットを1つだけ作成します

f:id:hinzka:20200210143437p:plain

該当FrameのEditボタンをクリックすると、VetrexTweakerウインドウが開きます
メッシュの頂点を直接動かし、形状を変化させていきます
 
ところで、メッシュが重なったままではScene上で非常に見づらいです
編集しないメッシュはいったん非表示にしましょう
FaceオブジェクトとHairオブジェクトについて、
InspectorでSkinned Mesh Rendererのチェックを外しておきます
(編集が終わったら戻しましょう!)

f:id:hinzka:20200210143713p:plain

髪オブジェクトはまるごと無効にしてもよいですが、
Faceオブジェクトをまるごと無効にするとコンポーネント(BlendShapeBuilder)にアクセスできなくなるので注意してください
 
 

VetrexTweaker

 
 f:id:hinzka:20200210160933p:plain
 
Move:頂点移動
メッシュの頂点を移動させます
 
Soft Moveがオフの状態では、
頂点の選択方法をSelectオプションで選ぶことができます
Shiftを押しながら連続して選択していくと複数の頂点を選択できます
 
Singleツール    クリックした頂点を選択します
Rect    矩形選択ツール    これとなげなわツールではFront Side Onlyのチェックを外しておくと隠れた頂点も選択されます
Lasso    なげなわツール
Brush    ブラシツール
 
Edge    該当メッシュ全体のメッシュのエッジがすべて選択されます
Hole    選択した頂点を含む連続した面の端部がぐるっと囲むように選択されます
Connected    選択した頂点に連続した面の頂点がすべて選択されます
All    全選択
Clear    選択の全解除
Invert    選択状態の反転
 
☆VetrexTweakerには左右対称に編集できるミラーリングオプションがあります
がVRoidモデルは厳密にシンメトリーではないためエラーになってしまいました
f:id:hinzka:20200210155421p:plain
 
☆また、投影機能を使って
既存のBlendShapeモーフからコピーできないかやってみましたが
目や口元の密集した頂点を正しい頂点に対応させるのはちょっと無理でした…
 
 
 Soft Moveで頬をふくらませます

f:id:hinzka:20200210162048g:plain


今回は、横に広げる+前に出す の2ストローク動かしています
 
さらに、なげなわ選択とScaleツールで口を小さくします
 f:id:hinzka:20200210162016g:plain
 
 
ターゲットメッシュの編集が完了したら、BS Builderウインドウに移動してBlendShapeを作成します

f:id:hinzka:20200210162352p:plain

Update Meshをクリックすると、FaceのBlendShapeに「cheekPuff」が追加されます

f:id:hinzka:20200210161014p:plain

 
確認するために、今度はターゲットメッシュを非表示にして、Faceオブジェクトのメッシュを表示させましょう

 ただし、Faceオブジェクトのインスペクタに追加されたcheekPuffモーフは

スライダーを動かしてもScene上のモデルの表情に反映されません

(他のBlendShapeのスライダは反映される…)
 
BlendShapeAvatarアセットを開きます
表示されるBlendShapeスライダを動かすと、プレビューウインドウのモデル表示に反映されます

f:id:hinzka:20200210162742p:plain

f:id:hinzka:20200210204431p:plain

このように新しいBlendShapeを作成することができました
今回作ったターゲットメッシュは、モーフが完成したら削除してかまいません(他のモーフに流用することもできます) 
 
BlendShapeの追加が完了したら、
非表示にしておいたメッシュを再度表示させてから
VRMを書き出して完成です
 
 
なお、VRMモデルでは、複数のBlendShapeを組み合わせたBlendShapeClipを作成することで
さらに複雑な表情を登録することができます
 LuppetなどのVRM対応アプリで呼び出して使ってみましょう
おつかれさまでした!
 
 
 
 

 FaceID

がんばればフェイストラッキングに必要なモーフをUnityだけでつくることもできなくはない
 
※あとで追記します~~~~
 
iPhoneX以降に搭載されている顔認識技術FaceIDでは、52個のBlendShapeを使って表情をキャプチャします
対応したBlendShapeをモデル側に追加することで、VRMモデルの表情を豊かに動かすことができます
 
FaceIDで3Dモデルの表情を動かすツール3つ
 
52個のうち、8個は視線コントロール用のキーです
VRoidなどのボーンで視線制御するモデルではこちらは使用しません
 
また、VRoidのデフォルトBlendShapeから流用できそうなキーがいくつかあります
eye blink left
eye blink right
jaw open
 
mouth funnel
漏斗状の口
 
mouth pucker
キス顔
 
特殊な表情として、舌を出すもの
tangue out
ボーン入りの舌を追加するにはBlenderなどの他ツールを使う必要があるため
Unity単体で実現する場合はテクスチャの切り替えで出現させるといいかも
 
 
 
BlendShapeの設定では、登録順序や名前が重要になる場合が多いです
Unityデフォルトの機能ではリネームやソートができません
 
 今回の記事で紹介したツール BlendShapeBuilder に含まれる BlendShapeInspectorWindow.cs の改変スクリプトが@flammpfeilさんから
公開されており
こちらに差し替えるとリネーム・順序変更ができるようになります
(やりかた
GitHubのコード表示の右上にある RAW をクリックするとテキストが表示されます
これを全選択してコピー、メモ帳に張り付けてファイル名をBlendShapeInspectorWindow.csにして保存します
Assets\UTJ\BlendShapeBuilder\Editor にあるBlendShapeInspectorWindow.csを削除し、
作成した.csファイルをここにドラッグ&ドロップします)
 
 
VRoidモデルが着てるパーカーはこちらです✨
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

UnityとPhotoshopでふつうに作るAR写真

f:id:hinzka:20191208210250j:plain

作成したAR写真

概要

趣味でカメラを始めたら、使いみちのない写真が毎日増える

キャラクター3Dモデルの背景に使うことで有効活用したい

作例に基づいて作成手順を書きました

 

ふつうにUnityで画像作って ふつうにフォトショで合成してるだけです

 

【当エントリは おきゅたんbot アドベントカレンダー2019 の6日目の記事です】

 

VRすきまガールズ! / おきゅたんbot Advent Calendar 2019

https://adventar.org/calendars/3941 

 

おきゅたんbot VRM

https://hub.vroid.com/characters/8571450162826387711/models/7130334606365861657

 

鹿さんはオノッチさんからお借りしました!

 

 

 

 

f:id:hinzka:20191209002917p:plain

元の画像 アドカレ担当の前日、地元のクリスマスマーケットで撮った写真

作業の流れ

  1. Unityでキャラクターのグリーンバック画像を作成
  2. Lightroomで現実の写真を読み込む
  3. Photoshopでグリーンバック画像と写真を合成
  4. Lightroomで最終調整

 

今回の画像の作業時間は(モデルを用意したりの環境構築を除くと)Unityでのポージングに30分、撮影と微調整を繰り返しながら画像を出力するのに1時間(たのしいので…)、Photoshopでの合成と後工程に1時間 という感じです  慣れるともっと速いよ

 

Unityでグリーンバック画像を作成

Unityはゲームの製作環境ですが今回は静止画を出力するためだけに使います
 
スマホやPC向けに、VRMのキャラクターモデルにポーズをつけてキャプチャできるツールは様々に存在する
つまりこの工程は本来必要ないのですが
 ・おきゅたんにVRoidの服を着せたい
 ・マフラーとか小物も追加したい
 ・髪をマフラーに合わせて整えたい
 ・指とか細かく動かしたい
というきもちで今回はUnityです
 
 
備考 VRMモデルにポージング&背景画像と合成できるツールいろいろ

■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ファイルをUnityで扱うには以下の追加パッケージが必要
UniVRM

 

おきゅたんVRMはVRoidではないため、VRoid用のお洋服をVRoid Studio上で着せることができない

おきゅたんに体型を近づけたVRoidモデルをVRoid Studioで新たに作ります

(まじかる☆ですくとっぷでターゲットモデルを表示させながら調整するとらくちん)

※髪は作らない、ベースヘアー非表示、頭を小さめにする

好きな服を着せてVRM出力

Unityに読み込み、おきゅたんモデルと重ねて配置

VRoidモデルはfaceを非表示に

おきゅたんモデルは首から下を非表示に(テクスチャが頭部と共通の箇所については、テクスチャの該当部分をPhotoshop等で透明化)

同じモーションを再生することで、おきゅたんがVRoid服を着た状態にできる

f:id:hinzka:20191209011506p:plain

重なった状態

f:id:hinzka:20191209011536p:plain

不要なメッシュのチェックを外す




さくまさんのチェック柄ボアコート


ユウヘイさんのタクティカルブーツ

 

アクセサリーを追加する

オブジェクトをモデルの子に配置する

マフラーはneckの子にしています

 

潮だまりさんのマフラー マフラー - 潮だまり - BOOTH

 

手に物を持たせる

中心点が支点からずれていて回転などの位置調整が難しい場合は、補助のCubeを使う
Cubeを作成しサイズを小さくする MeshRendererのチェックを外す
対象のオブジェクトを中に入れてCubeの中での位置を調整する(実際に握る部分がCubeの中心点になるように)
指などにアタッチして角度を調整する
 

くろすけさんの紙袋 てさげぶくろ - くろすけの物置 - BOOTH

 

 

canvasに写真を貼る

写真がカメラに追従するため、カメラアングルを自由に動かして背景との位置を合わせながらポージングが行える

(撮影のときは非表示にすること)

 

接地感を意識すると最終成果物のクオリティが上がる

 

演技をつける

今回はVeryAnimationを使用

Very Animation - Asset Store

 

既存のモーションから改変すると作りやすいかも

無料のモーションがいっぱい入ったアセット(モデルもかっこいいよ)

Taichi Character Pack - Asset Store

 

 

f:id:hinzka:20191209010521g:plain

写真上の位置を確認しながらモーション調整

ポーズだけでも写真は撮れるけど、動かしながら撮るととてもたのしい

 

全身のバランスのとりかたについては篠房六郎せんせいの一連のツイートを指針にしています といいつつもむずかしい~~

 

プロシージャルな演技

手付けアニメーションにスクリプト制御を追加すると簡単にいきいきと動いてくれる

また、ランダム性が生まれるため差分を無限に生成できてお得です

 

・視線追従(VRMのオプション)

  HeadにモデルのHeadを設定

  空(から)のオブジェクトをシーンに追加してTargetに設定

  LateUpdateにしないと動かない

・ランダムまばたき [Unity]BlendShapeBlink - ブレンドシェイプでまばたき

・微細眼球運動 Unityで微細眼球運動っぽい何か · GitHub

・呼吸 スクリプトで呼吸させる - 第2回 | Unity3D - MEBIUSTOSのブログ

・風 VRMに風っぽい効果を与える方法 - Bakulog

 

メッシュ頂点を微調整

Blend Shape Builder & Vertex Tweaker

https://github.com/unity3d-jp/BlendShapeBuilder

 Unity上でメッシュ頂点を直接編集できる

髪をマフラーの中におさめたり、マフラーの形を整えたりしました

 

撮影

自分はたまたま持っているAVPro Movie Captureを使ってキャプチャ出力してますが

Unity提供のUnity Recorderで同じことができるようだ

Unityのメニューから、[Window]>[Package Manager]を開く
[Advanced]>[Show Preview Packages]にチェックを入れるとUnity Recorderがリストに表示されるのでインストール

f:id:hinzka:20191209003602g:plain

Unity Recorder

 連番ファイルを30枚くらいずつ出力しては眺めてかわいいショットを選ぶ

貫通や破綻を見つけたらモーション修正に戻る

 

これ!という絵が撮れたら写真と合成します 

 

 

 

Lightroomで現実の写真を読み込む

最終的な仕上がりをイメージしてざっくり色調整

加工は合成後に行うのでここではあまり細かくさわらない

「他のツールで編集」でPhotoshopに送る(こうすることによりLightroom上でバージョン管理される)

 

Photoshopでグリーンバック画像と写真を合成

グリーンバックを透過

開いた画像にキャラクターのグリーンバック画像を重ねる

グリーンバック画像のグリーンを[選択範囲]>[色域指定]で削除

これがキャラクターのレイヤーになります

 

オクルージョン

写真に写っている現実のオブジェクトでキャラクターの一部が隠れると実在感が上がる

背景レイヤーから、キャラクターより前面にくる部分を選択してコピー・ペーストで新規レイヤーを作成

([編集]>[特殊ペースト]>[同じ位置にペースト]でペーストすると位置がずれない)

このレイヤーと背景レイヤーでキャラクターのレイヤーを挟む

 

背景を加工した場合は加工後の画像に差し替えるのを忘れずに

(加工で境界が不明瞭になるときれいに選択できない あらかじめオクルージョン用のレイヤーを作成しておき、加工後の背景をコピーしてクリップするのがよさそう)

 

ポスタリゼーション

背景写真から情報量を減らしアウトラインをつけてキャラクター画像となじみやすくする

また、画面の中で情報量を保ちたい部分と減らしたい部分をコントロールする

 

今回は中央のクリスマス飾りは残したい、映り込んだ人の姿はぼかしたい

中央エリアを矩形で範囲選択、選択範囲を反転

[選択範囲]>[選択範囲を変更]>[境界をぼかす] でぼかしたい領域の境界をぼかす

[フィルター]>[ぼかし]>[ぼかし(ガウス)] で情報量を減らす

 

[フィルター]<[フィルターギャラリー] でエッジのポスタリゼーション実行

ガウスぼかしされた周辺部分は粗く、中央部分はディテールが残った状態でポスタリゼーションされる

 

※フィルターギャラリーがグレーアウトしている場合

画像ファイルが16bitだとフィルターギャラリーが無効

[イメージ]>[モード]>[8bit/チャンネル]8bitに変換する

 

キャラクターの色調整

[フィルター]>[Camera Rawフィルター]

背景の色温度に合わせる

色が薄くコントラストが低い場合は[かすみの除去]でくっきりさせる

彩度を調整して背景に合わせる

 

f:id:hinzka:20191209011017p:plain

調整前

f:id:hinzka:20191209011024p:plain

調整後

キャラクターに影をつける

キャラクターのレイヤーを複製し、元のレイヤーの上に置く

複製したレイヤーのキャラクター部分を背景色で塗りつぶし、レイヤーの透明度を下げる

レイヤーをずらすと影っぽくなる 適宜回転させたりして調整

クリッピングマスクをかけると本体からはみだした部分が非表示になる

 

拡大するとわかるけどほぼずらしただけです 省エネ

 

f:id:hinzka:20191209014511g:plain

影のオンオフ

背景にキャラクターの影をつける

足元に影を落とすと実在感が上がる

背景にクイックマスクモードの選択ブラシで影領域を作成

マスク解除し、選択部分を反転 調整レイヤーでこの部分を暗くする

今回は[レイヤー]>[新規調整レイヤー]>[トーンカーブ] でカーブを下振れさせています

 

バランス調整

キャラクターにも適宜ガウスぼかし+ポスタリゼーションを行って背景とのバランスをとる

今回は鹿さんの色が背景に埋もれてしまったので、重なった部分の背景を調整レイヤーで明るくして浮き上がらせてみました

 

 

終わったらPhotoshop上で保存

 

Lightroomで最終調整

Photoshop上で保存された画像がLightroom上に表示される

 

仕上げです

白く目立ちすぎるところは補正ブラシで露光を下げる

右上のビルの光、白い看板やスタッフさんの服を暗くする

 

周辺光量補正でまわりを暗くして主題を目立たせる

 

 

Lightroomには多彩なフィルターとプリセットがあるのでいろいろ試してあそぼう

f:id:hinzka:20191209012158g:plain

プリセットいろいろ

Lightroomから最終画像を出力して完成です

スマホのフィルターアプリで追加加工するのもたのしいよ

 

f:id:hinzka:20191209002631g:plain

kirakiraおきゅたん

kirakira+

https://apps.apple.com/jp/app/kirakira/id955687901

 

Adobe Caractor Animator(下書き中)

 
 
フォルダやパーツの名称である程度自動的にタグ付けされる
手動設定しても正しく動かないことがあるので極力命名ルールに従うこと
(口が目などと同階層にありタグを設定しているだけだと切り替えが行われない。Mouthフォルダに入れておく必要がある?条件がフォルダ名なのか階層構造なのか不明)
腕・脚はハンドルと棒ハンドルを手動で設定する
 
(階層構造をあとで貼る)
Frontal
Upward
Downward
Left Quarter
Left Profile
Right Quarter
Right Profile
 
・身体の各パーツはキャラクター自身から考えたときの右左
・ボディの向きは画面から向かっての右左
 例:右向きボディはRightProfile
  顔の向きは画面に相対している顔が常に正面(Frontal)
  キャラクターが主観的に正面を向いているときの顔はRightProfile
(絵がないととても説明しづらい)
 
・顏の向きはHEADフォルダにヘッドターナービヘイビアを追加、各顏にHeadDirectionトリガーを設定することで自動切替
・髪の揺れはサイクルレイヤー 正面のときのみで良い(歩行が止まったときに揺れるので)
 
「リプレー」再利用およびトリガー可能なレコーディング
これでサイクルレイヤーを作ることは可能?(髪を揺らしたい)
 
・口にサイクルレイヤーを追加するとより自然になる(公式サンプル「魔法使い」)
 
 
■肩の動きがおかしい(肩はタグ付け不要??)
・ハンドル位置はパーツの外側でも問題ない
・歩きモーションで、ヒップのハンドルはLegではなくBody側につけること(ポジションがずれまくる)
 腕も同様だが横向きでボディと腕と離れてしまう、調査中
・歩きモーションでボディの位置が下がる
 
ビヘイビアーのトリガーでパーツの出現・消失表現

サイクルレイヤー:アニメーションを追加(髪の揺れ、手を振る、など)
フェーダー:フェードイン、フェードアウト
サイクルの一時停止:アニメーションを停止

スワップセット:パーツの置換

 

 

---イラレのはなし--- 
顔が3つになったあたりからイラレが落ち続けています 作業ファイルを分けないとむり(アートボードに枠を作っておくと位置あわせしやすい)
 
IllustratorからPhotoshopにエクスポートする際、レイヤーネストが6つ以上深いものは一つのレイヤーに統合されてしまう。
    たとえば顏パーツの場合
        ①キャラクターのルート
        ②体の向き
        ③顔
        ④顔の向き
    ですでにネスト5つ目
イラレでパーツごとに作成してフォトショでまとめる必要がある
 
 
ルートに対して、
正面向き 右向き 左向き
の体を配置する 右向きと左向きのポジションが左右対称になるよう注意
(偏っているとハンドルの位置をあわせづらくなり、子パーツの挙動が左右で変わってしまう)
 
 
 
 
前回の記事のあれでお喋りしようという試み そのうちLookingGlassで表示させたいので最終的には3Dにするんですが暫定的に
いまのところこれが(Live2Dと比べても)手軽にリップシンクが動くモデルを作れると思います

HEARTalk用 音声データ作成

 
 
アドカレ11日目です!
 
VocaloidKAITO)とタカハシ君(Cevio)でHEARTalk用の音声セットを作ります。
 
…という内容なのですがすみません間に合いませんでした…枠だけ作ってのちほど追記します~めんぼくない

f:id:hinzka:20171211235541p:plain

WinMR Headset のセットアップとアプリ作成

HP Windows Mixed Reality Headset (開発者版)が届いたので使ってみました。

※日本HPの通販分ではなく、米国の友達に頼んでいたもの

以下セットアップの手順など

 

まだスクリーンショットを貼っただけなので諸々あとで書き足します~~

 f:id:hinzka:20170820233516j:plain

 

外観写真

 軽いしかさばらないし、個人的にはすごく着け心地いいです(たまたま頭の形に合っただけかも)

 箱の外観

f:id:hinzka:20170820233430j:plain

同梱物 本体とケーブル、取り扱い説明書

f:id:hinzka:20170820233600j:plain

f:id:hinzka:20170820233630j:plain

f:id:hinzka:20170820233654j:plain

f:id:hinzka:20170820233725j:plain

後頭部のつまみをカチカチと回すことで絞めたり緩めたりできます。簡単!

f:id:hinzka:20170820233913j:plain

両レンズの間に脱着センサー

f:id:hinzka:20170820233821j:plain

スポンジは面ファスナーマジックテープで固定されています。簡単に交換できそう。(交換部品は販売されてません)

f:id:hinzka:20170820233848j:plain

レンズ部分はフラップ機構になっています。
頭に装着したままでレンズだけカチッと上げることができます。(ただし、上げるとバランスが崩れてヘッドバンドがズレてしまう…)

f:id:hinzka:20170820233931j:plain

上げたところ

f:id:hinzka:20170820233951j:plain

Acerのヘッドセットはベルトがもっとコンパクトですね。

Acer Direct 楽天市場店

 

 

セットアップ手順

DLファイルは Windows Dev Center Installation checklist for immersive headsets を参照

 

USBとHDMIケーブルをPCに接続

f:id:hinzka:20170818172018p:plain

WindowsUpdateを実行

f:id:hinzka:20170818172023p:plain

f:id:hinzka:20170818172029p:plain

f:id:hinzka:20170818172033p:plain

OS再起動後、仮想現実ポータル画面が起動します。

f:id:hinzka:20170818172038p:plain

f:id:hinzka:20170818172044p:plain

開発者モードに設定

f:id:hinzka:20170818172050p:plain

f:id:hinzka:20170818172055p:plain

Windows 10 Creators Updateをインストール

 

もういちど仮想現実ポータルを起動

f:id:hinzka:20170818172100p:plain

f:id:hinzka:20170818172108p:plain

f:id:hinzka:20170818172117p:plain

f:id:hinzka:20170818172126p:plain

f:id:hinzka:20170818172135p:plain

f:id:hinzka:20170818172141p:plain

f:id:hinzka:20170818172149p:plain

f:id:hinzka:20170818172157p:plain

f:id:hinzka:20170818172204p:plain

f:id:hinzka:20170818172213p:plain

 

f:id:hinzka:20170818172219p:plain

f:id:hinzka:20170818172227p:plain

f:id:hinzka:20170818172233p:plain

f:id:hinzka:20170818172241p:plain

f:id:hinzka:20170818172249p:plain

(机の周りが狭かったのでスキップしてしまいました)

f:id:hinzka:20170818172255p:plain

f:id:hinzka:20170818172303p:plain

 仮想現実ポータル(あとで書き足します)

 

 

HMDをつけない状態でストアからHoloTourを選択しても起動しない

f:id:hinzka:20170818172320p:plain

 仮想現実ポータルの内部から起動する必要がある

f:id:hinzka:20170818172330p:plain

でもこの画面から先に進めない…

 

Unityでアプリをつくる

Windows Insider Preview SDK をインストール

DLには上記の開発者モード(Windows Insider program)が有効になっている必要がある

f:id:hinzka:20170818172335p:plain

f:id:hinzka:20170818172338p:plain

 

MS推奨の対応UnityバージョンはUnity 2017.2 Beta4

 

なおMMD4MecanimはUnity 2017.2 Betaに未対応(後日対応予定とのこと)

f:id:hinzka:20170818172342p:plain

(あとで書きたします) 

設定項目

f:id:hinzka:20170818172347p:plain

f:id:hinzka:20170818172351p:plain

HEARTalk UU-001であの子とおしゃべり

HEARTalk™ UU-001

 

 ヤマハ株式会社が開発した自然応答技術の呼称が「HEARTalk™」(ハートーク

これを搭載した基板が『HEARTalk™ UU-001』です。f:id:hinzka:20170627150324j:plain

 体験者が発話する内容の「音律」・「長さ」・「語尾変化(上げ下げ)」を自動的に判断し、対応する音声データを選択して機敏に再生します。

 音源にはwavファイルを使っていて、ユーザーが自由に差し替えることができます。

 

 つまりこれを使うと、任意の「声」ときわめて自然な雰囲気で対話することができてしまうのです。これはヤバイ。

 

 詳しくはこち

www.dtmstation.com

 

 やったことざっくり書いておきます。

①音源作成

 ・wavファイル、モノラル、16ビット
 ・ABCとEFGの6グループそれぞれに1種類以上の音声を用意
 ・冒頭の空白はなるべく削除(応答を機敏にするため)
 ・本体の容量が小さいのと、自然な応答になりにくいので、あまり長い音声はNG

 会話に対して応答する音声を作成。

 自分の声をスマホで録音したり、既存の音源をむにゃむにゃしたり。

 f:id:hinzka:20170627143015p:plain

 mp3データなどはiTunesでwavファイルに変換できます。
 トラックの編集やピッチシフトができるフリーソフトも色々あります。
 

forest.watch.impress.co.jp

 

製品公式アカウントさんからのおすすめ


②音源整理、リネーム

 グループの特性を考慮しながら音源を整理。

 下記のような表を作って埋めていく感じ。
 (音律のことよくわからないので相対的な高低でなんとなく並べました)

f:id:hinzka:20170627140953p:plain
 表に従い、対応するファイル名にリネーム。 例:A05.wav(=Aグループでファの音律)
 ABC、EFGの6グループそれぞれに最低1つファイルがあればとりあえずOK。
 ピッチ変換ソフトで別音階のファイルを作ってもいいかも。

f:id:hinzka:20170627143012p:plain

 

③HEARTalk UU-001に接続

 PCにUSBで接続するとUU-001に電源が入り、PC上に外部記憶装置として表示される。

f:id:hinzka:20170627140959p:plain

 

④デフォルトの音声データを削除
 (新しい音源と古い音源が混ざらないように古いほうは削除しておく)
 公式サイトから"allclr"ファイルをDL。
 これをHEARTalk UU-001のrootにドラッグ&ドロップでコピー(メモリ内の音声データが削除される)

 

⑤音声データを転送

 ④同様、rootにドラッグ&ドロップでコピーすることでデータが書き込まれる。
 (同名のファイルは上書きされる)
 

HEARTalk UU-001のrootにコピーしたファイルはUSBの抜き差しで消えますが、内部のデータはちゃんと書き換わっています。


UU-001をスピーカーにつないで話しかけてみると相槌をうってくれるはず。
こちらの声を認識すると緑のランプが点滅します。

 

ヒミツのくまちゃんに接続

radiolife.com

 ミクミンPさんの真似をして買ってみました。ぬいぐるみ型トランシーバーユニットです。Amazonで3000円くらいで購入できます(2017年6月現在)。

 ヒミツのくまちゃんには本体に単三電池3本、ハートシーバー側に単四電池3本が別途必要です。また、電池フタを開けるのに小さいドライバーが必要です。

f:id:hinzka:20170627135021j:plain

右の背中にポケットがあり、オーディオミニジャックを差し込むことができます。

f:id:hinzka:20170627134937j:plain

HEARTalk UU-001と接続して電源を入れると、応答の音声がスピーカーから聞こえ、それにあわせてくまちゃんが首ふり動作をします。