🌐 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

Much like any ecosystem of developer tools, there are 2 approaches: the monolithic batteries-included framework approach (those would be the engines), or the modular assemble-independent-libraries-together approach. The main engines and libraries for JavaScript game development are:

Three.js 95k 1M/w – 3D library, WebGPU-ready
3D library, WebGPU-ready
PixiJS 41k 105k/w – 2D library (there is also Pixi3D (opens in a new tab))
2D library (there is also Pixi3D (opens in a new tab))
Phaser 35k 16k/w – 2D engine
2D engine
Babylon.js 22k 30k/w – 3D engine, WebGPU-ready
3D engine, WebGPU-ready
PlayCanvas 9k – 3D engine, freemium editor, WebGPU-ready
3D engine, freemium editor, WebGPU-ready
OGL 3k 12k/w – Minimal 3D library
Minimal 3D library
Kaboom 2k 5k/w – Simple 2D engine
Simple 2D engine
Two.js 8k 4k/w – 2D library
2D library

Excalibur 1k 1k/w – 2D engine
2D engine
melonJS 6k 200/w – 2D engine
2D engine
Kontra 800 400/w – 2D micro-library
2D micro-library
Impact 2k 9y years – 2D engine
2D engine

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:

Three.js

Babylon.js

PixiJS

Phaser

Phavuer 100 30/w

svelte-phaser 80 15/w 2y years – Archived
Archived
react-phaser-fiber 50 20/w 3y years – Archived
Archived
React-phaser 100 10/w 7y years
IonPhaser 240 400/w 3y years – Web Component to inject Phaser into any framework
Web Component to inject Phaser into any framework

OGL

react-ogl 140 30/w 1y year
svelte-ogl 3 10/w 1y year

For instance, React Three Fiber (R3F), lets you add objects to a scene and control them as React components:

import { useRef, useState } from 'react'

import { Canvas, useFrame } from '@react-three/fiber'

const Box = (props) => {
  const ref = useRef(null)
  const [hovered, setHovered] = useState(false)
  const [clicked, setClicked] = useState(false)

  useFrame((_, dt) => {
    ref.current.rotation.x += dt
  })

  return (
    <mesh
      {...props}
      ref={ref}
      scale={clicked ? 1.5 : 1}
      onClick={() => setClicked(!clicked)}
      onPointerOver={() => setHovered(true)}
      onPointerOut={() => setHovered(false)}
    >
      <boxGeometry />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
    </mesh>
  )
}

const App = () => (
  <Canvas>
    <ambientLight />
    <pointLight position={[10, 10, 10]} />
    <Box position={[-1.2, 0, 0]} />
    <Box position={[1.2, 0, 0]} />
  </Canvas>
)

export default App

Open Sandbox

Going native with JavaScript

Now hold on to your hats, because this is where things get wild. You can also use JavaScript (well, mostly React) to create native OpenGL ES games. Expo (opens in a new tab) is a framework for React Native (opens in a new tab) (it is basically the Next.js of React Native), and they created Expo GL (opens in a new tab) and expo-three (opens in a new tab) to provide a Three.js interface for native OpenGL ES. And it can be used declaratively with React Three Fiber (opens in a new tab). I have not tried it yet but that completely blows my mind 🤯.

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).

✨ Games & Demos ⚫️ Poimandres