WebGL에서 텍스처 최적화 - 용량과 성능 관리하기

WebGL에서 텍스처 최적화 - 용량과 성능 관리하기

🎨 WebGL에서 텍스처 최적화가 중요한 이유

WebGL 프로젝트에서 텍스처는 **렌더링 성능과 로딩 속도**에 직접적인 영향을 미침. 최적화되지 않은 텍스처는 메모리 사용량을 증가시키고, 게임이나 애플리케이션의 속도를 저하시킬 수 있음.

---

🖼 1. 텍스처 크기 최적화

✅ 적절한 해상도 선택

- **불필요하게 큰 텍스처 사용 금지!** - **512x512, 1024x1024 등의 2의 제곱수 크기 권장** (GPU 최적화) - **UI 요소는 최대한 작은 크기로 유지**

✅ 해상도별 텍스처 가이드라인

| 텍스처 유형 | 권장 크기 |
|————-|———|
| UI 아이콘 | 256x256 이하 |
| 캐릭터 스킨 | 1024x1024 ~ 2048x2048 |
| 배경 텍스처 | 2048x2048 이상 |

---

📦 2. 텍스처 압축 포맷 활용

✅ WebGL에서 지원하는 압축 포맷

| 포맷 | 설명 | 지원 |
|——–|—————-|——–|
| PNG | 무손실 압축, 투명 지원 | ✅ 모든 브라우저 |
| JPG | 손실 압축, 파일 크기 작음 | ✅ 모든 브라우저 |
| WebP | 고압축률, 품질 유지 | ✅ 최신 브라우저 |
| Basis | 유니티 WebGL 최적화 | ✅ 권장 |

csharp
// 유니티에서 Basis 텍스처 압축 적용
TextureImporter importer = (TextureImporter)AssetImporter.GetAtPath("Assets/Textures/example.png");
importer.textureCompression = TextureImporterCompression.Compressed;
importer.SaveAndReimport();

🔄 3. MipMap 활용

✅ MipMap 활성화 시 장점**

- 원거리 오브젝트 렌더링 시 **자동으로 해상도를 낮춰 성능 최적화** - 텍스처의 **계단현상(Aliasing) 방지**

✅ MipMap 비활성화가 좋은 경우**

•	UI 요소처럼 고정된 크기의 텍스처에는 비활성화 필요
•	작은 텍스처에는 오히려 메모리 낭비가 될 수 있음

    // 유니티에서 특정 텍스처의 MipMap 비활성화
TextureImporter importer = (TextureImporter)AssetImporter.GetAtPath("Assets/Textures/example.png");
importer.mipmapEnabled = false;
importer.SaveAndReimport();

🚀 4. 텍스처 애틀라스(Texture Atlas) 활용**

여러 개의 작은 텍스처를 **하나의 큰 텍스처로 합쳐서** 관리하면 드로우콜을 줄일 수 있음. 이 방법은 특히 **UI 및 2D 게임 최적화**에 효과적임.

// 유니티에서 Texture Atlas 활용 예제
SpriteAtlas atlas = new SpriteAtlas();
atlas.Add(new Texture2D[] { texture1, texture2, texture3 });

🎯 결론**

- 텍스처 크기를 **2의 제곱수로 설정**하여 GPU 성능 최적화 - WebGL에 맞는 **압축 포맷(PNG, WebP, Basis)** 활용 - 필요할 때만 **MipMap 활성화**하여 메모리 절약 - 여러 개의 텍스처를 **Texture Atlas**로 합쳐서 최적화