🌐 Web Game Engines & Libraries
The technology that enables 2D and 3D graphics for the web is WebGL (opens in a new tab) (WebGL2 (opens in a new tab) for engines that support it). WebGPU (opens in a new tab) is an upcoming more performant technology but is currently behind feature flags (opens in a new tab) (it may come in Chrome desktop (opens in a new tab) around May 2023!). Writing raw WebGL code would be very tedious, so there are libraries that abstract the complexity and do the heavy-lifting to provide more user-friendly APIs.
Engines and libraries
Three.js89k1M/w – 3D library, WebGPU-ready3D library, WebGPU-ready
PixiJS39k93k/w – 2D library (there is also Pixi3D (opens in a new tab))2D library (there is also Pixi3D (opens in a new tab))
Phaser34k14k/w – 2D engine2D engine
Babylon.js19k22k/w – 3D engine, WebGPU-ready3D engine, WebGPU-ready
PlayCanvas8k – 3D engine, freemium editor, WebGPU-ready3D engine, freemium editor, WebGPU-ready
OGL3k12k/w – Minimal 3D libraryMinimal 3D library
Kaboom2k9k/w – Simple 2D engineSimple 2D engine
Two.js8k3k/w – 2D library2D library
Compare on NPMTrends and Star History (requires a GH token)
About these numbers and colors
There is also Rogue Engine (opens in a new tab), an editor in alpha for Three.js games, Ethereal Engine (opens in a new tab), a full-stack solution for metaverse experiences, and many more engines and libraries (opens in a new tab).
UI libraries wrappers
You can use any of the previous libraries and engines on their own, but some of them can also be combined with UI libraries wrappers for React, Svelte, Vue, or Angular. This might seem surprising at first, but using these makes your code more declarative and conveniently abstracts some boilerplate. The main wrapper libraries are:
- React Three Fiber21k127k/w
- Svelte Cubed1k800/w2y years
- Trois3k1k/w1y year
- Angular Three300140/w
For instance, React Three Fiber (R3F), lets you add objects to a scene and control them as React components:
Babylon.js is working on a similar preview feature with Babylon Native (opens in a new tab) and Babylon React Native (opens in a new tab).