勉強メモ: 市松模様を描くシェーダーについて

市松模様（チェッカー柄）で画面を埋めるといったことがしたかったので、
こちらの記事のシェーダーを使わせていただいた。
qiita.com

このシェーダーが何をしているかについて勉強したときのメモ。

このシェーダーは基本Surfaceシェーダーに、パラメータとsurf関数内に下記の記述を加えたもの。

if (int(fmod(floor(IN.uv_MainTex.x * _Division) + floor(IN.uv_MainTex.y * _Division), 2.0)) == 0) {
    discard;
} 

上記の記述では、条件に一致した座標にあるピクセルの場合、処理を中断して、ピクセルを描画しないようにしている。
一行になっていてわかりづらいので、変数に分けるとこのようになる。

float x_value = floor(IN.uv_MainTex.x * _Division);
float y_value = floor(IN.uv_MainTex.y * _Division);
float surplus = fmod(x_value + y_value, 2.0);
if(int(surplus) == 0){
    discard;
}

簡単にいうと、UV座標のxとyに対して、分割数に応じた値を掛けたものを合計し、
その合計が2.0で割り切れた場合はそのピクセルを描画せず、割り切れなかった場合は描画するようにしている。

x_valueとy_valueの合計が2.0で割り切れるためには、
x_valueとy_valueが共に奇数、または共に偶数になる必要がある。
片方が奇数で片方が偶数の場合、これは2.0で割り切れない。

自分でも何を言っているかよくわからなくなってきたので、図を使って説明する。
とりあえず、分割数_Divisionが2の場合を考えてみる。
その場合、市松模様はこのような感じになる。

UV座標は縦と横にそれぞれ0から1までの値を取る。
それを２つに分割するので、1÷2 = 0.5ごとに描画するかどうかを決めるxとyの閾値が決まる。

ここでは、①と④の範囲は描画されず、②と③の範囲のみが描画される。

①の範囲ではx_valueが0、y_valueが0になる。
実際にそうなるかどうか、先ほどのコードに具体的な値をいれて確かめてみる。
適当にここでは(x, y) = (0.4, 0.2)という点で試してみる。

// 0.4 * 2は0.8なのでfloorで切り捨てられ、値は0となる
float x_value = floor(0.4 * 2);
// 0.2 * 2は0.4なのでfloorで切り捨てられ、値は0となる
float y_value = floor(0.2 * 2); 
//fmod(a, b)はaをbで割った余りを返す。0を2.0で割った余りは0
float surplus = fmod(x_value + y_value, 2.0)
if(int(surplus) == 0){//int(surplus)の値は0となるので条件と一致する。
    discard;
}

同じように計算すると、④の範囲ではどの点でもx_valueが1、y_valueが1になる。
合計が偶数となるので、2.0で割った余りは0となりif文の条件と一致してdiscardされる。

逆に②と③の合計は2.0で割り切れない値となるので、条件と一致せず普通に描画される。

分割数が増えていくと、閾値の位置が変わる。
分割数が3の場合、閾値は1/3 = 0.333...ごとに設定される。
分割数が4の場合、閾値は1/4 = 0.25ごとに設定される。
このように分割数が増えていけば、描画するしないの閾値が増えていく。

Unity: Editorから単純な図形のSpriteを作成する

Unityでゲーム開発をしていると、
仮画像として、ただの四角形や丸のSpriteが欲しくなるときがあります。

実はこのような図形はEditorから簡単に作成できます。

手順は簡単、Projectウィンドウの左上にあるCreate→Sprites→作りたい図形を選択するだけ。

また、三角形・四角形・ダイヤモンド・六角形・丸の５種類に加えて、
任意の数の角を持つ多角形を作成できます。

多角形を作成する場合はSpites→Polygonを選択し、
開かれたSprite EditorのSidesに任意の数を入力してChangeを押します。

Sprite Editorでは頂点の位置を動かすこともできます。
左上のSprite Polygon Mode Editor→Custom Outlineを選択することで頂点の移動が可能になります。

設定を終えたらApplyを押すのを忘れずに！

これでちょっとした図形を作るだけならUnityで完結して行えるようになりました！

Unity: スクリプトから動的にゲームオブジェクトのアイコンを変更する

Unityのエディター上でゲームオブジェクトのアイコンを変えることで、
Sceneビュー上のゲームオブジェクトの上にラベルなどのアイコンを表示することができます。

見えないゲームオブジェクトや、
区別のしづらいものをScene上に配置するときに役立ちます。
docs.unity3d.com

エディター上からアイコンを設定するには、上記のリンクに書かれた方法で良いのですが、
今回スクリプトから動的にアイコンを割り当てたかったので、少し調べてみました。

その結果、Thundernerd氏が作成した、
IconManagerという便利なスクリプトがあることが判明しました。
github.com
from https://forum.unity.com/threads/editor-script-to-set-icons-impossible.187975/#post-2698209

使用方法は、SetIconにゲームオブジェクトとenumで定められたIconの番号を渡して呼ぶだけ。
とても簡単にできて嬉しい...感謝。

VRChatで空を飛ぶ方法(外部ツール不使用)

今回はVRChatで空を飛べるアバターを作成する方法について解説します。
宗教上の理由でPlayspaceMoverなどの外部ツールを利用できない方向けです。

外部ツールに比べると不便な点がいくつかあります。
・操作が若干複雑
・飛行中に変な方向にぶっとんだり、回転が止まらなくなることがある

この辺を許容できる方のみ、実践してみるとよいと思います。

記事の内容は2018/09/24時点でのものです。
今後のアップデートなどで使えなくなる場合があります。
また、この方法を使用したことで何か不利益が生じたとしても、
私は責任を負いませんので自己責任で実行をお願いします。

完成図

まず最初に、これが実際に飛んでみた感じです。

とんだ pic.twitter.com/o3m7feyBpw

— きり (@KiliWare) 2018年9月24日

火炎放射のパーティクルを手と足につけています。

動画では上方向へ上昇しているだけですが、
空中で浮遊したまま横方向へ移動することもできます。

空を飛ぶ仕組み

ColliderのついたCubeを足元に置いて、足場として利用することで空中浮遊を実現しています。
足元のCubeにジャンプで飛び乗る動作を繰り返すことにより、空中に浮くことができます。

以下、具体的な流れです。

1. 足元にColliderのついたCubeを置き、アバターの子オブジェクトとして非アクティブにする
2. CubeをActiveにするAnimationを作成し、AnimationOverrideControllerへと割り当てる
3. CubeのMeshを非表示にして見えなくする
4. VRChatへアップロードした後、VRChat内でAnimationを再生しつつジャンプを連打すると、キャラクターが浮遊する

以下で画像付きの解説を行います。

画像付き解説

1. 足元にColliderのついたCubeを置き、アバターの子オブジェクトとして非アクティブにする

Unityのシーン上にCubeを作成して、アバターの子オブジェクトとします。
その後、値をresetして画像のようにします。

Cubeを非アクティブにします。

2. CubeをActiveにするAnimationを作成し、AnimationOverrideControllerへと割り当てる

新規にAnimationを作成し、Animation再生中にCubeをActiveにするようにします。

Animationの作成の方法については、こちらの記事がとても参考になります！
shiasakura.hatenablog.com
（私も初めて表情をつけた際にお世話になりました...感謝）

作成したら、使用しているAnimationOverrideControllerに割り当てます。

3. CubeのMeshを非表示にして見えなくする

CubeのMeshRendererコンポーネントのチェックを外して、Meshを非表示にします。

4. VRChatへアップロードした後、VRChat内でAnimationを再生しつつジャンプを連打すると、キャラクターが浮遊する

これで下準備は完成です。
ですがおそらく、後述の変な動作に対処するため、何回か試行錯誤を繰り返すことになると思います

VRChat内でアップロードしたアバターへ切り替え、
先ほど作成したAnimationを再生します。
そのAnimationを再生した状態を維持したままジャンプを連打します。
上手く設定できていれば、あなたのアバターが空へと舞い上がっていく様を見ることができるでしょう。

空に浮いている状態は、ColliderのついたCubeに乗ることで生じているため、
Animationを解除すると浮遊状態も解除され、下に落ちます。

欠点

VRのコントローラーだと、片方のコントローラーだけで上記の操作を行うのは難しいです。
上昇したい場合、片方のコントローラーでAnimationを再生した状態で、もう片方でジャンプを繰り返す。
横移動したい場合、移動を行う方ではないコントローラーでAnimationを再生するようにして、移動を行う。
このような若干複雑な操作を行うことになります。

また、アバターやプレイヤーの身長の設定によっては、
空中浮遊中に変な方向へぶっとんだり、回転が止まらなくなったりします。

pic.twitter.com/KkL7tXRCFt

— きり (@KiliWare) 2018年9月24日

正直、この辺の不具合の原因が私にはわからないです（すみません）
Cubeの位置・プレイヤーの身長設定などの数値を変更して、
不具合が起きないような設定を見つけ出すか、運命を受け入れるかしていただきたいです...

終わりに

結構不便な点がありますが、外部ツールをインストールせずにUnityだけで完結することができるので、
一定の層に需要があるのではないかと思います。
変な不具合の解消法が分かった方は、教えていただきたいです。

今回の記事で使用させていただいたアバターは、
こまど (@komado_vrc) | Twitterさんの「しろねこラムネ」を改変したモデルです。
booth.pm
ありがとうございました。

VRChatで動画を撮影する & Stream Cameraの使い方

VRChatで動画を撮影する方法を紹介します。

動画の撮影

Windows 10ではゲームバーという機能を使って動画を撮影することができます。

①VRChatを起動します。
②VRChatが非アクティブになっている場合、
ウィンドウをクリックしてアクティブにします。
←非アクティブ
←アクティブ

③キーボードのWindowsキーとGを同時押しすると、
ゲームバーが表示され、録画ボタンを押すと録画が開始されます。
←ゲームバー
←録画開始

④録画を停止するとC:¥Users¥[ユーザー名]¥Videos¥Captures内に撮影した動画が保存されます。
←録画中

もしVRChatのウィンドウをクリックした際にマウスのカーソルが消えてしまい、他の操作ができない状態になってしまったら、キーボードの左上にあるescキーで抜けることができます。
また、Windowsキー + Alt + Rを同時に押すことで、すぐに録画を開始することもできます。

Stream Cameraの使い方

VRヘッドセットを使用している場合、Stream Cameraを使用することで、
映像を撮影する視点を変更することができます。

Stream Cameraに写した対象はデスクトップ側のVRChatへ映し出されるので、
これを利用することで自由な位置から映像を録画できます。

メニューを開き、Cameraを選択します。

Stream Cameraを選択します。

すると、持ち歩き可能なカメラが出現します。
このカメラに映し出されているものが、デスクトップ側に表示されます。

カメラはトリガーで持つことが可能で、位置を調整することができます。
オレンジ色のボタンを何度か選択すると、Look at Meモードという常に自分の頭の方向へ撮影を行うモードになり、自撮りが可能です。

（目玉のアイコンです）

このカメラのボタンが結構押しづらいです。右手でカメラを持った状態で位置を調整しながら、左手でボタンの近くをうろうろさせるのがコツです。

カメラには他にもたくさんオプションがあります。詳しくは公式のドキュメントをご覧ください。
VRChat

Blender Cheat Sheet

たまにBlenderを触るとき、いつもショートカットを忘れてしまうので、
個人的によく使うものを備忘録としてまとめておきます。

画面操作

中クリックでドラッグ	画面回転
スクロール	画面拡大縮小
Ctrl + スクロール	左右スクロール
Shift + スクロール	上下スクロール
1（テンキー）	前視点
3（テンキー）	右視点
7（テンキー）	上視点
Ctrl + 上記の数字（テンキー）	逆の視点
5（テンキー）	パースペクティブ・オーソグラフィック切り替え

モード切り替え

Tab	モード切り替え(Object/Edit)
Ctrl + Alt + Q	四画面分割
T	ツールシェルフ
N	プロパティシェルフ

選択

A	全て選択
B	矩形選択
C	塗りつぶし選択
Ctrl + I	選択しているものと選択しないものを入れ替える
Ctrl + "+"	選択の範囲を広げる
Ctrl + "-"	選択の範囲を狭める

操作

G	移動
R	回転
S	拡大縮小
H	非表示
Shift + H	選択中以外のものを非表示

Object Mode

P	オブジェクトの分割
Ctrl + J	オブジェクトの結合

Edit Mode

Ctrl + Tab	頂点・辺・面の切り替え
K	ナイフ
Ctrl + B	面取り（Bevel）
Ctrl + R	ループカット
I	面の差し込み
E	Extrude
Alt + E	Extrudeメニュー
Ctrl + 左クリック	辺・面を作る
F	面を張る(Fill)
Alt + F	三角形で面を張る
W + 1	細分化
Shift + Alt + S	球体化
P	別オブジェクト化

その他

Shift + S	3Dカーソルの位置移動
O	プロポーショナル編集モード
M	レイヤーの移動
Shift + A	プリミティブの追加
Ctrl + G	グループ化
Ctrl + Alt + Shift + M	穴が空いている部分を一括選択
Shift + Ctrl + Alt + F	リンクするフラットな面を選択

Unity: Package ManagerからインストールしたPackageのソースコードの場所

最近Packageに追加されたVector GraphicsのAPIの仕様について調べていたのですが、
主要なコードがDLLにコンパイルされており、中身を読むことができなかったので、
コンパイルされる前の中身が置いてある場所を見つけ出しました。

ソースコードの場所

下記のディレクトリ以下にインストールしたPackageのキャッシュが残っており、
DLLファイルにコンパイルされる前のソースコードを読むことができます。

Windows:

C:\ProgramData\Unity\cache\packages\packages.unity.com

macOS:

~/Library/Unity/cache/packages/packages.unity.com

情報元:
https://forum.unity.com/threads/vector-graphics-preview-package.529845/#post-3500904
qiita.com

今回の私の場合、探していたVector Graphics(1.0.0 - preview.15)のソースコードは、
com.unity.vectorgraphics@1.0.0-preview.15
という名前のディレクトリの中にありました。