Basis圧縮を利用した場合のファイルサイズについてまとめてみました【PlayCanvas】

Web上で3Dモデルを扱う場合、ファイルの転送量やVRAMの消費量を調整する必要があります。png/WebP形式でBasis圧縮を使用した場合、それぞれの比較してみました。

また、PlayCanvasを利用したBasis圧縮のドキュメントについてはこちらをご参照下さい。
https://developer.playcanvas.com/ja/user-manual/assets/textures/texture-compression/


### 検証用のシーン / プロジェクトについて
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/e5712406-6102-110b-b55d-ec574b614a08.png)

検証に利用したシーンはこちらとなっております。

URL: <https://playcanvas.com/editor/scene/1667503> （※ 編集には[PlayCanvasアカウント](https://playcanvas.jp/)が必要です）
実行URL: <https://playcanv.as/e/p/wfWzTBMz/>

上記のURLには、このようなシーンが表示されます。

モデルやテクスチャについては、かなﾘぁさんちの「ハオラン」を利用させていただいています。
<https://booth.pm/ja/items/3818504>


#### 準備: PlayCanvasでWebPを利用する（非推奨の方法です）

現在、PlayCanvasエディタではWebPの拡張子を直接アップロードすることはできません。しかし、PlayCanvasが認識できる形式(`jpg`, `png`)に拡張子を変更してからアップロードすることで利用できます。

また、WebPの対応については、PlayCanvasのコミュニティマネージャであるStevenさんが4日前に建てたissueを参照してください。

- [Added .webp upload support](https://github.com/playcanvas/editor/issues/991)


#### ファイル容量の比較

同じテクスチャをそれぞれアップロードした場合のファイル容量の比較（png / **WebP　※回避策を取ってアップロードしたため紛らわしいですが、画像ではjpgとなっているのがWebPのファイルサイズです。**）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/0d5966b3-b9d2-6458-d2c2-556b1c9ed4fe.png)

**比較表**
それぞれのファイルサイズを比較した内容はこちらです。
|png vs WebP|png|WebP|ファイルサイズ比較|
|---|---|---|---|
|1.HAORAN_BODY|135KB|14.4KB|89.3%|
|2.HAORAN_Costume|206KB|35.8KB|82.6%|
|3.HAORAN_FACE|164KB|20.6KB|87.4%|
|4.HAORAN_Hair|231KB|37.2KB|83.8%|
|5.HAORAN_Sneakers|252KB|35.1KB|86.0%|
|合計| 988KB | 143KB| 85.5%|

ファイルサイズは`WebP`が小さくなることが分かります。`png`から`WebP`への変換にはいくつか方法がありますが、今回の比較では、このウェブサイトを利用して変換しました。

- [Webp Wasm](https://webp.leopard.in.ua/#/)


#### png / WebP・Basis圧縮（png / WebP)についての比較
PlayCanvasのプロファイラを使用して、`png`をマテリアルのテクスチャとして使用した場合と、`WebP`を使用した場合のファイルサイズを比較しました。それぞれのシーンにおけるVRAM使用量を比較し、圧縮テクスチャ（Basis）に変換した場合と変換しなかった場合のVRAM使用量を比較しました。

##### ※ Basisへの変換について
PlayCanvasではテクスチャをBasis圧縮する機能がエディタ内に用意されています。 
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/b17ee999-59b5-721a-604f-071d534cf7aa.png)


#### 1. Basis圧縮をしなかった場合のVRAM使用量
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/e23bf200-56cd-4e03-5367-b7c84792d4dd.png)


#### 2. Basis圧縮をした場合のVRAM使用量
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/3288720f-2531-ca73-3b14-3331e71cd91b.png)

#### 3. WebPを利用した場合のVRAM使用量
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/dd8159f4-e418-a677-f4e6-1f71ffaf0158.png)

#### 4. WebP + Basis圧縮をした場合のVRAM使用量
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/b78715dc-e006-be5b-d0dd-12708f98eff9.png)


**比較表**

|VRAM使用量|Texture Asset|Texture Total|トータル|ファイルサイズ|
|---|---|---|---|---|
|png|6.99Mb|11.4Mb| 12.3Mb|988KB|
|Basis(png)|874Kb|5.24Mb|6.16Mb |191.6KB|
|WebP|7.17Mb|12.5Mb|12.5Mb|143KB|
|Basis(WebP)|1.05Mb|5.42Mb|6.34Mb|196.1KB|

比較した結果、WebPのファイルサイズが最小となりました。一方、VRAMの使用量が最も低いのはBasis(png)です。

### ETC / ASTC それぞれの形式の比較

PlayCanvasでは圧縮の方法として２種類の方法にそれぞれ品質の設定が含まれています。
それぞれの圧縮形式を利用した場合のファイル容量の比較についてはこちらとなります。

- ETC
- ASTC

#### Mode（モード)
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/1ab0bdf7-3659-f7cb-44e3-661accaabe64.png)

#### Quality(品質)
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/6a4f6b43-c60b-9283-70f1-1ea791d112a2.png)

#### Basisのモードと品質毎の比較（png)

| Basis圧縮 ファイル容量    | ETC / Default | ETC/Lowest | ETC/Highest | ASTC/Default | ASTC/Lowest | ASTC/Highest |
| ----------------- | ------------- | ---------- | ----------- | ------------ | ----------- | ------------ |
| 1.HAORAN_BODY     | 30.1Kb        | 19.8Kb     | 35.0Kb      | 187.0Kb      | 168.0Kb     | 187.0Kb      |
| 2.HAORAN_Costume  | 41.0Kb        | 22.5Kb     | 55.2Kb      | 221.0Kb      | 202.0Kb     | 224.0Kb      |
| 3.HAORAN_FACE     | 32.7Kb        | 15.6Kb     | 39.9Kb      | 185.0Kb      | 170.0Kb     | 186.0Kb      |
| 4.HAORAN_Hair     | 43.8Kb        | 23.8Kb     | 59.4Kb      | 264.0Kb      | 245.0Kb     | 264.0Kb      |
| 5.HAORAN_Sneakers | 44.0Kb        | 21.2Kb     | 62.2Kb      | 252.0Kb      | 235.0Kb     | 254.0Kb      |
| 合計                | 191.6Kb       | 102.9Kb    | 251.7Kb     | 1,109.0Kb    | 1,020.0Kb   | 1,115.0Kb    |
| 非圧縮時(988Kb)との比較   | 19.39%        | 10.41%     | 25.48%      | 112.25%      | 103.24%     | 112.85%      |
| 圧縮品質毎の比較          | 100%          | 53.71%     | 131.37%     | 100%         | 91.97%      | 100.54%      |

`ETC / Lowest`にすると元のファイルサイズよりファイルサイズが小さくなります。ASTC`についてはファイルサイズが元のファイルより大きくなることもございます。

####  Basisのモードと品質毎の比較（WebP)

| Basis圧縮 ファイル容量    | ETC / Default | ETC/Lowest | ETC/Highest | ASTC/Default | ASTC/Lowest | ASTC/Highest |
| ----------------- | ------------- | ---------- | ----------- | ------------ | ----------- | ------------ |
| 1.HAORAN_BODY     | 30.7Kb        | 19.7Kb     | 35.1Kb      | 182.0Kb      | 161.0Kb     | 182.0Kb      |
| 2.HAORAN_Costume  | 42.1Kb        | 22.4Kb     | 55.9Kb      | 220.0Kb      | 203.0Kb     | 223.0Kb      |
| 3.HAORAN_FACE     | 33.4Kb        | 16.0Kb     | 40.3Kb      | 182.0Kb      | 166.0Kb     | 183.0Kb      |
| 4.HAORAN_Hair     | 45.4Kb        | 24.2Kb     | 60.9Kb      | 272.0Kb      | 254.0Kb     | 273.0Kb      |
| 5.HAORAN_Sneakers | 44.5Kb        | 21.5Kb     | 62.5Kb      | 250.0Kb      | 233.0Kb     | 252.0Kb      |
| 合計                | 196.1Kb       | 104.0Kb    | 254.7Kb     | 1,106.0Kb    | 1,017.0Kb   | 1,113.0Kb    |
| 非圧縮時(143Kb)との比較   | 137.13%       | 72.73%     | 178.11%     | 773.43%      | 711.19%     | 778.32%      |
| 圧縮品質毎の比較          | 100.00%       | 53.03%     | 129.88%     | 100.00%      | 91.95%      | 109.44%      |

`WebP`のファイルをBasis圧縮した場合には元のファイルよりファイルサイズが大きくなりました。

#### `png` vs `WebP` （テクスチャ圧縮時)のファイルサイズ比較

|                    | ETC / Default | ETC/Lowest | ETC/Highest | ASTC/Default | ASTC/Lowest | ASTC/Highest |
| ------------------ | ------------- | ---------- | ----------- | ------------ | ----------- | ------------ |
| PNG                | 191.6Kb         | 102.9Kb      | 251.7Kb       | 1109Kb         | 1020Kb        | 1115Kb         |
| WebP               | 196.1Kb         | 104Kb        | 254.7Kb       | 1106Kb         | 1017Kb        | 1113Kb         |
| 比較 | 102.35%      | 101.07%    | 101.19%     | **99.73%**       | **99.71%**      | **99.82%**       |

今回利用したテクスチャの場合、Basis圧縮をするとETCの場合にはPNGのほうがファイルサイズが1%程度小さくなり、ASTCを利用した場合にはWebPのほうが少しファイルサイズが小さくなりました。


圧縮テクスチャの利点などについてはこちらを参考とさせていただきました。
- [3Dコンテンツの最適化に。圧縮テクスチャーをWebGLで扱う方法と利点](https://ics.media/entry/17863/)
- [【WebGL/WebAR】テクスチャをWebPに変換するモデル圧縮術](https://zenn.dev/tanabee8/articles/568ea2faa04f9c)



### PlayCanvasのユーザー会のSlackを作りました！

 少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください！

- [日本PlayCanvasユーザー会 - Slack](https://join.slack.com/t/playcanvasjphq/shared_invite/zt-9aihkaep-TNA04tqgvYDFhBJABLLckw)