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
Что это такое?PlayCanvas — это open-source игровой движок для создания интерактивных 3D-приложений, игр и визуализаций, которые работают в любом браузере на любом устройстве. Рендеринг построен на WebGL2 и WebGPU.
Это кодовый движок или визуальный редактор?Этот репозиторий — сам ядро движка: JavaScript-библиотека, с которой вы работаете через код. PlayCanvas Editor — визуальный редактор в браузере — это отдельный продукт той же экосистемы.
Как начать с ним проект?Разверните целый проект за секунды с помощью create-playcanvas CLI или добавьте npm-пакет playcanvas в существующий проект. Пример «Hello World» с вращающимся кубом можно отредактировать прямо на CodePen.
Нужно ли что-то устанавливать, чтобы это запустить?Для работы не нужно ничего, кроме браузера. Node.js 18+ требуется только если вы хотите собрать сам движок из исходников.
Что там есть, кроме рендерера?Физика твёрдых тел через ammo.js, анимация на основе состояний для персонажей и свойств сцены, ввод с мыши, клавиатуры, тачскрина и геймпада, а также позиционный 3D-звук на Web Audio API — плюс графика как в 3D, так и в 2D.
Его реально используют в продакшене?Да — его используют ведущие компании в играх, рекламе и визуализации, включая Disney, BMW, King, Zynga, Samsung и Snap.
Можно ли делать с ним VR- и AR-приложения?Да — в движке есть встроенная поддержка иммерсивных AR и VR через WebXR, поэтому такие проекты запускаются на XR-устройствах прямо в браузере.
Обязательно писать на JavaScript, или можно на TypeScript?И то и другое — игровую логику можно писать на TypeScript или JavaScript, а на этапе сборки даже генерируются описания типов для API движка.
Что ещё есть в экосистеме PlayCanvas?Помимо ядра движка есть React-рендерер (@playcanvas/react), декларативные Custom Elements (@playcanvas/web-components), CLI для развёртывания проектов create-playcanvas и браузерный PlayCanvas Editor.
Насколько проект зрелый?Он развивается с 2014 года и набрал около 17 000 звёзд на GitHub; в его витрине — длинный список выпущенных игр и приложений.
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