engine README

The project's README from github.com/playcanvas/engine. As one markdown file: README.md.

PlayCanvas Engine

NPM Version NPM Downloads License Discord Reddit X

| User Manual | API Reference | Examples | Blog | Forum |

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 create-playcanvas:

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.

Ecosystem

Build with PlayCanvas your way:

Package Description
playcanvas Core engine (you are here)
@playcanvas/react React renderer for PlayCanvas
@playcanvas/web-components Declarative 3D via Custom Elements
create-playcanvas Project scaffolding CLI
PlayCanvas Editor Browser-based visual editor

Project Showcase

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

Seemore After The Flood Casino
Swooop dev Archer Gaussian Splat Statues
Car Star-Lord Global Illumination

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:

Command Description Outputs To
npm run build Build all engine flavors and type declarations build
npm run docs Build engine API reference docs docs

engine (playcanvas/engine)

Searching Database…

17.1K ·GitHub
Engine
What is this?PlayCanvas is an open-source game engine for creating interactive 3D apps, games and visualizations that run in any browser on any device. Rendering is built on WebGL2 and WebGPU.
Is this a code engine or a visual editor?This repo is the core engine itself — a JavaScript library you code against. The PlayCanvas Editor, a browser-based visual editor, is a separate product in the same ecosystem.
How do I start a project with it?Scaffold a full project in seconds with the create-playcanvas CLI, or add the playcanvas npm package to an existing project. A spinning-cube Hello World can be edited directly on CodePen.
Do I need anything installed to run it?Nothing but a browser at runtime. Node.js 18+ is only required if you want to build the engine itself from source.
What does it include besides the renderer?Rigid-body physics via ammo.js, state-based animation for characters and scene properties, mouse/keyboard/touch/gamepad input, and 3D positional sound on the Web Audio API — plus 2D as well as 3D graphics.
Is it actually used in production?Yes — it is used by leading companies in games, advertising and visualization, including Disney, BMW, King, Zynga, Samsung and Snap.
Can I build VR and AR experiences with it?Yes — the engine has built-in support for immersive AR and VR via WebXR, so experiences run on XR-capable devices through the browser.
Do I have to write JavaScript, or can I use TypeScript?Both — game behaviors can be written in TypeScript or JavaScript, and the build step even generates type declarations for the engine API.
What else is in the PlayCanvas ecosystem?Besides the core engine there is a React renderer (@playcanvas/react), declarative Custom Elements (@playcanvas/web-components), the create-playcanvas scaffolding CLI, and the browser-based PlayCanvas Editor.
How mature is the project?It has been in development since 2014 and has around 17,000 GitHub stars, with a long list of published games and apps in its showcase.
What are similar projects?aframe, flutter_scene, three.js, Babylon.js, phaser, Hermes3D, flame, benilla
Which topics is it in?3d-gaussian-splatting, augmented-reality, webgl2, virtual-reality, gaussian-splatting, gltf, physics, webgpu, game-engine, gamedev, webgl, rendering
Creator
playcanvas
Size
642.7 MB
Stars
17.1K
Updated
CommitOct 16Releasev2.23.3Oct 15
Age
12y
Commits · 90 Days