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

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

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

検証用のシーン / プロジェクトについて

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

URL: https://playcanvas.com/editor/scene/1667503 （※ 編集にはPlayCanvasアカウントが必要です）
実行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

ファイル容量の比較

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

比較表
それぞれのファイルサイズを比較した内容はこちらです。

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

png / WebP・Basis圧縮（png / WebP)についての比較

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

※ Basisへの変換について

PlayCanvasではテクスチャをBasis圧縮する機能がエディタ内に用意されています。

1. Basis圧縮をしなかった場合のVRAM使用量

2. Basis圧縮をした場合のVRAM使用量

3. WebPを利用した場合のVRAM使用量

4. WebP + Basis圧縮をした場合のVRAM使用量

比較表

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（モード)

Quality(品質)

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で扱う方法と利点
• 【WebGL/WebAR】テクスチャをWebPに変換するモデル圧縮術

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

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

• 日本PlayCanvasユーザー会 - Slack