勉強不足で至らんブログ

勉強不足ですが色々と書いていきます。

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

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 List

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

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

まとめ

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

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

Cinemachine Sampleを触ったメモ

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 がベースとなっています。

menu

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

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

StateDrivenInspector

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

CustomBlends

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

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

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

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

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

Impulse

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 GainFrequency 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機能を組み合わせるのにも問題ない気がしています。

OBS Studioで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の設定で完結するので楽ですね。

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

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

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

mizotake.github.io

https://mizotake.github.io/zimack/resources/demo.gif

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

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

https://mizotake.github.io/zimack/resources/img1.jpg

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

別の記事で

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

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

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

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

まとめ

github.com

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

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

追記

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

www.youtube.com

f:id:MakeTake:20200525003107j:plain

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

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で見つけました。

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

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

f:id:MakeTake:20200522122631j:plain

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

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

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

www.obs.live

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

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

まとめ

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

追記

ボイチェンについては調整すると結構よくなりました

youtu.be

恋声のEffectとOBSのフィルターを通せば結構いい感じです

スマホゲームの攻略動画をYouTubeにアップしてみようと思ったら環境がなかった

アークナイツハマってるし動画アップしてみるか

最近、アークナイツというゲームにハマっています。

www.arknights.jp

スマホタワーディフェンス系のゲームになります。

世界観やUIがカッコイイのです!!

f:id:MakeTake:20200515121923g:plain

タイトル画面はこんな感じでスマホを傾けると動く…これだけでも楽しい…

そしてゲームに詰まったら動画みてプレイの参考にしています。 そこで自分のプレイも誰かの参考になる…かも?と思い遊びがてらアップしてみたいと思いました。

ここでスマホゲームの録画について調べると

  • キャプチャーボードを使用する
  • win上でandroidエミュレータ起動してキャプチャする
  • android10以上ならスマホ単体で内部の音だけを録画できるので設定を行う(通常は外の音も拾う)

って感じでした。

手元の環境では

  • キャプチャーボード持ってない
  • 個人的理由のためエミュレーターめんどくさい(エミュレーターの実行環境をonにするとdockerが使えなくて何かと不便になってしまう)
  • android9までしか持ってない

詰みました。

アップした動画

www.youtube.com

縛りプレイとかはしてないので素直に全力なパーティーでプレイしています。

普通にキャプチャできるようにみえますよね…? 工夫…というよりシンプルにアナログハックです。

スマホ単体録画を行った

録画自体は

f:id:MakeTake:20200515120739j:plain

こんな感じでマイクが雑音を拾わないようにヘッドセットのマイクを食いこませてやってました。

録画アプリはこちら

play.google.com

android9までだと外の音を拾います。つまり録画中に物音を立てないようにひっそり動いたりとかめんどくさい気遣いをしています。

素直にキャプチャーボードを買った方が良いなと実感しております。 そのうち買おう…

追記

後日キャプチャーボード買いました

www.amazon.co.jp

それでキャプチャしたのがこちら

www.youtube.com

音質が段違いですね、素直にキャプチャーボードを最初から買えばよかったです

つぶやきGLSLに投稿してみた

つぶやきGLSLとは

#つぶやきGLSL - Twitter Search

Twitterの文に納まる文字数で投稿されるGLSLで描かれたものです。最近では つぶやきProcessing などTwitterの文字数に収めて投稿する流れがある気がします。

#つぶやきProcessing - Twitter Search

様々な人が投稿していて参考になる書き方や短くするテクニックが具体的に見れるので結構楽しいハッシュタグです。

つぶやきGLSLを見ていると

twigl.app

というエディターを使って書いてる人が多いようでした、このエディター自体はGitHubに公開されていて興味のある人は中身を全部把握できるようになっているようです。

エディターを見つけてやってみるかーと思いやってみました

投稿した内容

上記のツイートが投稿したものでGLSLをあまり深く触ってなかったのもあり雰囲気で書いていました。書いた感想としては

  • 140文字に収めるのは大変
  • 変数名はとにかく省略
  • 実際に動くものができると省略していくのが楽しい

って感じでした。

書いたときの環境とコード

https://bit.ly/355ABMB

投稿すると…

投稿してから、のたぐすさんからリプが来ました(別途省略したのを教えてもらっていましたが最終結果をリプで教えてもらいました)

自分が投稿した文の半分くらいで同じ動作ができるコードが書けることに結構感動しましたw

半分省略できるということは、もっと表現を加えれるのでMorphingを付け加えてもいいなと考えたりしてます。

まとめ

つぶやきGLSLはかなりお手軽に投稿できますし、気分転換とかにやっていこうかなと…

リプをくれていた、のたぐすさんが最近記事を公開しており notargs.hateblo.jp

中身をみるとかなり参考になるtipsばかりでした!

GLSL自体見るの楽しいので

Shadertoy BETA

GLSL Sandbox Gallery

などを眺めつつやろうかと

追記

後日改良してみたりしました

https://bit.ly/2YpFejj