Web Browser Game Development

Framework selection and browser-specific principles.

---

1. Framework Selection

Decision Tree

What type of game?
│
├── 2D Game
│   ├── Full game engine features? → Phaser
│   └── Raw rendering power? → PixiJS
│
├── 3D Game
│   ├── Full engine (physics, XR)? → Babylon.js
│   └── Rendering focused? → Three.js
│
└── Hybrid / Canvas
    └── Custom → Raw Canvas/WebGL

Comparison (2025)

Framework	Type	Best For
Phaser 4	2D	Full game features
PixiJS 8	2D	Rendering, UI
Three.js	3D	Visualizations, lightweight
Babylon.js 7	3D	Full engine, XR

---

2. WebGPU Adoption

Browser Support (2025)

Browser	Support
Chrome	✅ Since v113
Edge	✅ Since v113
Firefox	✅ Since v131
Safari	✅ Since 18.0
Total	~73% global

Decision

• New projects: Use WebGPU with WebGL fallback
• Legacy support: Start with WebGL
• Feature detection: Check navigator.gpu

---

3. Performance Principles

Browser Constraints

Constraint	Strategy
No local file access	Asset bundling, CDN
Tab throttling	Pause when hidden
Mobile data limits	Compress assets
Audio autoplay	Require user interaction

Optimization Priority

1. Asset compression - KTX2, Draco, WebP
2. Lazy loading - Load on demand
3. Object pooling - Avoid GC
4. Draw call batching - Reduce state changes
5. Web Workers - Offload heavy computation

---

4. Asset Strategy

Compression Formats

Type	Format
Textures	KTX2 + Basis Universal
Audio	WebM/Opus (fallback: MP3)
3D Models	glTF + Draco/Meshopt

Loading Strategy

Phase	Load
Startup	Core assets, Remember: Browser is the most accessible platform. Respect its constraints.