---
name: "babylonjs-pbr-material-scene"
description: "Develop enterprise 3D web applications and games with Babylon.js and WebGPU engine."
metadata:
  author: "BabylonJS"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "initialize babylonjs scene"
  - "setup arcrotatecamera babylonjs"
  - "enable havok physics babylonjs"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Babylon.js WebGPU & WebGL 3D Scene

Builds immersive 3D experiences using Babylon.js: Engine/WebGPUEngine, Scene, ArcRotateCamera, PBRMetallicRoughnessMaterial, Havok physics engine, and GUI 2D/3D overlays.

## When to Invoke
Invoke this skill whenever you need to:
- initialize babylonjs scene
- setup arcrotatecamera babylonjs
- enable havok physics babylonjs

## Execution SOP & Rules
1. Create canvas engine with const engine = new BABYLON.Engine(canvas, true) and run engine.runRenderLoop().
2. Attach camera controls using camera.attachControl(canvas, true) for user interaction.
3. Enable hardware-accelerated physics with scene.enablePhysics(gravity, new BABYLON.HavokPlugin()).
4. Resize engine on window changes with window.addEventListener('resize', () => engine.resize()).

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.