まゆたまガジェット開発逆引き辞典

電子工作やプログラミングのHowtoを逆引き形式で掲載しています。作りたいモノを決めて学んでいくスタイル。プログラマではないので、コードの汚さはお許しを。参照していないものに関しては、コピペ改変まったく問いません

バーチャルキャスト+VCIで、タッチすると(アイテム同士が接触すると)アニメーションが再生される

VCI(バーチャルキャストでアイテムを扱うための環境)を使って、アイテムにタッチするとアニメーションが再生されるようにします。
こんな感じ。

前回はグリップボタンを押すことでアクションが起きましたが、今回はアイテム同士が接触することでアクションが起こる状態を作っていきます。
prince9.hatenablog.com


これを応用すれば、「ボタンを押してアニメーションを再生する(リモコン)」も可能です。
ご本家のwikiでは例としてこちらにちょろっと書いてある程度で、詳細な説明がされていません。Unityでアニメーションを作った経験がないと、初見では分かりづらいかと思われます。
virtualcast.jp

VCIの環境を整える

1. 一度もVCIスクリプトつきのアイテムを作成・アップロードしたことがない場合は、下記の最初から「VCIスクリプトを書く」4.まで行い、Unityで環境をつくる。
prince9.hatenablog.com

初回の設定が終わっている(一度でもVCIスクリプトつきのアイテムを「The Seed Online」上にアップロードしたことがある)場合は、上記のリンクの「VCIスクリプトを書く(2回目以降はここから始める)」4.までを行う。

2.下記の条件すべてをクリアしているか確認する。クリアしていない場合は、リンクを参考にVCIスクリプトをつけたいアイテムを「The Seed Online」にアップロードして使用済みの状態にしておく
prince9.hatenablog.com

■条件
・VCIスクリプトを追加したい「つかんで動かせるVCIアイテム」をUnityで作成済み
・VCIスクリプトを追加したい「つかんで動かせるVCIアイテム」を「The Seed Online」に投稿or公開状態でアップロード済み
・VCIスクリプトを追加したい「つかんで動かせるVCIアイテム」をバーチャルキャストで一度でも呼び出して使った状態

アイテムを用意して、初期位置を調整する

今回使用するアイテムは下記の2つです。ステッキでウサギさんにタッチすると、ウサギのアニメーションが再生されるシンプルな仕組みです。

・アニメーションさせたいアイテム(今回の例だとウサギ)
・上記にタッチすることでアニメーション再生のトリガーとするアイテム(今回の例だとステッキ)

バーチャルキャスト自体、アバターがタッチしてもアクションは起こらない仕様になっています。アイテムにアクションを起こさせる場合、アイテム同士が接触する・アバターがアイテムをつかんでグリップボタンを押すの2択になります。今回はアイテム同士が接触することでアクションが起こる状態を作っていきます。

1.作成済みの「VCIスクリプトを追加したい"つかんで動かせるVCIアイテム"」があるUnityプロジェクトを開く
2.「root」の下に入っている「つかんで動かしたいアイテム(オブジェクト)」を「Hierarchy」の何もないところにドラッグし、いったん親子関係を解除する
アイテムの大きさを調整したい場合は、この時点で「R」キーを押して調整しておく
3.2.のオブジェクトをクリックし、「Inspector」→「Transform」→「Position」を一度0,0,0にする
4「Hierarchy」→「Create」をクリックし、「CreateEmpty」を選択する
5.空の「GameObject」ができているので、「GameObject」をクリックして適当な英字名に変更する(ここでは「UsaAtari」にしました)
6.5.で作った空のオブジェクトに3.の「つかんで動かしたいアイテム(オブジェクト)」をドラッグし、親子関係にする
f:id:prince9:20190416031456p:plain

7.親子関係になった8.(ここでは「UsaAtari」オブジェクト)をクリックし、Wキーを推して好きな位置に変更する。0,0,0の場合は下すぎてアバターやステージ(環境)によっては手が届かないことがあるため。アバターの顔の位置あたりが適当か?
8.7.を「root」オブジェクトにドラッグ&ドロップし、さらに親子関係にする
f:id:prince9:20190416031544p:plain

アイテムをつかんだり衝突判定ができるようにする

「つかんで動かせるVCIアイテム」を作るときと方法は同じですが、「VCISubItem」と「Box Collider」を設定するオブジェクトが違います。
公式では例としてのみ書かれていて、詳細な説明がないので注意です。

rootオブジェクトに対する設定

1.「Hierarchy」にある「root」をクリックし、「Inspector」に「VCIObject(Script)」があるか確認する。ない場合は「Add Component」をクリックし、検索窓に「VCI」と入力して「VCIObject」を選択して追加する
2.「root」がクリックされている状態で、「Window」メニュー→「Animation」→「Animation」を選択し、「Animation」の画面を出す
3.「Animation」ウィンドウが出てくるので「Create」ボタンを押す
f:id:prince9:20190416040150p:plain
4.英字で名前をつけて「Save」を押す
5.「Animation」ウィンドウの赤い●をクリックし、録画状態にする
f:id:prince9:20190416040329p:plain
6.「Add Property」をクリックし、「つかんで動かしたいアイテム(オブジェクト)の▶︎」→「Transformの▶︎」→「Position横の+」の順でクリックし、下記のような状態にする
f:id:prince9:20190416040759p:plain
7.下記に「15」と入力して、15に飛ぶ
f:id:prince9:20190416041117p:plain
8.「Scene」ビューに戻って、「Hierarchy」の「つかんで動かしたいアイテム(オブジェクト)」をクリックする
9.「W」キーを押して、上方向(Y軸方向)に少し動かす
・0の状態
f:id:prince9:20190416041206p:plain
・15の状態
f:id:prince9:20190416041235p:plain
10.「Animation」ウィンドウの「1:00」のところにある◆マークを「30」のところまでドラッグする
f:id:prince9:20190416041457p:plain
11.赤い●をクリックし、録画状態を解除する
12.「Animation」ウィンドウの赤い●の隣のボタンをクリックし、先頭に戻る
13.「Animation」ウィンドウの▶︎を押して、「Scene」ビューでアニメーションが動いているか確認する
14.「Assets」に「root」という名前のAnimation Controllerができているのを確認する
f:id:prince9:20190416063121p:plain
15.「Hierarchy」の「root」をクリックし、「Inspector」→「Add Component」をクリックする
16.「Inspector」に「Animater」が追加されていなければ、「Add Component」をクリックする。あればそのまま18.へ
17.16.がない場合は検索窓に「Animater」と入力して「Animater」をクリックする
18.「root」オブジェクトの「Inspector」→「Animater」→「Controller」の横の□に、14.で作ったAnimation Controllerをドラッグ&ドロップする
f:id:prince9:20190416063141p:plain

空のオブジェクト(ここでは「UsaAtari」オブジェクト)に対する設定

このオブジェクトに衝突判定やアイテムをつかむ設定を行います。アニメーションがついてない単なる「つかんで動かせるVCIアイテム」とは異なり、アイテムのオブジェクト自体に設定するのではない点に注意!

1.「UsaAtari」をクリックし、「Inspector」→「Add Component」をクリックする
2.検索窓に「VCI」と入力して「VCISubItem」をクリックする
3.「VCI Sub Item(Script)」がInspectorに出ていることを確認し、「Grabbable」にチェックを入れる
「Grabbable」にチェックを入れて、後述のColliderを設定することで掴めるようになります
4.大きさを変えたい場合は「Scalable」と「UniformScaling」にチェックを入れる。
UniformScalingは同じ比率で拡大縮小させる場合にチェックを入れる
5.「Rigidbody」の「Use Gravity」のチェックを外す。
「Use Gravity」のチェックを外す(重力を無視する)+「Is Kinematic」にチェックを入れないと、離したときに落下していくので注意
6.空中に留まっていて欲しいので、「Is Kinematic」にチェックを入れる
7.そのまま「Add Component」をクリックし、検索窓に「Box Collider」と入力して「Box Collider」をクリックする
8.「Edit Collider」ボタンをクリックして画面上で緑の■を動かし、アイテムをタッチしたい+つかみたい範囲が入るように大きさを調整する。
今回はウサギのボディあたりを範囲とした
f:id:prince9:20190416034826p:plain

設定済みの状態がこちらです。「Rigidbody」の「Mass」を10にすることで、つかんだときにあまりフラフラしないようにしています。
f:id:prince9:20190416034930p:plain

タッチされてアクションが起こるオブジェクト(アイテム)に対する設定

特に設定はありません

アクションのトリガーとなるアイテムに対する設定

1.「Assets」に「.fbx」「.glb」形式どちらかのファイルをドラッグ&ドロップして読み込ませる。今回は「Usacon」というオブジェクト名
2.1.を「Hierarchy」の何もないところにドラッグ&ドロップする
3.2.がクリックされている状態で、「W」キーを押して位置を調整する。アバターの顔あたりが無難?
4.3.を「root」オブジェクトにドラッグ&ドロップして、下記のような状態にする
f:id:prince9:20190416043221p:plain
5.4.がクリックされている状態で、「Inspector」→「Add Component」をクリックする
6.検索窓に「VCI」と入力して「VCISubItem」をクリックする
7.「VCI Sub Item(Script)」がInspectorに出ていることを確認し、「Grabbable」にチェックを入れる
「Grabbable」にチェックを入れて、後述のColliderを設定することで掴めるようになります
8.大きさを変えたい場合は「Scalable」と「UniformScaling」にチェックを入れる。
UniformScalingは同じ比率で拡大縮小させる場合にチェックを入れる
9.「Rigidbody」の「Use Gravity」のチェックを外す。
「Use Gravity」のチェックを外す(重力を無視する)+「Is Kinematic」にチェックを入れないと、離したときに落下していくので注意
10.空中に留まっていて欲しいので、「Is Kinematic」にチェックを入れる
11.そのまま「Add Component」をクリックし、検索窓に「Box Collider」と入力して「Box Collider」をクリックする
12.「Edit Collider」ボタンをクリックして画面上で緑の■を動かし、アイテムをタッチしたい+つかみたい範囲が入るように大きさを調整する

設定済みの状態がこちらです。
f:id:prince9:20190416043452p:plain

VCIスクリプトを書く

ようやく下準備が完了しました。後はスクリプトを書いて「root」にコピペするだけです。
今回は「Usacon」というステッキ型のオブジェクトをつかんだ状態でウサギにタッチすると、ウサギがアニメーションする流れになっています。

要素として、
・ステッキとウサギの衝突判定
・衝突するとアニメーションが一度再生される(ループなし)
となります。

実際のコードはこちら。

---[SubItemの所有権]アイテムにCollider(not Trigger)が接触したときに呼ばれる。
---@param item string @SubItem名
---@param hit string @Collider名

function onCollisionEnter(item, hit)
    if (item == "Usacon" and hit == "UsaAtari") or (item == "UsaAtari" and hit == "Usacon") then
        vci.assets._ALL_PlayAnimationFromName("JumpAnim",false)
    end
end

function onCollisionEnter(item, hit)〜でアイテム同士が接触したときの状態を書きます。
if以下〜は、もしアイテム「Usacon」と「UsaAtari」が接触したら、で、
vci.assets._ALL_PlayAnimationFromName〜は「JumpAnim」というアニメーションを一度再生しなさい、という流れです。

vci.assets._ALL_PlayAnimationFromName("アニメーションのファイル名",タッチごとに一度再生ならfalse。ループ再生させるならtrue)となります。
ここでもし「Stopcon」という別アイテムと「Usacon(ステッキ)」が接触したときに再生を止めたいという場合は、function onCollisionEnter(item, hit)の部分に下記を追加します。

    if (item == "Usacon" and hit == "Stopcon") or (item == "Stopcon" and hit == "Usacon") then
        vci.assets._ALL_StopAnimation()
    end

再生と停止両方を入れたスクリプト全体としては下記になります。

function onCollisionEnter(item, hit)
    if (item == "Usacon" and hit == "UsaAtari") or (item == "UsaAtari" and hit == "Usacon") then
        vci.assets._ALL_PlayAnimationFromName("JumpAnim",true)
    end

  if (item == "Usacon" and hit == "Stopcon") or (item == "Stopcon" and hit == "Usacon") then
        vci.assets._ALL_StopAnimation()
    end


end

|

vci.assets._ALL_StopAnimation()で止まります。

VCIスクリプトを適用する

1.「root」オブジェクトをクリックし「Inspector」→「Scripts」に下記を入力する
・Size → 1にする
・Name →「main.lua」と入力
・Source →「VCIスクリプトを書く」項目ので書いたスクリプトをコピペする。必要なコード全体をここにコピペする形です

VCIアイテムを書き出す

1.「Hierarchy」の「root」をクリックし、「VCI」メニュー→「UniVCI-バージョン」→「Export VCI」を選択する
2.ウィンドウが開くので、「新しいフォルダー」をクリックし、「Sample」と名前をつける
3.「Sample」フォルダをダブルクリックし、英語でファイル名をつけて「保存」を押す

The Seed Onlineにアップロードする

1.「The Seed Online」にアクセスする
seed.online

2.ログイン後、すでにアップロード済みの「つかんで動かせるVCIアイテム」をクリックする
3.「別のファイルを再アップロードする」をクリックし、「VCIアイテムを書き出す」3.で書き出した「.vci」ファイルをクリックする
4.「選択」ボタンを押して再アップロードする
8.下の方の「利用規約に同意する」にチェックを入れる
9. バーチャルキャストとThe Seed Onlineを連携した上でバーチャルキャストに入ると、アイテムのところに出てくるので使えるようになる

バーチャルキャスト+VCIでグリップボタンを押すとアクションが起こるオブジェクトを作る

バーチャルキャストで「オブジェクトをつかんだ状態でグリップボタンを押すと、オブジェクトの表情が変わる」ものを作ります。
Lua」言語で書かれたVCIスクリプトをオブジェクトに適用することで、アクションによって反応するオブジェクトを作成することができます。
例によって忘れないよう急ぎのメモなので、スクショが極端に少ないですが、ご容赦ください。

VCIスクリプトの開発環境を整える(初回のみ)

下記を参照していきます。基本的には流れは同じですが、Windowsを熟知している方向けなのか微妙に設定のプロセスが飛んでるところがあったので、補完的な意味でメモすることにしました。
virtualcast.jp

まず、下記すべてをクリアした状態であることを確認して始めます。
・VCIスクリプトを追加したい「つかんで動かせるVCIオブジェクト」をUnityで作成済み
・VCIスクリプトを追加したい「つかんで動かせるVCIオブジェクト」を「The Seed Online」に投稿or公開状態でアップロード済み
・VCIスクリプトを追加したい「つかんで動かせるVCIオブジェクト」をバーチャルキャストで一度でも呼び出して使った状態

クリアしていない場合は、下記を参考にまずオブジェクト(アイテム)を作成します。
prince9.hatenablog.com
作成済みの「つかんで動かせるVCIオブジェクト」にVCIスクリプトを付け足していく形になります。


公式の各種サンプルはこちらになります。
virtualcast.jp



1.「The Seed Online」からVCIスクリプトつきのオブジェクトを取り込んでおく(自作のものに限らず、何でもOK)。
seed.online

ここでは下記を取り込みました
seed.online

2.バーチャルキャスト上で1.のオブジェクトと作成済みの「つかんで動かせるVCIオブジェクト」を読み込み、試しに使ってみる
3.バーチャルキャストを終了する
4.開発環境の「VSCode」をダウンロード&インストールする
code.visualstudio.com
5.Javaがインストールされていなければ、下記からダウンロード&インストールする(オンラインでいいかと思います)
www.java.com
6.インストールが終了したら、PCを再起動する
7.VSCodeを開き、左にある拡張機能のアイコンをクリックする
8.検索スペースのところに「VSCode-EmmyLua」と入力すると右側に「EmmyLua」が出てくるので、「インストール」をクリックする
9.Cドライブ→ユーザー→ユーザー名とクリックしていき、「表示」タブをクリックする
10.そうすると「隠しファイル」という項目があるので、□をクリックして隠しファイルを表示させる

www.jaskun.com

11.隠しファイルを表示させると「AppData」というフォルダが見えるので、AppData→LocalLow→infiniteloop Co,Ltd→VirtualCastとクリックしていき、「EmbeddedScriptWorkspace」フォルダがあるか確認する
12.VSCodeの「ファイル」メニュー→「フォルダーを開く」を選択し、11.のパスの「EmbeddedScriptWorkspace」フォルダを選択して開く
13.「types.lua」「template.lua」がVSCode上(左のウィンドウ)にあるか確認する


VCIスクリプトを書く(2回目以降はここから始める)

1.「EmbeddedScriptWorkspace」フォルダをエクスプローラで開いて「つかんで動かせるVCIオブジェクト」名のフォルダ名があるか確認する
2.「EmbeddedScriptWorkspace」フォルダにある「template.lua」をコピーする
3.「EmbeddedScriptWorkspace」フォルダ→「つかんで動かせるVCIオブジェクト」名のフォルダに2.をペーストする
4.3.でペーストした「template.lua」を「main.lua」に名前を変更する
5.4.の「main.lua」をVSCodeで開き、スクリプトを入力する
6.5.を保存する(VSCodeはまだ閉じない)
7.6.をコピーする


VCIスクリプトをオブジェクトに適用する

1.「つかんで動かせるVCIオブジェクト」を作成したUnityプロジェクトをUnityで開いて、シーンを読み込む
2.rootオブジェクトをクリックし「Inspector」→「Scripts」に下記を入力する
・Size → 1にする
・Name →「main.lua」と入力
・Source →「VCIスクリプトを書く」項目の7.でコピーしたものをペーストする。必要なコード全体をここにコピペする形です

スクリプトは下記になります。というより、ポスターのサンプルとほぼ同じです。
virtualcast.jp

サンプルの例ではUVが3×3となっていますが、ここでは2×2にしています。
またマテリアル名は「Usamat」にしています。

local assets = vci.assets
local count = 0
if vci.state.Get("COUNT") then
    count = vci.state.Get("COUNT")
end
local TOTAL = 4

function SetCounterOffset(count)
    local offset = Vector2.zero
 
    -- y shift
 local Yshift = math.floor(count / 2)
    offset.y = -(1/2) * Yshift
    
 
    -- x shift
    local Xshift = count % 2
    offset.x = (1/3) * Xshift
 
    vci.assets._ALL_SetMaterialTextureOffsetFromName("Usamat", offset)
end
SetTextureOffset(count)
 
function onUse(use)
    if count >= TOTAL-1 then
        count = 0
    else
        count = count + 1
    end
    vci.state.Set("COUNT", count)
    SetTextureOffset(count)
end

再度VCIオブジェクトとして書き出す

1.シーンを保存し、再度VCIオブジェクトとして書き出す
下記の「書き出す」項目を参照

prince9.hatenablog.com

2.「The Seed Online」で「つかんで動かせるVCIオブジェクト」のページを開き、「別のファイルを再アップロードする」をクリックする
3.1.で書き出した「.vci」ファイルを選択し、アップロードする
4.バーチャルキャスト上で動くかどうか確認する

バーチャルキャストに3Dオブジェクトを持ち込んで、つかんだりする

バーチャルキャストに3Dオブジェクトを持ち込んで、小道具として使用する方法です。
「The Seed Online」にアップロードすることで簡単にバーチャルキャストで使用することができるのですが、アイテムを登録するだけではつかんだり移動させたりができませんでした。
seed.online

小道具をつかむ・移動させる・拡大縮小するためには、「VCI」として書き出さないといけないようです。
今回は小道具を持ち込み、バーチャルキャスト内でつかんだりして使用できるようにします。
急ぎで自分メモしたので、図なしの箇条書きで見にくくてすみません。

UnityはMacでも動きますが、VCIの開発環境がWindowsのみのため、Windowsマシンで行います。

記事を作成するにあたり、下記を参考にさせて頂きました。ありがとうございます。
(下記3つ、バージョンアップにより微妙に変わっているところがあります。この記事は2019年3/21時点の最新バージョンで行ったものです)
また下記のサンプルでは立方体を作ってアップロードしていますが、この記事はすでに作成済みの3Dモデルをアップロードしています(.glbファイル推奨ですが、FBXもできました。おそらく書き出しのときに変換しているかと)。
virtualcast.jp
https://niconare.nicovideo.jp/watch/kn4137
https://niconare.nicovideo.jp/watch/kn4199

こんな感じで某激レアさんのフリップボード?(司会のアナウンサーさんがホワイトボードに貼り付けてるアレ)を作ってみました。サイズ的にもちょうどいい感じ。
f:id:prince9:20190321064856j:plain

ちなみに背景をアニメーションさせる場合はこちらです。
virtualcast.jp


UnityでVCIを書く環境を整える(初回のみ)

1.最新版のUnity(ベータ版ではない方)をダウンロード&インストールする
2.Unityを開いて新規プロジェクトを作成する。このときプロジェクト名は英語で「VCI_Test1」など分かりやすい名前をつける。
「Enable Unity Analytics」は一応ONにしておく
3.「Edit」メニュー→「Project Settings」を選択し、左側の「Player」をクリック。次に右側の「Other Settings」をクリック
4.「Configuration」と書かれた太字の項目を探し、「Scripting Runtime Version」の項目を「.NET 4.x Equivalent」にする。
変更した場合は「Restart」というボタンが出てくるので、それを押してUnityを再起動する
5.2.で作ったUnityプロジェクトを開いた状態で、下記からUniVCIのUnityPackage最新版をダウンロードする
github.com

6.ダウンロードしたUnityPackageを「Assets」にドラッグ&ドロップし、「Import」ボタンを押す

UnityでVCIを書く環境を整える(2回目以降はここから下を実行)

1.Unityを開いて新規プロジェクトを作成する。このときプロジェクト名は英語で分かりやすい名前をつける。
「Enable Unity Analytics」は一応ONにしておく
2.下記からUniVCIのUnityPackage最新版をダウンロードする
github.com

3.ダウンロードしたUnityPackageを「Assets」にドラッグ&ドロップし、「Import」ボタンを押す

サンプルを作成する

公式でも発表があったように、「root」の中に操作したいオブジェクトを複数突っ込む形です。また操作したいオブジェクトの下に操作したいオブジェクトを置くことはできません。

1.「Hierarchy」→「Create」をクリックし、「CreateEmpty」を選択する
2.空の「GameObject」ができているので、「GameObject」をクリックして「root」に名前を変更する
3.「root」がクリックされている状態で、右側の「Inspector」を見て、「Transform」→「Position」「Rotation」が(0,0,0) 、「Scale」が(1,1,1)になっているか確認する
4.そのまま「Add Component」をクリックし、検索窓に「VCI」と入力して「VCIObject」をクリックする
5.「VCIObject(Script)」が追加されていることを確認し、「Information」を下記のように入力する。ここはライセンスなどを入力するところで、VRMでいうアバター名などの設定項目に該当する
・「Title」→ 英語名で
・「Version→ 「1」
・「Autho」→ 制作者の名前を英語名で
・「Description」→空欄でもOK、アイテムの説明
6.「Assets」に「.glb」または「.fbx」の拡張子がついた3Dモデルをドラッグ&ドロップして読み込む(「.glb」ファイルはメタセコ等の3Dアプリで書き出し可能)
7.3Dモデルのファイル名のついた青い立方体を「Hierarchy」にドラッグ&ドロップする
8.人型の3Dモデルを読み込んでおき、7.のオブジェクトのサイズを調整する
9.サイズ調整が終わったら、7.のオブジェクトを「Hierarchy」の「root」にドラッグ&ドロップして、rootの子にする

つかめるようにするか・浮くようにするか設定する

1「root」にドラッグ&ドロップしたオブジェクトをクリックし、右側の「Inspector」の「Add Component」をクリックする
2.検索窓に「VCI」と入力して「VCISubItem」をクリックする
3.「VCI Sub Item(Script)」がInspectorに出ていることを確認し、「Grabbable」にチェックを入れる
「Grabbable」にチェックを入れて、後述のColliderを設定することで掴めるようになります
4.大きさを変えたい場合は「Scalable」と「UniformScaling」にチェックを入れる。
UniformScalingは同じ比率で拡大縮小させる場合にチェックを入れる
5.「Rigidbody」の「Use Gravity」のチェックを外す。「Use Gravity」のチェックを外す(重力を無視する)+「Is Kinematic」にチェックを入れないと、離したときに落下していくので注意
6.空中に留まっていて欲しいので、「Is Kinematic」にチェックを入れる
7.そのまま「Add Component」をクリックし、検索窓に「Box Collider」と入力して「Box Collider」をクリックする
8.オブジェクトの大きさに合うように「Center」「Size」の値を調整する。「X」の文字にマウスカーソルを合わせて左右に動かすと、画面を見ながら数値を変化させることができる。
もしくは「Edit Collider」ボタンをクリックして画面上で緑の■を動かすと、画面を見ながら大きさを変更することもできる


シェーダを設定する

1.「Assets」→「読み込んだ3Dオブジェクト名.Materials」フォルダを探し、マテリアルをクリックする
2.その状態で「Inspector」→「Shader」→「Standard」をクリックする
3.シェーダを「UniGLTF」→「UniUnlit」に変更する(VRM→MToonもOK)
※影をつけない場合は「UniUnlit」、影をつける場合は「StandardVColor」にする。アニメっぽくする場合は「MToon」に


書き出す

1.「Hierarchy」の「root」をクリックし、「VCI」メニュー→「UniVCI-バージョン」→「Export VCI」を選択する
2.ウィンドウが開くので、「新しいフォルダー」をクリックし、「Sample」と名前をつける
3.「Sample」フォルダをダブルクリックし、英語でファイル名をつけて「保存」を押す



The Seed Onlineにアップロードする

1.Unityを終了し、「The Seed Online」にアクセスする
seed.online

2.アカウント登録後、「アップロード」ボタンを押す。その後「利用規約に同意する」にチェックを入れる
3.「投稿するアイテムタイプ」を「小道具(VCI・GLB)」に変更し、立方体アイコンをクリックする
4.先ほど作ったUnityのプロジェクトフォルダを探し、「Assets」→「Sample」→「.vci」(「書き出す」3.で保存した.vciファイル)を探してクリック、「開く」を押す
5.「アップロードされました」との表示が出たら、「アイテムを見る」をクリックする
6.立方体が表示されていることを確認し、「アイコンを撮影」のボタンを押す。そうするとアイコン画像が登録される
7.「アイテム名」を変更する
8.下の方の「利用規約に同意する」にチェックを入れる
9. バーチャルキャストとThe Seed Onlineを連携した上でバーチャルキャストに入ると、アイテムのところに出てくるので使えるようになる

バーチャルキャストでボイスチェンジ配信+Discordも使用

ボイスチェンジャーを使ったバーチャルキャストでの配信の音まわり・キャプチャアプリ「Luppet」とボイチェンを使うときの音周り・バーチャルキャスト+Discordを使った配信の音まわりに関するメモです。
バーチャルキャストとなっていますが、clusterでも設定は同じです(Discordと併用しない限り)。

※6/3訂正+Luppetを使った配信の音回り設定を追加しました

ボイスチェンジャーを使ったバーチャルキャストでの配信の音まわり設定

0.Voicemeeter BananaとVB-CABLEをダウンロード&インストールする
www.vb-audio.com
www.vb-audio.com


1.VR機器を接続した後、SreamVRを立ち上げる。そして「SteamVRバージョン名」のところを右クリックし、「設定」を選択する
さらにSteamVRの「設定」を下記のようにする(一度設定したら次から飛ばしてOK)
f:id:prince9:20190318033958p:plain

2.サウンドコントロールパネルで下記のように設定する。
私の環境では名前がおかしくなって、下のバーのスピーカーアイコンに×印がついたことがあります。その場合は「VAIO」と書いてない方のアイコンの名前を「CABLE Input/Output」と変えると良いようです
f:id:prince9:20190318033657p:plain
f:id:prince9:20190318033725p:plain

3.ボイチェンアプリを立ち上げて下記のような設定にする。OnにしてもOK
(下記はバ美声の例です)
f:id:prince9:20190603144514p:plain

4.Voicemeeter Bananaを立ち上げ、下記のような設定にする。
自分の声のモニタを切りたい場合は、Hardware InputのA1を選択しないようにする。ヘッドホンはBluetoothもOK
f:id:prince9:20190603144657p:plain

5.バーチャルキャストを立ち上げ、スタジオに入る。OBSなど配信アプリ経由で配信する場合は、配信先アドレスにダミーアドレスを入れる(非公式)
サウンドは「規定のデバイス(VoiceMeeter Output = B1)」でOK)

6.OBSを立ち上げ、「音声」の設定を下記のように設定する
・デスクトップ音声(VoiceMeeter Aux Output=B2=規定の再生デバイス) :バーチャルキャストの他出演者さん(凸者さん)+バーチャルキャストUIやアイテム音
・マイク音声(VoiceMeeter Output=B1=規定の録音デバイス):自分のボイチェン後の音声
f:id:prince9:20190603145157p:plain

9.配信開始

ボイスチェンジャーを使ったLuppetでの配信の音まわり設定

Luppet(LeapMotionを使った動きをキャプチャするアプリ)とボイチェンを使ってOBSで配信する設定です。
バーチャルキャストではVR機器のマイクを使用していましたが、ここではPC用マイクを使用します。
私の環境ではなぜかVoicemeeter Bananaを使うと音が凄まじく割れてしまったので(VST系未使用)、フリーDTMアプリの「reaper」を使用しました。

1.サウンドコントロールパネルで、下記のようになっているか確認する
f:id:prince9:20190318033657p:plain
f:id:prince9:20190318033725p:plain

2.ボイチェンを立ち上げ、以下のように設定する(まだONにしない)
f:id:prince9:20190427071519p:plain

3.reperを立ち上げ、「Options」→「Prefernce」から下記のような設定にする
f:id:prince9:20190427071209p:plain

4.ボイチェンをONにする

5.OBSを立ち上げ、以下のような設定にする
f:id:prince9:20190427071734p:plain

6.配信開始

ボイスチェンジを使ったバーチャルキャスト+Discordでの配信の音まわり設定(VR機器使用者さんとスマホ使用者さんの共演)

バーチャルキャストでの出演者さんとDiscordを使った音声のみの出演者さんが共演する場合の設定です。
映像はバーチャルキャスト、音声はDiscordでやりとりを行います。

今回ゲストの音量はDiscord上で調整したので、バーチャルキャストの音と混ぜても大丈夫でした。
音量調整がちゃんとついてるアプリなら分離しなくても良いかと思われます。
分離したい場合は下記のようにすればいけるかもです(未検証)。
1.出力を「Voicemeeter Aux」に
2.Voicemeeter Bananaの「Virtual Input」-「Voicemeeter Aux」をB2に

音声の流れについて

・配信者の声
マイク→CABLE Input出力→Voicemeeter BananaのCABLE Output→VoiceMeeter Output(B1)出力→OBSのマイク音声(B1)
・ゲストの声やバーチャルキャストの音
Discordのそれぞれの出力→配信者のVoiceMeeter Input出力→Voicemeeter Bananaの「Virtual Input」-「Voicemeeter VAIO」→VoiceMeeter Aux Output(B2)出力→OBSのマイク音声2(B2)
・配信者とゲストの声のモニタ
Voicemeeter Banana-「CABLE Output」の項目の「A1」をOnに、さらに同じくVoicemeeter Banana-「Voicemeeter VAIO」の項目の「A1」をOnに

起動順について

1.ボイチェンを立ち上げる
2.Voicemeeter Bananaを立ち上げる
3.バーチャルキャストを立ち上げ、左上の設定アイコンから「入力デバイス」を「CABLE Output」または「VoiceMeeter Output」にして、凸者音声が0になっていることを確認する
4.スタジオに入り、キャリブレーションの前で止まる(HMDをつけてください~の前の段階)
5.Discordを立ち上げる
6.Discordの音声チャンネルをクリックしてチャンネルに入る
7.HMDをつけてバーチャルキャストでキャリブレーションを行う
8.スタジオに完全に入ったら、OBSを立ち上げて配信する

設定項目

0.Voicemeeter BananaとVB-CABLEをダウンロード&インストールする
www.vb-audio.com
www.vb-audio.com

1.VR機器を接続した後、SreamVRを立ち上げる。そして「SteamVRバージョン名」のところを右クリックし、「設定」を選択する
さらにSteamVRの「設定」を下記のようにする(一度設定したら次から飛ばしてOK)
f:id:prince9:20190318033958p:plain

2.サウンドコントロールパネルで下記のように設定する
f:id:prince9:20190318033657p:plain
f:id:prince9:20190318033725p:plain

3.ボイチェンアプリを立ち上げて下記のような設定にする。OnにしてもOK
(下記はバ美声の例です)
f:id:prince9:20190603144514p:plain

4.Voicemeeter Bananaを立ち上げ、下記のような設定にする。
自分の声のモニタを切りたい場合は、Hardware InputのA1を選択しないようにする。ヘッドホンはBluetoothもOK
f:id:prince9:20190603174103p:plain

5.バーチャルキャストを立ち上げ、左上の設定アイコンから「入力デバイス」を「CABLE Output」または「VoiceMeeter Output」にして、凸者音声が0になっていることを確認する。Discordのみ参加可能なメンバーがいる場合は、音声のやりとりをすべてDiscord上で行う。消音にしておけば、リップシンクアニメーションのみ表示されるので問題なし
f:id:prince9:20190427012446p:plain

6.PC版DIscordを立ち上げ、「アプリの設定」→「音声・ビデオ」→「音声設定」の項目を下記のようにする
f:id:prince9:20190603173852p:plain
f:id:prince9:20190603174002p:plain

7.「グループアイコン」→「VOICE CHANNELS」の該当するチャンネルをクリックして音声通話状態にする

8.バーチャルキャストでキャリブレーションを行う(配信を行わないゲストの場合はここまで)

9.OBSを立ち上げ、「音声」の設定を下記のように設定する
・デスクトップ音声(VoiceMeeter Aux Output=B2) Discordの自分以外の音声+バーチャルキャストUIやアイテム音
・マイク音声(VoiceMeeter Output=B1=規定の録音デバイス):自分のボイチェン後の音声
f:id:prince9:20190603174033p:plain

10.配信開始

VR機器を使わない、Discordスマホアプリ使用の場合

1.Discordアプリを立ち上げる
2.メニューアイコンをタップし、下の歯車マークをタップする。「アプリの設定」→「音声」をタップし、下記のようにする
f:id:prince9:20190318045358p:plain
f:id:prince9:20190318045019p:plain

3.「グループアイコン」→「VOICE CHANNELS」の該当するチャンネルをタップする。
「ボイスチャンネルに接続」が出る場合もあるので、出ていたらそれもタップする
f:id:prince9:20190318045852p:plain

VRM(VRoid産)にパーツを追加して再びVRMに戻す

VRoidで出力したり他サイトで購入したVRMアバターにパーツを付け足して、再度VRMに戻す方法です。
Blenderを使用して変換する方法は紹介されていますが、「再度VRM化する際にボーンの割り当てが変更になっていることがある」という注意点があります。
今回はMayaを使ってパーツを追加していますが、Blenderでも注意点は同じです。

★VRoidStudio-v0.5.4-p2以降のバージョンでは、スキニングのあるなし関わらず、Unityに持っていった際に上手くいきませんでした

Mayaを使ってパーツ追加をする(Blenderの場合は2.3を飛ばす)

1.BlenderVRMを読み込み、FBX化

Mayaを使う場合はUnityでのアセットは使用厳禁。BlendShapeがおかしくなります。
プラグインの追加・VRM読み込み・FBX書き出し方法はこちらを参照します。このときBlenderのバージョンは2.8を使用します。
toylabo.tech

MacBlenderではVRMファイルの読み込みに失敗することがたまにあります。
失敗したか否かは見た目からは分かりません。エラーみたいなのも画面上には表示されませんでした。
Mayaに読み込んだ状態でボーンの形があからさまにおかしくなっている場合は失敗している可能性が高いです。

下記が成功例です。ボーンが身体全体を覆っている状態は失敗している可能性があります。
f:id:prince9:20190315235948p:plain

パーツ追加でBlenderを使用する場合は、この後2.と3.を飛ばしてパーツを追加・スキニング(ウエイト塗り)をしていきます。

2.1.で書き出したものをMayaで読み込み、パーツ追加・スキニング

スキニングが終わったら、ヒストリーを削除してから保存とFBX書き出しを行います。
追加パーツを移動・拡大縮小・回転させた際は、スキニング前に「修正」メニュー→「トランスフォームのフリーズ」をしておきます。
追加パーツは別シーンで作った後、モデルのみ消去して「追加パーツのみのFBXファイル」を作って読み込むとトラブルがなさげでした。
ヒストリーが残っているとエラーが起こりやすいです。

※スキニングによってはヒストリーを削除するとUnityでエラーが出ることがあります。
パーツを追加してそれのみFBXで書き出す→読み込み→トランスフォームのフリーズ→スキニング→書き出しがいちばん無難かもしれません

f:id:prince9:20190315192209p:plain

3.2.をBlenderで読み込み、FBXで書き出し(未確証ですが、3.をやらないとVRM化でエラーが起こる)

この作業の必要性が個人的に???だったのですが、ここを通さないとUnityでVRM化の際にBlendShape関連のエラーが起きました。ので一応記載。
書き出しの設定方法は1.と同じです。
toylabo.tech

1度目のVRM化(Blender使いもここ注意)

4.Unityで書き出したFBXファイルを読み込み、1回目のVRM化を行う(Blenderのみの場合も、VRoidを使用している場合はここ重要)

VRMで書き出す前に下記の作業をします。VRoidから書き出したモデルを使用している場合は必ず必要になります
1.Projectの中のFBXファイルをクリック
2.Inspectorが出てくるので、「Rig」タブから「Animation Type」を「Humanoid」にして一度「Apply」を押す
3.「Configure...」にチェックが入っていればOK
4.「Configure...」をクリックし、「Head」ボタンをクリックする

f:id:prince9:20190315193913p:plain
↑Headボタンをクリックした状態

5.Left Eyeの横の「J_Adj_L_FaceEyeSet」をクリックし、Hierarchyの中の「J_Adj_L_FaceEye」をクリックする
f:id:prince9:20190315194229p:plain

6.同様にRight Eyeの横の「J_Adj_R_FaceEyeSet」をクリックし、Hierarchyの中の「J_Adj_R_FaceEye」をクリックする
7.Headのボーンの割り当てが下記のようになっているか確認する。jawにボーンが入っていたら、jawの右の◎をクリックして「None」を選択する
f:id:prince9:20190315194348p:plain

設定が終わったら、「Apply」→「Done」の順にボタンを押す

8.1度目のVRM化。マテリアルとテクスチャはこの後設定するので、Humanoid化とボーンの割り当てを変更したらVRM化を行う。
FBXファイルをHierarchyに配置してクリック→「VRM」メニューの「UniVRM-バージョン」を選択→「Export humanoid」で1度目の書き出し
9.下記を参考にして、マテリアルとテクスチャを再設定する
qiita.com
10.こちらのやり方で揺れモノやコライダーの設定を再設定する
scrapbox.io

※2019/12/30追記 こちらのVRM設定移行エディタ拡張「CopyVRMSettings」で設定がやりやすくなりました!


※上記の「[設定を出力する手順]」でHierarchy上にモデル1体のみ置くことを推奨されています。
この場合、このようにしてモデル1体のみ表示します。
1.「Assets」を右クリックして「Create」→「Prefub」を選択
2.新しくできた「New Prefub」の名前を英語で変更する
3.Hierarchy上のモデルを2.にドラッグ&ドロップする
4.Hierarchy上のモデルを右クリックし、「Delete」で消す
5.再度モデルを置く場合は3.でできたPrefubをHierarchyにドラッグ&ドロップする

5.その他細かいところを修正する

2度目のVRM書き出しを行う前に、10.では調整しきれていない箇所やBlendShape(表情)の再設定を行う。
VRoidからの書き出しの場合は、VRMアバターを選択して出てくるInspectorにて下記を修正する。
VRM Look At Bone Applyerの「Degree Mapping」→「Horizontal Outer」「Horizontal Inner」の「Curve X 〜」と「Curve Y 〜」の値を下記のようにする
f:id:prince9:20190315194919p:plain

VRM Blend Shape Proxyの「Blend Shape Avatar」→「BlendShape」をダブルクリックして、「LOOK〜」以外の表情を設定する
→「LOOK〜」は未設定でもOKだが、下記の方法で設定するとプログラム上でいぢりやすくなる。
1.Blend Shapeの設定画面を開いた状態で、「LOOKUP」ボタンをクリックする
2.「Material List」タブをクリックして「+」を押してから、VRoidの場合は下記のように設定する。
「LOOKUP(上を向いた状態)」では「Offset」のYの値を変えることになる。この値はモデルによって違うので、下の「BlendShape」画面を見ながら調整する
f:id:prince9:20190315195913p:plain
3.他の「LOOK〜」も同様に設定する

2度目のVRM

6.2度目のVRM書き出しを行う

1回目のVRM書き出しで作成されたVRMファイルをHierarchyに配置してクリック→「VRM」メニューの「UniVRM-バージョン」を選択→「Export humanoid」で2度目の書き出し


スキニングがちゃんと出来ていれば、下記のようにFBX化の際に追加した鈴が髪の毛(揺れモノ設定あり)に追従します。
hub.vroid.com

Processingで立方体をランダムな位置&ランダムな方向に回転させる

イラストの背景用にまた自動生成グラフィックを使ってしまったのでメモ。
楽なんですもの・・・

下記の画像のように、ランダムな方向を向いた立方体をランダムな位置に配置しました。
マウスを押すと新たに描画してくれます。
好きな画像が生成されるまで、マウスをクリックします。

f:id:prince9:20190121052624p:plain

Processingは3Dで描画した場合はPDF書き出しができないので(私のやり方が悪いのかも)、PNGで書き出してフォトショやイラレでテクスチャを貼ります。
Processing上でテクスチャを貼っても良いのですが、あまりキレイじゃない気がするので、そこは妥協しました。


 float rotX, rotY, rotZ;
  float boxsize;
  float posx, posy, posz;  

void setup(){
size(600, 600, P3D);
  smooth();
  noLoop();
  
}
void draw(){
  background(255,255,255);
  translate(width/2, height/2, 200);
  

   //20個描く
  for(int i=0; i<20; i++){
    boxcity();
  }
}
 
void boxcity(){
boxsize = 30; //奥行きで大きさが決まるので、立方体のサイズは一定でいいかも

//以下、立方体の位置
    posx = random(-100, 100);  
    posy = random(-100, 100);
    posz = random(-100, 100);


    
    fill(0,0,0);
  stroke(255);
 strokeWeight(2);
    pushMatrix();
    translate(posx, posy, posz); 
    box(boxsize, boxsize, boxsize);
    popMatrix();
    
    //立方体の回転角度
    rotX = random(10, 340);
    rotY = random(10, 340);
    rotZ = random(10, 340);
    
    rotateX(radians(rotX));
        rotateY(radians(rotY));
            rotateZ(radians(rotZ));


}

  
//ボタンを押すとランダムに描画
void mousePressed() {
      redraw();// ボタンが押されたときだけ実行
}

なお立方体の描画に関して、下記を参照させて頂きました。

http://solo-p5.tumblr.com/post/69249477759/p3dとboxとarrayとjavajsモードの違いとtips
solo-p5.tumblr.com

バ美声を使ってボイスチェンジする(設定あり)

つい最近ベータ版が発表されてそのクオリティの高さが評判となった「バ美声」を使ってボイチェンをしてみました。
halfsode.booth.pm

配信側の設定は下記をご参照ください。
prince9.hatenablog.com


物理女性声→高い女性声へチェンジしたところ、よく知られている「恋声」よりもクオリティが高かったです(個人調べ)。
地声(女性にしては少し低め)→バ美声→バ美声の順番です。

soundcloud.com


設定は下記と変わりませんが、一応載せておきました。
prince9.hatenablog.com

■バ美声→VST使用可能アプリ(REAPERやCubaseなど)
1.Windowsサウンド設定
・「再生」のタブの「スピーカー」を右クリックし、「既定のデバイス」を選択する。Viveのイヤホン端子またはヘッドセットの出力を既定のデバイスにする
・「録音」のタブの「VoiceMeeter Output」を右クリックし、「既定のデバイス」を選択する(「VoiceMeeter Banana」インストール済み)
f:id:prince9:20181021185832p:plain
f:id:prince9:20181021185954p:plain

・さらにViveを使って配信する場合は、SteamVRを下記のように設定する
f:id:prince9:20181021191045p:plain


2.「VB-CABLE」をダウンロード&インストールした状態で、バ美声の設定を下記のようにする
www.vb-audio.com

・入力デバイス:「Viveのマイク(3-HTC Vive)」またはヘッドセットのマイク
・出力デバイス:「CABLE Input」
f:id:prince9:20190117192631p:plain

3.VST使用可能アプリ(REAPERやCubaseなど)で下記のように設定する
・確認+録音する場合
f:id:prince9:20190117192744p:plain

・配信にゲストとして参加する場合
f:id:prince9:20181021195946p:plain