Unity WebGL 負荷対策と最適化

WebGLメモリ対策概要

• メモリが不足すると起動しない
• 利用できるメモリは300MB程度が現実的な限度
• メモリが不足した場合画像が乱れたり、動作が重くなる、止まるといった現象が起こる
• 画像、音声等のリソースはアプリと違い全てオンメモリで展開されるため、リソースを減らす・減色・圧縮しても大きく劣化しないデザインとする
• WebGL.data：こちらに全てのリソースが含まれているので、まずはdataの容量を削減すること
• WebGL.wasm：ソースコードやライブラリ

参考リンク:

• https://blog.unity.com/technology/understanding-memory-in-unity-webgl
• https://docs.unity3d.com/ja/2021.2/Manual/class-TextureImporterOverride.html

その他:

• Unity 2021版を使う（未実施）
• ETCの対応：https://framesynthesis.jp/tech/unity/buildsize/
• UnityのCanvasサイズ及び、htmlのCanvasサイズを小さくする
  config.devicePixelRatio = window.devicePixelRatio / 1.5;

WebGLメモリ対策サウンド編

• 1chしか無いサウンドは Force To Mono にチェック
• Load Type: Compressed In Memory
• Compression Format: Vorbis
• Quality: 1
• Sample Rate Setting: Optimize Sample Rate

参考: https://www.deathponta.com/entry/190304_unity_sound_compress

WebGLメモリ対策画像編

• テクスチャは2の累乗(POT)サイズで作成する
• 減色は必ずしておく
• 画像はアトラス化してまとめる
• 9スライスの利用（ダイアログの背景等は9スライスを積極的に使う）
• Build Report Inspectorを活用して未使用のリソースが無いか、巨大なリソースが無いか確認する
• 各画像に対して Max Size の設定を行う（デフォルトでは2048）
• Mipmapは不要であれば作成しない

WebGLメモリ対策その他

• WebGLでは任意のタイミングで GC.Collect() は使えない
• シーン遷移時に Resources.UnloadUnusedAssets() を使用
• UnityWebRequest 使用後は必ず Dispose() を行う

using (UnityWebRequest uwr = UnityWebRequest.Get(url)) {
    yield return uwr.SendWebRequest();
    if (uwr.isNetworkError) {
        Debug.Log(uwr.error);
    } else {
        var data = uwr.downloadHandler.data;
        var texture = ReadTexture(data);
        rawImage.texture = texture;
        rawImage.enabled = true;
        endAction?.Invoke();
    }
    uwr.Dispose();
    yield return Resources.UnloadUnusedAssets();
}

• Build Settings: Code Optimization を Speed ではなく Size に
• Managed Stripping Level を High に（Photon等は対象外）

ローディングが90%で止まる件の対策

対策 1/2

• 数十秒ほど90%で止まることがある
• HTML側で IndexedDB の削除機能を実装する

indexedDB.deleteDatabase("UnityCache");

• Publishing Settings:
  • Compression Format: gzip
  • Decompression fallback にチェック

参考: https://note.com/ume_white/n/n5394255363f4

対策 2/2

• iOS 15.4 の問題：Unity 2020.3.30f 以降を使用する
• GenericMetadata.cpp に以下を追記

#pragma clang optimize off
...
#pragma clang optimize on

• キャッシュの削除: <Project Root>/Library/Il2cppBuildCache/WebGL

参考:

• https://note.com/crispy2d/n/naf0422d83d83
• https://forum.unity.com/threads/ios-15-webgl-2-issue.1176116/

その他

• Photon Realtime および Photon RPC は WebGL でも動作する
• サウンドはユーザーのアクションが無いと再生できない（ブラウザ仕様）
• バックグラウンド再生はアプリ側で停止制御を行う
• S3などのストレージを使う場合：
  • Content-Type: application/wasm
  • CloudFrontなどのCDN設定を推奨