PlayCanvas Engine is an open-source, MIT-licensed JavaScript and TypeScript runtime for building interactive 3D apps, games and visualizations that run in any browser on any device, built on WebGL2 and WebGPU.

What it is

PlayCanvas Engine is a fully featured, open-source game engine distributed as the npm package playcanvas and developed in JavaScript and TypeScript. It is designed for the browser as its target platform, with WebGL2 and WebGPU handling advanced 2D and 3D graphics, WebXR providing immersive AR and VR, the Web Audio API providing 3D positional sound, and a glTF 2.0 asset pipeline using Draco and Basis compression. Game behaviours are written in TypeScript or JavaScript, and the project carries an MIT licence alongside roughly 16,890 stars and 2,000 forks on GitHub. The repository ships the runtime together with a user manual, an API reference and a public examples gallery, and the broader project also offers create-playcanvas for scaffolding and a hosted platform at playcanvas.com.

The concrete problem it solves is the assembly work of putting real-time 3D into a web page. Without an engine, a team typically writes its own renderer and then stitches together separate libraries for rigid-body physics, character and property animation, input across mouse, keyboard, touch and gamepad, positional audio, and compressed asset streaming. PlayCanvas Engine consolidates those concerns into a single runtime with one consistent API and one documented asset format, so a studio can start from an Application, an Entity and a canvas rather than from a rendering pipeline. It also removes the delivery problem: because the output runs in the browser on any device, teams do not need per-platform packaging to reach desktop, mobile and headset users, and the engine can be used standalone in a local development environment rather than only through a hosted editor.

Key capabilities

• Advanced 2D and 3D graphics rendering built on WebGL2 and WebGPU through the engine's Application and Entity component APIs.
• First-class support for loading and rendering 3D Gaussian Splats, reflected in the 3d-gaussian-splatting and 3dgs topics.
• Built-in WebXR support for immersive AR and VR experiences.
• Full integration with the ammo.js 3D rigid-body physics engine, alongside state-based animation for characters and arbitrary scene properties.
• An asynchronous asset streaming system built on glTF 2.0 with Draco and Basis compression.
• Input APIs covering mouse, keyboard, touch and gamepad, plus 3D positional sound built on the Web Audio API.
• Game behaviour scripting in either TypeScript or JavaScript, with the same code running in simple CodePen examples and full local projects.

Who uses it and how

• Teams building interactive 3D applications and visualizations that must open directly in a browser on any device, without a plugin or an installed client.
• Game developers working in the browser and Node.js toolchains, where the engine is a normal npm dependency inside an existing JavaScript or TypeScript build.
• AR and VR developers who target headsets and phones through WebXR rather than a native SDK.
• Developers who want a working project quickly, scaffolding one with create-playcanvas or experimenting with a single example such as a spinning cube before committing to a larger structure.
• Contributors and community members, including participants in Hacktoberfest, who work through Discord, the forum, Reddit and the public issue tracker.

Getting started

Install the runtime with npm install playcanvas, or scaffold a complete project in seconds with npm create playcanvas@latest. A fuller guide to a local development environment based on the engine standalone is published in the user manual.

How it compares

The facts provided here do not name any paid or competing engine, so no licence, hosting or cost comparison can be drawn. Among the tools that do appear, ammo.js, glTF 2.0, Draco, Basis and the Web Audio API are integrations the engine builds on rather than alternatives to it, which means PlayCanvas Engine stands alone in this registry.

When to use it — and when not to

The engine is a client-side runtime, so self-hosting means serving your own assets and static files rather than operating a database, object store or mail server, which keeps the operational burden low. Teams that need native desktop or console binaries, or that expect a full visual editor to ship inside this repository, should look elsewhere, because this project is the browser runtime and the editor is a separate hosted product. The one caution visible in the facts is the size of the open issue list, at 471 open issues, which signals a busy tracker and means checking whether a known problem affects your target browsers before committing.

npm install playcanvas

npm create playcanvas@latest

import {
  Application,
  Color,
  Entity,
  FILLMODE_FILL_WINDOW,
  RESOLUTION_AUTO
} from 'playcanvas';

const canvas = document.createElement('canvas');
document.body.appendChild(canvas);

const app = new Application(canvas);

// fill the available space at full resolution
app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
app.setCanvasResolution(RESOLUTION_AUTO);

// ensure canvas is resized when window changes size
window.addEventListener('resize', () => app.resizeCanvas());

// create box entity
const box = new Entity('cube');
box.addComponent('render', {
  type: 'box'
});
app.root.addChild(box);

// create camera entity
const camera = new Entity('camera');
camera.addComponent('camera', {
  clearColor: new Color(0.1, 0.2, 0.3)
});
app.root.addChild(camera);
camera.setPosition(0, 0, 3);

// create directional light entity
const light = new Entity('light');
light.addComponent('light');
app.root.addChild(light);
light.setEulerAngles(45, 0, 0);

// rotate the box according to the delta time since the last frame
app.on('update', dt => box.rotate(10 * dt, 20 * dt, 30 * dt));

app.start();

npm install