๐ŸŒ Web Game Engines & Libraries

WebGL WebGL, WebGL2, and WebGPU WebGPU enable developers to create real-time 2D and 3D graphics in the browser. Writing raw WebGL or WebGPU code is tedious, so there are engines that abstract the complexity and do the heavy-lifting to provide more user-friendly APIs. This page presents the main JavaScript engines available.

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. Some of them are installable as typical NPM dependencies, others come in the form of editors that can be downloaded or used in the browser. The main engines and libraries available as packages for JavaScript game development are:

Compare on NPMTrends and Star History (requires a GH token)

About these numbers and colors

And many more engines and libraries.

UI library 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:

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 on CodeSandboxOpen Sandbox

Downloadable/cloud editors

The following engines are available as downloadable or cloud-based editors and support JavaScript or TypeScript. Make sure to check their licensing and pricing models.

Going native with JavaScript

You also have a few options to write JavaScript code that compiles to native. Expo is a framework for React Native, and they created Expo GL and expo-three to provide a Three.js interface for native OpenGL ES. And it can be used declaratively with React Three Fiber! Babylon.js is working on a similar preview feature with Babylon Native and Babylon React Native. There is also Cocos Creator, a native editor that can compile TypeScript to native.

โœจ Games & Demosโšซ๏ธ Poimandres