PlayCanvas WebGL Game Engine

PlayCanvas is an open-source game engine. It uses HTML5 and WebGL to run games and other interactive 3D content in any mobile or desktop browser.

English

Project Showcase

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

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

Features

PlayCanvas is a fully featured game engine.

Graphics - Advanced 2D + 3D graphics engine built on WebGL 1 & 2.
Animation - Powerful state-based animations for characters and arbitrary scene properties
Physics - Full integration with 3D rigid-body physics engine ammo.js
Input - Mouse, keyboard, touch, gamepad and VR controller 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

Usage

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PlayCanvas Hello Cube</title>
    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' />
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
    <script src='https://code.playcanvas.com/playcanvas-stable.min.js'></script>
</head>
<body>
    <canvas id='application'></canvas>
    <script>
        // create a PlayCanvas application
        const canvas = document.getElementById('application');
        const app = new pc.Application(canvas);

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

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

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

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

        // create directional light entity
        const light = new pc.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();
    </script>
</body>
</html>

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

How to build

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

npm install

Now you can run various build options:

Command	Description	Outputs
`npm run build`	Build release, min, debug and profiler engines	`build\playcanvas[.min/.dbg/.prf].[mjs/js]`
`npm run build:es5`	Build release, min, debug and profiler engines for es5 only	`build\playcanvas[.min/.dbg/.prf].js`
`npm run build:release`	Build release engine for es5 and es6	`build\playcanvas.[mjs/js]`
`npm run build:types`	Build engine Typescript bindings	`build\playcanvas.d.ts`
`npm run docs`	Build engine API reference docs	`docs`

Pre-built versions of the engine are also available.

Latest development release (head revision of dev branch):

Latest stable release:

Specific engine versions:

Generate Source Maps

To build the source map to allow for easier engine debugging, you can add -- -m to any engine build command. For example:

npm run build -- -m

This will output to build/playcanvas.js.map

PlayCanvas Editor

The PlayCanvas Engine is an open source engine which you can use to create HTML5 apps/games. In addition to the engine, we also make the PlayCanvas Editor:

For Editor related bugs and issues, please refer to the Editor's repo.

Project Name	Stars	Repos Using This	Packages Using This	Most Recent Commit	Total Releases	Latest Release	Open Issues	License	Language
Babylon.js	19,675	269	114	16 hours ago	420	September 22, 2022	99	apache-2.0	TypeScript
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.
Filament	15,493	2	4	a day ago	93	September 20, 2022	102	apache-2.0	C++
Filament is a real-time physically based rendering engine for Android, iOS, Windows, Linux, macOS, and WebGL2
Cesium	10,126	227	224	16 hours ago	102	September 01, 2022	1,320	apache-2.0	JavaScript
An open-source JavaScript library for world-class 3D globes and maps :earth_americas:
Engine	8,217	2	8	16 hours ago	129	August 30, 2022	511	mit	JavaScript
Fast and lightweight JavaScript game engine built on WebGL and glTF
Claygl	2,575	55	9	12 days ago	14	January 23, 2019	41	bsd-2-clause	JavaScript
A WebGL graphic library for building scalable Web3D applications
Vue 3d Model	2,233	7	3	2 months ago	31	August 15, 2022	110	mit	Vue
📷 vue.js 3D model viewer component
Three Gltf Viewer	1,630			21 days ago			5	mit	JavaScript
Drag-and-drop preview for glTF 2.0 models in WebGL using three.js.
Xeogl	935		1	3 years ago	2	September 12, 2018	57	other	JavaScript
A WebGL-based 3D engine for technical visualization. Not actively maintained.
Gltfast	840			18 days ago			103	apache-2.0	C#
Efficient glTF 3D import / export package for Unity
Three Vrm	767	1	2	17 days ago	51	July 08, 2022	29	mit	TypeScript
Use VRM on Three.js