はりうすブログ (のすけのメモ)

湘南にある小さな会社 代表 ”のすけ”のブログです

激しい動きのダンスのモーションをKinetixで作るとどうなるのか?


https://www.kinetix.tech/

近年、メタバースが流行ってますよね!

日本が生き残るためには、メタバース関連に力を投資しろ!なんて言われていますが

確かに、日本のコンテンツ力は強いですよね。



そんなコンテンツ力を後押しするためにも、我々エンジニアは技術で裏ささえしなくては

いけないわけです!


ということで、ダンスのモーションを作成したい!!

メタバース上で動かしまくりたい!!


VRでフルトラッキングすればいいわけですが、手は綺麗にトラッキングできますが

足となると、VRゴーグルとトラッカーではなかなか対処できないのが現状かと思います。



商用のまともなフルトラッキング機材は100万円以上はするようですし、、、


でも、でも、

チキチキバンバンみたいな、モーションデータ作りたい!!



www.youtube.com


オリジナルなやつがね!!

画像認識という選択肢

そこで、登場するのが動画からモーションデータを作るという選択肢です。

オープンソースの技術としては、Googleなんかが力を入れていて

  • OpenPoze
  • BlazePose

などなどオープンソースで利用できるライブラリなどがあったりします。



こんな感じで、動画中から人を思われる映像を推定し、そこに骨と思われるものを入れて姿勢推定を行います。

かなり研究が進んでいて、Webカメラで撮影した動画をリアルタイムで分析し

推定可能なレベルまで来ているそうです。


ただ、ほとんどの場合、Python言語でAIプログラミングしないといけないなど

ちょっとハードル高めです。デモのモデルががそのまま使える場合もありますが

超簡単に使えるKinetixというWebサービスを紹介

Kinetixとは話題の3Dモーション作成サービスで。

なんと、動画をアップロードするだけで、この姿勢推定からのモーション作成までやってくれる画期的なサービスです。



来たるメタバース時代に向けて心強い味方となってくれそうな予感がありますね。

サイトトップにはMetaverseと文字があります


早速やってみましょう


アカウント作成

https://www.kinetix.tech/
サイトトップから右上の(Login)ログインから進みます。


メールアドレスとパスワード設定して進みます.

プロジェクトの作成


ダッシュボードにログインするとこのような画面になっています。

サンプルの動画もいくつかあるようですが、ここでは真ん中の「create animation」から新しくアニメーションの作っていきます。

ここで目的のダンス動画をアップロードします。

ビデオのURLからも行けるようなので、Youtubeの動画のURLを貼り付けるなどする方法でもいいのかもしれません

アップロード中

結構時間がかかります。ちなみにアップロードしたのは3分(40MB)ほどの動画です。

アップが完了するとトリム(必要な箇所だけ切り取る)作業に移ります。

全編行きたいところですが、、1分以内にしなさいとのエラーメッセージが出ました。1分以内に切り取ります。


OKならばNEXT STEPで進みます

名前をつけます

アニメーションの名前をつけたらConfirmで進みます

10分待つ

Confirmを押すとダッシュボードに戻り、進捗率25%であと10分でできるよと。

10分待ってみます

モーション完成!!

ついにモーションが出来ました!

ムキムキのおじさんが踊ってくれます。

どうやら精度はあまり高くなく、ところどころ動作がワープしたりして違和感がありますが、なかなかスムーズに動いてくれる!!

スゲー!!!!

こんな簡単にモーションが作れるなんて!!


キャラや背景を変えてみる


上のメニューのCharactorというところからキャラを変更できます

最初から入っている、女性のキャラや着ぐるみ

おじさんなど様々なキャラに変更可能です

メリット

  • ものすごく簡単!動画をアップロードするだけ
  • 動くキャラクターを変えられる、追加できる
  • 無料!!こんなに凄いのに無料
  • それなりに忠実にモーションを作れる

こんなに簡単にできるとは思っていませんでした。

動画さえあれば、誰でもモーションが作れるのは凄いことです!

しかも、それが無料というのは素晴らしいです。

デメリット

  • 編集画面がちょっと重い
  • 分析に15分ほどかかる(大量の動画を一気にはやりにくい)
  • 1 分以内の動画しか使えない
  • モーションの重心が高い
  • モーションのジャンプ表現が苦手
  • なめらかさは、フルトラッキングにかなり劣る
  • 作ったモーションの活用が難しい

Webサービスゆえに、多くのCPU時間を割けないためか大量の動画を変換したいなどの
要望があったり、1分以上のモーションを作りたい場合には


BlazePoseなどを活用して、プログラムを自作した方が良さそうです。


また、やはりモーションの精度にちょっと不満があります。


現行の画像処理での姿勢推定の限界なのか、屈む処理がちょいと苦手であること

ジャンプ表現が不自然、手足の滑らかさは、実写のダンスと比べると
全然追いついてないなという感じがします。



www.youtube.com

こちらの動画のような、モーション表現に憧れてしまいますよね。。。

こちらの機材は、全身に32個のジャイロセンサーを搭載して、それを120fpsとかで記録できるものです。

東洋風の重心の低い動き、素早い手足の動きもなめらかに検出できていますよね。


ただ、機材のお値段は100万円ほどのようです。

動画像からこのレベルまでモーションを作るには、まだまだ技術的に遠そうな感じがしています。

もっと凄い姿勢推定方式のモーションキャプチャー

あと蛇足ですが、ウマ娘で有名なCygamesなんかは

1台100万円以上するようなモーションキャプチャー用のカメラを大量に設置して

体に、追跡用マーカーがついた特製のスーツを着用して、精細なモーションを作り出したりしているようです。


www.youtube.com

画像認識も機材を特化させると、動画像からの姿勢推定でもかなり精度が出るようですね


いいなぁ

Nuxt.js asyncDataを使ってAPIアクセスしたらconnect ETIMEDOUTになった

Nuxt.js asyncDataを使ってAPIアクセスしたらconnect ETIMEDOUTになった


結論

DNSの名前解決に失敗している

理由

asyncDataはリクエスト元がサーバーサイドなので、自分自身のサーバーに対してリクエストしているのだけれど、そのリクエスト指定がフルのURL(https://domain-name.com/api/xxxxx)のような形だったのですが

そのサーバーの前段にconohaのロードバランサーを入れていました。
その結果、DNSの名前解決先としてはロードバランサーのIPを示しているため

結果、ロードバランサーの後ろにあるNuxt.jsサーバーからロードバランサーapiリクエストが
飛ぶという問題でした

解決策

APIサーバーを別に立てて、別ドメインにしました。
Firebaseのfunctionsが便利でしたので、functionsにnodeサーバーでAPIを構築し解決です。

Unity EventSystemとは

Unity EventSystemとは

入力、レイキャスト、イベント送信を処理する機能

EventSystem

  • シーン内にEventSystemは1つだけ含めること
  • 他のモジュールと連動して動作する
  • 状態を保持する

処理内容

EventSystemが開始されると、同じGameObjectに接続されている BaseInputModuleを検索し、それらを内部リストに追加します。更新時に、接続されている各モジュールはUpdateModules呼び出しを受け取り、モジュールは内部状態を変更できます。各モジュールが更新された後、アクティブなモジュールでプロセス呼び出しが実行されます。ここで、カスタムモジュール処理を実行できます。

利用方法

using UnityEngine.EventSystems;

とライブラリを呼び出す

//現在のイベントシステムを取得
EventSystem es = EventSystem.current;
//現在のインプットモジュールを取得
EventSystem es = EventSystem.current;
BaseInputModule bim = ev.currentInputModule;
// 選択中のGameObject
EventSystem es = EventSystem.current;
GameObject obj = es.currentSelectedGameObject;
//初期状態にで選択したいオブジェクトを設定
EventSystem es = EventSystem.current;
es.firstSelectedGameObject = gameObject;

Standalone Input Module

このモジュールはコントローラー/マウスの入力が思い通りに動作するように設計されています。入力に反応して、ボタンの押下、ドラッグ、それに類似の動作のイベントが送信されます。

このモジュールはマウス/入力デバイスが移動するとき、ポインターイベントをコンポーネントに送信します。そして、Graphics Raycaster と Physics Raycaster を使って、現在、どの要素が指定したポインターバイスによって指されているかを計算します。目的に応じて、これらのレイキャスターを設定して、シーンのある部分を検証したり無視したりすることが可能です。

モジュールは Input ウィンドウを通して追跡された入力に応答して移動のイベントと 送信/キャンセルのイベントを送信します。これは、キーボード入力とコントローラー入力の両方に使用できます。追跡された軸とキーはモジュールのインスペクターで設定可能です。

プロパティ 機能

  • Horizontal Axis 水平軸のマネージャー名を入力します
  • Vertical Axis 垂直軸のマネージャー名を入力します
  • Submit Button 送信(決定)ボタンのマネージャー名を入力します
  • Cancel Button キャンセルボタンのマネージャー名を入力します
  • Input Actions Per Second 1 秒間に可能なキーボード/コントローラーの入力数
  • Repeat Delay 1 秒毎の入力操作が繰り返されるまでの遅延時間 (秒単位)
  • Force Module Active これを有効にすると、この Standalone Input Module を強制的にアクティブにします。

Horizontalは横軸、Vertical は縦軸
Submitが決定、Cancelがキャンセル
Input Actions Per Secondが連打可能かどうかの設定
Repeat Delay 連打具合の許容値

M1MaxでUnityはまだもっさり!?かもしれぬ話

メインPCをAppleシリコン搭載の最新PCであるMacBookPro16に置き換えました

Unityを使ってみた感想です。

定量的なレビューじゃなくて、感想です。


比較対象は2021年に組み立てた自作PC(30万円くらい)

比較PC

Macスペック

CPU: M1Max 10コアCPU

GPU: 32コアのGPU

メモリ: 最大64GBのユニファイドメモリ

価格は50万円ほど。価格なら間違いなくこちらが勝ってる!

組んだデスクトップPC

CPU: 第三世代 Ryzen9 3950
GPU: Radeon RX6700XT
メモリ: DDR4 64GBメモリ

本体で30万円ほど
ディスプレイやキーボードを含めたら40万円ほど。
それでもM1Maxの方が高いです。

Unityスペック

UnityのAppleシリコン対応版の最新は、記事作成時点で
2021.2.16f1

結果

問題点

Unity Visual Effect Graph を使おうとすると
M1の方はビジュアルエディタがちょっともっさりしてる

エフェクトのプレビューがカクついたり

安定性や、重い処理はやっぱりデクストップPCの方が快適ですね。

本格的にやるときはデスクトップで、技術検証とは軽く作るときはM1Maxで
みたいな使い方になりそう

通常の3D作成

特に問題なし!!

どっちも速い。特に不便を感じない!

iOSへのビルド

問題なくできる!!

Xcodeのビルドスピードもめっちゃ速い!! M1Max速い!!

デスクトップPCではXcodeでのiOSアプリへの最終ビルドはできないので
これは助かる



と言うわけで、iOSへビルドするならM1 Max最適かなと。

PC向けの高画質なものを作るなら、Windowsの方が部がある感じかと思われます。

QNAPのWEBサーバーにSSL証明書を設定する方法

ゆえ合って、SSL証明書が必要になりました。

QNAPで動いているQTS(QNAPの独自OS)はLinuxの独自拡張OSのようで
SSHログインしてLinuxのように操作できます。

以下、設定方法です。

SSHサービスを起動

まずは「ネットワークサービスファイルシステム」から
SSH」をONにして

f:id:hollywis:20200220142928j:plain
SSH

ターミナルからSSHでログインします。

apacheSSL証明書の設定を実施

設定ファイルはここにあります

more /etc/config/apache/extra/apache-ssl.conf

記述中のこのあたりの部分を変更していく感じです。

SSLCertificateFile "/etc/stunnel/stunnel.pem"
#SSLCertificateKeyFile "/etc/config/apache/server.key"
#SSLCertificateChainFile "/etc/config/apache/server-ca.crt"
#SSLCACertificatePath "/etc/config/apache/ssl.crt"
#SSLCACertificateFile "/etc/config/apache/ssl.crt/ca-bundle.crt"
#SSLCARevocationPath "/etc/config/apache/ssl.crl"
#SSLCARevocationFile "/etc/config/apache/ssl.crl/ca-bundle.crl"

必要なファイルを
/etc/config/apache/ 以下に設置します

必要なファイルは以下の3つです。
ALPAH SSLとか安くてオススメです。
(Let's Encriptでもいいけど3か月ごとに更新するのがちょっとリスキー)

  • 秘密鍵ファイル SSLCertificateKeyFile /etc/config/apache/server.key
  • 中間CA証明書ファイル SSLCertificateChainFile /etc/config/apache/server-ca.crt"

apache-ssl.confのSSLの設定を以下のように修正

#SSLCertificateFile "/etc/stunnel/stunnel.pem"
SSLCertificateFile "/etc/config/apache/web.crt"                                             
SSLCertificateKeyFile "/etc/config/apache/server.key"                                        
SSLCertificateChainFile "/etc/config/apache/server-ca.crt"                                   
#SSLCACertificatePath "/etc/config/apache/ssl.crt"
#SSLCACertificateFile "/etc/config/apache/ssl.crt/ca-bundle.crt"
#SSLCARevocationPath "/etc/config/apache/ssl.crl"
#SSLCARevocationFile "/etc/config/apache/ssl.crl/ca-bundle.crl"

httpd-ssl-vhosts-user.confも同じようにSSLの設定を以下のように追加

既存の
SSLCertificateFile "/etc/stunnel/stunnel.pem"は消しちゃいます

SSLCertificateFile "/etc/config/apache/web.crt"                                             
SSLCertificateKeyFile "/etc/config/apache/server.key"                                        
SSLCertificateChainFile "/etc/config/apache/server-ca.crt"                                   

そろそろSandyBridgeおじさん卒業。VRがしたくて新しい自作PCを組んだ話

f:id:hollywis:20211016071205j:plain

こんにちは、のすけです。

===
去年書いて眠ってたので出しときます。
この記事で作成したPCはもう1年稼働中。いい感じです。
ただ最近はVRはしてませんorz
===


PCの温度管理は大切!なんて記事を8年前?に書いて、今でも結構みられているのですが。

その時のPCが2010年に制作したCore i7 2600K(SandyBridge)を積んだ

hollywis.hatenablog.com

これです。


今話題?のVRが無性に気になってしまい。

こちらの11年前のPCに思い切って GTX 1660 Superを買って

強引にくっ付けて、さらに

VIVEのCOSMOS Eliteなんてのを買って、動くか試しました。


で、結果。


なんと、、、


動いたw


2010年のPCで動くんかいぃ!!

すげえな2600K。全然カクツキも感じない。





ただ、一つ問題が。。。


どうやらSandyBridgeってUSB3.0に正式対応してないらしくて


ただ、たまたまマザボUSB3.0を搭載していたから奇跡的にCOSMOS Eliteがうごたわけなんだけど


起動が5回に1回動けばいい方で、結構な割合で起動しないことが多かったんだよね。


原因としては頭につけるガチャピンみたいなヘッドマウントディスプレイと

PCを接続するUSB3.0の相性が悪いようだった。





ということで、11年ぶりに思い切ってPCを一新することにした。




構成はこうだ!

[構成概要]

CPU: Ryzen9 3950x 16コア32スレッド
メモリ: TEAM DDR4 3200Mhz PC4-25600 32GBx2枚
SSD: CFD販売 SSD 1TB 内蔵 M.2-2280(MVMe) 接続 PCIe Gen4x4
マザボ: MSI MPG B550 GAMING CARBON WIFI マザーボード ATX
電源: Thermaltake TOUGHPOWER GRAND RGB -850W
CPUクーラー: Corsair H115i PRO RGB 水冷CPUクーラー [Intel/AMD両対応] FN1150 CW-9060032-WW
グラボ:GIGABYTEガバイトRadeon RX 6700 XT EAGLE 12G

合計30万円くらい。

[構成所感]

CPU

まずCPUが一気に16コアにグレードアップ!!

すでに5950Xも発売されてて、こっちを買いたかったんだけど、¥65,890で圧倒的に3950xが安かった。
5950Xは10万超えててちょっと。。

3950xでも十分に速い。全てのコアを使い切ったことが今まで一度もナイ。


メモリ

よくわからないけど、Unity開発もするから潤沢に64GBにした。これで困ったことは一度もない!


SSD

Gen4速すぎ。Read4,950MB/sだってさ。

正直まだよくわかっていない。

別にGen3でも良かったかも。


電源

ゲーミングPCらしいカラフルなライトアップで綺麗。

動作も安定してて素晴らしい。


グラボ Radeon RX 6700 XT EAGLE 12G

メーカーは実はこれじゃなくてギガバイトのやつ。

一番悩んだのがグラボ。

ちょうど、マイニングブームでほとんどグラボが手に入らず、合っても値段がおかしなことになっている。

そこで、ちょうど発表された6700XTを即買いしてみた。

値段は9万円ほどと、めっちゃ高い。

動かしてみて

そんで、WQHDのディスプレイで、アサシンクリードオデッセイの設定高めでやってみたら

カクツク、カクツク。

f:id:hollywis:20211016071053j:plain

普通設定でも、問題なく動くんだけどGPU使用率は100%で張り付く感じ。


うーん。最近のゲームってGPUバカ喰いなのね。

ゲームをバンバンするなら正直性能が足りないかも。


でもVRに使う分には申し分なかったです。

f:id:hollywis:20211016070234j:plain

VRゲーム史上、クオリティが最高と言われている『Half-Life: Alyx』やってみた

f:id:hollywis:20211016071715j:plain


すごい臨場感。

このグローブでなんでも掴める。それだけで楽しい。

進化を感じる。


というわけで、SandyBridgeおじさん卒業

StripeのSubscriptionのhookについて

f:id:hollywis:20220303120557p:plain
こんにちは、のすけです。

クレジットカード決済プラットフォームStripeの新しいバージョン。と言っても数年前のアップデートですが

によって、機能がいろいろ拡充されてますよね。

ただ機能が多過ぎてドキュメントを読んで仕様を理解するのも一苦労。


その中で、便利なサブスクの機能なのですが

かなり柔軟に料金設定ができるのですが、既存のシステムにもサブスクの管理がある場合
重複して管理しなくてはならなくなります。

例えば他の決済プラットフォームも併用している場合には、仕方なく、自社システムにも
サブスク管理の仕組みを作って、Stripeのサブスクといい感じに連動させる必要があるかと思います。


それで、サブスクの入会、退会はどうやって検出したらいいの?

という問題にぶち当たるのですが。

そこはStripe、イベントをhookする仕組みが用意されています。

着信する Webhook を使用してリアルタイムで更新を取得する | Stripe のドキュメント

ただ、いっぱいイベントあるんですよね。。

サブスクの登録、キャンセルはどのhookを使えば、、、

'customer.subscription.created'を使ってみる

サブスクが登録された時、このイベントが走ります
ですのでこちらをhookするのが正攻法かと思います。


ただ、自社のサブスク管理システムとの連携の際に、
契約されたサブスクがどのサブスクかを識別するためには、あらかじめ登録時に
metadataに識別のためのプランidなどを仕込んで置く必要があります。


ただ、Stripeの管理画面の商品設定画面ではproduct(商品)やprice(価格)にはメタデータをあらかじめ設定できるのですが


サブスク契約(sub_xxxx)は契約時に作成されるので
事前にメタデータを仕込むことができないっぽです。


なので、やり方としては
登録は例えばコーディング不要のStripe既存のcheckout sessionの仕組みを使う場合
どうすればいいのかと言うと


checkout.session.create時に
subscription_dataというパラメータを設定できるので、そこのmetadataに
自社のサブスクを識別する識別子を設定しています。


これで、例えば'invoice.payment_succeeded'をhookして、渡されたJSONデータをパースすると
どのサブスクか判別できます。

'invoice.payment_succeeded'での検出

Stripeでの支払いの際には(トライアルの¥0決済含む)必ず発行されるイベントに
invoice.payment_succeeded'があります。


こちらをhookすることでサブスクの登録と継続決済の検出ができるのでいいかなと思います。


なぜなら、billing_reasonという項目にサブスクの状態が入っているからです


登録時には"subscription_create"が、継続決済時には"subscription_cycle"が入ってくるので
こちらを識別する方法があります

'customer.subscription.updated'の場合

このイベントは、サブスクリプションが変更されるたびにトリガーされます。
たとえば、クーポンの追加、割引の適用、インボイス項目の追加、プランの変更はすべて、このイベントを発生します。


この変更検知では、サブスクの継続支払いをだけを綺麗にhookできないです。
関係ない設定変更でも検出されてしまうので、何の変更なのかを吟味する必要があります。


個人的には使いづらいので、私はこちらは継続決済の検出には使ってません。

'customer.subscription.deleted'

これは普通にサブスクがキャンセルになったら発動します。


適切に検出してキャンセル手続きをしましょう。

番外:無料トライアル期間の設定

サブスクの無料トライアル期間はStripe管理画面からはできません。
登録しようとすると、レガシー機能で非推奨ですなんて出て、実際反映されません。


なのでAPI経由で設定が必要です。


これもStripe既存のcheckout sessionの仕組みを使う場合
どうすればいいのかと言うと

checkout.session.create時に
subscription_dataというパラメータを設定できるので、そこのtrial_period_daysというのがあるので

そこに日数を設定してやればOKのようです