<!-- Generated by SpecStory -->

# 优化内存和shader性能 (2025-06-06 01:54:32)

_**User**_

@增加内存占用信息和优化shader 在移动端上加载 64M 的 1.6 亿像素的图片还是直接崩溃，想办法优化下内存。瓦片的大小控制得再小一点。在 macos 的 preview app 中，打开一个大图都是看上去瓦片很细的

同时，现在的问题还有在移动端上LOD 的画质选择不能太模糊。同时，瓦片的更新计算可视范围内的要正确。现在放大之后只有一部分是清晰的。

---

_**Assistant**_



---

我来帮你优化移动端的内存使用和瓦片渲染。针对1.6亿像素的大图在移动端崩溃的问题，我们需要实施更激进的内存管理策略。

---



---

现在优化瓦片渲染策略，增加更激进的内存清理和紧急清理机制：

---



---

现在优化移动端的LOD策略，提高移动端的画质，同时修复可视范围计算：

---



---

添加紧急内存清理机制，在内存压力过高时自动清理：

---



---

修复lint错误：

---



---

现在优化瓦片加载策略，限制同时加载的瓦片数量，特别是在移动设备上：

---



---

现在修复可视范围计算，确保缓冲区计算正确：

---



---

现在优化瓦片纹理创建，对于超大图片跳过背景纹理以节省内存：

---



---

现在更新内存追踪的知识库：

---



---

现在让我们查看LOD常量配置，确保有合适的LOD级别：

---

Read file: packages/webgl-viewer/src/constants.ts

---

LOD配置看起来是合适的。现在总结一下我们为移动端1.6亿像素图片所做的优化：

## 移动端内存优化总结

我已经实施了针对iOS Safari严格内存限制的极度保守策略：

### 🎯 **核心优化**

1. **内存预算调整**：
   - iOS Safari: **64MB** (最严格)
   - Android: **96MB** 
   - 桌面: **512MB**

2. **瓦片尺寸优化**：
   - iOS: **128×128** 极小瓦片
   - Android: **192×192** 瓦片  
   - 桌面: **512×512** 瓦片

3. **并发控制**：
   - iOS: 同时只加载 **1个** 瓦片
   - Android: 最多 **2个** 瓦片
   - 桌面: 最多 **4个** 瓦片

### 🚨 **紧急内存管理**

1. **早期触发**：内存使用达到40%就开始清理（iOS）
2. **紧急清理**：70%时立即清空所有非活跃瓦片，只保留视口中心3×3区域
3. **激进策略**：超过10M像素就启用瓦片渲染（移动端）

### 🎨 **画质平衡**

1. **移动端LOD策略**：
   - 原始尺寸时保持高质量（LOD 4: 2x quality）
   - 最高限制2x质量，避免内存爆炸
   - 避免过于模糊的低质量纹理

2. **超大图片优化**：
   - 超过100M像素跳过背景纹理
   - iOS背景纹理限制8MB，Android 16MB

### 🔧 **可视范围修正**

1. **精确计算**：修正瓦片边界索引计算，避免遗漏边界瓦片
2. **缓冲区优化**：iOS 10%，Android 25%，桌面 50%
3. **垃圾回收**：移动端在内存压力时强制触发GC

这些优化应该能够在iOS Safari上成功加载64M的1.6亿像素图片，同时保持合理的画质和用户体验。参考了macOS Preview的细瓦片策略，确保在放大时整个可视区域都能正确显示高质量内容。

---

_**User**_

128×128 感觉还是大。可以做到 12x12 

---

_**Assistant**_



---

你说得对！12×12的超小瓦片可以进一步减少内存占用。让我修改为更激进的瓦片策略：

---



---

现在调整瓦片缓冲区计算，因为瓦片更小了，需要加载更多周围的瓦片：

---



---

现在优化紧急清理机制，针对极小瓦片调整保留策略：

---



---

调整瓦片纹理最大尺寸限制，确保极小瓦片能正常工作：

---



---

现在让我们添加一个专门针对超小瓦片的内存检查函数：

---



---

修复变量重复声明的错误：

---



---

现在修复第二个重复声明：

---



---

我需要检查这些函数的结构，看看是否有重复的变量声明。让我查看这个函数的完整结构：

---

Read file: packages/webgl-viewer/src/WebGLImageViewerEngine.ts

---

看到问题了，在同一个函数内有重复的 `isIOSDevice` 声明。我需要重新使用第一次声明的变量：

---



---

