🚀 3D性能优化·实战 30章

01 3D网页性能全景 为什么重要 · 瓶颈分析 · FPS/帧时间/内存 02 浏览器渲染管线 CPU/GPU分工 · 渲染管线 · 帧预算 03 WebGL基础与性能 上下文创建 · 状态机 · Draw Call开销 04 Three.js性能基础 场景图优化 · 对象池 · BufferGeometry 05 几何体优化 顶点控制 · LOD · 几何体合并 06 材质与纹理优化 KTX2/Basis · 纹理图集 · 材质共享 07 光照与阴影性能 动态光数量 · 阴影贴图 · 烘焙光照 08 着色器优化 Shader复杂度 · uniform频率 · 纹理采样 09 动画系统优化 骨骼动画 · 状态机 · 动画LOD 10 粒子系统优化 粒子数量 · GPU/CPU · 池回收 11 渲染优化技巧 视锥体裁剪 · 遮挡剔除 · 层级裁剪 12 实例化渲染 InstancedMesh · 实例属性 · 动态/静态 13 纹理流送 Mipmap策略 · 渐进加载 · 虚拟纹理 14 内存管理 JS/GPU内存泄漏 · 生命周期 · 分析工具 15 性能分析工具 Chrome DevTools · Spector.js · Inspector 16 帧率优化实战 rAF优化 · Fixed Timestep · 帧率限制 17 网络加载优化 glTF/Draco · 预加载/懒加载 · CDN 18 Web Worker与多线程 OffscreenCanvas · 物理计算 · 通信 19 WebGPU入门与性能 对比WebGL · Compute Shader · 资源绑定 20 移动端性能优化 GPU特性 · 像素填充 · 分辨率降级 21 VR/AR性能优化 双屏渲染 · 注视点渲染 · 帧率稳定 22 大型场景优化 场景分块 · 八叉树/BVH · 可见性 23 后处理效果优化 Bloom/SSAO/HDR · 降采样权衡 24 UI与3D交互性能 DOM+WebGL · 事件优化 · Raycaster 25 物理引擎性能 碰撞检测 · 刚体数量 · 步长插值 26 音频与3D性能 音频源控制 · 空间音频 · 池化 27 自动化性能测试 Lighthouse · 自定义基准 · CI/CD 28 性能监控与告警 实时FPS · 内存监控 · 仪表盘 29 案例实战一：3D展厅 从30FPS到60FPS · 优化全过程 30 案例实战二：移动端游戏 从卡顿到流畅 · 性能调优