playcanvas-engine

Build browser-based 3D games and interactive WebGL applications with PlayCanvas entity-component architecture.

Updated Aug 26, 2026
One-click install
npx skills add https://github.com/aungpwint/presentation --skill playcanvas-engine-aungpwint
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playcanvas-engine
Source: https://github.com/aungpwint/presentation/tree/main/.agents/skills/playcanvas-engine
Command: npx skills add https://github.com/aungpwint/presentation --skill playcanvas-engine-aungpwint

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Building 3D games and interactive web experiences requires managing rendering loops, scene hierarchies, physics, input, and assets—this Skill provides structured guidance, API references, and code generators for the PlayCanvas engine so you avoid boilerplate and common pitfalls. ## Core Features & Use Cases - Engine Guidance: Covers Application setup, entity-component system, components (model, camera, light, rigidbody, collision, script, animation, sound), input handling, and asset management with runnable JavaScript examples. - Component Generator: A Python script generates ready-to-use PlayCanvas script components (basic, interactive, animation, physics, character controller, camera orbit, UI) via CLI or interactive mode. - Reference Docs: Includes API reference, editor workflow guide, and optimization guide covering draw call reduction, LOD, texture compression, entity pooling, and mobile tuning. - Use Case: You need a third-person character controller for a browser game—run the component builder to generate a WASD movement script with jump physics and camera-relative movement, then attach it to your entity. ## Quick Start Ask the AI to create a PlayCanvas application with a rotating box, a directional light, and an orbit camera controller using this skill.

Frequently Asked Questions about playcanvas-engine

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a PlayCanvas application in JavaScript?▼

Create a canvas element, instantiate pc.Application with input devices like pc.Keyboard and pc.Mouse, set the canvas fill mode, and call app.start(). Add entities with components such as model, camera, and light to build your scene.

PlayCanvas vs Three.js: which should I use for browser games?▼

PlayCanvas provides a game-focused entity-component system, built-in physics, and a visual editor, making it better for game projects. Three.js is lower-level and more flexible but requires more setup for game-specific features.

How do I add physics and collision detection in PlayCanvas?▼

Add a rigidbody component with a body type (static, dynamic, or kinematic) and a collision component with a shape like box or sphere. Listen to collisionstart and contact events, and use raycastFirst for hit detection.

Does PlayCanvas support WebGPU rendering?▼

Yes, PlayCanvas supports both WebGL and WebGPU rendering backends. You can configure the graphics device through the graphicsDeviceOptions parameter when creating the pc.Application instance.

Why is my PlayCanvas game running at low FPS?▼

Common causes are too many draw calls, high triangle counts, uncompressed textures, and expensive per-frame scripts. Enable batching, use LOD, compress textures with Basis, cache entity lookups, and profile with app.stats.

How do I generate PlayCanvas script components automatically?▼

Run the component_builder.py script in interactive or CLI mode with a component name and type. It generates templates for basic, interactive, animation, physics, character, camera, and UI components with attributes and lifecycle methods.