用途:为 Web 浏览器游戏开发提供框架选型与浏览器专属原则,覆盖 2D/3D 引擎选择、WebGPU 采用、性能优化、资源策略、PWA 与音频处理。
主要能力:
- 框架选型决策树:2D 全功能引擎选 Phaser,纯渲染选 PixiJS;3D 全引擎(物理、XR)选 Babylon.js,渲染为主选 Three.js;混合或 Canvas 场景可自研 Raw Canvas/WebGL。
- WebGPU 采用:Chrome/Edge 自 v113、Firefox 自 v131、Safari 自 18.0 支持,全球约 73%。新项目建议 WebGPU 并保留 WebGL 回退;兼容旧环境从 WebGL 起步;用 navigator.gpu 做特性检测。
- 性能原则:应对无本地文件访问、标签页节流、移动流量限制、音频自动播放限制;优化优先级为资源压缩(KTX2、Draco、WebP)、懒加载、对象池、绘制调用批处理、Web Workers。
- 资源策略:纹理用 KTX2 + Basis Universal,音频用 WebM/Opus(回退 MP3),3D 模型用 glTF + Draco/Meshopt;启动加载核心资源小于 2MB,游戏内按需流式加载,后台预取下一关。
- PWA:离线游玩、安装到主屏、全屏模式、推送通知;需 Service Worker 缓存、Web App Manifest、HTTPS。
- 音频:AudioContext 需用户交互后创建,首次点击/触摸时创建,挂起时恢复;使用 Web Audio API、音频源池化、预加载常用音效、WebM/Opus 压缩。
使用方式:作为开发指导原则参考,按决策树选框架,按优化优先级与资源策略实施,并遵循反模式建议(避免一次性加载全部资源、忽略标签页可见性、阻塞音频加载、跳过压缩、假设网络快)。
适用场景:浏览器 2D/3D 游戏、可视化、PWA 游戏。
限制:资料未提供具体安装命令、代码示例、收费或平台细节;浏览器支持数据与占比为资料所述,可能随时间变化。