UnityのMecanim Locomotion Starter Kit+Character Controller+Box Colliderで衝突判定
Character Controllerは衝突判定を備えており、キャラクターのコントロールを簡単にするものです。
が、衝突判定との相性が良くないのか苦労されている方が多いようです。
ここでは下記の条件で衝突判定を行い、「衝突したら音が鳴る」「特定のエリアに入ったらシーン移動(ワープ)する」例を作ってみました。
Box Colliderの「Is Trigger」にチェックを入れるとキャラクターがオブジェクトをすり抜けるので、「この範囲に来たらワープする」などに使用できます。
今回はMecanim Locomotion Starter Kit+Character Controllerを使用しているため、障害物の前で止まる=障害物に接触しない=他の当たり判定が発動しないことになります。
(Character Controller自身で当たり判定のアクションを動作させることもできますが、あまり上手くいかなった)
なので、障害物より少し大きめの当たり判定エリアを作り、そのエリアに接したら(衝突したら)アクションが開始するようにします。
また障害物がキャラクターの身長より小さいと乗り越えて進んでしまうため、そこも注意が必要です。
●3Dキャラクター
・Mecanim Locomotion Starter Kitを使用
・Character Controllerを使用
・Rigidbodyを使用(ジャンプのアニメーションをさせたりしてたので)
最終的な状態:
●衝突するオブジェクト
・すり抜けをさせたくなかったので、衝突用のオブジェクトと衝突エリア用のオブジェクトをそれぞれ用意
・Box Colliderでキャラクターのすり抜けができなくなる(停止する)
最終的な状態:
●音が鳴る用の衝突エリア用のオブジェクト(いわゆる当たり判定エリア)
・Box Colliderの「Is Trigger」にチェックを入れる
最終的な状態:
●ワープ用の当たり判定エリア用のオブジェクト
・Box Colliderの「Is Trigger」にチェックを入れる
最終的な状態:
ではまず、「衝突したら音が鳴る」から。
すでに
・「Mecanim Locomotion Starter Kit」を使って矢印キーでキャラクターが操作できている
・Character Controllerを設定済み
な状態からスタートします(プログラミングの必要なし)。
■障害物を設置する
1.「GameObject」→「3D Object」→「Cube」を選択して立方体を出す
※キャラクターの身長より大きいサイズであること。でないと乗り越えてしまう
2.Hierarchy」→「Cube」をクリックし、「Inspector」の「Cube」を「Block」などにして名前を変える。必要であれば移動させておく
3.「Hierarchy」→「Block」をクリックし、「Inspector」→「Add Component」をクリックする
■Box Colliderを設定する
4.虫眼鏡アイコンのところに「Box Collider」と入力し、「Box Collider」をクリックする
5.衝突して止まるかの確認のため、Unityの再生ボタンを押して動作させる
※「Character Controller」を設定していないか、「Box Collider」の「Is Trigger」のチェックがONだとすり抜けてしまう
■当たり判定エリアを設定する
今回はCharacter Controllerを使用しているため、障害物の前で止まる=障害物に接触しない=他の当たり判定が発動しないことになります。
なので、障害物より少し大きめの当たり判定エリアを作り、そのエリアに接したら(衝突したら)アクションが開始するようにします。
6.「GameObject」→「3D Object」→「Cube」を選択して立方体を出す
7.「Hierarchy」→「Cube」をクリックし、「Inspector」の「Cube」を「JudgeArea」などにして名前を変える。1.で作った障害物と同じ位置に移動させる(Transformの数値を設定するなどで)
8.「Hierarchy」→「JudgeArea」をクリックし、「Inspector」→「Mesh Renderer」の右にある歯車のアイコンをクリックする
9.「Remove Component」を選択する。オブジェクトが非表示になり、枠線が表示される
10.「Hierarchy」→「JudgeArea」をクリックし、「Inspector」→「Transform」の「Scale」をXYZともに「1.5」程度に若干拡大する
■当たり判定エリア用のBox Colliderを設定する
11.「Hierarchy」→「JudgeArea」をクリックし、「Inspector」→「Add Component」をクリックする
12.虫眼鏡アイコンのところに「Box Collider」と入力し、「Box Collider」をクリックする
13.「Hierarchy」→「JudgeArea」をクリックし、「Inspector」→「Box Collider」の「Is Trigger」にチェックを入れる
※こうすることで「OnTriggerEnter」関数が呼び出され、「衝突したらアクションを起こす」という処理をさせることができる
※「Box Collider」の「Is Trigger」にチェックを入れると、そのオブジェクトをすり抜けることができる。そのためオブジェクトに衝突する前にキャラクターが止まらないので、衝突判定を設定することができる
■音を出す準備をする その1
14.「Hierarchy」→「JudgeArea」をクリックし、「Add Component」をクリックする
15.虫眼鏡アイコンのところに「AudioSource」と入力し、「AudioSource」をクリックする
16.「Asset」を右クリックし、「Import New Asset」をクリックして音源ファイルを選択する
17.「Hierarchy」→「JudgeArea」をクリックし、「Inspector」→「Audio Source」→「AudioClip」に音源ファイルをドラッグ&ドロップする
■衝突判定
18.「Hierarchy」→「JudgeArea」をクリックし、「Inspector」→「Add Component」をクリックする
19.「New Script」を選択し、名前を「AreaSctipt」として「Create and Add」を押す
20.「Asset」→「AreaSctipt」をダブルクリックして、下記のコードを書く
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class AreaSctipt : MonoBehaviour {
//音を出す準備
public AudioClip crashSound;
private AudioSource audioSource;
void Start () {
//音を出す準備
audioSource = gameObject.GetComponent<AudioSource> ();
}
//衝突したときの処理
void OnTriggerEnter(Collider col)
{
//実際の処理を書く(ここでは「crashSound」に設定した音源が鳴る)
audioSource.PlayOneShot (crashSound);
}
}
■音を出す準備をする その2
21.「Hierarchy」→「JudgeArea」をクリックし、「Inspector」→「Area Script」の「Crash Sound」に「Assets」の中にある音源ファイルをドラッグ&ドロップする
22.「Hierarchy」→「JudgeArea」をクリックし、「Inspector」→「Audio Source」→「Play On Awake」のチェックを外す
23.Unityの再生ボタンを押して、ちゃんと衝突したときに音が鳴るか確認する
これでキーボードでキャラクターを動かして、かつ障害物に衝突すると音が鳴ります。鳴らない場合のいちばんの原因として、当たり判定のオブジェクトのサイズが小さすぎることがあります。Scaleの値を調整して、少し大きくしてあげましょう。
次は「この範囲に来たらワープ(シーン移動)する」です。
・「Mecanim Locomotion Starter Kit」を使って矢印キーでキャラクターが操作できている
・Character Controllerを設定済み
な状態からスタートします。
ワープした後、次のシーンでもキャラクターがいるようにしてあげます。
単純に同じシーンの他の位置へワープしたい場合は、キャラクターにスクリプトとタグ(これは後でやります)を設定し、下記のようにすればOKです。
void Update () {
//「WarpSctipt」というスクリプトに書いたフラグがOnのとき
if (WarpSctipt.flag == true) {
//このオブジェクトを原点に移動させる
this.gameObject.transform.position = new Vector3(0,0,0);
//「WarpSctipt」のフラグをOffにしておく(でないとワープした後動けない)
Warpctipt.flag = false;
}
}
■ワープエリアを設定する
ここでは壁にしました。
1.「GameObject」→「3D Object」→「Plane」を選択して平面を出す
2.「Hierarchy」→「Plane」をクリックし、「Inspector」の「Plane」を「NextStage」などにして名前を変える。必要であれば位置・大きさ・角度を調整する
※このとき壁の大きさはキャラクターの身長より高くする
3.「Hierarchy」→「NextStage」をクリックし、「Inspector」→「Mesh Renderer」の右にある歯車のアイコンをクリックする
4.「Remove Component」を選択する。オブジェクトが非表示になり、枠線が表示される
■ワープエリア用のBox Colliderを設定する
5.「Hierarchy」→「NextStage」をクリックし、「Inspector」→「Add Component」をクリックする
6.虫眼鏡アイコンのところに「Box Collider」と入力し、「Box Collider」をクリックする
7.「Hierarchy」→「NextStage」をクリックし、「Inspector」→「Box Collider」の「Is Trigger」にチェックを入れる
※ワープ用の壁はすり抜けてかまわないので、「Box Collider」の「Is Trigger」にチェックを入れる。すり抜けて欲しくない場合は「衝突したら音が鳴る」の1.-13.まで同じ
■キャラクターにタグをつける
オブジェクトが複数になってくると判別しにくくなるので、タグをつける。ここでは操作キャラクターに「Player」というタグをつける
8.「Hierarchy」→「3Dキャラクターのファイル名」をクリックし、「Inspector」→「Tag」の「Untagged」をクリックする
9.「Untagged」を「Player」に変える
■衝突(エリアに入ったか否か)判定
10.「Hierarchy」→「NextStage」をクリックし、「Inspector」→「Add Component」をクリックする
11.「New Script」を選択し、名前を「NextStageSctipt」として「Create and Add」を押す
12.「Asset」→「NextStageSctipt」をダブルクリックする
13.下記のコードを書く
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class NextStageSctipt : MonoBehaviour {
//フラグのOn/Offをbool(true/false)で管理する宣言
public static bool flag;
void Start () {
//最初のフラグはオフにしておく
flag = false;
}
//キャラクターがエリアに入ったら
void OnTriggerEnter(Collider secondswarp)
{
//Playerというタグを持つオブジェクトがエリアに入ったら
if(secondswarp.tag=="Player")
{
//フラグをOnにする
flag = true;
}
}
■新しいシーン(次のステージ)をつくる
14.「Assets」→「Scenes」を右クリックし、「Create」→「Scene」を選択して新しいシーン(ステージ)を用意する
15.「New Scene」をクリックし、「2ndScene」に名前を変える
16.「Assets」→「Scenes」→「Sample Scene」をクリックし、「1ndScene」に名前を変える
17.「Assets」→「Scenes」→「2ndScene」のアイコン部分をダブルクリックし、新しいシーンの編集をする
18.「GameObject」→「3D Object」→「Plane」を選択して地面を出す
19.「Hierarchy」→「Plane」をクリックし、「Inspector」の「Plane」という名前を「2ndGround」に変える。必要があればマテリアルも設定する
20.新しいシーンにオブジェクトを配置する
■シーン移動のコードを書く
21.「Hierarchy」→「3Dキャラクターのファイル名」をクリックし、「Inspector」→「Add Component」をクリックする
11.「New Script」を選択し、名前を「WarpPlayer」として「Create and Add」を押す
12.「Asset」→「WarpPlayer」をダブルクリックする
13.下記のコードを書く
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
//ステージ移動できるようにする
using UnityEngine.SceneManagement;
public class WarpPlayer : MonoBehaviour {
void Update () {
//「NextStageSctipt」で設定したフラグがOn(true)になったら
if (NextStageSctipt.flag == true) {
//「2ndScene」というシーンに移動
SceneManager.LoadScene ("2ndScene");
//「NextStageSctipt」で設定したフラグをOff(false)にしておく(これをしないとステージ移動後に動けなくなる)
NextStageSctipt.flag = false;
}
}
//次のシーンでもキャラクターが存在して動くための設定
void Awake () {
DontDestroyOnLoad(this.gameObject);
}
}
■シーン移動の設定をする
このままではまだシーンの移動ができない。下記の設定も必要となる
14.「Assets」→「Scenes」→「1ndScene」のアイコン部分をダブルクリックして、「1ndScene」が表示された状態にする
15.Assets」→「Scenes」→「2ndScene」をクリックする
16.「File」メニュー→「Build Settings」を選択する
17.「Add Open Scenes」をクリックする
下記のように「2ndScene」が追加されていればOK。
■照明の設定をする
Unityではシーンの移動をすると全体が暗くなってしまう。その対処法として下記のようにする。
Unity2018版の方法です。
18.「Assets」→「Scenes」→「1ndScene」のアイコン部分をダブルクリックして、「1ndScene」が表示された状態にする
19.「Window」メニュー→「Lighting」→「Settings」を選択し、「Object Maps」タグをクリックする
20.「Auto Generate」のチェックを外す
21.「Generate Lighting」をクリックする
22.「Assets」→「Scenes」→「2ndScene」のアイコン部分をダブルクリックして、「2ndScene」が表示された状態にする
23.「Window」メニュー→「Lighting」→「Settings」を選択し、「Object Maps」タグをクリックする
24.「Auto Generate」のチェックを外す
25.「Generate Lighting」をクリックする
これで再生ボタンを押せば動きます。
時短でUnityちゃんトゥーンシェーダを使う
Unityでアニメ調の見た目にしてくれる「Unityちゃんトゥーンシェーダ」。Unityに慣れてるヤツしか触るな!的で、モデリング始めたばかりの方にはややとっつきにくい印象があります。
なので、Unityに触ったことがないという方でも分かるようにできるだけ細かく書いてみました(たぶん私が忘れるので・・・)。
とりあえず、超簡単に使うための方法です。詳細な設定は、Unityちゃんトゥーンシェーダをダウンロードするとついてくるご本家のマニュアルを参照ください。
とにかく時短、ということで、Unityちゃんトゥーンシェーダを使うにあたり以下の制約条件のもと設定しています。
・表情モーフなし、スカートなどの揺れボーンなし
・Mixamoで自動でボーン&スキニング設定をする
・目以外のテクスチャはなし、3Dアプリで設定するマテリアルは色のみ
表情モーフありの設定バージョンは後日に。
記事執筆にあたり、こちらを参照させて頂きました。
www.youtube.com
■UnityとUnityちゃんトゥーンシェーダをダウンロード
1.下記からUnityをダウンロードする
store.unity.com
2.下記からUnityちゃんトゥーンシェーダをダウンロードする
ユニティちゃんトゥーンシェーダー2.0 - ダウンロード - UNITY-CHAN! OFFICIAL WEBSITE
■モデルを用意する
1.3Dアプリで「.fbx」形式でモデルを書き出す。このときにテクスチャをfbxファイルと同じファイル階層に置くこと(テクスチャ作成時から注意しておく)
※mixamoを使って自動でボーンを入れる場合は、バージョンを「FBX7.4バイナリ」または「FBX2014」にして書き出し、.fbxファイルとテクスチャファイルをフォルダにまとめてZIP圧縮する。それをmixamoのサイトでアップロードしてください。そしてできた.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.そうすると自動的にマテリアルを紐づけてくれる
■Unityちゃんトゥーンシェーダを使う準備
12.「File」メニュー→「Build Settings」→「PC,Mac&Linux Standalone」が選択されている状態で「Player Settings」をクリックし、「Other Settings」→「Color Space」を「Linear」にする
13.「Hierarchy」ウィンドウの「Directional Light」をクリックし、「Color」を白にする
■照明とカメラの設定をする
デフォルトの状態でUnityちゃんトゥーンシェーダを使うと、若干暗くなってしまう。なので、下記の設定を行う
※2018年10月の時点では、14.は必要なくなりました
14.「Window」→「Lighting」→「Settings」→「Enviroment Lignting」の「Source」を「Color」にして、「AmbientColor」を白系統にする
15.「Hierarchy」ウィンドウの「Directional Light」をクリックし、「Inspector」を下記のようにして仮の照明を設定する
(「UnityChanToonShaderVer2_Project-master」→「Assets」→「ToonShader.unity」のUnityちゃんが映っているシーンを参照)
16.「Hierarchy」ウィンドウの「Main Camera」をクリックし、を下記のようにして仮のカメラを設定する
■3Dモデルを表示する
17.「Assets」→モデルのフォルダを「Hierarchy」ウィンドウにドラッグする
18モデルが表示されるので、シーンビューの右上にある下記のようなアイコンに注目する。このアイコンの中央の□を右クリックして、「Front」を選ぶ
19.下記の方法でモデルを見やすい位置に持ってくる
・視点の平行移動 マウスのスクロールボタンを押す
・視点のズームイン/アウト マウスのスクロールボタンを動かす
・(必要であれば)回転 マウスの右クリックを押す
■モデルの身長を調整する
20.「GameObject」メニュー→「3D object」→「Cube」を選択し、立方体を表示させる
21.「W」キーを押す。次に赤色の矢印が出てくるので、先端をクリックしながらマウスを動かし、立方体を左に移動させる。モデルと並ぶように配置する
22.「R」キーを押す。次に緑色の■が出てくるので、先端をクリックしながらマウスを上に動かして、モデルと同じ「高さ」になるように拡大or縮小する
モデルと立方体の地面の高さが同じになるよう、18.と同じ方法で立方体を動かす
23.立方体がクリックされている状態で、「Inspector」→「Scale」の「Y軸」の値を確認する
この値(m)がモデル(アバター)のサイズと同じくらいであれば問題ないが、大幅に異なる場合は以下のようにモデルのサイズを調整する
23-1.モデルの拡大or縮小率を下記のように計算する
モデル(アバター)の身長(m)÷16.で確認した立方体のY軸のScaleの値
例:アバターの身長が150cm(1.5m)で、立方体のY軸のScaleの値が3の場合
1.5m÷3m=0.5
23-2.「Assets」→モデルのフォルダをクリックし、「Inspector」→「Model」→「Scale Factor」に先ほど算出した拡大or縮小率を入力して(例の場合だと「0.5」)「Apply」を押す
24.「Hierarchy」ウィンドウの「Cube」を右クリックし、「Delete」を選択して立方体を消す
■Unityちゃんトゥーンシェーダで影をセットアップする
具体的にセットアップする項目は、赤色で囲ったところ。
25.「Assets」を右クリックして「Import Package」→「Custom Package」を選択する
26.2.でダウンロードして解凍した「UnityChanToonShaderVer2_Project-master」フォルダの「UTS2_ShaderOnly_v2.0.4_Release.unitypackage」を選択して「Open」を押す
27.「Import」ボタンを押す
28.基本の色や影の色のRGB値を知るため、3Dモデルの設定画(彩色済み)をPhotohopやSAI、クリスタなどで開いておく
29.「Assets」→「Materials」→マテリアル名をクリックし、「Shader」を「Toon_DoubleShadeWithFeather」にする
ここから影色・ハイライト色・輪郭線色などを設定していきます。これはすべての色(マテリアル)に対して行う。
30.「Inspector」に設定画面がずらずら出てくる。影色では下記が設定項目となる
目などテクスチャが必要なマテリアル(色)は、あらかじめ「Assets」→「Textures」フォルダにテクスチャファイルを入れておく。その上で、「Texture」の項目の「Select」ボタンを押してテクスチャを選択する。出てこない場合は、虫メガネアイコンのところにテクスチャのファイル名を入力する。
31.1カゲ(基本の影)と2カゲ(さらに濃い影)の色を設定する
32.「ShaderColor_Step」を0にしておく
33.「BaserColor_Step」のスライダを右に動かし、画面を見ながら影の出る具合を調整する
34.影の境界をボカしたい場合は「Base/Shade_Feather」の値を大きくする
35.2カゲを使う場合は「ShaderColor_Step」のスライダを右に動かし、画面を見ながら影の出る具合を調整する
36.2カゲの影の境界をボカしたい場合は「Base/Shade_Feather」の値を大きくする
■Unityちゃんトゥーンシェーダでハイライトをセットアップする
37.「HighColor」でハイライトの色を設定する
38.「HighColor_Power」でハイライトの強さを設定する
■Unityちゃんトゥーンシェーダでリムライト(反射光)をセットアップする
リムライトとは、キャラクターの背後から当てられる反射光のことです。主に女性や羽など、キャラクターを柔らかく見せるために使われます。
すごく分かりにくいですがこんな感じです。下図では髪の毛のハイライトは水色っぽい光ですが、よく見ると頭の輪郭と頭の間に真っ白な色を塗っています。これがリムライトの効果です。
厚塗りではよく使われます。
39.「RimLigntColor」で反射光の色を設定する
40.「RimLignt_Power」で反射光の強さを設定する
■Unityちゃんトゥーンシェーダで輪郭線をセットアップする
41.「Outline_Width」で輪郭線の太さを調整する
42.「「Outline_Color」で輪郭線の色を調整する
43.「Farthest_DIstance」で輪郭線の太さが変化し始める最短距離を設定する
トゥーンシェーダーのライセンスについて
© Unity Technologies Japan/UCL
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();
}
}
