BabylonJS

Name: BabylonJS
Author: Curiosity-Ai-BV

53installs4forks

How to install BabylonJS?

curiosity-ai-bv/babylonjs-skill/babylonjs

$npx -y skills add Curiosity-Ai-BV/Babylonjs-Skill --skill BabylonJS

Installs into the current project.

Summary

Babylon.js 8 3D engine development expertise with curated API patterns, code examples, and on-demand documentation access. Use when working with Babylon.js scenes, meshes, materials (PBR/Standard), cameras, lights, shadows, GUI (2D/3D), animations, physics (Havok), thin instances

Files · 1

View on GitHub

SKILL.md

1	# Babylon.js 8
2
3	## Quick Reference
4
5	Babylon.js is a powerful open-source 3D engine for the web. Version 8 supports WebGL2 and WebGPU.
6
7	Coordinate system: Left-handed (X=right, Y=up, Z=forward). Rotations in radians.
8
9	NPM packages:
10	- `@babylonjs/core` - Engine, scene, meshes, materials, cameras, lights
11	- `@babylonjs/gui` - 2D/3D GUI controls
12	- `@babylonjs/loaders` - glTF, OBJ, STL loaders
13	- `@babylonjs/materials` - Extra material types
14	- `@babylonjs/inspector` - Debug inspector
15
16	Tree-shaking: Import from deep paths for minimal bundles:
17	```typescript
18	import { Scene } from "@babylonjs/core/scene";
19	import { Vector3 } from "@babylonjs/core/Maths/math.vector";
20	import { Color3, Color4 } from "@babylonjs/core/Maths/math.color";
21	import { Mesh } from "@babylonjs/core/Meshes/mesh";
22	import { PBRMaterial } from "@babylonjs/core/Materials/PBR/pbrMaterial";
23	import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
24	```
25
26	Side-effect imports (enable features without referencing exports):
27	```typescript
28	import "@babylonjs/core/Meshes/thinInstanceMesh";
29	import "@babylonjs/core/Rendering/edgesRenderer";
30	import "@babylonjs/core/Collisions/collisionCoordinator";
31	import "@babylonjs/loaders/glTF/2.0/glTFLoader";
32	```
33
34	## Minimal Scene Setup
35
36	```typescript
37	import { Engine } from "@babylonjs/core/Engines/engine";
38	import { Scene } from "@babylonjs/core/scene";
39	import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
40	import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
41	import { Vector3 } from "@babylonjs/core/Maths/math.vector";
42	import { CreateSphere } from "@babylonjs/core/Meshes/Builders/sphereBuilder";
43	import { CreateGround } from "@babylonjs/core/Meshes/Builders/groundBuilder";
44
45	const engine = new Engine(canvas, true);
46	const scene = new Scene(engine);
47	const camera = new ArcRotateCamera("cam", 0, Math.PI/4, 10, Vector3.Zero(), scene);
48	camera.attachControl(canvas, true);
49	const light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);
50	const sphere = CreateSphere("sphere", { diameter: 2 }, scene);
51	const ground = CreateGround("ground", { width: 6, height: 6 }, scene);
52	sphere.position.y = 1;
53
54	engine.runRenderLoop(() => scene.render());
55	window.addEventListener("resize", () => engine.resize());
56	```
57
58	## Key Patterns
59
60	### PBR Material (most common for realistic rendering)
61	```typescript
62	const pbr = new PBRMaterial("pbr", scene);
63	pbr.albedoColor = new Color3(1.0, 0.766, 0.336);
64	pbr.metallic = 0.3;
65	pbr.roughness = 0.7;
66	// Optional: connect to environment for reflections
67	pbr.reflectionTexture = scene.environmentTexture;
68	mesh.material = pbr;
69	```
70
71	### Thin Instances (high-performance batching)
72	```typescript
73	import "@babylonjs/core/Meshes/thinInstanceMesh";
74	const buffer = new Float32Array(16 * count);
75	for (let i = 0; i < count; i++) {
76	Matrix.Translation(x, y, z).copyToArray(buffer, i * 16);
77	}
78	mesh.thinInstanceSetBuffer("matrix", buffer, 16, false);
79	mesh.thinInstanceBufferUpdated("matrix");
80	```
81
82	### Asset Loading (glTF)
83	```typescript
84	import "@babylonjs/loaders/glTF/2.0/glTFLoader";
85	const container = await BABYLON.LoadAssetContainerAsync("model.glb", scene);
86	container.addAllToScene();
87	```
88
89	### Observable Pattern (Babylon's event system)
90	```typescript
91	scene.onBeforeRenderObservable.add(() => { /* per frame */ });
92	const observer = scene.onPointerObservable.add((info) => { /* pointer events */ });
93	scene.onPointerObservable.remove(observer); // unsubscribe
94	```
95
96	### Procedural Modeling — Animation-Ready Hierarchy
97	Build complex models from primitives by placing a `TransformNode` at every joint before attaching geometry. One pivot per degree of freedom; geometry's local position is its offset from the joint.
98	```typescript
99	const robotRoot = new TransformNode("robotRoot", scene);
100	const shoulderPivot = new TransformNode("shoulderPivot", scene);
101	shoulderPivot.parent = robotRoot; // pivot lives at the joint axis
102	const u

People who liked this also viewed

6 picks

Type

BabylonJS

53installs4forks

View on GitHub

How to install BabylonJS?

curiosity-ai-bv/babylonjs-skill/babylonjs

$npx -y skills add Curiosity-Ai-BV/Babylonjs-Skill --skill BabylonJS

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Babylon.js 8
2
3	## Quick Reference
4
5	Babylon.js is a powerful open-source 3D engine for the web. Version 8 supports WebGL2 and WebGPU.
6
7	Coordinate system: Left-handed (X=right, Y=up, Z=forward). Rotations in radians.
8
9	NPM packages:
10	- `@babylonjs/core` - Engine, scene, meshes, materials, cameras, lights
11	- `@babylonjs/gui` - 2D/3D GUI controls
12	- `@babylonjs/loaders` - glTF, OBJ, STL loaders
13	- `@babylonjs/materials` - Extra material types
14	- `@babylonjs/inspector` - Debug inspector
15
16	Tree-shaking: Import from deep paths for minimal bundles:
17	```typescript
18	import { Scene } from "@babylonjs/core/scene";
19	import { Vector3 } from "@babylonjs/core/Maths/math.vector";
20	import { Color3, Color4 } from "@babylonjs/core/Maths/math.color";
21	import { Mesh } from "@babylonjs/core/Meshes/mesh";
22	import { PBRMaterial } from "@babylonjs/core/Materials/PBR/pbrMaterial";
23	import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
24	```
25
26	Side-effect imports (enable features without referencing exports):
27	```typescript
28	import "@babylonjs/core/Meshes/thinInstanceMesh";
29	import "@babylonjs/core/Rendering/edgesRenderer";
30	import "@babylonjs/core/Collisions/collisionCoordinator";
31	import "@babylonjs/loaders/glTF/2.0/glTFLoader";
32	```
33
34	## Minimal Scene Setup
35
36	```typescript
37	import { Engine } from "@babylonjs/core/Engines/engine";
38	import { Scene } from "@babylonjs/core/scene";
39	import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
40	import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
41	import { Vector3 } from "@babylonjs/core/Maths/math.vector";
42	import { CreateSphere } from "@babylonjs/core/Meshes/Builders/sphereBuilder";
43	import { CreateGround } from "@babylonjs/core/Meshes/Builders/groundBuilder";
44
45	const engine = new Engine(canvas, true);
46	const scene = new Scene(engine);
47	const camera = new ArcRotateCamera("cam", 0, Math.PI/4, 10, Vector3.Zero(), scene);
48	camera.attachControl(canvas, true);
49	const light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);
50	const sphere = CreateSphere("sphere", { diameter: 2 }, scene);
51	const ground = CreateGround("ground", { width: 6, height: 6 }, scene);
52	sphere.position.y = 1;
53
54	engine.runRenderLoop(() => scene.render());
55	window.addEventListener("resize", () => engine.resize());
56	```
57
58	## Key Patterns
59
60	### PBR Material (most common for realistic rendering)
61	```typescript
62	const pbr = new PBRMaterial("pbr", scene);
63	pbr.albedoColor = new Color3(1.0, 0.766, 0.336);
64	pbr.metallic = 0.3;
65	pbr.roughness = 0.7;
66	// Optional: connect to environment for reflections
67	pbr.reflectionTexture = scene.environmentTexture;
68	mesh.material = pbr;
69	```
70
71	### Thin Instances (high-performance batching)
72	```typescript
73	import "@babylonjs/core/Meshes/thinInstanceMesh";
74	const buffer = new Float32Array(16 * count);
75	for (let i = 0; i < count; i++) {
76	Matrix.Translation(x, y, z).copyToArray(buffer, i * 16);
77	}
78	mesh.thinInstanceSetBuffer("matrix", buffer, 16, false);
79	mesh.thinInstanceBufferUpdated("matrix");
80	```
81
82	### Asset Loading (glTF)
83	```typescript
84	import "@babylonjs/loaders/glTF/2.0/glTFLoader";
85	const container = await BABYLON.LoadAssetContainerAsync("model.glb", scene);
86	container.addAllToScene();
87	```
88
89	### Observable Pattern (Babylon's event system)
90	```typescript
91	scene.onBeforeRenderObservable.add(() => { /* per frame */ });
92	const observer = scene.onPointerObservable.add((info) => { /* pointer events */ });
93	scene.onPointerObservable.remove(observer); // unsubscribe
94	```
95
96	### Procedural Modeling — Animation-Ready Hierarchy
97	Build complex models from primitives by placing a `TransformNode` at every joint before attaching geometry. One pivot per degree of freedom; geometry's local position is its offset from the joint.
98	```typescript
99	const robotRoot = new TransformNode("robotRoot", scene);
100	const shoulderPivot = new TransformNode("shoulderPivot", scene);
101	shoulderPivot.parent = robotRoot; // pivot lives at the joint axis
102	const u

People who liked this also viewed

6 picks

Type