cluster.しつつYouTubeLive配信をMacで
林檎教のためウチにはMacしかない!という方が、VRルーム「cluster.」をしつつYouTubeLive配信する方法です。
司会と配信をワンオペで行います。ただし、司会のみWindowsマシンを使っています。司会さえ必要なければ、Macのみでcluster.+配信が可能です。
ただMacはビデオカードが弱いのか、iMac5KでもYouTube側の設定をしないと約10秒前後の遅延が起こります。
なので20.の遅延対策を必ず行います。最悪OBSでは音が出てるけど、YouTubeLive本体のほうで音が出てない・・・という現象が起こります。対策をすれば、遅延は2秒程度で済みます。
実際の配信画面はこんな感じ。
まず準備として、下記が必要です。
■インストールなど
1.「OBS」「SoundFlower」「LadioCast」をダウンロード&インストール
github.com
2.LadioCastを下記のような設定にする。設定するのは入力1.2と出力2つのみ
3.「アプリケーション」→「ユーティリティ」→「Audio MIDI設定」で「+」ボタンを押す
4.「複数出力装置」を選び、下記のようにする
5.「システム環境設定」→「サウンド」→「出力」を選択し、「複数出力装置」をクリックする
■YouTuveLiveのチャンネルを有効にする
6.下記のURLに従い、チャンネルを有効にして配信ができるようにする
support.google.com
■テロップ等を作っておく
7.Illustratorを立ち上げ、「ファイル」メニュー→「新規」→「フィルムとビデオ」→「HDV720」を選択
8.7.のサイズでテロップを作り、PNG形式で書き出す
さて、配信の準備をしていきます。
今回のシステム構成は下記のようになっています。司会さえ必要なければ、Macのみでcluster.と配信両方行うことが可能です。
■配信用アカウント
●配信用cluster.アカウント設定
・マシンはiMac5K2014、MacOS10.12.6
・VRM形式の配信用アバター(自作)を使用
・通常のゲスト登壇者、またはルーム製作者どちらでもOK。ただ配信専用アカウントを作ることが必要
・配信用アバターの視点がそのままYouTubeLiveの配信画面になる
・配信用アバターの聞こえている音がYouTubeLiveの配信用の音になる
・配信用アカウントは基本しゃべらない
●YouTubeLive(OBS)
・「画面キャプチャ」で配信用アバターの視点が配信画面になる
・BGMはQuickTimeを再生
・マイクは使わないので、レベルをいちばん下げておく
・SoundFlowerとLadioCastでPCに流れている音を配信用の音とする
・GoogleChormeまたはFirefoxでYouTubeにチャンネルを作っておき、コメント確認用に配信当日も立ち上げておく
・YouTubeLiveの公開範囲はテストのときは「限定公開」、本番は「公開」にしておく
■司会用cluster.アカウント
●VRM形式自作アバター
・マシンはWindows(配信用マシンとは別)
・VRM形式の配信用アバター(自作)を使用
・マイクを接続する
・司会の音声が配信用アカウントから聞こえる
・通常のゲスト登壇者、またはルーム製作者アカウント(どちらでもOK)
■配信確認用マシン
・MacbookAir
・Webプラウザで配信用アドレスにアクセスする
・YouTubeLiveの配信用アドレスにアクセスし、ちゃんと映像と音が配信されているか確認する
■OBSの設定をする
9.配信に使用したいGoogleアカウント&チャンネルを選択し、下記の「ライブダッシュボード」にアクセスする
www.youtube.com
10.「エンコーダの設定」のところにある「ストリーム名 / キー 」をコピーする
11.OBSを立ち上げ、「設定」をクリックして下記のようにする
・一般 そのままでOK
・配信 「ストリームキー」に10.でコピーしたキーを入れる
・出力 下記のようにする
・音声 下記のようにする
・映像 下記のようにする
・ホットキー テロップなどがポン出しできるようになるので、できるだけ設定しておくと吉
・詳細設定 そのままでOK
12.ソースにテロップを設定して、位置合わせする。このとき、
・「Altキー」を押しながら範囲を決定→表示範囲を決める
・マウスをドラッグする→表示範囲はそのままで、拡大縮小をする
13.「ソース」に「画面キャプチャ」を追加する
※ここで「ウィンドウキャプチャ」にすると音声が入らないので注意!
14.「プロファイル」メニュー→「新規」で、念のため設定を保存しておく
15.一度OBSを終了させる
■cluster.を立ち上げて操作する
アプリを立ち上げる順番は、ルーム作成者さんから教えられているルームアドレスにアクセスし、cluster.のWebから入室する→OBSを立ち上げるという順で行う
16.ルーム作成者さんから教えられているルームアドレスにアクセスし、cluster.のWebから入室する
17.自動的にcluster.アプリが立ち上がるので、スライドと登壇者さんが入る位置に移動する
■OBSを立ち上げて、配信ができているか確認する
18.OBSとFirefox(GoogleChorme)を立ち上げる
19.YouTubeLiveの「ライブダッシュボード」→「今すぐ配信」を選ぶ
20.「ストリームオブション」を下記のような設定にする(遅延対策)
※これをやらない状態だと、約10秒ほどの遅延が出ました
21.OBSの「配信開始」をクリックして配信をスタートする
※ホットキーを使うときは、他のウィンドウをアクティブにする度にOBSのウィンドウの配信画面部分を一度クリックする
■「配信確認用マシン」で配信されてるか確認する
22.「配信用マシン」「司会用マシン」とは別に1台用意する。スマホやタブレットでもOK
23.YouTubeLiveの「ライブダッシュボード」の右下にある「共有」に書かれているアドレスを「配信確認用マシン」に送る
24.ちゃんと配信されているか確認する
■配信終了後の音の設定
25.「システム環境設定」→「サウンド」で、普段使用している設定にする。次配信するときは「複数出力装置」を選べばOK
cluster.で自作モデルを使用する(VRM・複数のテクスチャ&マテリアルあり簡易設定版編2)※MacもOK+Unity使ったことない方も
どうもFBX形式で読み込むと、Unityはテクスチャとマテリアルを自動的に同期してくれないようです。
前回ではマテリアル1つ+テクスチャ1つの例でしたが、今回はマテリアル複数+テクスチャ複数の場合のやり方です。
※マテリアル1つ+テクスチャ1つの場合でも、こちらでやったほうが良いかもしれません
※マテリアル1つ+テクスチャ1枚のときと、順番が変わっています。ご注意ください
※下記はMac版Unity2018を使っています。開発環境「Unity」を使用しますので、お持ちでない方は公式サイトからダウンロード&インストールしてください。
store.unity.com
VRルーム「cluster.」で自作アバターを使用する際に、Unityでのセットアップが必要になります。
Unityを使ったことのない方でも使用できるよう、アップロード方法を羅列しておきました。ほぼ身内向けですが、よろしければご参照ください。
モデルの読み込みは下記を参照させて頂きました。
am1tanaka.hatenablog.com
※注意 VRM形式を使ったときのトラブル(2018年6月現在)
・VRMのMToon(アニメ調で表示する)を使うとcluster.でアップロードが失敗する→マテリアルのシェーダをVRM/UnlitTextureにする
→2018年10月現在、VRMとclusterのアップロードで、MToonでも成功するようになりました。確認しているVRMのバージョンは「v0.41」です
・ここでは簡易版のため、口のモーフやスカートの揺れ等は設定していません
・モデルのセットアップを終えていてVRMに書き出すだけという場合は、■VRMのパッケージをインポートして、マテリアルを変更する→12.に進んでください。cluster.の操作方法のリンクもあります
・VRMを書き出し済みでアップロードするだけという場合は、■VRMファイル(アバター)をアップロードする→.37に進んでください。
■モデルを用意する
1.3Dアプリで「.fbx」形式でモデルを書き出す。このときにテクスチャをfbxファイルと同じファイル階層に置くこと(テクスチャ作成時から注意しておく)
2.Unityを立ち上げ、プロジェクトファイルを作成する
3.「Assets」を右クリックして、「Create」を→「Folder」を選択してフォルダを作る
4.「New Folder」の名前を「Textures」にする
5.「Textures」フォルダの中にモデルのテクスチャデータをドラッグする
6.「Assets」を右クリックして、「Inport New Assets」でfbxファイルを選ぶ
7.「Inspector」→「Materials」を選択し、下記のようになっているか確認する
・Import Materialsにチェックが入っている
・「Location」が「Use Embedded Materials」になっている
■ボーンの対応付けを確認する
8.「Assets」→モデルのフォルダをクリックし、下記を行う
・(やらなくてもいいかも)「Inspector」→「Model」を選択し、「Import Cameras」「Import Lights」のチェックを外す。最後に「Apply」を押す
・「Inspector」→「RIg」を選択して、「Animation Type」を「Humanoid」にして「Apply」を押す
・「Inspector」→「RIg」の「Avator Definition」にチェックが入っているか確認する
※ここで「Avator Definition」に×印がついている場合は3Dアプリで作ったボーンとUnityとのリンクが上手くいっていないので、下記のような方法を取る
8-1.「configure」をクリックすると、「Hierarchy」に「Avatar Configuration」という項目が出てくるので、対応するボーンを「Inspector」のそれぞれの対応項目にドラッグする
8-2.対応付けが終わったら、人型がすべて緑色になっていることを確認して「Apply」ボタン→「Done」ボタンを押す
8-3.「Avator Definition」が×印からチェック印に変わっていればOK
■マテリアルを設定する
Unityに読み込むとマテリアルとテクスチャの紐付けが取れてしまっているので、それを結び直します
9.「Inspector」→「Materials」で下記の「Extract Materials」をクリックする
10.「Asstes」フォルダの中に新しく「Materials」フォルダを作り、「Choose」を押す
11.そうすると自動的にマテリアルを紐づけてくれる
■VRMのパッケージをインポートして、マテリアルを変更する
シェーダでVRMを使うので、ここでインボートしてテクスチャを設定します
12.下記からUniVRMをダウンロードする
github.com
※2018年6月現在において、clster.でVRM形式のモデルを使用する場合は、最新バージョンではなく「UniVRM-0.35」をダウンロードする
13「Inspector」→「Assets」を右クリックして「Import Package」→「Custom Package」を選択、先ほどダウンロードしたパッケージをクリックする
14「Import」を押してパッケージを読み込む
15.「Inspector」→「Materials」→マテリアル名をクリックする
16.「Shader」を「VRM」→「UnlitTexture」にする
※2018年6月現在では、「VRM/UnlitTexture」以外はアップロードに失敗する確率が高いため、ここでのシェーダは「VRM/UnlitTexture」を使用する
17.テクスチャがきちんと反映されているか確認する。下記の赤いところにテクスチャが表示されていればOK
■モデルを配置する
18.「Assets」→モデルのフォルダをシーンビュー(青空と地面がある上のウィンドウ)にドラッグする
19.モデルが表示されるので、シーンビューの右上にある下記のようなアイコンに注目する。このアイコンの中央の□を右クリックして、「Front」を選ぶ
20.下記の方法でモデルを見やすい位置に持ってくる
・視点の平行移動 マウスのスクロールボタンを押す
・視点のズームイン/アウト マウスのスクロールボタンを動かす
・(必要であれば)回転 マウスの右クリックを押す
■モデルの身長を調整する
21.「GameObject」メニュー→「3D object」→「Cube」を選択し、立方体を表示させる
22.「W」キーを押す。次に赤色の矢印が出てくるので、先端をクリックしながらマウスを動かし、立方体を左に移動させる。モデルと並ぶように配置する
23.「R」キーを押す。次に緑色の■が出てくるので、先端をクリックしながらマウスを上に動かして、モデルと同じ「高さ」になるように拡大or縮小する
24.モデルと立方体の地面の高さが同じになるよう、22.と同じ方法で立方体を動かす
25.立方体がクリックされている状態で、「Inspector」→「Scale」の「Y軸」の値を確認する
この値(m)がモデル(アバター)のサイズと同じくらいであれば問題ないが、大幅に異なる場合は以下のようにモデルのサイズを調整する
25-1.モデルの拡大or縮小率を下記のように計算する
モデル(アバター)の身長(m)÷16.で確認した立方体のY軸のScaleの値
例:アバターの身長が150cm(1.5m)で、立方体のY軸のScaleの値が3の場合
1.5m÷3m=0.5
25-2.「Assets」→モデルのフォルダをクリックし、「Inspector」→「Model」→「Scale Factor」に先ほど算出した拡大or縮小率を入力して(例の場合だと「0.5」)「Apply」を押す
■VRMの設定をする
26.シーンビューのモデルをクリックし、Positionをすべて0(原点)にする。このときモデルがZ軸の方向を向いているようにする
27.「シーンピュー」にあるモデルをクリックし、「VRM」メニュー→「Export Humanoid」を選択
28.「Auther」の項目にモデル制作者(モデルの著作権を持つ人)の名前を英語で入力する
29.「Force T Pose」「Pose Freeze」にチェックが入っていることを確認して、「Export」を押す
30.名前をつけたら(分かりやすいように末尾に_VRMとつけるなど)、そのまま「Save」を押す。「Assets」直下にVRM形式のファイルが出力される
31.30.で保存したモデルをクリックすると「Inspector」に設定項目が現れるので、下記の赤色の項目をひとつずつ設定していく。
詳しくはこちらを参照してください。今回は「再配布禁止」「アバターは作者のみ操作・使用可能」という条件にします。
VRMファイルを作ってみたい - dwango on GitHub
32.必要であれば、30.のページを参照して、揺れもの・目の動き・表情・口パクの設定をする(無理にする必要はない)
33.セットアップが完了したら、「VRM」メニュー→「Export Humanoid」を選択
34.Auther」の項目にモデル制作者(モデルの著作権を持つ人)の名前を英語で入力する
35.「Force T Pose」「Pose Freeze」のチェックを外して、「Export」を押す
36.好きな場所を選択し「.vrm」ファイルを書き出す
■VRMファイル(アバター)をアップロードする
37.cluster.の公式サイトに行き、「ログイン」ボタンを押す
cluster.mu
38.TwitterまたはFacebookとアカウント連携できるので、どちらかを選んでアカウント名とパスワードを入力する
39.ログインできたら、「アバター」の項目をクリックして「VRMファイルをアップロード」をクリックする
40.書き出した「.vrm」ファイルをクリックして、「選択」ボタンを押す
※「アップロードに失敗しました」と出る場合は、Webプラウザを再読み込みしてみる
41.「ダウンロード」メニューをクリックし、Windows版またはMac版のcluster.アプリをダウンロード&インストールする
42.cluster.アプリを立ち上げ、2.でログインしたアカウントでログインし直す
43.「ルームの中でアバターを見る」をクリックすると、鏡に自分のアバターが映る。矢印キーを押して前後左右に動き、動きを確認してみる
■cluster.で操作する
44.自分がホストの場合
44-1.自分がルームを制作する「ホスト」である場合は、下記のリンクの「マイルームを作成する」から進める
(とりあえずVR機ないけどcluster.を使ってみたい方向け)cluster.の始め方 - Qiita
※このときYouTubeLiveで同時配信する場合は、配信用のアカウントも作って「ゲスト」に加えておく
45.自分がゲストの場合
ホストではなく、マイクを使ってしゃべる「ゲスト」である場合は、下記を行う。
45-1.Macの場合、「システム環境設定」→「サウンド」→「入力」で使うマイクを選ぶ
45-2.マイクに向かってしゃべってみて、「入力レベル」が中央よりやや右になるように「入力音量」を設定する
※このときヘッドホン端子にヘッドホンやイヤホンをさして、「出力」を「ヘッドホン」にすると良い
45-3.あらかじめホストから教えてもらっているルームアドレスにWebからアクセスする
45-4.「入室する」をクリック
45-5.アプリが立ち上がって下記のような画面が出るので、観客席を向くように以下の動作をする
.
・視点の調整 マウスをドラッグ
・移動 キーボードの十字キー
45-6.マイクの下の「Off」となっているボタンをクリックして、音声入力をONにする。これで音声が配信されるようになる
45-7.右下にある下記のボタンをクリックして、スライド用のPDFファイルを選択する
※スライドの推奨サイズは公式で見つかりませんでしたが、このときは「1920×1080(Macアプリ「Keynote」のワイド)」で作成しました
このサイズの場合、見え方は下記のようになります。
45-8.「PDF」をクリックし、上の雲アイコンを選択する。そして使用したいスライドファイル(PDFファイル)を選択する
45-9.下記のようにPDFのサムネが表示されるので、サムネをクリックする
45-10,自分の番がきたら、「スクリーンに投影」をクリックする
45-11.マウス(視点回転)とキーボード(移動)を使って、視点を観客のほうに戻す
45-12.スライドを送るには、「>」アイコンを押す
45-13.自分の番が終了したら、「スクリーンに投影中」→×アイコンの順でクリックして、スライド投影を解除する
45-14.他のゲストがプレゼンしている間はマイクアイコンの下の「On」をクリックして「Off」に変えて、マイクを切っておく
■YouTubeLiveを配信する
自分がホストでYouTubeLiveを同時に行う場合、下記を行う。以下はMacでの使用を想定します。
またcluster.ホストと中継ホストは兼ねないほうが無難。どうしても兼ねる場合はマシンを別にすることをおススメします。
46.リンク先の方法で配信用マシンのセットアップを行う
http://yuge-m.com/obsyoutubelive-1790yuge-m.com
47.中継用のcluster.アカウントでcluster.にログインし、スライド画面と登壇者が見える位置に移動して視点を合わせる
48.YouTubeの「ライブコントロール ルーム」→「配信スタートボタン」をクリックすると配信が開始される
cluster.で自作モデルを使用する(VRM・簡易設定版編1)※MacもOK+Unity使ったことない方も
※マテリアルが1つ+テクスチャ1枚の場合でも、こちらのページの方法で行ったほうが良いかもしれません。
この記事を加筆修正しています。すみません・・・
prince9.hatenablog.com
※下記はMac版Unity2018を使っています。開発環境「Unity」を使用しますので、お持ちでない方は公式サイトからダウンロード&インストールしてください。
store.unity.com
VRルーム「cluster.」で自作アバターを使用する際に、Unityでのセットアップが必要になります。
Unityを使ったことのない方でも使用できるよう、アップロード方法を羅列しておきました。ほぼ身内向けですが、よろしければご参照ください。
モデルの読み込みは下記を参照させて頂きました。
am1tanaka.hatenablog.com
cluster.SDKをUnityで使った場合、Mac版ではアップロードができません・・・
ですのでMac版の場合、モデルをVRMに変換してcluster.の公式サイト上からアップロードする方法をとります。
※注意 VRM形式を使ったときのトラブル(2018年6月現在)
・VRMのMToon(アニメ調で表示する)を使うとcluster.でアップロードが失敗する→マテリアルのシェーダをVRM/UnlitTextureにする
・ここでは簡易版のため、口のモーフやスカートの揺れ等は設定していません
・モデルのセットアップを終えていてVRMに書き出すだけという場合は、■VRMの設定をする→25.に進んでください。cluster.の操作方法のリンクもあります
・VRMを書き出してアップロードするだけという場合は、■VRMファイル(アバター)をアップロードする→.36に進んでください。
■モデルを用意する
1.3Dアプリで「.fbx」形式でモデルを書き出す。このときにテクスチャをfbxファイルと同じファイル階層に置くこと(テクスチャ作成時から注意しておく)
2.Unityを立ち上げ、プロジェクトファイルを作成する
3.「Assets」を右クリックして、「Create」を→「Folder」を選択してフォルダを作る
4.「New Folder」の名前を「Textures」にする
5.「Textures」フォルダの中にモデルのテクスチャデータをドラッグする
6.「Assets」を右クリックして、「Inport New Assets」でfbxファイルを選ぶ
7.「Inspector」→「Materials」を選択し、下記のようになっているか確認する
・Import Materialsにチェックが入っている
・「Location」が「Use Embedded Materials」になっている
■ボーンの対応付けを確認する
8.「Assets」→モデルのフォルダをクリックし、下記を行う
・(やらなくてもいいかも)「Inspector」→「Model」を選択し、「Import Cameras」「Import Lights」のチェックを外す。さらに「Apply」を押す
・「Inspector」→「RIg」を選択して、「Animation Type」を「Humanoid」にして「Apply」を押す
・「Inspector」→「RIg」の「Avator Definition」にチェックが入っているか確認する
※ここで「Avator Definition」に×印がついている場合は3Dアプリで作ったボーンとUnityとのリンクが上手くいっていないので、下記のような方法を取る
8-1.「configure」をクリックすると、「Hierarchy」に「Avatar Configuration」という項目が出てくるので、対応するボーンを「Inspector」のそれぞれの対応項目にドラッグする
8-2.対応付けが終わったら、人型がすべて緑色になっていることを確認して「Apply」ボタン→「Done」ボタンを押す
8-3.「Avator Definition」が×印からチェック印に変わっていればOK
■モデルを配置する
9.「Assets」→モデルのフォルダをシーンビュー(青空と地面がある上のウィンドウ)にドラッグする
10.モデルが表示されるので、シーンビューの右上にある下記のようなアイコンに注目する。このアイコンの中央の□を右クリックして、「Front」を選ぶ
11.下記の方法でモデルを見やすい位置に持ってくる
・視点の平行移動 マウスのスクロールボタンを押す
・視点のズームイン/アウト マウスのスクロールボタンを動かす
・(必要であれば)回転 マウスの右クリックを押す
※この後、「Hierarchy」→「Main Camera」をクリックし、Ctrl(Command) + Shift + Fを押して「シーンビュー」と「ゲームビュー」のカメラの位置をそろえておくと良い
■モデルの身長を調整する
12.「GameObject」メニュー→「3D object」→「Cube」を選択し、立方体を表示させる
13.「W」キーを押す。次に赤色の矢印が出てくるので、先端をクリックしながらマウスを動かし、立方体を左に移動させる。モデルと並ぶように配置する
14.「R」キーを押す。次に緑色の■が出てくるので、先端をクリックしながらマウスを上に動かして、モデルと同じ「高さ」になるように拡大or縮小する
15.モデルと立方体の地面の高さが同じになるよう、13.と同じ方法で立方体を動かす
16.立方体がクリックされている状態で、「Inspector」→「Scale」の「Y軸」の値を確認する
この値(m)がモデル(アバター)のサイズと同じくらいであれば問題ないが、大幅に異なる場合は以下のようにモデルのサイズを調整する
16-1.モデルの拡大or縮小率を下記のように計算する
モデル(アバター)の身長(m)÷16.で確認した立方体のY軸のScaleの値
例:アバターの身長が150cm(1.5m)で、立方体のY軸のScaleの値が3の場合
1.5m÷3m=0.5
16-2.「Assets」→モデルのフォルダをクリックし、「Inspector」→「Model」→「Scale Factor」に先ほど算出した拡大or縮小率を入力して(例の場合だと「0.5」)「Apply」を押す
■マテリアルとシェーダを設定する
cluster.では下記のシェーダが使用可能。・・・ということだが、実際には「VRM/UnlitTexture」以外エラーが起こる模様。
・Standard
・Standard (Roughness setup)
・Standard (Specular setup)
・VRM/MToon
・VRM/UnlitTexture
・VRM/UnlitCutout
・VRM/UnlitTransparent
・VRM/UnlitTransparentZWrite
17.下記からUniVRMをダウンロードする
github.com
※clster.でVRM形式のモデルを使用する場合は、最新バージョンではなく「UniVRM-0.35」をダウンロードする
18.「Assets」を右クリックして「Import Package」→「Custom Package」を選択、先ほどダウンロードしたパッケージをクリックする
19.「Import」を押してパッケージを読み込む
20.「Assets」を右クリックし、「Create」→「Material」を選択する。マテリアル名をダブルクリックして名前を変えておくと良い
21.20.で作ったマテリアルをクリックし、「Inspector」→「Shader」を「VRM」→「UnlitTexture」にする
22.下記の「Select」ボタンを押し、モデル用のテクスチャのファイル名を入力する
23.テクスチャファイルをダブルクリックして確定する
24.20.で作ったマテリアルをシーンビューに配置してあるモデルにドラッグする
■VRMの設定をする
25.シーンビューのモデルをクリックし、Positionをすべて0(原点)にする。このときモデルがZ軸の方向を向いているようにする
26.「シーンピュー」にあるモデルをクリックし、「VRM」メニュー→「Export Humanoid」を選択
27.「Auther」の項目にモデル制作者(モデルの著作権を持つ人)の名前を英語で入力する
28.「Force T Pose」「Pose Freeze」にチェックが入っていることを確認して、「Export」を押す
29.名前をつけたら(分かりやすいように末尾に_VRMとつけるなど)、そのまま「Save」を押す。「Assets」直下にVRM形式のファイルが出力される
30.29.で保存したモデルをクリックすると「Inspector」に設定項目が現れるので、下記の赤色の項目をひとつずつ設定していく。
詳しくはこちらを参照してください。今回は「再配布禁止」「アバターは作者のみ操作・使用可能」という条件にします。
VRMファイルを作ってみたい - dwango on GitHub
31.必要であれば、30.のページを参照して、揺れもの・目の動き・表情・口パクの設定をする(無理にする必要はない)
32.セットアップが完了したら、「VRM」メニュー→「Export Humanoid」を選択
33.Auther」の項目にモデル制作者(モデルの著作権を持つ人)の名前を英語で入力する
34.「Force T Pose」「Pose Freeze」のチェックを外して、「Export」を押す
35.好きな場所を選択し「.vrm」ファイルを書き出す
■VRMファイル(アバター)をアップロードする
36.cluster.の公式サイトに行き、「ログイン」ボタンを押す
cluster.mu
37.TwitterまたはFacebookとアカウント連携できるので、どちらかを選んでアカウント名とパスワードを入力する
38.ログインできたら、「アバター」の項目をクリックして「VRMファイルをアップロード」をクリックする
39.書き出した「.vrm」ファイルをクリックして、「選択」ボタンを押す
※「アップロードに失敗しました」と出る場合は、Webプラウザを再読み込みしてみる
40.「ダウンロード」メニューをクリックし、Windows版またはMac版のcluster.アプリをダウンロード&インストールする
41.cluster.アプリを立ち上げ、2.でログインしたアカウントでログインし直す
42.「ルームの中でアバターを見る」をクリックすると、鏡に自分のアバターが映る。矢印キーを押して前後左右に動き、動きを確認してみる
■cluster.で操作する
43.自分がホストの場合
43-1.自分がルームを制作する「ホスト」である場合は、下記のリンクの「マイルームを作成する」から進める
(とりあえずVR機ないけどCluster.を使ってみたい方向け)Cluster.の始め方
※このときYouTubeLiveで同時配信する場合は、配信用のアカウントも作って「ゲスト」に加えておく
44.自分がゲストの場合
ホストではなく、マイクを使ってしゃべる「ゲスト」である場合は、下記を行う。
44-1.Macの場合、「システム環境設定」→「サウンド」→「入力」で使うマイクを選ぶ
44-2.マイクに向かってしゃべってみて、「入力レベル」が中央よりやや右になるように「入力音量」を設定する
※このときヘッドホン端子にヘッドホンやイヤホンをさして、「出力」を「ヘッドホン」にすると良い
44-3.あらかじめホストから教えてもらっているルームアドレスにWebからアクセスする
44-4.「入室する」をクリック
44-5.アプリが立ち上がって下記のような画面が出るので、観客席を向くように以下の動作をする
.
・視点の調整 マウスをドラッグ
・移動 キーボードの十字キー
44-6.マイクの下の「Off」となっているボタンをクリックして、音声入力をONにする。これで音声が配信されるようになる
44-7.右下にある下記のボタンをクリックして、スライド用のPDFファイルを選択する
※スライドの推奨サイズは公式で見つかりませんでしたが、このときは「1920×1080(Macアプリ「Keynote」のワイド)」で作成しました
このサイズの場合、見え方は下記のようになります。
44-8.「PDF」をクリックし、上の雲アイコンを選択する。そして使用したいスライドファイル(PDFファイル)を選択する
44-9.下記のようにPDFのサムネが表示されるので、サムネをクリックする
44-10,自分の番がきたら、「スクリーンに投影」をクリックする
44-11.マウス(視点回転)とキーボード(移動)を使って、視点を観客のほうに戻す
44-12.スライドを送るには、「>」アイコンを押す
44-13.自分の番が終了したら、「スクリーンに投影中」→×アイコンの順でクリックして、スライド投影を解除する
44-14.他のゲストがプレゼンしている間はマイクアイコンの下の「On」をクリックして「Off」に変えて、マイクを切っておく
■YouTubeLiveを配信する
自分がホストでYouTubeLiveを同時に行う場合、下記を行う。以下はMacでの使用を想定します。
またcluster.ホストと中継ホストは兼ねないほうが無難。どうしても兼ねる場合はマシンを別にすることをおススメします。
45.リンク先の方法で配信用マシンのセットアップを行う
yuge-m.com
46.中継用のcluster.アカウントでcluster.にログインし、スライド画面と登壇者が見える位置に移動して視点を合わせる
47.YouTubeの「ライブコントロール ルーム」→「配信スタートボタン」をクリックすると配信が開始される
cluster.で自作モデルを使用する(.fbx編)※Windowsのみ
VRルーム「cluster.」で自作アバターを使用する際にUnityでのセットアップが必要になります。
Unityを使ったことのない方でも使用できるよう、アップロード方法を羅列しておきました。ほぼ身内向けですが、よろしければご参照ください。
モデルの読み込みは下記から、cluster.については公式の開発者向けページを参照させて頂きました。
am1tanaka.hatenablog.com
■モデルを用意する
1.3Dアプリで「.fbx」形式でモデルを書き出す。このときにテクスチャをモデル+fbxファイルと同じファイル階層に置くこと(テクスチャ作成時から注意しておく)
2.Unityを立ち上げ、プロジェクトファイルを作成する
3.「Assets」を右クリックして、「Create」を→「Folder」を選択してフォルダを作る
4.「New Folder」の名前を「Textures」にする
5.「Textures」フォルダの中にモデルのテクスチャデータをドラッグする
6.「Assets」を右クリックして、「Inport New Assets」でfbxファイルを選ぶ
7.「Inspector」→「Materials」を選択し、下記のようになっているか確認する
・Import Materialsにチェックが入っている
・「Location」が「Use Embedded Materials」になっている
■ボーンの対応付けを確認する
8.「Assets」→モデルのフォルダをクリックし、「Inspector」→「RIg」を選択する。ここで下記を行う
・「Animation Type」を「Humanoid」にして「Apply」を押す
・「Avator Definition」にチェックが入っているか確認する
※ここで「Avator Definition」に×印がついている場合は、3Dアプリで作ったボーンとUnityとのリンクが上手くいっていないので、下記のような方法を取る
8-1.「configure」をクリックすると、「Hierarchy」に「Avatar Configuration」という項目が出てくるので、対応するボーンを「Inspector」のそれぞれの対応項目にドラッグする
8-2.対応付けが終わったら、人型がすべて緑色になっていることを確認して「Apply」ボタン→「Done」ボタンを押す
8-3.「Avator Definition」が×印からチェック印に変わっていればOK
■モデルを配置する
9.「Assets」→モデルのフォルダをシーンビュー(青空と地面がある上のウィンドウ)にドラッグする
10.モデルが表示されるので、シーンビューの右上にある下記のようなアイコンに注目する。このアイコンの中央の□を右クリックして、「Front」を選ぶ
11.下記の方法でモデルを見やすい位置に持ってくる
・視点の平行移動 マウスのスクロールボタンを押す
・視点のズームイン/アウト マウスのスクロールボタンを動かす
・(必要であれば)回転 マウスの右クリックを押す
※この後、「Hierarchy」→「Main Camera」をクリックし、Ctrl(Command) + Shift + Fを押して「シーンビュー」と「ゲームビュー」のカメラの位置をそろえておくと良い
■モデルの身長を調整する
12.「GameObject」メニュー→「3D object」→「Cube」を選択し、立方体を表示させる
13.「W」キーを押す。次に赤色の矢印が出てくるので、先端をクリックしながらマウスを動かし、立方体を左に移動させる。モデルと並ぶように配置する
14.「R」キーを押す。次に緑色の■が出てくるので、先端をクリックしながらマウスを上に動かして、モデルと同じ「高さ」になるように拡大or縮小する
15.モデルと立方体の地面の高さが同じになるよう、13.と同じ方法で立方体を動かす
16.立方体がクリックされている状態で、「Inspector」→「Scale」の「Y軸」の値を確認する
この値(m)がモデル(アバター)のサイズと同じくらいであれば問題ないが、大幅に異なる場合は以下のようにモデルのサイズを調整する
16-1.モデルの拡大or縮小率を下記のように計算する
モデル(アバター)の身長(m)÷16.で確認した立方体のY軸のScaleの値
例:アバターの身長が150cm(1.5m)で、立方体のY軸のScaleの値が3の場合
1.5m÷3m=0.5
16-2.「Assets」→モデルのフォルダをクリックし、「Inspector」→「Model」→「Scale Factor」に先ほど算出した拡大or縮小率を入力して(例の場合だと「0.5」)「Apply」を押す
■cluster.の設定をする その1
17.cluster.公式サイトの「開発者向け」をクリックし、「cluster.SDKダウンロード」をクリックしてSDKをダウンロードする
18.「Assets」を右クリックし、「Import Package」→「Custom Package」を選択し、先ほどダウンロードしたSDKをクリックする
19.「Import」をクリックしてSDKを読み込む
■マテリアルとシェーダを設定する(アニメっぽくする)
cluster.では下記のシェーダが使用可能。ここではアニメっぽい表現をする「VRM/MToon」を使用する
・Standard
・Standard (Roughness setup)
・Standard (Specular setup)
・VRM/MToon
・VRM/UnlitTexture
・VRM/UnlitCutout
・VRM/UnlitTransparent
・VRM/UnlitTransparentZWrite
20.「Assets」を右クリックし、「Create」→「Material」を選択する。マテリアル名をダブルクリックして名前を変えておくと良い
21.20.で作ったマテリアルをクリックし、「Inspector」→「Shader」を「VRM」→「MToon」にする
22.「Basic」→「Color」の「Lit&Alpha」と「Shade」の下記の赤色の部分をクリックする
23.「Select Texture」のウィンドウが出てくるので、虫メガネのアイコンの横にテクスチャ名を入力する
24.テクスチャが出てくるので、それをクリックして「Lit&Alpha」と「Shade」のテクスチャを設定する
25.デフォルトだと若干ピンクっぽくなってしまうので、「Shade」の横の□をクリックし、薄めのピンクにする。もしくは白にしてもOK
26.「Lighting」→「Shade」→「Toony」で、主な色と影の色をどれだけハッキリ出すかの値を調整する。「1」に近いほど、アニメっぽくなる
27.輪郭線が必要な場合は「Outline」→「Width」→「Mode」を「WorldCoordinates 」にする。必要ないなら「None」にする
28.「Outline」→「Width」→「Mode」→「Width」で輪郭線の太さを調整する
29.「Outline」→「Color」の横の□をクリックし、輪郭線の色を好きな色にする
30.20.で作ったマテリアルをシーンビューに配置してあるモデルにドラッグする
■cluster.の設定をする その2
31.「cluster.SDK」メニュー→「Avator Upload」を選択する
32.cluster.にログインする
33.Unityに戻り、「Get API acces token」をクリックする
34.Webブラウザが立ち上がるので、「トークン作成」のボタンを押す
33.出てきた文字列をコピーする
34.Unityに戻り、「API acces token」の横に文字列をペーストする
35.きちんとコピペされれば、cluster.のアカウント名が表示される
36.「cluster.」→「Avatar」→「Avatar」の横にモデルのフォルダをドラッグ&ドロップする
37.「cluster.」→「Avatar」→「Avatar name」に名前をつける
38.下記の方法でカメラを動かし、サムネ用の画像を仮決めする
・視点の平行移動 マウスのスクロールボタンを押しながら動かす
・視点のズームイン/アウト マウスのスクロールボタンを動かす
・(必要であれば)回転 マウスの右クリックを押しながら動かす
39.Ctrl(Command) + Shift + Fを押して、上の「シーンビュー」と下の「ゲームビュー」をほぼ同じ画面にする
40.「Hierarchy」→「Main Camera」を「cluster.」→「Avatar」→「Thumbnail camera」にドラッグする
41.アバターに問題がなければ、「cluster.」→「System Message」に下記のように表示される
42.「cluster.」→「Avatar」→「Build」ボタンを押す
43.ビルドが成功した場合、「ビルド完了」という項目が出る
44.「Upload」ボタンが出るので、押す
※Mac版はアップロードできないので、こちらの方法でアバターをアップロードする
45.アップロード完了
46.cluster.のアプリでアバターを確認し、「ルームの中でアパターを見る」をクリックして挙動を確認する
Processingで特定の数だけ+特定の色の中からランダムな色で線を描く
ランダムな数だけ+特定の色の中からランダムな色で図形を描く、というのは以前やりましたが、特定の数だけ必要になったのでメモです。
こちらですね。これを参考に少し書き換えました。
prince9.hatenablog.com
コードは下記です。PDF書き出しも入れてあります。
//PDF書き出し用ライブラリ
import processing.pdf.*;
int count;//ファイル名用変数
//最大個数分の配列を用意する
int[] col1 = new int[20];//線の数
//ランダムな位置
int linexr,lineyt1,lineyt2,sweightr;
//使う色の配列
color[] colarray =
{
#9de22d,#fed631,#fb7f37,#d52bbd,#35ddf3,#7a2cd6
};
void setup() {
background(255);
size(600,600);
noLoop();
}
void draw() {
background(255);
//色の種類ぶんランダムな数値をつくる
for(int c = 0; c < col1.length; c++){
//色の乱数生成
col1[c] = int(random(colarray.length));
}
//cは線の個数
for(int c = 0; c < 20; c++){
//位置をランダムに
linexr = int(random(200));
lineyt1 = int(random(500));
lineyt2 = int(random(500));
//線の太さをランダムに
sweightr = int(random(15));
for (int d = 0; d<c; d++) {
//太さをランダムに
strokeWeight( sweightr );
//線の形状を四角に
strokeCap(SQUARE);
//色の配列からランダムな番地を取り出す
stroke(colarray[col1[d]]);
line(linexr, lineyt1, linexr, lineyt2);
}
}
}
void mousePressed() {
beginRecord(PDF,"pattern"+count+".pdf");
redraw();// ボタンが押されたときだけ再描画
}
//スペースキーでPDF書き出し
void keyPressed() {
if ( key == ' ' ) {
count++;
endRecord();
}
if (key == 'q'){
exit();
}
}
Mac版UnityでMMDモデルを使う
UnityでMMDを使う場合、「MMD4Mecanim」というアセットを使うのが一般的ですが、いかんせんWindows環境でしか動きません。
・・・が!MMD4Mecanimの前のバージョンと併用したら動きました。
こちらを参照させて頂きました。ありがとうございます。
qiita.com
女性キャラクター(というか低身長キャラ?)の場合、モデルによっては操作可能になったときに下に沈み込むようです。
■MMD4MecanimをダウンロードしてUnityで使えるようにする
1.こちらから最新版の「MMD4Mecanim」をダウンロードして解凍する
Stereoarts Homepage
2.こちらから「MMD4Mecanim」の少し前のバージョンをダウンロードして解凍する
www.shuwasystem.co.jp
3.Unityでプロジェクトを作り、1.でダウンロード&解凍した「MMD4Mecanim」の中にある「MMD4Mecanim.unitypackage」をダブルクリックする
4.「Import」ボタンを押してインポートする
5.2.でダウンロード&解凍した「MMD4Mecanim」の中にある「MMD4Mecanim.unitypackage」をダブルクリックする
6.このとき「PMX2FBX」のみ選択してImportする
■MMDモデルをUnityにインポートする
1.「MMD4Mecanim」フォルダ→「歩き.vmd」をMMDモデルのフォルダにドラック&ドロップする
2.「Project」ビュー→「Assets」フォルダにモデルをフォルダごとドラック&ドロップする
3.「Project」ビュー→「Assets」フォルダ→モデルフォルダの中にできた「モデル名.MMD4Mecanim」をクリックする
4.規約をよく読み、チェックボックスをクリックして「同意する」ボタンを押す
5.「VMD」に「Project」ビュー→「Assets」フォルダ→モデルフォルダの中にある「歩き」をドラック&ドロップして「Process」を押す
6.少し時間がかかるので、待ちます
7.モデルフォルダの中に青い四角のアイコンが出来ていれば、ひとまずOK
■ベースになるモデルを用意する
1.Unityの「Assets」メニュー→「Import Package」→「Charactors」を選択して、Importを押す
2.「Project」ビュー→「Assets」フォルダ→「Standard Assets」フォルダ→「Charactors」フォルダ→「ThirdPersonCharactor」フォルダ→「Prefabs」フォルダ→「ThirdPersonController」を選択し、「Hierarchy」ビューにドラック&ドロップする
3.「Hierarchy」ビュー→「ThirdPersonController」の左の▼をクリックし、「EthanBody」「EthanGlasses」「EthanSkelton」をシフトキーを押して複数選択する
4.3.で複数選択した状態でマウスの右クリックを押し、「Delete」を選択して消す
■ベースモデルとMMDモデルを差し替える
1.「MMDモデルをUnityにインポートする」の7.でできた青いアイコンをクリックし、「Rig」タブ→「Animation Type」を「Humanoid」にして「Apply」を押す
※ここで赤い「エラー」が出た場合はそのモデルは使えません。黄色の「警告」ならOKです。ボーンなどに日本語名がある場合は読み込めないことがあります
2.「MMDモデルをUnityにインポートする」の7.でできた青いアイコンを「Hierarchy」ビュー→「ThirdPersonController」に重ねるようにドラック&ドロップする。これで親子関係になる
3.「Hierarchy」ビュー→「ThirdPersonController」をクリックし、「Animator」→「Avatar」の横の◯をクリックして、MMDモデル名Avatarをクリックする
4.赤いボタンを押してウィンドウを閉じ、Unity中央にある「プレイ」ボタンをクリックする
5.矢印キーを押すとキャラクターが走り出し、スペースキーを押すとジャンプする
Twitterにて@アカウントでポストして、GoogleHomeにしゃべらせる
こちらを参考にSlackでしゃべってもらおうとしたのですがどうも上手くいかなかったので、Twitterに「@アカウント名 しゃべらせたい内容」とツイートすることでしゃべってもらうようにしました。
engineer.muragon.com
残念ながら、ツイートしてすぐにはしゃべってくれないことが多いです。30秒から1分ほど待つ必要があるようです。
ポストする先の「@アカウント名」は使用するアカウントが@アカウント名に承認されていれば、鍵つきアカウントでもOKです。
なのでGoogleHome専用のアカウントを作っておくといいかもしれません。
※仕様上「https://xxxxx.ngrok.io/google-home-notifier」のxxxxがgoogle-home-notifierを立ち上げるたびに異なります。
下記では現状、google-home-notifierを立ち上げるたびにwebhooksの「URL」の項目を書き直す必要があります。
マシンを立ち上げっぱなしにしておくならまだ良いかもですが、書き直さなくて良いよう改良中です。
●準備:リクエスト用のURLを作る
Googlehomeをしゃべらせるために必要なgoogle-home-notifierはngrokのサーバーを立ち上げてしゃべらせているようなので、そのURLをまず知る必要があります。
1.ターミナルを起動して、ユーザ名$ の後に「cd_」と入力する(「_」はスペース)
2.「google-home-notifier」フォルダを見つけ(おそらくHome→「node_modules」フォルダの中にある)、「cd_」の後ろにドラッグする
3.そうすると「google-home-notifier」のパスを自動的に入力してくれるので、そのままエンターキーを押す
4.ユーザ名$ の後に「node example.js」と入力してエンターキーを押す
5.すると下記のように表示されるので、https:以下をコピーしておく(「xxxx」はダミーです)
curl -X POST -d "text=Hello Google Home" https://xxxxx.ngrok.io/google-home-notifier
●google-home-notifier.jsに書き加える
1.スマホのGoogleHomeアプリを立ち上げ、右上のアイコンをタップする
2.「デバイス」と出てくるので、「PINXXXX」と書いてあるところの右にある「⋯」をタップする
3.「設定」をタップし、いちばん下に書いてある「IPアドレス」の数字をメモする
4.PCで「google-home-notifier.js」という名前のファイルを探し、エディタで開く
5.おそらく8行目と20行目が「en」または「us」となっているので、ここを「ja」にする
6.下記のように付け加える。「var ip」のところは3.の数値にする
var deviceAddress; var language; //追加 var deviceName = 'Google Home'; var ip = '192.168.x.x'; //ここまで
7.6.を保存する
●IFTTTでレシピを作る
レシピはこちらを参考にさせて頂きました。
kotodama.today
1.IFTTTにログインして、右上の自分のアカウント名の横にある三角アイコンから「New Applet」を選択する。
※このとき認証しているTwitterアカウントはしゃべらせたいアカウント(「@アカウント」の「アカウント」。GoogleHome用にアカウントを作っていればそのアカウントのほうがベターか)であること
例:しゃべらせたいアカウント:@hogegooglehome
自分が使っているアカウント:@hoge
の場合、認証するのは@hogegooglehome
2.「+This」をクリックして「Twitter」をクリックする
3.「New mention of you」をクリックする
4.「+That」をクリックして「webhooks」を選択する
5.「Make a web request」をクリックして、下記のようにする
・「URL」に「準備:リクエスト用のURLを作る」5.でコピーしたURLを入力
・「Method」は「POST」を選択
・「Content Type」は「application/x-www-form-urlencoded」を選択
・「Body」は「text=” {{UserName}} さんから {{Text}}”」と入力
※この「UserName」は自分が使用しているアカウント名になる。しゃべらせたいアカウント名ではない
例:しゃべらせたいアカウント:@hogegooglehome
自分が使っているアカウント:@hoge
の場合、「UserName」は@hoge
6.「Create action」をクリックする
7.「@アカウント しゃべらせたいこと」でツイートすると、GoogleHomeがキェェェシャベッタァァァ!
