skills.rest
aungpwint
aungpwintCOMMUNITY
Explore all skills by this author →
GitHub

babylonjs-engine

Build Babylon.js 8 3D scenes, materials, animations, and procedural models with curated API patterns.

Updated Aug 26, 2026
Search Tags:#typescript#webgl#webgpu#3d rendering#gltf#babylonjs#procedural modeling
One-click install
npx skills add https://github.com/aungpwint/presentation --skill babylonjs-engine-aungpwint
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: babylonjs-engine
Source: https://github.com/aungpwint/presentation/tree/main/.agents/skills/babylonjs-engine
Command: npx skills add https://github.com/aungpwint/presentation --skill babylonjs-engine-aungpwint

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @babylonjs/core, @babylonjs/gui, @babylonjs/loaders, @babylonjs/materials, @babylonjs/inspector, earcut, and includes references (resource) components.

What problem does it solve? Writing Babylon.js 3D code requires knowing hundreds of APIs, correct import paths, and subtle gotchas like side-effect imports, quaternion conflicts, and GPU resource disposal. This Skill provides curated, version-accurate Babylon.js 8 patterns so you get working 3D scenes, materials, and animations without digging through documentation. ## Core Features & Use Cases - Scene & Rendering Patterns: Ready-to-use code for engine setup (WebGL/WebGPU), cameras, lights, shadows, PBR/Standard materials, and GUI overlays. - Procedural & Parametric Modeling: Factory-based patterns for building animation-ready 3D models from primitives, CSG2 booleans, lathes, extrusions, and custom VertexData with proper pivot hierarchies. - Performance & Asset Loading: Thin instances, mesh merging, glTF loading, scene optimization, and instrumentation guidance, plus an on-demand URL map to fetch live Babylon.js docs for uncovered topics like physics (Havok) and WebXR. - Use Case: Ask for a parametric warehouse robot with animated joints and thin-instanced shelving, and receive a complete TypeScript factory with shared PBR materials, correct pivots, and merge-safe hierarchy. ## Quick Start Use the babylonjs-engine skill to create a Babylon.js 8 scene with an ArcRotateCamera, PBR materials, and a glTF model loader.

Frequently Asked Questions about babylonjs-engine

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

FAQPage Schema
How do I set up a minimal Babylon.js scene in TypeScript?▼

Create an Engine with a canvas, instantiate a Scene, add an ArcRotateCamera and HemisphericLight, then call engine.runRenderLoop with scene.render. Import from deep paths like @babylonjs/core/scene for tree-shaking.

How do I load a glTF model in Babylon.js 8?▼

Import the glTF loader side-effect module, then call BABYLON.LoadAssetContainerAsync with the model URL and scene, followed by container.addAllToScene. You can also use ImportMeshAsync or AppendSceneAsync depending on whether you need to inspect assets first.

What is the difference between thin instances, instances, and clones in Babylon.js?▼

Thin instances store only matrix buffers with no per-instance JS objects, giving maximum performance for thousands of identical meshes. Instances share geometry and material but allow individual culling, while clones are full copies that support independent materials.

Does Babylon.js 8 support WebGPU?▼

Yes, Babylon.js 8 supports WebGPU through the WebGPUEngine class imported from @babylonjs/core/Engines/webgpuEngine. Create the engine and call await engine.initAsync() before building your scene.

Why does my Babylon.js mesh rotation stop working after setting rotationQuaternion?▼

Setting mesh.rotationQuaternion disables the mesh.rotation Euler property because quaternion takes precedence. To switch back to Euler angles, set mesh.rotationQuaternion to null first.

How do I build animated 3D models procedurally in Babylon.js?▼

Create a TransformNode pivot at each joint before attaching geometry as a child with a local offset, giving one pivot per degree of freedom. Use builders like CreateLathe, CreateTube, ExtrudePolygon, and CSG2 booleans for parts, and merge only after the hierarchy works.

Related Skills

Explore More Software Engineering Skills→
Adham7843Adham7843

babylonjs-engine

Integrate Babylon.js for real-time 3D rendering and interactivity in web projects.

Community
Advanced
aryan083aryan083
1

express-serverless-api

Build, test, and deploy Express.js REST APIs with MongoDB on Vercel.

Community
Advanced
AnthemFlynnAnthemFlynn

asset-pipeline-3d

Optimize GLTF/GLB assets with compression, texture optimization, and LOD workflows.

Community
Advanced
Arupbiswas09Arupbiswas09

r3f

Integrates Three.js and @react-three/fiber into React applications for declarative 3D graphics.

Community
Intermediate