2020-08-08

SAColliderBuilderでNull Reference Exceptionが出てしまった時の応急処置

SA Mesh Collider Builderを使おうとしたらNullExceptionで処理が止まってしまった

超絶便利なSAColliderBuilderを使おうとしたらエラーで怒られました

assetstore.unity.com

上記のAssetはMeshに対して当たり判定を良い感じにつけてくれるものなのですが、AssetStoreにある別の建物などの環境Assetに対して使う際にエラーがでました。

その時のエラー箇所が SAMeshColliderEditorCommon.cs の

 public static string GetSAMeshColliderName_Material( Material[] materials, int index )
    {
                // ↓ ここ
        if( materials != null && index < materials.Length && !string.IsNullOrEmpty(materials[index].name)) {
            return materials[index].name;
        }

        return "Mesh." + index.ToString("D8");
    }

942行目あたりのif文だったので、ここだけ軽くチェックしたら materials[index] がnullになるパターンがあるようでした。Assetの階層構造によるものなのかは深くチェックしていないのでわかりません。そのためif文に materials[index] != null を追加して以下のようにしました。

 public static string GetSAMeshColliderName_Material( Material[] materials, int index )
    {
        if( materials != null && index < materials.Length && materials[index] != null && !string.IsNullOrEmpty(materials[index].name)) {
            return materials[index].name;
        }

        return "Mesh." + index.ToString("D8");
    }

という風にしました。これで処理が終わり無事Colliderが付けられたので応急処置としては大丈夫そうです。

f:id:MakeTake:20200808195743p:plain

2020-06-18

VRMをPartyParrot風に表示できるPartyParrotVRMを作ってみた

PartyParrot vrm unity unity3d

PartyParrotVRM

ネット上で時たまみるPartyParrotというgifがあります

f:id:MakeTake:20200618233333g:plain

これをVRM…人型に適応したら面白いのでは？と思って適応させたサイトを作ってみました

mizotake.github.io

機能

ここのREADMEというのに説明を大体書いていますが

PartyParrotVRM/README.md at master · MizoTake/PartyParrotVRM · GitHub

好きなVRMをドラッグ&ドロップすることでPartyParrot風に表示します

change

また簡易的なフェイストラッキングをしています

tracking

Download Gif

VRMを移動させてPartyParrot風のgifをダウンロードします downloadgif

↓ ダウンロードしたgifがこちら

demo

Camera Preview

顔のトラッキングを確認することができます

Camera List

ブラウザが認識しているカメラから使用するものを決めれます

ちょいちょい触ったりしないとわかりづらいですが実装しているのはこんな感じです

まとめ

Unityとjsの連携を結構書いたり顔のトラッキングからモデルへの反映を書いてみたりと意外と面白く実装していきました全体的に雑な実装になっていますが大まかに実装して満足度高く…一旦の区切りとしています…

細かい挙動まできちんとこだわないと自分の思う面白さ表現できないと思ったので時間があればまた触ろうかと思います

2020-06-04

Cinemachine Sampleを触ったメモ

untiy cinemachine statedrivencamera impulse cameramagnets

Cinemachine v2.6 Sampleが公開された

blogs.unity3d.com

の記事をみてCinemachineって結構いろんなことができることを知ったのでSampleを触ることにしました。元々Cinemachineに興味はあったが触ってなかったのでSampleを触って面白かったものをメモりました。

v2.6のサンプルですが新機能の紹介ではありませんしComponentのパラメーターを細かく紹介することもないのでご了承ください。

Cinemachineのベースの考え方

CinemachineBrainというコンポーネントが実際にUnityのCameraコンポーネントを動かすものです。

映し出す位置の指定を CinemachineVirtualCamera などの仮想カメラとなるコンポーネントが指定して、それをCinemachineBrainが優先度などのパラメーターを加味してCameraに映し出すような作りになっています。仮想カメラはCameraコンポーネントはありませんが仮想カメラのTransform等をみてBrainが映し出します。

CinemachineVirtualCamera 以外にも

CinemachineStateDrivenCamera
CinemachineFreeLook

などの複数のコンポーネントを使い分けつつ仮想カメラを配置して挙動を制御していきます。

StateDrivenCamera

sample

概要

Animatorの状態遷移によってCameraを切り替えるもの

歩いているとマウスで操作したカメラワークになる
走っているとキャラクターを下から見上げる角度に変わる

をComponentの設定で指定できるもの

各オブジェクトの設定

Hierarchyは

├── MainCamera
├── 3rdPersonController (子オブジェクト省略)
├── Directional Light
├── Environment (子オブジェクト省略)
└── CM StateDrivenFreeLook
    ├── CM FreeLook
    └── CM FreeLook sprint

という風になっています。

MainCameraにはCinemachineを使う際の中枢となる CinemachineBrain が追加されています。

CM StateDrivenFreeLook はAnimatorのどのStateを見てVirtualCameraの切り替えを行うのか設定できます。

UnityEditorのMenuにある Cinemachine > Create State-Driven Camera がベースとなっています。

シンプルな構成を確認したいときは新しいSceneを作成してCreateすると良いと思います。

CM StateDrivenFreeLook には対象となるAnimatorとStateによってどのCameraを使用するのか設定しています。

StateDrivenInspector

Custom BlendsというところにScriptableObjectが設定されていますが、これはカメラを切り変える際のパラメーターが設定できます。

CustomBlends

仮想カメラが切り替わる際のEasingや秒数が指定できます。また特定のカメラから特定のカメラへの遷移も個別に設定できるようになっています。

CinemachineStateDrivenCamera がメインの処理となりますが同じGameObjectに CinemachineCollider というコンポーネントがあります。Cameraに収める対象のオブジェクトが壁などでCameraに映らないようなことが起こると自動的にCameraに収めてくれるコンポーネントになります。

【Unity】【Cinemachine】対象が障害物に隠れた時に対象が映る位置にカメラをいい感じに移動するCinemachine Collider

というブログなどを見るとパラメーターがどう反映するのか確認できます。

CM FreeLook と CM FreeLook sprint は CinemachineFreeLook Componentを付けてパラメーターが違うオブジェクトになります。それにより見え方が変わっています。

Impulse

概要

衝撃を通知するオブジェクトに近づくとカメラが距離や威力によって揺れるものです。

各オブジェクトの設定

Hierarchyは

├── MainCamera
├── Directional Light
├── Ground
├── Player (子オブジェト省略)
├── BouncingBall
├── Magic Cube (子オブジェト省略)
└── CM PlayerCam

MainCameaには相も変わらず CinemachineBrain です。そしてCM PlayerCam には CinemachineVirtualCamera という標準な構成です。

今回のキモである衝撃の扱いについては、BouncingBallとCM PlayerCamにあるコンポーネントで表現できます。

BouncingBallには Cinemachine Collision Impulse Source

Source

CM PlayerCamには Cinemachine Impulse Listener が設定されています。

Listener

Impulseの設定はSourceの方で設定します。

Raw Signalでどういう風に揺らすのか設定できます。SignalSourceAsset.csというclassを継承したScriptableObjectを設定すれば、XYZ毎にアニメーションカーブを設定して揺れ方を変えることが可能です。

Amplitude Gain と Frequency Gain でカメラの揺れる威力などを調整できます。

CameraMagnets

Impulse

概要

設定したObjectが範囲内にいると、元々対象としているObjectも含めてカメラに収めるようにする。また、壁(指定した範囲)外を表示しないように収めている。

各オブジェクトの設定

Hierarchyは

├── CamCollider
├── MainCamera
├── Environment (子オブジェト省略)
├── CM vcam2D
├── Directional Light (1)
├── 3rdPersonController (子オブジェト省略)
├── TargetGroup1
└── CameraMagnets
    ├── CameraMagnet
    ├── CameraMagnet(1)
    └── CameraMagnet(2)

となっています。まず指定した範囲を収めている処理から説明します。 CamColliderにて Polygon Collider 2D で壁をなぞるように値を入れています。

collider

上記のように設定したColliderをCM vcam2Dに追加されている Cinemachine Confiner のInspectorに設定します。

confiner

これによってColliderで設定した範囲内をカメラに収めることができます。

次に設定したObjectに近づいた時にカメラをフォーカスさせる方法です。 Cinemachineで用意されている CinemachineTargetGroup というコンポーネントと自前で少しだけcsを書いているようです。

targetGroup

CinemachineTargetGroup に近づいたらカメラに収めたい対象のTransformを入れておきます。

CameraMagnetTargetController.cs

using System.Collections;
using System.Collections.Generic;
using Cinemachine;
using UnityEngine;

public class CameraMagnetTargetController : MonoBehaviour
{
    public CinemachineTargetGroup targetGroup;

    private int playerIndex;
    private CameraMagnetProperty[] cameraMagnets;
    // Start is called before the first frame update
    void Start()
    {
        cameraMagnets = GetComponentsInChildren<CameraMagnetProperty>();
        playerIndex = 0;
    }

    // Update is called once per frame
    void Update()
    {
        for (int i = 1; i < targetGroup.m_Targets.Length; ++i)
        {
            float distance = (targetGroup.m_Targets[playerIndex].target.position - 
                              targetGroup.m_Targets[i].target.position).magnitude;
            if (distance < cameraMagnets[i-1].Proximity)
            {
                targetGroup.m_Targets[i].weight = cameraMagnets[i-1].MagnetStrength * 
                                                  (1 - (distance / cameraMagnets[i-1].Proximity));
            }
            else
            {
                targetGroup.m_Targets[i].weight = 0;
            }
        }
    }
}

CameraMagnetProperty.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

[ExecuteInEditMode]
public class CameraMagnetProperty : MonoBehaviour
{
    [Range(0.1f, 50.0f)]
    public float MagnetStrength = 5.0f;
    
    [Range(0.1f, 50.0f)]
    public float Proximity = 5.0f;

    public Transform ProximityVisualization;

    [HideInInspector] public Transform myTransform;

    void Start()
    {
        myTransform = transform;
    }
    void Update()
    {
        if (ProximityVisualization != null)
            ProximityVisualization.localScale = new Vector3(Proximity * 2.0f, Proximity * 2.0f, 1);
    }
}

Cinemachineのコンポーネントではない追加されていたcsは上記です。要約すると操作Objectからの距離をみてTargetGroupに設定してあるTargetのWeightを変更するものになります。

Weightの数値が上がることによってCameraに収める対象物として認識されます。それによってgifのような動作となります。

まとめ

かなりお手軽にカメラワークを作ることが可能なことがわかりました。今後個人で何かするなら絶対にいれるか…とは思っています。 PostProcessingについても対応するComponentがあるのでUnity機能を組み合わせるのにも問題ない気がしています。

2020-05-26

OBS StudioでChromeのウィンドウキャプチャ方法

obs chrome ブラウザウィンドウキャプチャ

ブラウザの描画をGPUを使ったままにしたい

Chromeのブラウザをウィンドウキャプチャしようとしたときにもしかしたら動かないかもしれません。

以前以下の記事にて

maketake.hatenablog.com

これはChromeの設定にあるハードウェアアクセラレーションが使用可能な場合は使用するという項目をオフにすることで解決ができる

と書きましたがオフにしなくても動く方法がありました。

chrome://flags/ をurlを入れるところにコピペして開いてください。

Choose ANGLE graphics backend という項目の選択肢を OpenGL にします。 f:id:MakeTake:20200526123859p:plain

再起動を求められるのでChromeを再起動します。

するとOBS Studioでウインドウキャプチャが可能になります。

描画にGPUを使った方が負荷としては軽いと思うのでできるだけこちらで使っていこうかなと思いました。 Chromeの設定で完結するので楽ですね。

2020-05-24

リアルタイムに声をテキストとして表示する「Zimack」というサイトを作った

vue.js githubpages 字幕リアルタイム obs テキスト起こし

OBSで配信するときに字幕に特化したサイトがあればいいのに

という気持ちでちょっとだけ作った

mizotake.github.io

1日くらいで作ってるのでまだまだ機能が足りないし作っててUIミスったなと思っているのですが、、、いずれ…いずれな…

とりあえず、マイクの許可与えればテキストに起こしてくれるし、画面クリックすればオプションで少しだけカスタマイズできるやつ

思いついたのはTwitterのおかげ

音声認識からWebカメラ映像への字幕合成までをGoogle Chrome だけでやってくれるWebページをつくってみました！ #xDiversity

ブラウザを画面共有 or OBS等でキャプチャーすればビデオ会議に字幕付きで参加できます。

↓Webページhttps://t.co/xlGX4jkIJn pic.twitter.com/Y1ju1wfUvq
— Ippei Suzuki (@1heisuzuki) May 20, 2020

別の記事で

Youtubeでライブ配信する際にボイチェンと自動字幕を入れてみた - 勉強不足で至らんブログ

紹介した上記のTweetを観て字幕特化のサイトあればいいのにと思いました。

まだまだ理想はOBSのブラウザで動くことなのでできてないのですが、ウィンドウキャプチャでは表示できるのはひとまずいいかなと

あとは背景に画像貼れたりとかテキストのフォント変えれたり、UIが字幕の表示場所と被らないようにするとかしたいですがいずれ…

まとめ

github.com

GitHubPages使っているのでバリバリソースコード公開してるのですがすげー無駄な書き方をしている気しかしてないリファクタも兼ねていずれな…って感じですね

あとは今まであまりサービス名を考えたりしてなかったので「Zimack」とつけてみました付けてみたかった。

追記

実際に使って配信してみました

www.youtube.com

f:id:MakeTake:20200525003107j:plain

色の変更もちゃんとできて配信できたので満足自分で足りない機能は随時追加してきたい所存

2020-05-21

Youtubeでライブ配信する際にボイチェンと自動字幕を入れてみた

OBS Studio 恋声 speech-to-text-webcam-overlay youtube 配信

ゲームのライブ配信で色々試してみたい！

ということでボイチェンと音声を解析して字幕をつけてくれるツールを試してみました。

配信環境はスタンダードにOBSです。

obsproject.com

そしてボイチェンと字幕をいれた動画がこちら

youtu.be

ボイチェンについてはあまりうまくいってないので今後の課題って感じです。

最初の数分は準備に手間取っているので飛ばしてみてください。

使用ツール

恋声

koigoemoe.g2.xrea.com

speech-to-text-webcam-overlay

1heisuzuki.github.io

となります。

恋声は無料で使えるボイチェンツールでリアルタイムに出力できます。それをデスクトップの出力としてOBSが受け取り声を出しています。そのときにマイクは切っておかないと声を変える前の音も流れるので注意です。

speech-to-text-webcam-overlayに関してはたまたまTwitterで見つけました。

音声認識からWebカメラ映像への字幕合成までをGoogle Chrome だけでやってくれるWebページをつくってみました！ #xDiversity

ブラウザを画面共有 or OBS等でキャプチャーすればビデオ会議に字幕付きで参加できます。

↓Webページhttps://t.co/xlGX4jkIJn pic.twitter.com/Y1ju1wfUvq
— Ippei Suzuki (@1heisuzuki) May 20, 2020

そもそもはカメラも使用して動画に字幕を載せるものなのですが今回はページを開いてカメラの許可を与えずマイクの許可だけを与えました。すると真っ暗な画面に文字だけ残るのでそれをOBSの ウィンドウキャプチャ でうまくトリミングしつつ画面に出しています。

声の音を認識してテキストに起こすわけなので精度はそれなりになります。ただ間違って意味わからないテキストに起こしてくれることもあるので面白いです

f:id:MakeTake:20200522122631j:plain

↑こんなことは言ってない

ChromeのウインドウをOBSに出力する際の注意点

Chromeの設定にもよりますがもしかするとウインドウキャプチャの画面が真っ暗になるかもしれません。私は真っ暗になっていました。これを解決するために調べると

www.obs.live

という記事を見つけました。これはChromeの設定にある ハードウェアアクセラレーションが使用可能な場合は使用する という項目をオフにすることで解決ができるという詳細に書いてくれた記事です。

これのおかげで自分は解決して配信することができました。

まとめ

世に出ている様々なツールの組み合わせで色々な配信画面を作ることができるなと思いました。今後もツールを見つけていき面白い配信環境を作ってみようと思います。 Speech to Textに関しては配信に特化したツールとして自前で作るのも面白そうな気がします。特定の文字が来たら色を変えるや、声の音量で文字の大きさが変わるなどちょっと妄想が膨らみます。