# PlayCanvas — Open-Source Web-First Game Engine

> A high-performance JavaScript game engine with WebGL and WebGPU rendering, glTF support, and a collaborative cloud editor for building interactive 3D web experiences.

## Install

Save in your project root:

# PlayCanvas — Open-Source Web-First Game Engine

## Quick Use
```bash
npm install playcanvas
# Or use via CDN in HTML:
# <script src="https://cdn.playcanvas.com/playcanvas-stable.min.js"></script>

# Minimal example
cat > app.mjs << EOF
import * as pc from "playcanvas";
const canvas = document.getElementById("application");
const app = new pc.Application(canvas);
app.start();
const box = new pc.Entity("cube");
box.addComponent("model", { type: "box" });
app.root.addChild(box);
EOF
```

## Introduction
PlayCanvas is an open-source 3D engine built for the web. It focuses on small download size, fast load times, and runtime performance, making it well-suited for interactive ads, product configurators, and browser-based games. The engine supports both WebGL2 and WebGPU rendering backends.

## What PlayCanvas Does
- Renders real-time 3D graphics using WebGL2 and WebGPU
- Loads and displays glTF 2.0 models with PBR materials and animations
- Handles physics via integration with Ammo.js (Bullet port)
- Provides an entity-component system for organizing game objects
- Supports spatial audio, VR/AR via WebXR, and Gaussian splatting

## Architecture Overview
PlayCanvas follows an entity-component architecture. The engine manages a scene graph, a component system for rendering, physics, audio, and scripting, and a resource loader that handles assets asynchronously. The renderer supports clustered lighting, shadow cascades, and GPU particle systems while keeping the engine bundle under 350 KB gzipped.

## Self-Hosting & Configuration
- Install the engine via npm or include the CDN script tag
- Use the open-source engine standalone or pair it with the cloud editor at playcanvas.com
- Configure rendering quality, physics, and input in application settings
- Deploy builds as static files to any web server or CDN
- Self-host the editor using the open-source Editor repository on GitHub

## Key Features
- Small engine footprint (under 350 KB gzipped) for fast page loads
- WebGPU support alongside WebGL2 for next-gen browser rendering
- Gaussian splatting for photorealistic 3D scene capture
- Collaborative cloud editor with real-time multi-user editing
- Extensive glTF 2.0 support including extensions like KHR_draco_mesh_compression

## Comparison with Similar Tools
- **Three.js** — Lower-level rendering library; PlayCanvas adds a full ECS, physics, and editor
- **Babylon.js** — Similar scope but heavier runtime; PlayCanvas prioritizes small bundle size
- **A-Frame** — Declarative HTML approach; PlayCanvas offers a traditional engine API and editor
- **Unity WebGL** — Large runtime download; PlayCanvas loads significantly faster in browsers
- **Godot HTML5** — General-purpose engine with web export; PlayCanvas is web-native from the start

## FAQ
**Q: Is the cloud editor free?**
A: PlayCanvas offers a free tier with public projects. The engine itself is fully open source under the MIT license and can be used without the cloud editor.

**Q: Can PlayCanvas target mobile browsers?**
A: Yes. The engine is optimized for mobile WebGL and supports touch input, device orientation, and responsive canvas sizing.

**Q: Does PlayCanvas support multiplayer?**
A: The engine handles client-side rendering and input. For multiplayer, you integrate your own server or use solutions like Colyseus or Socket.IO.

**Q: How does PlayCanvas compare in file size to other engines?**
A: The engine is roughly 300-350 KB gzipped, compared to 1-5 MB for typical Unity or Godot web exports.

## Sources
- https://github.com/playcanvas/engine
- https://playcanvas.com/


---
Source: https://tokrepo.com/en/workflows/asset-3c8db6d3
Author: AI Open Source