【Vket Cloud】デバッグモードで使える機能一覧

# デバッグモードについて

デバッグモードには、開発者が効率的に作業を進めるための便利な機能が多く含まれています。本記事では、各デバッグモードについて詳しく解説します。

::: note info
本記事は、VR法人HIKKYのorganization下のQiita/Zenn両方に投稿しております。

本記事に掲載されている情報はVketCloudSDK12.3.4のものです。
バージョンにより見た目や表示情報が変化する場合がございます。
:::

## BasicSettings - デバッグモードの有効化

デバッグモードはBasicSettingsオブジェクトが持つBaseSettingコンポーネントにある、「デバッグモード」の項目にチェックマークを入れた状態でビルドすることで有効になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763860/4aad3fc7-c459-6063-f6fc-3a7e11fa3c76.png)

デバッグモードを有効にしたままビルドをすることで、画面上部にステータスが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763860/24047e34-716a-a3d7-fa4f-fd6bb9fbe2d3.png)

ステータスについては(こちらの記事)で解説します。

また、F2～F8の各キーを押すことでデバッグ機能を使うことが可能になります。

## F2 インフォメーション表示
画面右半分にステータスやUIについての情報を表示するインフォメーションUIを表示します。

### Mainタブ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788807/aafe0684-df3c-d61c-0aae-f6295e331233.png)
GPUメモリ使用量やドローコールを確認することが可能です。
Video Memory DrawCallの文字をクリックすることで、各カテゴリの項目を展開し閲覧することが可能です。
| 項目 | 説明 |
|:-:|:--|
| **Video Memory** |  |
| Texture | ワールドオブジェクトによるテクスチャによるメモリ使用量です。 |
| Compressed Texture | ワールドオブジェクトの圧縮テクスチャによるメモリ使用量です。 |
| Text Texture | ワールドオブジェクトにて、テキストを表示するためのテクスチャによるメモリ使用量です。 |
| RenderTarget | レンダリングによるメモリ使用量です。 |
| VertexBuffuer | 頂点バッファによるメモリ使用量です。 |
| IndexBuffer | インデックスバッファによるメモリ使用量です。 |
| GUI Texture | GUIのテクスチャによるメモリ使用量です。 |
| GUI Compressed Texture | GUIの圧縮テクスチャによるメモリ使用量です。 |
| GUI Text Texture | GUIのテキストを表示するためのテクスチャによるメモリ使用量です。 |
| **Draw Call** ||
| Scene | ワールドオブジェクトによるドローコール数です。 |
| GUI | GUIによるドローコール数です。 |

### Spriteタブ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788807/2cea0418-15fe-1f12-6aba-b5976fa2ef92.png)
Canvasの持つGUI要素の一覧です。
| 項目 | 説明 |
|:-:|:--|
| Layer | 所属するレイヤー層の名称です。 |
| Type | GUI要素のタイプです。<BR>**Image**：画像です。<BR>**Button**：クリックすることで動作するボタンです。<BR>**Text**：テキストです。<BR>**Slider**：UIを移動させるスライダーです。<BR>**html**：HTML要素です。|
| Name | GUI要素の名称です。 |
| X | GUI要素のX座標位置です。 |
| Y | GUI要素のY座標位置です。 |
| Z | GUI要素の表示順序です。Zが大きいほど優先して表示されます。 |
| Left | GUI要素の画面左端からの距離です。 |
| Top | GUI要素の画面上端からの距離です。 |
| Width | GUI要素の横幅の長さです。 |
| Height | GUI要素の縦幅の長さです。 |
| PivotX | GUI要素の横方向のピボット位置です。 |
| PivotY | GUI要素の縦方向のピボット位置です。 |
| Anchor | GUI要素のアンカー(基準点)です。<BR>**LT**：左上　**CT**：中央上　**RT**：右上<BR>**LM**：左中央　**CM**：中心　**RM**：右中央<BR>**LB**：左下　**CB**：中央下　**RB**：右下 |

### Textureタブ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788807/61df6e4f-b312-97e6-5d8b-d7cbf7b5f419.png)
使用されているテクスチャの一覧を確認することができます。
| 項目 | 説明 |
|:-:|:--|
| Type | 画像がどこで使用されているかです。 |
| Name | 画像の`release/data`ディレクトリ以下の場所と名称です。 |
| Width | 画像の横サイズです。 |
| Height | 画像の縦サイズです。|

### Renderingタブ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763860/2b15110c-f302-05fc-ecb9-88c61545076e.png)
レンダリング設定を変更することができます。

::: note info
BloomとSSAOはRenderingSettingsでそれぞれ有効にしていない場合は表示されません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763860/511cbc05-1d22-8d5e-a9b7-f77b587dbe49.png)
↑BloomとSSAOが表示されていないRenderingタブ
:::

#### Lighting
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788807/4d688667-bbc0-a366-7224-10ff8a413cf5.png)
| 項目 | 説明 |
|:-:|:--|
| Light Intensity | ライトの強度を変更できます。 |
| Lightmap Intensity | ライトマップの強度を変更できます。 |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788807/ccce77e4-73a5-7286-ac36-4a800fc01eb0.png)
ライト強度を強くした例

#### Shadow
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788807/855980ed-39a7-e31f-255d-421a0efda4f4.png)
| 項目 | 説明 |
|:-:|:--|
| Bias | 丸影の表示高さです。<BR>大きいほど高い位置に表示されます。<BR>動的影表示状態の場合、動的影表示下限の位置を調整します。 |
| AreaSize | 動的影が鮮明に表示される範囲です。<BR>単位はmで、1mはScale(1,1,1)のUnity標準のCubeの一片の長さと同じです。 |
| FadeSize | 動的影が鮮明に描画される範囲を出た際、徐々に表示が薄くなっていく範囲です。<BR>単位はmです。 |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788807/76855ba5-0f7e-523e-25fc-4c93135ac50d.png)
徐々に薄くなる動的影

#### Bloom
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788807/a43b9704-4ddc-d30c-7cc3-3ed26e234363.png)
| 項目 | 説明 |
|:-:|:--|
| Threshold | Bloomの閾値です。 |
| Intensity | Bloomの強さです。 |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788807/709cff20-7be5-452d-a923-3ebc0f1a4270.png)
Bloomを強くした、光るVketちゃん

#### LightScattering

光散乱(ライトスキャタリング)による簡易的なライティング表現の変更が可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763860/3a4c1f21-251c-8d65-aea5-2f860ee78eaa.png)

| 項目 | 説明 |
|:-:|:--|
| Use | LightScatteringの有効/無効を切り替えます。 |
| BetaR | スキャタリングの強度です。<br>大きいほどスキャタリングがワールドに与える影響が大きくなります。 |
| BetaM | スキャタリングの指向性です。<br>大きいほどぼやけた感じになります。 |
| G | スキャタリングの重力設定です。<br>大きいほど遠くが青くかすんだような感じになります。 |
| Distance | スキャタリング距離です。<br>小さくすることで霧のような表現が可能です。 |
| LightColor | 光の色を変更します。<br>RGBがぞれぞれ赤、緑、青に対応しています。 |
| SunColor | 太陽光源の色を変更します。<br>RGBがぞれぞれ赤、緑、青に対応しています。 |

設定するとこのような見た目にすることも出来ます。
![image6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763860/9ec0515a-d75b-412d-9a71-9120fcc4dc79.png)

また、RenderingSettingsオブジェクトのRenderingSettingコンポーネント内にあるLightScatteringの各項目と互換性があるため、お気に入りのスキャタリング設定を見つけた場合、数値をメモしてこちらに反映することで、
初めからスキャタリング設定が適用されたワールドを作成することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763860/e479b4d7-3775-e4f3-3571-6aed2dbf7eb3.png)

#### SSAO

SSAO(スクリーンスペース・アンビエント・オクルージョン)の設定の変更が可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763860/dd592572-0c7a-f097-30c4-8d60fbc01bf6.png)

:::note warn
VketCloudSDK12.3.4現在、F2キーを押しインフォメーション表示を閉じた際、SSAOの設定は初期値に巻き戻ってしまいます。
:::

| 項目 | 説明 |
|:-:|:--|
| Use | SSAOの有効/無効を切り替えます。 |
| Hsp | AOの黒色に背景の色を乗せる(明るい部分が暗くなりすぎないようになる)設定です。<br>有効にしておくことを推奨します。 |
| FakeBloom | ブラーサンプルを疑似的なブルーム表現に流用したものが適用されます。<br>画面が若干ぼやけたような感じになります。 |
| SelfShadowCounter | AOが発生しないはずの平面が自分自身を誤検知して黒ずむのを防ぐ設定です。 |
| Radius | AO(アンビエント・オクルージョン)を行う範囲です。<br>大きくするとAOが適用される範囲が広がり、小さくすると範囲が狭まります。 |
| MinZ | オクルージョンとみなすしきい値の調整です。|
| Attenuation | 柱や浮いてる看板の背後など、距離があるのにAOが出てしまう部位を抑える設定です。<br>小さくするとAOの発生が大きくなります。 |
| ColBleed | ライトバウンスにより範囲の色がAOに乗る現象を疑似再現する設定です。<BR>効果は薄いです。|
| AORatio | AOの濃さを調整します。<BR>大きくすると濃くなります。 |

#### Lens
::: note warn
VketCloudSDK12.3.4で出力されたワールドでは、設定名と実際に発生するエフェクトがズレています。
将来のバージョンで修正されますが、こちらではVketCloudSDK12.3.4の時の設定に対応するエフェクトについて紹介を行います。
:::

##### Film
モノクロになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763860/6bdad1a6-3234-3b9b-3aac-d911d143c1f2.png)

##### Mono 
セピア調になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763860/3a27bd95-94d5-2d7f-03ed-e1b0c4b41324.png)

##### Sepia
フィルムカメラで撮影したような、周囲が黒ずんで彩度がはっきりとした状態になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763860/fceadf7d-c8ba-cac3-0df9-b7c65e9c220a.png)

### Scriptタブ

スクリプト関連情報が表示されるタブです。滅多に使わないかもしれませんが、以下の情報が確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763860/f48e0c4e-88ff-7929-c569-0e3b99f6f601.png)


- **Page Count**: 生存オブジェクトクラスの数 (0以上の値になっているはず)
- **Local Frame Count**: 関数フレームのスタック状態 (0でなければ異常)
- **Operand Stack Count**: 演算用スタックに積まれている要素数(0以外異常)

## F3: 当たり判定表示
![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763860/d025f19f-7ec3-3725-7993-552143e08a8c.png)

当たり判定を可視化します。各色の役割は以下の通りです。

- **白**: BoxColliderによる当たり判定
- **赤**: クリック判定
- **紫**: Fieldオブジェクト設置位置
- **橙**: プレイヤーのクリック判定
- **黄**: エリアコライダー
- **緑**: ReflectionProbeの範囲

![image5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763860/d5113ac2-3f34-3557-dd42-91b44db9538d.png)

VketCloudSDK12.3.4でビルドされたワールド現在では、MeshColliderは表示されません。

## F4: オクルージョンカリング

オクルージョンカリングの有効無効を切り替えます。ステータスのGUIの右側に「OC」の文字が表示されます。
![image4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763860/c118babe-d04e-7d6c-9564-7301d79539d9.png)

::: note info
**オクルージョンカリングって？**

オクルージョンカリングは、建物の奥に隠れている3Dモデルといった、「画面内に映り込んでいないオブジェクト」を非表示にし、動作負荷を軽減するための機能です。

Vket Cloudでは、遮蔽となるBoxColliderに対しHEOColliderコンポーネントをアタッチしコライダータイプをオクルージョンに設定した際、その当たり判定の裏に隠れたオブジェクトが表示されなくなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763860/56004126-2f70-1b6a-5b56-4d87fed74465.png)

:::

## F5: Script情報表示

ステータスにScript情報を表示します。表示される内容はF2キーのScriptタブと同一です。
![image7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763860/a8ed926c-57cd-0e4b-5807-ef539b4d00dd.png)


## F6: 当たり判定無視

当たり判定を無視して移動できるようになります。常に空中に浮いた状態となり、Rキー/Fキーで上下方向に移動することができます。VketCloudSDK12系列以降でビルドされたワールドより、前後左右に移動するとき、最初はゆっくり動き始め、徐々に一定速度まで速くなるといった、イージングがかかるようになりましたが、上下方向の移動にはイージングがかからず、常に一定速度で移動することができます。
![image3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763860/871fff18-46b5-0649-8be6-2156f161a016.png)

## F8: ステータス非表示

画面上部のステータスを非表示にします。
スクリーンショットを撮る際、デバッグモードを有効にしながら、デバッグモードを無効にした際と同じ画面構成にしたいときに便利です。

## まとめ

デバッグモードは、開発作業を効率化するための強力なツールです。各機能を理解し、適切に活用することで、開発プロセスを大幅に改善できます。ぜひ、日々の開発に役立ててください。

::: note warn
デバッグモードを有効にしたままUpload to Remote Serverを使用すると、デバッグモードが有効になったままのワールドがMyVketに投稿されてしまいます！

投稿前にデバッグモードを無効に戻すのを忘れないようにしましょう。
:::