Lightweight WebGL/WebGPU game engine with entity-component architecture and visual editor integration. Use this skill when building browser-based games, interactive 3D applications, or performance-critical web experiences. Triggers on tasks involving PlayCanvas, entity-component systems, game engine

PlayCanvas Engine Skill Lightweight WebGL/WebGPU game engine with entity component architecture, visual editor integration, and performance focused design. When to Use This Skill Trigger this skill when you see: "PlayCanvas engine" "WebGL game engine" "entity component system" "PlayCanvas application" "3D browser games" "online 3D editor" "lightweight 3D engine" Need for editor first workflow Compare with: Three.js : Lower level, more flexible but requires more setup Babylon.js : Feature rich but heavier, has editor but less mature A Frame : VR focused, declarative HTML approach Use PlayCanvas for: Game projects, editor first workflow, performance critical apps Core Concepts 1. Application The root PlayCanvas application manages the rendering loop. 2. Entity Component System PlayCanvas uses ECS architecture: Entities contain Components. 3. Update Loop The application fires events during the update loop. 4. Components Core components extend entity functionality: Model Component : Camera Component : Light Component : Rigidbody Component (requires physics): Common Patterns Pattern 1: Basic Scene Setup Create a complete scene with camera, light, and models. Pattern 2: Loading GLTF Models Load external 3D models with asset management. With error handling : Pattern 3: Materials and Textures Create custom materials with PBR workflow. Pattern 4: Physics Integration Use Ammo.js for physics simulation. Pattern 5: Custom Scripts Create reusable script components. Script lifecycle methods : Pattern 6: Input Handling Handle keyboard, mouse, and touch input. Pattern 7: Animations Play skeletal animations and tweens. Skeletal animation : Property tweening : Integration Patterns Integration 1: React Integration Wrap PlayCanvas in React components. Integration 2: Editor Export Work with PlayCanvas Editor projects. Performance Optimization 1. Object Pooling Reuse entities instead of creating/destroying. 2. LOD (Level of Detail) Reduce geometry for distant objects. 3. Batching Combine static meshes to reduce draw calls. 4. Texture Compression Use compressed texture formats. Common Pitfalls Pitfall 1: Not Starting the Application Problem : Scene renders but nothing happens. Pitfall 2: Modifying Entities During Update Problem : Modifying scene graph during iteration. Pitfall 3: Memory Leaks with Assets Problem : Not cleaning up loaded assets. Pitfall 4: Incorrect Transform Hierarchy Problem : Transforms not propagating correctly. Pitfall 5: Physics Not Initialized Problem : Physics components don't work. Pitfall 6: Canvas Sizing Issues Problem : Canvas doesn't fill container or respond to resize. Resources Official API : https://api.playcanvas.com/ Developer Docs : https://developer.playcanvas.com/ Examples : https://playcanvas.github.io/ Editor : https://playcanvas.com/ GitHub : https://github.com/playcanvas/engine Forum : https://forum.playcanvas.com/ Quick Reference Application Setup Entity Creation Update Loop Loading Assets Related Skills : For lower level WebGL control, reference threejs webgl. For React integration patterns, see react three fiber. For physics heavy simulations, reference babylonjs engine.

playcanvas-engine