Memes, Shaders and PixiJS: How an RTS on the Web Loads in 3 Seconds and Delivers 120 FPS

on YouTube ↗58m

" summary

A four-year development case study of the browser RTS Age of Memes built with PixiJS. Covers why the team wrote a custom web game engine, texture compression and resize algorithms plus progressive-loading optimizations to get First Contentful Paint with only 6–8 MB, and how custom indices, rendering optimizations and custom shaders on PixiJS enable 120 FPS on maps with thousands of units.

AI-written summary · about

" chapters (15)

1. 0:00Introduction
2. 3:17Game overview
3. 7:33Engine choice
4. 12:52Custom engine
5. 14:17Texture optimization
6. 26:41Asset storage
7. 28:48Load priorities
8. 32:27Texture selection
9. 33:31PixiJS details
10. 35:21Layer rendering
11. 37:07Spatial index
12. 41:00GPU instancing
13. 45:18Lightweight renderer
14. 46:43Architecture & multiplayer
15. 51:06Conclusion & Q&A

" related talks

• 37mTricky JS and WebGL practices to achieve the best performance on mobileAndrei Lesnitsky · The Rolling Scopes Conference 2018
• 43mWebGL 2D Rendering with PixiJSFrancesco Strazzullo · Universal JS Day 2017
• 20mOptimizing assets for graphics heavy Web Applicatoins: tips and tricks from the game dev backgroundVarya Dubinina · Amsterdam JSNation Conference 2018
• 26mSVG, Canvas, and WebGL: The Power, the Beauty, and the CostAmber Hoak · CascadiaJS 2020
• 29mLet's make games with JavaScriptArsen Mazmanyan · JavaScript Summit Armenia 2023
• 34mAves Engine: High performance browser gamesPaul Bakaus · JSConf.eu 2010
• 39mLife of a pixel: A visual explanation of rendering performanceMartin Splitt · RuhrJS 2017
• 23mOptimizing HTML5 Games: 10 Years of LearningsWill Eastcott · JS GameDev Summit 2022