2016-04-25

おきゅらすたんのスカート用にToonShaderを改造する

ヨコイさんの手によるおきゅらすたんの3Dモデル、ニコニ立体で公開されております。

自分はMMDは浅学なので、MMD4MecanimでUnityに取り込んでから遊ばせてもらっています。

f:id:onoty3d:20160425133842p:plain

ところで、VR草の者式~の方のおきゅらすたんのスカート部分。
本来半円のレース状になっているのですが、Toon/Lit Outlne Shaderだと透過をサポートしていないので、こんな感じになります。 f:id:onoty3d:20160425134516p:plain

残念なので、clip関数を使ってCutOut表現が出来るようにしてみます。 f:id:onoty3d:20160425134831p:plain

これでレースは表示されましたが、アウトラインがメッシュの形そのままで出てるので変。

アウトラインもclip。

f:id:onoty3d:20160425135632p:plain これだけだとレース部分にアウトラインがほとんど出ません。

通常テクスチャのCutOutの閾値とアウトラインの閾値を別パラメータにして少しずらしてみます。これでレース部分にもアウトラインが出てきます。
※アルファ値が0/100で綺麗に分かれているようなテクスチャだとこの方法が使えないので別法を探る必要がありますが、今回はとりあえずこれで。 f:id:onoty3d:20160425134946p:plain ただ、Toon/Lit Outlne ShaderのOutlineはCull Frontされているので、レースの前面の方は線が出ません。

とりあえずCull Offにすると、通常テクスチャの上にアウトラインの膜がでるような感じになってしまいます(アウトラインは頂点を膨張させて描画する仕様なので)。 f:id:onoty3d:20160425135405p:plain

なのでCull Off状態で、ちょっとアウトラインをZ方向(奥方向)にずらします。 f:id:onoty3d:20160425140355p:plain

なんとなく出来たかな？

とりあえず現状のShaderを公開してみます。
Dropbox - ToonCutoutShaders.unitypackage

パラメータこんな感じ。
f:id:onoty3d:20160425141349p:plain

2016-04-19

Unity C#3からC#6に向けて

Unity スライド

ふくてん #2でのスライド

Unity C#3からC#6に向けて from onotchi_

www.slideshare.net

2016-03-04

Rxに入門

Rx UniRx スクリプトスライド

昨日の"ふくてん(Fukuoka.NET)"でLTした内容を若干加筆してSlideShareにUPしました。

Rxに入門しようとしている from onotchi_

www.slideshare.net

スライド中のダブルクリック処理について、少し解説します。
ソースはこちら。

this.UpdateAsObservable()
  .Where(_ => Input.GetMouseButtonDown(0)) //マウスダウンを抽出
  .TimeInterval() //前回からの経過時間を付与
  .Skip(1) //最初のクリックは無視
  .First(x => x.Interval.TotalMilliseconds <= 500) //前マウスダウンからの経過時間が500ms以内
  .RepeatUntilDisable(this.gameObject) //処理が終わったらRepeat
  .Subscribe(x => Debug.Log("★★double click : Rx"));

Rxに入門して間もない状態でのソースですので、突っ込みどころがあるかもしれません。
また、単純に時間差でダブルクリック判定するだけでなく、以下の仕様を盛り込んでいます。

・3連続でクリックした場合、1,2回目のクリックだけをダブルクリックとして処理する。
(2,3回目はダブルクリックとして処理しない)

・4連続でクリックした場合、1,2回目のクリック、3,4回目のクリックをそれぞれダブルクリックとして処理する。
(2,3回目はダブルクリックとして処理しない、ダブルクリックとしての検出は2回。)

前者に関しては、時間差を判定する部分をWhereではなくFirstにすることで対応しています。
初回のダブルクリックだけを抜き出す感じです。

後者に関してはRepeatを使うことで、Firstで完了したSubscribeを繰り返しています。
1,2回目のクリックによるダブルクリックをFirstで検出したあと、3,4回目のクリックによるダブルクリックを再度Firstで検出している感じです。
なお、単純なRepeatではなくRepeatUntilDisableにしているのは、プログラム終了時にエラーが発生するのを防ぐためです。
(Repeatだと終了時に空のメッセージに対するFirstの評価が行われてエラーになる。)

今後もRx学んでいって、達者になっていきたいと思います。

2016-02-06

クロマキーシェーダーを作ってみる

Unity Shader

rocketnews24.com

朝からガチャピンがクロマキーで透明化した、というニュースが話題になっていたので、便乗してクロマキーシェーダー作りました。
記事の最後にコードを掲載します。

通常のクロマキーではブルーバック、グリーンバックが主ですが、任意の色が指定できるようにしました。
また透過対象色の近似度の閾値も任意に指定出来ます。

任意色指定
f:id:onoty3d:20160206140350g:plain

閾値指定
f:id:onoty3d:20160206140453g:plain

ガチャピンのようなもの。
f:id:onoty3d:20160206140531g:plain

WebCamTextureやRenderTexture用のShaderとして使うことで、実際のテレビのクロマキーの様に使うことが出来ると思います。
↓ちょっと前にFaceRigで試したやつ。

あ、そっか、WebCamTextureをセットするマテリアルのシェーダで指定色近傍の色を投下すればUnity上でクロマキーできるか。 pic.twitter.com/uBelnGKkAm
— オノッチ (@onotchi_) 2016年1月15日

※2016/05/13 追記
色の近似度をRGB色空間の距離でとっていましたが、同色で明暗がある場合はHSV色空間のH(Hue)の近似で見たほうがいいことに気づいたので、そちらのバージョンも作ってみました。
下の図の場合、左が上記のRGBでの判定、右がHueでの判定となります。
f:id:onoty3d:20160513182839g:plain

シェーダのコード

2016-02-01

SDユニティちゃんでファイティングユニティちゃん

ユニティちゃん Asset スクリプト

先日開催されたGGJ(Gloval Game Jam)に向けて、ユニティちゃんの公式でSDユニティの新作「SDこはくちゃんズ」が公開されました。
unity-chan.com
さっそくクアッドアローさんのファイティングユニティちゃんのモーションを適用させたりして、遊ばせて頂きました。

こはくちゃんズ #unitychan pic.twitter.com/bxZhOZWDDS
— オノッチ (@onotchi_) 2016年1月28日

ローリングこはくちゃんズ

via HQ Fighting Animation vol.11 by Quad-arrow https://t.co/9Pk0n3UXB5 #unity3d pic.twitter.com/Z8MbmnOahB
— オノッチ (@onotchi_) 2016年1月29日

蛇モーション、キャラを立たせて低速にすると強烈に可愛い。ガニ股になったけどｗ

via HQ Fighting Animation vol.11 https://t.co/9Pk0n3UXB5 #unity3d pic.twitter.com/rkxbsac2uf
— オノッチ (@onotchi_) 2016年1月29日

ちなみにユニティおじさんは、元の体のサイズをパーツ単位で調整して無理やりSD化しましたｗ

ところでSDユニティちゃんにファイティングユニティちゃんのモーションを適用させると、目がグルグル回っちゃうようになります(結構怖い)。
f:id:onoty3d:20160201150604p:plain:w364
はみ出ることも。

幾つか解決法があるので紹介します。

解決法1
参考：
SDユニティちゃんでキック技モーション｜ゆにてぃメイト
 SDユニティちゃんとファイティングUnityちゃん - ぬる湯の端書
上記ブログで言及されているように、モーションに対してHead部分だけマスクをかける方法です。
ブログ内にも言及がありますが、Head全体がマスクされてしまうので、Headの角度がおかしくなるモーションもあります。

解決法2
HumanoidのConfigureで目のボーンを未指定にすることで、目をモーションの対象外に出来ます。
f:id:onoty3d:20160201150624p:plain
f:id:onoty3d:20160201150632p:plain
この場合、頭はちゃんと動きます。
ただし、Mecanimの機能を使った視線操作等は出来なくなります。
自分がtwitterに投稿したGIFアニメは、この方法を使っています。

解決法3
蛇モーションで遊んでいた時、ガニ股になってしまったSDユニティちゃんの足をスクリプトで回転させて内股にする、という方法を学びました。

覇王様のアドバイスで、蛇モーション時にガニ股気味だったユニティちゃんの足を内股にすることが出来ました…というか好きにブン回せるようになりました。 pic.twitter.com/rqHtH4gOPh
— オノッチ (@onotchi_) 2016年1月29日

SetBoneLocalRotationというメソッドを利用することで、任意のボーンの回転を制御することが出来ます。
この方法で、足と同様に目のボーンの回転をスクリプトで制御できます。
事前にAnimatorのlayerの設定でIKPassにチェックを入れておいてください。
f:id:onoty3d:20160201162058p:plain

ソースはこんな感じ。特にパラメータをいじらなければ、両目の回転が角度(0,0,0)で固定され、グルグルしなくなります。

この方法だと、目の回転を固定したい時だけスクリプトを適用すればいいので、スクリプトさえ用意してしまえば一番お手軽かもしれません。

この作品はユニティちゃんライセンス条項の元に提供されています

2016-01-18

Unityで手書き文字認識

Unity

Unityで手書き認識 pic.twitter.com/h9VKfvBjMb
— オノッチ (@onotchi_) 2016, 1月 18

このミミズみたいな筆記体でも認識できるってのが感動する。複数文字の場合は単語としての妥当性もみてるんだろうね。 pic.twitter.com/tBYTUaYCzM
— オノッチ (@onotchi_) 2016, 1月 18

メモに留めますが、何かの役に立てば。

・字を書く
→LineRendererを利用。
　Unity - マニュアル: ラインレンダラー

・解析する
→Microsoft.Ink.dllを利用。(System.Windows.Ink.dllとIACore/IALoader/IAWinFX.dllとかでもOK)
解析法は「C# 手書き」とかで色々出てくる。
　Windowsフォームのインク機能① | WDN Engineers' Blog
　手書き認識

ASP.NET Web APIで頂点の集まりを受け取るAPIを作って、受け取ったら解析して結果を返すようにしました。
なんでわざわざAPIにしたかというと、dllを直接Unityのプロジェクトで使おうとしたら、上手くdll内のクラスのメソッドが呼べなかったから。
Mono絡み or .NETのバージョン絡み?上手くやる方法もあるのかもしれない。
でも多分Web APIにしたほうがOS依存も無くなり、スマホアプリから呼んだりも出来るはず！

ちょっと嵌りそうなところは、UnityのY座標とMicrosoft.Ink.dllとかのY座標の正の向きが逆なこと。前者は上方向が正、後者は下方向が正。
そこだけ上手く変換してください。

ちなみにdocomoのサービスの手書き文字認識APIというのも試してみたのですが、一文字ずつしか認識できないので、ちょっと面倒くさかった。

2016-01-12

FaceRigでプロ生ちゃんになろう

プロ生ちゃん FaceRig Live2D

2016/01/13
アイコンや名前、説明を設定するための説明が書かれたドキュメントへのリンクと注意点を追記しました。

流行ってますね、FaceRig。
GOROManさんがFaceRigを使ったゲーム実況をしてから、いろんな方がFaceRigを楽しんでおられるようです。
これこそバーチャル！FaceRigとボイスチェンジャーで美少女キャラによるゲーム実況が実現 | MoguraVR

実況のやり方も公開されていますね。
中の人(二次元)になる方法【FaceRig × Live2D × Unity × OBS × AVVoiceChanger × 気合】 - Qiita

自分も先日ちょっと遊んでみました。
・FaceRig + LeapMotion

組み合わせてこんな感じなのじゃ pic.twitter.com/nbzpYgjRLw
— オノッチ (@onotchi_) 2016, 1月 8

・顔テクスチャを変えてみるとか

FaceRig、例えばクエリちゃんみたいなテクスチャで表情を切り替えるようなモデルなら、うまくやればいろんな表情つくれるんじゃないか。これはとりあえず適当にやってみただけだけどｗ pic.twitter.com/G2gacYd9Da
— オノッチ (@onotchi_) 2016, 1月 8

他に遊び方はないかな、と考えていたところ、MaruchuさんがFaceRig Live2D Moduleを利用した自作アバターを作る方法を動画でアップしてくださっていました。

FaceRig に自作の Live2D アバターを追加するための手順解説動画を作りました。この3連休にアバターを作ってみるのもいーんじゃないっすかねー。ニコニコ　https://t.co/YBQafNCZDH YouTube　https://t.co/jA1wTg9ZCB
— ㊥Maruchu (@Maruchu) 2016, 1月 8

うむ。これは、やるっきゃないぜよ。
ターゲットは例に漏れずプロ生ちゃんで…。
先のアドベントカレンダーでは、プロ生ちゃんになった方が二名ほどおられましたが、これで自分もプロ生ちゃんになれる！！！

FaceRig Live2D Module用のデータを作るには、顔パーツを分解したPSDデータを作る必要があります。
プロ生ちゃんの場合は3Dモデルがあるので、適当にパーツ単位でマテリアルを非表示しながらキャプチャを撮っていけば、比較的簡単にデータが作れます。

あとはMaruchuさんの動画にしたがってデータを作っていけば、うまくいきます。
※ちなみにPSDファイルはPhotoShopでなくても作成できるフリーソフトがありますので、PSDだからといって諦めてはダメです！自分はずっとPixiaを愛用しています…。

少し動画に補足をするなら、Live2D Cubism ModelerにPSDファイルを取り込むとFaceRig用のテクスチャが作成されるのですが、テクスチャサイズは大きめに指定したほうが綺麗なアバターが作成できます。
f:id:onoty3d:20160112203824p:plain

ただしFREE版では2048サイズの1枚より大きなものは作成できないようです(保存しようとしたら怒られる)。
またテクスチャは自動で作成されますが、PSDファイルの各レイヤの透明部分を自動でトリミングしたりはしてくれないので、各レイヤはフルサイズでなく画像サイズに合わせて作成していたほうが無駄が少なくなり、より多くのパーツ分けが可能となります。

・全レイヤフルサイズにしちゃったやつ
f:id:onoty3d:20160112203858p:plain

・画像サイズに合わせてレイヤサイズを調整したやつ
f:id:onoty3d:20160112203914p:plain

もう一つ、テンプレートを適用させる部分ですが、動画内でも言及されている通り、基本的にテンプレを重ねるだけでは上手く行きません。
ただ各パーツにカーソルを合わせると、それが現時点でどのパーツと紐付いているかが表示されるため、テンプレ・自作アバター共に紐付けたいパーツを選んでから「選択要素を対応付け」すれば、上手く行きます。

こんな感じで表示される。
f:id:onoty3d:20160112204209p:plain

パーツを選んで「選択要素を対応付け」

f:id:onoty3d:20160112204237p:plain
それでもその後のパラメータ調整はほぼ必須ですが…。

ともあれここを乗り越えれば、自作アバターを楽しむことができます！！
みんなもやろう！

f:id:onoty3d:20160112204348g:plain

f:id:onoty3d:20160112204424g:plain

2016/01/13 追記

FaceRig Live2D Moduleについては、開発の人が日本語の説明はこれを見てって言ってましたー。表情のデータを設定してやればキーを押して表情を変えるってこともできるんすね。 #FaceRig #Live2D https://t.co/tikA5UMOV1
— ㊥Maruchu (@Maruchu) 2016, 1月 11

Maruchuさんが紹介しておられましたが、以下にLive2D FaceRig Avatars ドキュメントの日本語訳があります。

Live2D FaceRig Avatars ドキュメント

ちなみに原文はFaceRig Live2D Moduleインストール時に下記フォルダに作成されていると思います。Steam\steamapps\common\FaceRig\Bin\Tools\Docs\Live2D_Facerig_Avatars_Documentation.pdf

これに書かれている内容に従えば、？表示だったアイコンや名前、説明などを設定することが出来るようになります。

注意点として、*.cfgファイルはUTF8N(BOM無UTF8)で保存したほうがいいようです。
そこでハマって1時間飛んでいったので…。

FaceRig、説明用のcc_names_[アバター名].cfgのフォーマットはUTF8(BOM無)じゃないとダメ。UTF8(BOM有)だと読み込みすらしてくれない。Shift-JISは読めるが、この場合は日本語が化ける。 pic.twitter.com/dGCAzdkXQO
— オノッチ (@onotchi_) 2016, 1月 13

上手く行けば、アイコンや名前、説明が表示されるようになります。

f:id:onoty3d:20160113134440p:plain

Onoty3D

Unityに関するメモとか