PlayCanvas Engine

<img src="https://img.shields.io/npm/v/playcanvas" alt="NPM Version" class="ra0-md-img" loading="lazy" />
<img src="https://img.shields.io/npm/dw/playcanvas" alt="NPM Downloads" class="ra0-md-img" loading="lazy" />
<img src="https://img.shields.io/npm/l/playcanvas" alt="License" class="ra0-md-img" loading="lazy" />
<img src="https://img.shields.io/badge/Discord-5865F2?style=flat&logo=discord&logoColor=white&color=black" alt="Discord" class="ra0-md-img" loading="lazy" />
<img src="https://img.shields.io/badge/Reddit-FF4500?style=flat&logo=reddit&logoColor=white&color=black" alt="Reddit" class="ra0-md-img" loading="lazy" />
<img src="https://img.shields.io/badge/X-000000?style=flat&logo=x&logoColor=white&color=black" alt="X" class="ra0-md-img" loading="lazy" />

PlayCanvas is an open-source game engine built on WebGL2 and WebGPU. Use it to create interactive 3D apps, games and visualizations that run in any browser on any device.

English
中文
日本語
한글

Install

npm install playcanvas

Or scaffold a full project in seconds with <code class="ra0-md-code">create-playcanvas</code>:

npm create playcanvas@latest

Usage

Here's a super-simple Hello World example - a spinning cube!

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();

Want to play with the code yourself? Edit it on CodePen.

A full guide to setting up a local development environment based on the PlayCanvas Engine can be found here.

Features

PlayCanvas is a fully-featured game engine.

• 🧊 Graphics - Advanced 2D + 3D graphics engine built on WebGL2 & WebGPU
• 💠 Gaussian Splatting - First-class support for loading and rendering 3D Gaussian Splats
• 🥽 XR - Built-in support for immersive AR and VR experiences via WebXR
• ⚛️ Physics - Full integration with 3D rigid-body physics engine ammo.js
• 🏃 Animation - Powerful state-based animations for characters and arbitrary scene properties
• 🎮 Input - Mouse, keyboard, touch and gamepad APIs
• 🔊 Sound - 3D positional sounds built on the Web Audio API
• 📦 Assets - Asynchronous streaming system built on glTF 2.0, Draco and Basis compression
• 📜 Scripts - Write game behaviors in TypeScript or JavaScript

Ecosystem

Build with PlayCanvas your way:

Project Showcase

Many games and apps have been published using the PlayCanvas engine. Here is a small selection:

<img src="https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/14705/319531/O4J4VU-image-25.jpg" alt="Seemore" class="ra0-md-img" loading="lazy" /> <img src="https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/14928/440410/98554E-image-25.jpg" alt="After The Flood" class="ra0-md-img" loading="lazy" /> <img src="https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/14928/349824/U88HJQ-image-25.jpg" alt="Casino" class="ra0-md-img" loading="lazy" />
<img src="https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/4763/TKYXB8-image-25.jpg" alt="Swooop" class="ra0-md-img" loading="lazy" /> <img src="https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/415995/10A5A9-image-25.jpg" alt="dev Archer" class="ra0-md-img" loading="lazy" /> <img src="https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/1224723/266D9C-image-25.jpg" alt="Gaussian Splat Statues" class="ra0-md-img" loading="lazy" />
<img src="https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/347824/7ULQ3Y-image-25.jpg" alt="Car" class="ra0-md-img" loading="lazy" /> <img src="https://s3-eu-west-1.amazonaws.com/images.playcanvas.com/projects/12/333626/BGQN9H-image-25.jpg" alt="Star-Lord" class="ra0-md-img" loading="lazy" /> [](https://playcanv.as/p/ZV4PW6wr/ )

You can see more games on the PlayCanvas website.

Users

PlayCanvas is used by leading companies in video games, advertising and visualization such as:
Animech, Arm, BMW, Disney, Facebook, Famobi, Funday Factory, IGT, King, Miniclip, Leapfrog, Mojiworks, Mozilla, Nickelodeon, Nordeus, NOWWA, PikPok, PlaySide Studios, Polaris, Product Madness, Samsung, Snap, Spry Fox, Zeptolab, Zynga

How to build

Ensure you have Node.js 18+ installed. Then, install all of the required Node.js dependencies:

npm install

Now you can run various build options: