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 是一个开源游戏引擎，用来制作能在任何浏览器、任何设备上运行的交互式 3D 应用、游戏和可视化作品。渲染基于 WebGL2 和 WebGPU。
这是代码引擎还是可视化编辑器？这个仓库是核心引擎本身——一个用来写代码的 JavaScript 库。PlayCanvas Editor 是基于浏览器的可视化编辑器，属于同一生态中的另一个独立产品。
我怎么用它创建一个项目？用 create-playcanvas 命令行工具几秒钟就能生成一个完整项目，或者把 playcanvas 这个 npm 包添加到现有项目里。旋转方块的 Hello World 示例可以直接在 CodePen 上修改。
运行它需要安装什么吗？运行时只需要一个浏览器。只有当你想从源码构建引擎本身时，才需要 Node.js 18+。
除了渲染，它还包含什么功能？通过 ammo.js 提供刚体物理，支持基于状态的角色和场景属性动画，支持鼠标、键盘、触屏和游戏手柄输入，还支持基于 Web Audio API 的 3D 空间音效——此外同时支持 2D 和 3D 图形。
它真的在实际生产中使用吗？是的——游戏、广告和可视化领域的领先公司都在使用它，包括 Disney、BMW、King、Zynga、Samsung 和 Snap。
我可以用它做 VR 和 AR 体验吗？可以——引擎通过 WebXR 内置了对沉浸式 AR 和 VR 的支持，体验可以直接在支持 XR 的设备上通过浏览器运行。
我必须写 JavaScript，还是可以用 TypeScript？两者都可以——游戏逻辑可以用 TypeScript 或 JavaScript 编写，构建步骤甚至还会为引擎 API 生成类型声明文件。
PlayCanvas 生态里还有什么？除了核心引擎，还有 React 渲染器（@playcanvas/react）、声明式 Custom Elements（@playcanvas/web-components）、create-playcanvas 脚手架命令行工具，以及基于浏览器的 PlayCanvas Editor。
这个项目成熟吗？它从 2014 年开始开发，在 GitHub 上有大约 17,000 颗星，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.8 MB
Stars
17.1K
Updated
CommitOct 19Releasev2.23.3Oct 15
Age
12y
Commits · 90 Days