ポストエフェクトっぽく世界を変える試みと、指定色を残すシェーダー
さて、コミックおきゅたんをやったなら、ワールドそのものもコミック風にしてみたい。
自前のワールドならメッシュのシェーダーをそれ用のにすればいいのだけれど、任意のワールドをコミック風ににするにはポストエフェクトでやってしまうのが手っ取り早いです。
以前コミック風にするポストエフェクトは作成済み。
ポストエフェクト版も作っててある意味良かった。
— オノッチ (@onotchi_) January 10, 2018
背景になるデータはマテリアルを全部変えるのも大変だし、ポストエフェクトのエッジ検出とディザリングで漫画風にして、キャラクタはマテリアル単位でキレイに漫画風に。 pic.twitter.com/HdpuVPIfOT
ただVRChatで使えるポストエフェクトはPost Processing Stackしか許されていないようで、そもそもそれも自作ワールドにしか使えないということで、どうにも太刀打ち出来ません。
さぁ、どうしようかなぁ…と思った時に思いついたのが、カメラの前に板を置いてしまうこと。板の後ろの画をそのまま描画するシェーダーを書いて、その画を加工してしまえばいいじゃないかと。
この辺は以前遊ばせていただいたEsさんの水面シェーダー関連の記事が心に残っていました。
公式にもサンプルはあります。
で、コミック表現の前に、試しに以前作った色残しエフェクトを組み合わてみました。
実際にVRChat内で使ってみたところ。
シェーダーで任意のフィルタをかけた世界を見れるようにした。これは赤系の色だけを残すエフェクト。
— オノッチ (@onotchi_) July 19, 2018
後からの動画加工じゃないことを示す為、今はメガネ型にしたけど、カメラを完全に覆う形にすれば、自分の好きなワールドを好きなエフェクトで見ることが出来るようになる(はず)。 #VRChat pic.twitter.com/HEC8Tll46Z
カメラ全体を覆っても良かったのですが、それだと後から動画編集したのと区別がつかなそうだったので、若干アピールのためにメガネにしてみました。
メガネにしてみて思ったのですが、最初メガネをHeadの子にしていたんですが、Headの子はどうやってもカメラに映らないようでした。
変に顔とか髪とかのメッシュに視界が埋まっちゃうのを防ぐためですかね。
とりあえず苦肉の策でNeckの子にしていますが、例えばVRモードの場合は手にメガネを持って、眼前にかざす、とかでもいいかも。
あるいはうまくHeadに外からJointする方法もあるのかな？
体全体を大きな球で覆って、その球にシェーダーを適用してもいいかも。
シェーダーはBOOTHで無償公開しました。
BOOTHデビューです。
作成したマテリアルを板などにセットして使ってみてください。
パラメータは3種類で、
Target Color: 残す色
Threshold: 同系色の許容範囲
Brightness: 灰色にした部分の明るさ
が調整できます。
VRChat始めました
最近ようやくVRChat始めました。
アカウント自体は昨年から作っていたし、環境としてもいつでも始められる状態だったんですが、まぁ色々タイミングやらなにやらで。
始めたというものの、結局Oculus Riftをつけるのが面倒で今の所デスクトップでやってます。ただその内ちゃんとRiftでも入ります。デスクトップだと出来ないこと多いので…。
ちなみに、先述の通りアカウントだけは作っていたので、アバターは最初からアップロード可能でした。
未だ、VRChat内で出来ること・出来ないことあまり把握しきれておりませんが、とりあえずシェーダーだけはなんでも自由に使えることはわかったので、自分が過去にやったいろんなシェーダー遊びをやっていけたらいいな、と思っております。
とりあえず最初に試してみたのは、過去にもやったコミック風シェーダー。
#VRChat フォト。@onotchi_ さんの作ったアバター、コミックおきゅたん。漫画から出てきたみたいだよね！ VRで見るとすごく不思議な感じ！ pic.twitter.com/d2KRq9A1m3
— おきゅたんbot🏝VRすきま動画 (@OculusTan) July 16, 2018
その後、おきゅたんbotの提案もあってペラペラバージョンに進化しています。
物理的にメッシュやボーンを潰しているのではなく、シェーダーで潰しているため、普通にアニメーションとかは出来ます。
まだまだ絶賛試行錯誤中です。
ついでに吹き出しや効果線、コマの枠なんか出せたら楽しいかなと思います。
吹き出しはリアルタイムで音声解析して喋った言葉がそのまま出せたらいいのですが、流石にいまのVRChatの機能だけでそれを実装する術は思いつきません…。
まずは通常のVRでの実装を模索してみたほうがいいかも。
ともかく色々と実験はしていきたいと思います。
スクショでお題にチャレンジに参加しました。
参加させていただきました、スクショでお題にチャレンジ。
結果はなんと大賞をいただいてしまいました。ありがとうございます、ありがとうございます…！
お題にチャレンジ！Vol.6： ハッピーバレンタインなイメージをUnityで作ったら？なスクリーンショット – Unity公式 Asset Portal
今回のお題、ハッピーバレンタインデー。
Humanoidこはくちゃんズが公開された時期だったので、最初に浮かんだ画は魔女の儀式のような感じでチョコレートを溶かすラッコちゃんでした。
ついでにこはくちゃんズだから、舞台は学校にしよう。
以前試した、UTS2(UnityChanToonShader2.0)のプロ生ちゃんとアニメ風の教室アセットがすごく馴染みが良かった(※)ので、同じパブリッシャーさんの調理室アセットを使わせてもらうことにしました。
(※)
で、かなり違和感なくUTS版プロ生ちゃんと馴染むので大満足。 pic.twitter.com/RH47RE9a2W
— オノッチ (@onotchi_) 2018年1月21日
最終的につかったアセットはこれら。
(手頃なお値段で化学用具アセットがあったので、魔女をやめて化学にシフトしました(笑))
シェーダーは全てUTS2に置き換え。
幾つかアセットのタイトルにPBRと入っているのもありますが、ガン無視してしまった。
またテクスチャも一部はアニメ寄りになるよう、いろいろ手をいれました。
あと、応募時に申告するの忘れていましたが、スクショの作成自体は以下のアセットを使っています。
このアセット、スクショの作成方法をCapture Screenshotメソッド使うかRenderTexture使うか切り替えられたり、サイズも実際の表示サイズより大きなサイズを設定できたりと便利なんですよね。
以下製作途中でとったスクショの幾つか。
最初に教室と、こはくちゃんズを適当に配置。
まだみさきちのポーズが決まっていません。
チョコを盗むユニティちゃんと、怪しげな準備を始めるラッコちゃん、どちらへ向けるか…。
３人の構図が決定。
カメラ位置を微修正。
また、光と影が強すぎる気がしたので、抑えています。
調理台の天板が黒くて全体的に暗めだったので明るく。
上の小物も地味な色だったため、原色に近い色を使ってメリハリ。
キノコだけじゃつまらん！何か足そう！
マンドラゴラとかイモリとか入れてみたかったけれど、無料の根菜を使う。
ユニティちゃんの髪色もいつも見る感じにして、手元にチョコをひとつ持たせて盗んでる感を増す(増したつもり)。
さらにポストエフェクトを若干載せて、完成。
エフェクトはかけまくるとアニメっぽさが損なわれたので、結局ほんのりとしか使いませんでした。
【おまけ】
画面外では、使わなかった鍋とかが浮いていたり。
膝立ちっぽいユニティちゃんが実は床に刺さってるだけだったり。
今後もチャレンジのお題が出たときには、参加していきたいと思います。
Nintendo SwitchでFlashAirを利用する【失敗編】
最近はNintendo Switchで日々イカを嗜んでいるオノッチさんです。
2からのデビューでヘタクソだけどな…。
イカ用アカウント作ってます。
Switchはゲーム内で撮ったスクリーンショットを、そのまま直接SNSに投稿できるところがお気に入りです。
さらに最近は動画も手軽に録画出来るようになったので、SNS活用のシーンがより増えてきました。
しかし文字入力が一文字ずつカーソルを移動して文字を選ぶ感じなので煩わしい。
さらに画像の加工があまり出来なかったり、複数枚同時投稿が出来なかったり、色々不満点もあるので、PCを使ってSNSへ投稿したくなってきました。
なお文字入力の煩わしさに関しては、通常のキーボードをSwitchに繋げばマシにはなります。ですが、漢字変換が微妙だし、ついでにTwitter用の絵文字も使えないので、その辺も不満。
ではPCからスクショや動画を投稿するにはどうするか。
一番安上がりなのはmicroSDを使ってSwitchとPC間でデータを受け渡しすることです。
ただし、手間や懸念点が多い。
・microSDを安全に外すため、Switchの電源を都度落とす必要がある
・抜き差しが発生するため、カードや端子に物理的な劣化が生じやすくなる
・そもそも抜き差し面倒
・毎度電源を落とすと、イカを再開するとき毎度ハイカラニュースを見せられる
なので、Switchからクラウドストレージにデータがアップロードできればベストなんですが、今のところその術はありません。
一旦Twitterの鍵アカウント等にアップしてからそれを使う手もありますが、結局一枚一枚のアップになるし、なにより今のTwitterの仕様だとTwitterにあげた画像は更にJpeg圧縮がかかって劣化してしまいます。
PCからLANを経由してSwitchにアクセスできないかな、なんてのも思いましたが、それも無理なようです。
というわけで思い浮かんだ別法が、Wifiに接続できるSDカード(FlashAir等)を利用するということ。
「Ninrendo Switch FlashAir」で検索すると、すぐに見つかった動画がこれ。
なるほど、SwitchでFlashAirはとりあえず使えるようです。
しかし自分は動画のようにSDカードスロットを直接改造するスキルはない。
さらに調べてみると、microSDをSDに変換してくれるケーブルがあることを知りました。これなら自分でもやれる！！
というわけで早速買ってみたのがこれ。
サンコー SD-microSD変換エクステンションケーブル SDCVET2K サンコー
結果：大失敗。
幅が広くなった部分が干渉して、スロットの奥にまできっちり差し込めなかった。
そこをどうにか出来たところで、はみ出た部分がじゃまになって、Switchをドックに格納できない。
散々であった…。
めげずに、次に買ってみたのがこれ。
B1912A v1.1 : microSD-SDカードフレキケーブル延長アダプタ ver1.1
お値段がAmazonで4,000円近くした。
メーカーから直買いすれば$19くらいだったが、その場合送料も$19ということだったので、結局Amazonの方が若干安くなる。
結果：失敗。
こちらは差し込むのもドックにセットするのも問題なかったが、SwitchがFlashAirを認識してくれない。
ノーマルなSDカードであれば、このケーブル経由でも認識してくれるので、ケーブルが悪いわけではない。
またSwitchではなくPCに接続する場合は、このケーブル＋FlashAirでも認識できたので、ケーブルとFlashAirの相性が悪いわけでもない。
どうもSwitch+このケーブル+FlashAirだけがうまくいかない。原因がよくわからない。
Twitterの方で電力不足の可能性も示唆されたが、FlashAirの無線LAN機能をOFFにして、通常のSDカードモードにしてもダメだった。
うーん？
最初の動画で利用していたFlashAirはW-03と、最新バージョンのW-04より1世代古い。
自分は最新のW-04を利用していた。
なのでW-03ならOKではないか？という可能性はある。
ただこれ以上博打な出費をしたくなかったので、現在考え中。
ケーブルの方も、変換名人というケーブルがあるが、こちらはケーブル長が短く、SDカードを入れる部分がドックと干渉しそうなので敬遠している。
というわけで結局今のところ、複数枚投稿したい時などはmicroSDでデータを移動させている…。
ーーーーー
2017/11/11 追記
W-03でつながりました。詳細はまた後日。
Character Particle Release Notes
About
This is Release Notes for Character Particle.
--
Character Particleのリリースノートです。
1.2 -2017/08/15
Internal fixes.
Changed the process of passing parameters to the shader.
--
内部処理修正。
パラメータをシェーダーへ受け渡す処理を変更した。
1.1.1 -2017/08/04
Bug fixes
Fixed a problem that particles are not generated well when building.
Changed some of the methods to properties and made the old method Obsolete.
--
バグ修正。
ビルドをした時にパーティクルがうまく生成されない問題を修正しました。
幾つかのメソッドをプロパティに変更し、既存メソッドはObsolete扱いにしました。
1.1 -2017/08/01
Improve script to reduce memory waste.
When applying ver.1.1 to a project to which ver.1.0 is applied, it is necessary to create a font information file and reset parameters.
Please see the manual.
--
メモリの浪費軽減化のためのスクリプト改修。
ver.1.0が適用されているプロジェクトにver.1.1を適用する場合、フォント情報ファイルの作成とパラメータの再設定が必要です。
マニュアルを御覧ください。
1.0 -2017/07/28
First Release.
--
初回リリース
Character Particle!
この記事はUnity アセット真夏のアドベントカレンダー 2017 11日目の記事です。
前日の記事はなまずさんの「亭々たる あの雲を求めて 〜Fog Volume 3〜」でした。
Fog Volume 3は自分のほしいものリストにもしっかり入れていて、いつか使ってみたいと思っているアセットです…。特にこの夏のまっさかりの時期には、もくもくとした雲がぴったりじゃないですか！
さて、本題に入ります。
先月末、7/28に、自身の初アセット「Character Particle」が公開となりました！
＼どやぁ／
どんなアセットかというと、任意の文字列をParticleとして一文字ずつ放出できるアセットです。
公開当日はUnityAssetStoreJapanさんが突発イベントで、宣伝もしてくださいました！
ありがとうございます！
盛り上がっているっぽいのでスクショ上げイベントやっちゃおうっと！
Character Particle ( https://t.co/j4CUxhqMJ4 ) を使ったスクショに #ほとばしる言霊 のハッシュタグを付けて投稿しよう！
独断と偏見でなにか贈ります♪ pic.twitter.com/Km0ihiN13K— UnityAssetStoreJapan (@AssetStore_JP) 2017年7月28日
この時のみなさまの作品は #ほとばしる言霊 のハッシュタグで見ることが出来ます。
またtogetterにもUnityAssetStoreJapanさんがまとめてくださっています！
作品は未だ増えたりしてます。ありがたや…！
さて、使い方ですが、詳しい使い方はアセットに付属のマニュアル内に書いております。
なのでここでは、使い方の要点を説明していきたいと思います。
使い方の要点
■フォントについて
uGUIのTextのように、フォントを指定すればすぐに使える…なら便利だったかもしれませんが、このアセットでは任意のフォントからビットマップフォント(テクスチャ)を事前に生成する必要があります。
その為フォントファイルを同梱する必要がなくなるので、フォントの再配布がライセンスに不可なものでもアプリで利用可能になったりします(※ビットマップフォントの作成もNGな場合があるので、各フォントのライセンス・規約には十分ご注意ください。)
ちなみにおすすめはGoogleの提供しているGoogle Noto Fontsです。ライセンスはSIL Open Font Licenseで、ビットマップフォントの公開はもとより、再配布もOKとなっています。日本を含む様々な国の文字や、ルーン文字なんかもあります。
本アセットに同梱されているサンプルもこのフォントを利用させてもらっています。
■テクスチャの作成
ビットマップフォントの生成は、その名のとおりBitmap Font Generatorというソフトウェアを基本的に利用します。Unityに限らず、ゲームで利用するフォントを作成するシーンで、割と世界中で活用されているソフトウェアのようです。
このソフトウェアで出力される設定ファイルの仕様は幾つかの他のソフトウェアでもサポートされていてるので、そちらで作成したファイルも利用可能です。
Bitmap Font Generator自体はWindows用のソフトウェアなので、他の環境のかたは、他のソフトウェアをお試しください。
- Littera - free web application
- Glyph Designer - paid app for Mac
- ShoeBox - free tool written with Adobe Air
- Hiero - open source tool written in Java
※Bitmap Font Generatorのサイトより引用。
ソフトウェアの具体的な使い方は今回割愛しますが、公式ドキュメント(英語)や強火で進めさんの記事などが参考になります。
■シェーダー
シェーダーは現在３種類用意しています。
Additive:背景と加算合成
Alpha:透過部分の切り抜き合成
Alpha Dissolve:Alpha+分解表現
作りたい雰囲気に合わせて好きなものをご利用ください。
またDissolve処理用のテクスチャは好きに差し替え可能です。
例えばこのような画像に差し替えて、Dissolveのパラメータを動的に変化させた場合は、こんな感じの表現が出来ます。
■パーティクルシステムのパラメータ
一番の難所はパーティクルシステムのパラメータ調整かもしれません。
パーティクルシステムには20を超えるモジュールが付属しているためすべてをすぐに把握するのは難しいです。
公式ドキュメント(※)や、解説サイトでじっくり把握していってください。
※
Unity - スクリプトリファレンス: ParticleSystem 日本語版、若干古い
Unity - Scripting API: ParticleSystem 英語、最新
サンプル1:
StartSpeedを0、Simulation SpaceをWorldにし、Particle System本体を動かしてみるとこんな感じ(Noiseモジュールも加えて、放出後のパーティクルがウネウネと動くようにしている)。
サンプル2:
External Forcesモジュールと、外部WindZoneで、風に舞う文字
また、実際にアセットとして公開されているパーティクルシステムをダウンロードして、そのパラメータを調整しながら、変化の具合を確かめるのも勉強になります。
おすすめのフリーなパーティクルシステムをリストにしてみました。
■今後の展開
・シェーダーを幾つか追加
・サンプルを増加
・新規スクリプトの追加
等を考えています。
現在、Character Particle Multiline Emitter(仮)
というのを絶賛開発中です。
文字単位だった放出を文字列単位にし、複数行の文字列の場合は一行ずつ放出する感じです。
最後のやつは、UnityちゃんのThe Phantom Knowledge PVに触発されて作ったやつです。これ気になりますよね…！
さて、お次12日はkazumalabさんの「未定」です。
未来はまだ不確定…！？乞うご期待！
指定範囲のモデルをボクセルで生成し直す
2017/06/11 19:40
スクリプトに一部不備がありましたので修正しました…(てへぺろ)
指定範囲にあるモデルを、別の場所にボクセルで生成し直すスクリプトを作りました。
もともととあるイベントで利用された?(※)、#オノッチ解体ショー というハッシュタグの便乗ネタで、twitterのアイコンにもしている鹿モデルの解体をするために作ったスクリプトです。
※福岡VR・ARコンテンツの開発とWindows 10最新情報セミナー - Togetterまとめ
解体～！
ボクセル生成原理
原理としては簡単で、指定範囲に細かい点をプロットし、各点が指定範囲内にあるモデルのメッシュの内側であるならばそこにボクセルを生成する、という処理をしているだけです。
ネタがわかれば「なんだそれだけ」って感じの力技…。
メッシュの内側にあるかどうかの判定は、判定したい点に対して、上下左右前後の６方向からRayを飛ばし、そのすべてのRayが何かにHitすれば内側だとみなしています。
よって６方向以外で隙間が空いている場合なんかは、外側でも「内側」だと誤認してしまいます。より厳密に判定したい場合は、Rayを飛ばす方向を増やしてみたりするといいかもしれません。
Rayを飛ばして判定しているので、指定範囲内に含むモデルは一部分でも、複数モデルでも問題ありません。
ただし後述しますが、MeshColliderをセットし、テクスチャのReadWriteEnabledをにチェックを入れる必要があります。
色の決定原理
ボクセルの色は、６方向から飛ばしたRayで、一番判定点の近くで衝突したRayのHit情報から取得しています。
HitInfoのTriangleIndexを利用するため、指定範囲内に含むモデルにはMeshColliderをセットしておいてください。
またテクスチャのReadWriteEnabledにチェックをいれておいてください。
中まででぎっちり色がついている
マテリアルのテクスチャから色を取りますが、テクスチャがない場合はマテリアルのカラー情報から色を取ります。
それでも色が取得できない("_Color"パラメタを持たないシェーダを使っている)場合は、黒色になります。
色が決定したら、あらかじめ指定したマテリアルを複製してボクセルにセットしています。よって好きなシェーダーを利用することができます。
ボクセルの数だけマテリアルが生成されるのは避けたいので、同じ色の場合はマテリアルを共通して使います。
(頂点カラーと、頂点カラーを表示するシェーダーを使えばマテリアルはひとつですみますが、好きなシェーダーを使える形にしたかった。)
スクリプトの使い方
まず指定範囲用の空のGameObjectを用意し、VoxelTargetAreaスクリプトをAddします。
TransformのPositionやScaleで範囲の位置や大きさを変更できます。
VoxelCountパラメータで、X,Y,Z方向の細分化数が指定できます。
この設定値に従って、最大でX*Y*Z個のボクセルが生成されます。
細分化の個数によっては、生成されるボクセルがきれいな立方体ではなく直方体になったりします。
指定範囲と細分化の具合はSceneビューで青いGizmoで表示されます。
次に生成場所用の空のGameObjectを用意し、VoxelGeneratorスクリプトをAddします。
TextAreaパラメータには先程用意した指定範囲用のGameObjectを指定します。
(この時点でSceneビューに指定範囲と同サイズの赤いGizmoが表示されます。)
Inside Checkerパラメータで、メッシュの内側判定に使うパラメータをセットします。
Target Layer:対象とするモデルのLayerが指定できます。指定範囲内でもTargetにしていないLayerのモデルは無視されます。
Ray Distance:点に対してどのくらいの距離からRayを飛ばすかを指定できます。モデルが大きい場合は大きな値をセットしてください。
Ray Radius:内側判定の精度をあげるため、RayCastではなくSphereCastを利用しています。上手くボクセルが生成されない場合は値を大きくしてみるといいです。
残りのパラメータで、ボクセルに関する情報を設定します。
Voxel Layer:生成するVoxelのLayerを指定できます。
Parent:生成するVoxelのParentを指定できます。
Base Material:生成するVoxelにBase Materialで指定されたMaterialのcloneをセットします。
Material Color Name:ボクセルの色を反映させるシェーダーのパラメーター名を指定できます。
Visualization:チェックすると、うちの内側判定とボクセルの生成をひとつずつ可視化して行います。
後は実行中にVoxelGeneratorのGenerateボタンを押せば、ボクセルが生成できます。
Visualization無し
Visualization有り
UnityPackage
鹿のサンプルシーンも含めたUnityPackageです。
UnityPackageはUnity5.6で作成しています。5.5でも取り込めますが、鹿のテクスチャ情報が消えてしまう場合があるようなので、その時はテクスチャを再セットしてください。
またLayer8を"Voxel"として登録して置いてください。(登録しなくてもいいがVoxelLayerの設定が空欄になる。)
もっと作り込みできそうな所
マテリアルを動的に複製しているため、実行中に出来上がったボクセルをコピーして、終了後に貼り付けてもマテリアルがMissing状態になります。
実行後も再利用したい場合はマテリアルを保存する仕組みにすべきかと思います。
また、マテリアルは同色では共通して使うようにしていますが、テクスチャの色数が多いモデルの場合、同じような色でも微妙に違ったりして、どうしてもマテリアルの数が増えます。減色や均一化の処理をかました方がいいかと思います。
もしくはやっぱり頂点カラーの利用…。
ソース
