vibes-plug 2.14.1 → 3.9.0

package/skills/web-3d-graphics-expert/SKILL.md

@@ -1,313 +1,314 @@
----
-name: web-3d-graphics-expert
-description: "Expert guide for modern WebGPU and WebGL 3D graphics in the browser using Three.js (WebGPURenderer + TSL), Babylon.js, PlayCanvas, React Three Fiber (R3F), and TresJS. Covers scene optimization, compute shaders, KTX2/Meshopt compression, and memory management / Panduan ahli grafis 3D web dan WebGPU modern."
-author: "vibes-plug-swarm"
----
-
-# Web 3D Graphics Expert (WebGPU, Three.js, Babylon.js & PlayCanvas)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Orchestration & Integration
-Connects and orchestrates with relevant domain skills:
-- `senior-frontend` — Integrating React Three Fiber (R3F) in React 19 / Next.js 15.
-- `vue-frontend-expert` — Integrating TresJS in Vue 3 / Nuxt 3.
-- `svelte-sveltekit-expert` — Integrating Threlte in Svelte 5 (Runes).
-- `web-game-engine-expert` — Physics simulations (Rapier, Jolt, Havok), game loops, and ECS.
-- `glsl-shader-expert` — Shading languages, WGSL compute shaders, and TSL nodes.
-- `webxr-ar-vr-expert` — WebXR immersive VR/AR experiences.
-- `performance-web-vitals` — Minimizing Total Blocking Time (TBT), asset streaming, and bundle sizing.
-
-### Description
-Production-grade guidance for architecting high-fidelity, high-framerate 3D experiences in the browser. Covers the modern **WebGPU-first** paradigm with automatic WebGL2 fallbacks, **Three.js (r170+) WebGPURenderer** and **TSL (Three Shading Language)**, **Babylon.js WebGPUEngine** with Snapshot Rendering, and **PlayCanvas Engine** for ultra-lightweight, mobile-first commercial applications.
-
-### Trigger Conditions
-Activate this skill when the user is:
-- Initializing a WebGPU or WebGL 3D scene.
-- Using `three` (`three/webgpu`), `@react-three/fiber`, `@babylonjs/core`, `playcanvas`, `@tresjs/core`, or `@threlte/core`.
-- Writing or refactoring shaders to Three Shading Language (TSL) or WGSL.
-- Loading and optimizing 3D models (`.glb`, `.gltf`) with KTX2 texture compression or Meshopt.
-- Implementing post-processing passes, compute shaders, or particle systems on the GPU.
-- Diagnosing FPS drops, draw call bottlenecks, or VRAM memory leaks.
-
----
-
-### Modern Web 3D Engine Landscape (2026)
-
-| Engine / Stack | Best Use Case | Rendering Backend | Key Strengths |
-| :--- | :--- | :--- | :--- |
-| **Three.js (WebGPU + TSL)** | Creative landing pages, interactive portfolios, R3F React ecosystems | WebGPU (primary) + WebGL2 (fallback) | Vast community, huge ecosystem, TSL cross-compiles to WGSL & GLSL, node materials. |
-| **Babylon.js** | Enterprise 3D simulations, CAD viewers, AAA web games with Havok | WebGPU + WebGL2 | Snapshot rendering, native Havok physics, compute shaders, robust GUI & inspector. |
-| **PlayCanvas Engine** | High-performance mobile 3D, instant-load web games, e-commerce configurators | WebGPU + WebGL2 | Tiny runtime (~200KB gzipped), clustered lighting, zero-overhead scene graph. |
-| **Threlte (Svelte 5)** | Svelte 5 apps requiring declarative 3D reactive components | Three.js WebGL/WebGPU | Svelte Runes reactivity (`$state`, `$derived`), lightweight bundle footprint. |
-
----
-
-### 1. Three.js WebGPU & TSL (Three Shading Language)
-
-Starting with modern Three.js, transition from `WebGLRenderer` to `WebGPURenderer`. It natively uses WebGPU when available and falls back cleanly to WebGL2.
-
-```typescript
-// Modern Three.js WebGPU Scene Setup
-import * as THREE from 'three/webgpu';
-import { color, float, positionLocal, time, vec3, Fn } from 'three/tsl';
-
-const canvas = document.querySelector('#canvas') as HTMLCanvasElement;
-const renderer = new THREE.WebGPURenderer({ canvas, antialias: true });
-renderer.setSize(window.innerWidth, window.innerHeight);
-renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-
-// Initialize async WebGPU pipeline
-await renderer.init();
-
-const scene = new THREE.Scene();
-const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
-camera.position.set(0, 2, 5);
-
-// TSL (Three Shading Language) Custom Node Material
-// Compiles automatically to WGSL on WebGPU and GLSL on WebGL2!
-const customMaterial = new THREE.MeshStandardNodeMaterial();
-
-// Node-based animated color shader function
-const animatedColor = Fn(() => {
-  const t = time.mul(2.0);
-  const wave = positionLocal.y.add(t).sin().mul(0.5).add(0.5);
-  return color(0x00ffff).mul(wave);
-});
-
-customMaterial.colorNode = animatedColor();
-
-const mesh = new THREE.Mesh(new THREE.TorusKnotGeometry(1, 0.3, 128, 32), customMaterial);
-scene.add(mesh);
-
-// Render loop using setAnimationLoop (WebGPU & WebXR compatible)
-renderer.setAnimationLoop(() => {
-  mesh.rotation.y += 0.01;
-  renderer.render(scene, camera);
-});
-```
-
----
-
-### 2. Babylon.js WebGPU Engine & Snapshot Rendering
-
-For scenes with thousands of static meshes, Babylon.js **Snapshot Rendering** records GPU command buffers once and replays them, bypassing JavaScript CPU draw call overhead.
-
-```typescript
-import { WebGPUEngine, Scene, ArcRotateCamera, Vector3, HemisphericLight, MeshBuilder } from '@babylonjs/core';
-
-async function initBabylonWebGPU() {
-  const canvas = document.getElementById('renderCanvas') as HTMLCanvasElement;
-  const engine = new WebGPUEngine(canvas, { antialiasing: true });
-  await engine.initAsync();
-
-  const scene = new Scene(engine);
-  const camera = new ArcRotateCamera('camera', -Math.PI / 2, Math.PI / 2.5, 10, Vector3.Zero(), scene);
-  camera.attachControl(canvas, true);
-
-  const light = new HemisphericLight('light', new Vector3(0, 1, 0), scene);
-
-  // Enable Snapshot Rendering for extreme draw call reduction
-  engine.snapshotRendering = true;
-  engine.snapshotRenderingMode = WebGPUEngine.SNAPSHOTRENDERING_FAST;
-
-  engine.runRenderLoop(() => {
-    scene.render();
-  });
-}
-```
-
----
-
-### 3. PlayCanvas Engine (Ultra-Lightweight & Fast-Loading)
-
-When bundle size and instant mobile loading are the primary constraints, use the standalone PlayCanvas Engine:
-
-```typescript
-import * as pc from 'playcanvas';
-
-const canvas = document.getElementById('application-canvas') as HTMLCanvasElement;
-const app = new pc.Application(canvas, {
-  graphicsDeviceOptions: { alpha: false, antialias: true, preferWebGpu: true }
-});
-app.start();
-app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
-app.setCanvasResolution(pc.RESOLUTION_AUTO);
-
-// Create Entity: Camera
-const camera = new pc.Entity('camera');
-camera.addComponent('camera', { clearColor: new pc.Color(0.1, 0.1, 0.15) });
-camera.translate(0, 2, 6);
-camera.lookAt(0, 0, 0);
-app.root.addChild(camera);
-
-// Create Entity: Clustered Directional Light
-const light = new pc.Entity('light');
-light.addComponent('light', { type: 'directional', castShadows: true });
-light.setEulerAngles(45, 30, 0);
-app.root.addChild(light);
-
-// Create Entity: Box with Standard Material
-const box = new pc.Entity('box');
-box.addComponent('render', { type: 'box' });
-app.root.addChild(box);
-
-app.on('update', (dt: number) => {
-  box.rotate(10 * dt, 20 * dt, 30 * dt);
-});
-```
-
----
-
-### 4. React Three Fiber (R3F) with React 19
-
-```tsx
-import { Canvas } from '@react-three/fiber';
-import { OrbitControls, Environment, useGLTF, Float } from '@react-three/drei';
-
-function ModelViewer() {
-  const { scene } = useGLTF('/models/drone.glb');
-  return (
-    <Float speed={2} rotationIntensity={0.5} floatIntensity={1}>
-      <primitive object={scene} />
-    </Float>
-  );
-}
-
-export default function App() {
-  return (
-    <Canvas
-      gl={(canvas) => new THREE.WebGPURenderer({ canvas, antialias: true })}
-      camera={{ position: [0, 1.5, 4], fov: 45 }}
-      dpr={[1, 2]}
-    >
-      <ambientLight intensity={0.6} />
-      <directionalLight position={[5, 10, 5]} castShadow intensity={1.5} />
-      <ModelViewer />
-      <Environment preset="city" />
-      <OrbitControls makeDefault enableDamping dampingFactor={0.05} />
-    </Canvas>
-  );
-}
-
-// Preload critical assets outside component tree
-useGLTF.preload('/models/drone.glb');
-```
-
----
-
-### Modern Asset Pipeline & GPU Memory Optimization
-
-#### 1. GPU Texture Compression: KTX2 + Basis Universal (`KHR_texture_basisu`)
-> **CRITICAL RULE**: Never deploy raw PNG or JPG textures for 3D production models.
-- **Why?** PNG/JPG files decompress into uncompressed 32-bit RGBA inside GPU VRAM. A 2048x2048 PNG consumes **16MB of VRAM**; an uncompressed 4K texture consumes **64MB of VRAM**.
-- **KTX2 with Basis Universal** transcodes in real-time into native GPU-compressed formats:
-  - Mobile: ASTC / ETC2.
-  - Desktop: BC7 / BC1.
-- **Result:** Saves **75% to 85% of GPU VRAM**, prevents mobile browser tab crashes, and eliminates texture upload GPU hitches.
-- **Tooling:** Compress glTF files with `gltf-transform`:
-  ```bash
-  npx @gltf-transform/cli optimize input.glb output.glb --texture-compress ktx2
-  ```
-
-#### 2. Geometry Optimization: Meshopt (`EXT_meshopt_compression`)
-- Prefer **Meshopt** over Draco for high-framerate interactive apps and games.
-- **Advantage:** Meshopt WASM decompressor runs at **gigabytes per second** (up to 10x faster decompression than Draco on mobile CPUs) and organizes vertex attributes for maximum GPU vertex cache efficiency.
-  ```bash
-  npx @gltf-transform/cli meshopt input.glb output.glb
-  ```
-
-#### 3. Strict Memory Lifecycle Management (`.dispose()`)
-Garbage collection does NOT clean up WebGL/WebGPU buffers:
-- When removing an object from Three.js or Babylon.js, explicitly traverse and dispose:
-```typescript
-export function purgeObject(object: THREE.Object3D) {
-  object.traverse((child) => {
-    if ((child as THREE.Mesh).isMesh) {
-      const mesh = child as THREE.Mesh;
-      mesh.geometry?.dispose();
-      if (Array.isArray(mesh.material)) {
-        mesh.material.forEach((m) => disposeMaterial(m));
-      } else if (mesh.material) {
-        disposeMaterial(mesh.material);
-      }
-    }
-  });
-}
-
-function disposeMaterial(material: THREE.Material) {
-  Object.keys(material).forEach((prop) => {
-    const value = (material as any)[prop];
-    if (value && typeof value.dispose === 'function') {
-      value.dispose();
-    }
-  });
-  material.dispose();
-}
-```
-
----
-
-### Production Checklist
-- [ ] Render with `WebGPURenderer` (Three.js) or `WebGPUEngine` (Babylon.js) with fallback enabled.
-- [ ] Use KTX2 / Basis Universal compressed textures on all `.glb` assets.
-- [ ] Use Meshopt geometry compression to eliminate model loading CPU stalls.
-- [ ] Clamp `devicePixelRatio` to `Math.min(window.devicePixelRatio, 2)` to prevent 4K/Retina mobile GPU thermal throttling.
-- [ ] Use `InstancedMesh` (Three.js) or `Thin Instances` (Babylon.js) for repetitive assets (>10 meshes).
-- [ ] Implement explicit `.dispose()` cleanup in `useEffect` or component unmount hooks.
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Integrasi Orkestrasi
-Terhubung dan mengorkestrasi skill domain yang relevan:
-- `senior-frontend` — Integrasi React Three Fiber (R3F) pada React 19 / Next.js 15.
-- `vue-frontend-expert` — Integrasi TresJS pada Vue 3 / Nuxt 3.
-- `svelte-sveltekit-expert` — Integrasi Threlte pada Svelte 5 (Runes).
-- `web-game-engine-expert` — Simulasi fisika (Rapier, Jolt, Havok), game loop, dan ECS.
-- `glsl-shader-expert` — Bahasa shader, compute shader WGSL, dan node TSL.
-- `webxr-ar-vr-expert` — Pengalaman WebXR VR/AR imersif.
-- `performance-web-vitals` — Meminimalkan TBT (Total Blocking Time) dan optimasi ukuran bundle.
-
-### Deskripsi
-Panduan produksi untuk membangun grafis 3D performa tinggi di browser. Mengutamakan paradigma modern **WebGPU-first** dengan fallback otomatis ke WebGL2, **Three.js (r170+) WebGPURenderer** dan **TSL (Three Shading Language)**, **Babylon.js WebGPUEngine** dengan Snapshot Rendering, serta **PlayCanvas Engine** untuk aplikasi komersial mobile yang sangat ringan dan cepat dimuat.
-
-### Kondisi Pemicu
-Aktifkan skill ini ketika pengguna:
-- Menginisialisasi *scene* WebGPU atau WebGL 3D.
-- Menggunakan `three` (`three/webgpu`), `@react-three/fiber`, `@babylonjs/core`, `playcanvas`, `@tresjs/core`, atau `@threlte/core`.
-- Menulis atau merefaktor shader ke Three Shading Language (TSL) atau WGSL.
-- Memuat dan mengoptimalkan model 3D (`.glb`, `.gltf`) menggunakan kompresi tekstur KTX2 atau Meshopt.
-- Mengimplementasikan post-processing, compute shader, atau sistem partikel pada GPU.
-- Mengatasi penurunan FPS (*frame drop*), hambatan *draw call*, atau kebocoran memori VRAM.
-
----
-
-### Panduan Inti & Rekomendasi Mesin 3D
-
-1. **Three.js WebGPU + TSL**:
-   - Gunakan `WebGPURenderer` alih-alih `WebGLRenderer` standar.
-   - Manfaatkan TSL (*Three Shading Language*) dan *Node Materials*. Kode shader TSL ditulis secara deklaratif dalam TypeScript/JavaScript dan otomatis dikompilasi menjadi WGSL pada WebGPU dan GLSL pada WebGL2.
-
-2. **Babylon.js Snapshot Rendering**:
-   - Untuk skenario dengan ribuan mesh statis, aktifkan `engine.snapshotRendering = true` untuk merekam *command buffer* GPU sekali saja, memotong hampir 100% *overhead* CPU draw call JavaScript.
-
-3. **PlayCanvas Engine (Performa Mobile Ekstrem)**:
-   - Jika waktu muat (*initial load*) dan ukuran bundle adalah prioritas utama (misalnya iklan interaktif, 3D e-commerce configurator, game web mobile), PlayCanvas hanya memakan ~200KB gzipped dengan fitur *clustered lighting* yang sangat cepat.
-
-4. **Kompresi Tekstur GPU KTX2 (Wajib)**:
-   - Jangan menyajikan file PNG/JPG mentah di produksi. Format PNG/JPG diekspansi menjadi uncompressed RGBA di VRAM GPU (tekstur 4K memakan 64MB VRAM).
-   - Gunakan **KTX2 / Basis Universal** yang tetap terkompresi langsung di VRAM GPU (menghemat 75%-85% VRAM dan mencegah browser mobile crash).
-
-5. **Kompresi Geometri Meshopt**:
-   - Gunakan kompresi **Meshopt** (`EXT_meshopt_compression`) alih-alih Draco jika membutuhkan dekompresi super cepat di browser (hingga 10x lebih cepat dibanding Draco pada CPU mobile).
-
-6. **Pembersihan Memori Bersih (`.dispose()`)**:
-   - Browser garbage collector tidak dapat menghapus buffer GPU secara otomatis. Selalu panggil method `.dispose()` pada geometry, material, dan texture saat komponen di-unmount.
+---
+name: web-3d-graphics-expert
+description: "Expert guide for modern WebGPU and WebGL 3D graphics in the browser using Three.js (WebGPURenderer + TSL), Babylon.js, PlayCanvas, React Three Fiber (R3F), and TresJS. Covers scene optimization, compute shaders, KTX2/Meshopt compression, and memory management / Panduan ahli grafis 3D web dan WebGPU modern."
+author: "vibes-plug-swarm"
+version: "3.0.0"
+---
+
+# Web 3D Graphics Expert (WebGPU, Three.js, Babylon.js & PlayCanvas)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+Connects and orchestrates with relevant domain skills:
+- `senior-frontend` — Integrating React Three Fiber (R3F) in React 19 / Next.js 15.
+- `vue-frontend-expert` — Integrating TresJS in Vue 3 / Nuxt 3.
+- `svelte-sveltekit-expert` — Integrating Threlte in Svelte 5 (Runes).
+- `web-game-engine-expert` — Physics simulations (Rapier, Jolt, Havok), game loops, and ECS.
+- `glsl-shader-expert` — Shading languages, WGSL compute shaders, and TSL nodes.
+- `webxr-ar-vr-expert` — WebXR immersive VR/AR experiences.
+- `performance-web-vitals` — Minimizing Total Blocking Time (TBT), asset streaming, and bundle sizing.
+
+### Description
+Production-grade guidance for architecting high-fidelity, high-framerate 3D experiences in the browser. Covers the modern **WebGPU-first** paradigm with automatic WebGL2 fallbacks, **Three.js (r170+) WebGPURenderer** and **TSL (Three Shading Language)**, **Babylon.js WebGPUEngine** with Snapshot Rendering, and **PlayCanvas Engine** for ultra-lightweight, mobile-first commercial applications.
+
+### Trigger Conditions
+Activate this skill when the user is:
+- Initializing a WebGPU or WebGL 3D scene.
+- Using `three` (`three/webgpu`), `@react-three/fiber`, `@babylonjs/core`, `playcanvas`, `@tresjs/core`, or `@threlte/core`.
+- Writing or refactoring shaders to Three Shading Language (TSL) or WGSL.
+- Loading and optimizing 3D models (`.glb`, `.gltf`) with KTX2 texture compression or Meshopt.
+- Implementing post-processing passes, compute shaders, or particle systems on the GPU.
+- Diagnosing FPS drops, draw call bottlenecks, or VRAM memory leaks.
+
+---
+
+### Modern Web 3D Engine Landscape (2026)
+
+| Engine / Stack | Best Use Case | Rendering Backend | Key Strengths |
+| :--- | :--- | :--- | :--- |
+| **Three.js (WebGPU + TSL)** | Creative landing pages, interactive portfolios, R3F React ecosystems | WebGPU (primary) + WebGL2 (fallback) | Vast community, huge ecosystem, TSL cross-compiles to WGSL & GLSL, node materials. |
+| **Babylon.js** | Enterprise 3D simulations, CAD viewers, AAA web games with Havok | WebGPU + WebGL2 | Snapshot rendering, native Havok physics, compute shaders, robust GUI & inspector. |
+| **PlayCanvas Engine** | High-performance mobile 3D, instant-load web games, e-commerce configurators | WebGPU + WebGL2 | Tiny runtime (~200KB gzipped), clustered lighting, zero-overhead scene graph. |
+| **Threlte (Svelte 5)** | Svelte 5 apps requiring declarative 3D reactive components | Three.js WebGL/WebGPU | Svelte Runes reactivity (`$state`, `$derived`), lightweight bundle footprint. |
+
+---
+
+### 1. Three.js WebGPU & TSL (Three Shading Language)
+
+Starting with modern Three.js, transition from `WebGLRenderer` to `WebGPURenderer`. It natively uses WebGPU when available and falls back cleanly to WebGL2.
+
+```typescript
+// Modern Three.js WebGPU Scene Setup
+import * as THREE from 'three/webgpu';
+import { color, float, positionLocal, time, vec3, Fn } from 'three/tsl';
+
+const canvas = document.querySelector('#canvas') as HTMLCanvasElement;
+const renderer = new THREE.WebGPURenderer({ canvas, antialias: true });
+renderer.setSize(window.innerWidth, window.innerHeight);
+renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+
+// Initialize async WebGPU pipeline
+await renderer.init();
+
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
+camera.position.set(0, 2, 5);
+
+// TSL (Three Shading Language) Custom Node Material
+// Compiles automatically to WGSL on WebGPU and GLSL on WebGL2!
+const customMaterial = new THREE.MeshStandardNodeMaterial();
+
+// Node-based animated color shader function
+const animatedColor = Fn(() => {
+  const t = time.mul(2.0);
+  const wave = positionLocal.y.add(t).sin().mul(0.5).add(0.5);
+  return color(0x00ffff).mul(wave);
+});
+
+customMaterial.colorNode = animatedColor();
+
+const mesh = new THREE.Mesh(new THREE.TorusKnotGeometry(1, 0.3, 128, 32), customMaterial);
+scene.add(mesh);
+
+// Render loop using setAnimationLoop (WebGPU & WebXR compatible)
+renderer.setAnimationLoop(() => {
+  mesh.rotation.y += 0.01;
+  renderer.render(scene, camera);
+});
+```
+
+---
+
+### 2. Babylon.js WebGPU Engine & Snapshot Rendering
+
+For scenes with thousands of static meshes, Babylon.js **Snapshot Rendering** records GPU command buffers once and replays them, bypassing JavaScript CPU draw call overhead.
+
+```typescript
+import { WebGPUEngine, Scene, ArcRotateCamera, Vector3, HemisphericLight, MeshBuilder } from '@babylonjs/core';
+
+async function initBabylonWebGPU() {
+  const canvas = document.getElementById('renderCanvas') as HTMLCanvasElement;
+  const engine = new WebGPUEngine(canvas, { antialiasing: true });
+  await engine.initAsync();
+
+  const scene = new Scene(engine);
+  const camera = new ArcRotateCamera('camera', -Math.PI / 2, Math.PI / 2.5, 10, Vector3.Zero(), scene);
+  camera.attachControl(canvas, true);
+
+  const light = new HemisphericLight('light', new Vector3(0, 1, 0), scene);
+
+  // Enable Snapshot Rendering for extreme draw call reduction
+  engine.snapshotRendering = true;
+  engine.snapshotRenderingMode = WebGPUEngine.SNAPSHOTRENDERING_FAST;
+
+  engine.runRenderLoop(() => {
+    scene.render();
+  });
+}
+```
+
+---
+
+### 3. PlayCanvas Engine (Ultra-Lightweight & Fast-Loading)
+
+When bundle size and instant mobile loading are the primary constraints, use the standalone PlayCanvas Engine:
+
+```typescript
+import * as pc from 'playcanvas';
+
+const canvas = document.getElementById('application-canvas') as HTMLCanvasElement;
+const app = new pc.Application(canvas, {
+  graphicsDeviceOptions: { alpha: false, antialias: true, preferWebGpu: true }
+});
+app.start();
+app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
+app.setCanvasResolution(pc.RESOLUTION_AUTO);
+
+// Create Entity: Camera
+const camera = new pc.Entity('camera');
+camera.addComponent('camera', { clearColor: new pc.Color(0.1, 0.1, 0.15) });
+camera.translate(0, 2, 6);
+camera.lookAt(0, 0, 0);
+app.root.addChild(camera);
+
+// Create Entity: Clustered Directional Light
+const light = new pc.Entity('light');
+light.addComponent('light', { type: 'directional', castShadows: true });
+light.setEulerAngles(45, 30, 0);
+app.root.addChild(light);
+
+// Create Entity: Box with Standard Material
+const box = new pc.Entity('box');
+box.addComponent('render', { type: 'box' });
+app.root.addChild(box);
+
+app.on('update', (dt: number) => {
+  box.rotate(10 * dt, 20 * dt, 30 * dt);
+});
+```
+
+---
+
+### 4. React Three Fiber (R3F) with React 19
+
+```tsx
+import { Canvas } from '@react-three/fiber';
+import { OrbitControls, Environment, useGLTF, Float } from '@react-three/drei';
+
+function ModelViewer() {
+  const { scene } = useGLTF('/models/drone.glb');
+  return (
+    <Float speed={2} rotationIntensity={0.5} floatIntensity={1}>
+      <primitive object={scene} />
+    </Float>
+  );
+}
+
+export default function App() {
+  return (
+    <Canvas
+      gl={(canvas) => new THREE.WebGPURenderer({ canvas, antialias: true })}
+      camera={{ position: [0, 1.5, 4], fov: 45 }}
+      dpr={[1, 2]}
+    >
+      <ambientLight intensity={0.6} />
+      <directionalLight position={[5, 10, 5]} castShadow intensity={1.5} />
+      <ModelViewer />
+      <Environment preset="city" />
+      <OrbitControls makeDefault enableDamping dampingFactor={0.05} />
+    </Canvas>
+  );
+}
+
+// Preload critical assets outside component tree
+useGLTF.preload('/models/drone.glb');
+```
+
+---
+
+### Modern Asset Pipeline & GPU Memory Optimization
+
+#### 1. GPU Texture Compression: KTX2 + Basis Universal (`KHR_texture_basisu`)
+> **CRITICAL RULE**: Never deploy raw PNG or JPG textures for 3D production models.
+- **Why?** PNG/JPG files decompress into uncompressed 32-bit RGBA inside GPU VRAM. A 2048x2048 PNG consumes **16MB of VRAM**; an uncompressed 4K texture consumes **64MB of VRAM**.
+- **KTX2 with Basis Universal** transcodes in real-time into native GPU-compressed formats:
+  - Mobile: ASTC / ETC2.
+  - Desktop: BC7 / BC1.
+- **Result:** Saves **75% to 85% of GPU VRAM**, prevents mobile browser tab crashes, and eliminates texture upload GPU hitches.
+- **Tooling:** Compress glTF files with `gltf-transform`:
+  ```bash
+  npx @gltf-transform/cli optimize input.glb output.glb --texture-compress ktx2
+  ```
+
+#### 2. Geometry Optimization: Meshopt (`EXT_meshopt_compression`)
+- Prefer **Meshopt** over Draco for high-framerate interactive apps and games.
+- **Advantage:** Meshopt WASM decompressor runs at **gigabytes per second** (up to 10x faster decompression than Draco on mobile CPUs) and organizes vertex attributes for maximum GPU vertex cache efficiency.
+  ```bash
+  npx @gltf-transform/cli meshopt input.glb output.glb
+  ```
+
+#### 3. Strict Memory Lifecycle Management (`.dispose()`)
+Garbage collection does NOT clean up WebGL/WebGPU buffers:
+- When removing an object from Three.js or Babylon.js, explicitly traverse and dispose:
+```typescript
+export function purgeObject(object: THREE.Object3D) {
+  object.traverse((child) => {
+    if ((child as THREE.Mesh).isMesh) {
+      const mesh = child as THREE.Mesh;
+      mesh.geometry?.dispose();
+      if (Array.isArray(mesh.material)) {
+        mesh.material.forEach((m) => disposeMaterial(m));
+      } else if (mesh.material) {
+        disposeMaterial(mesh.material);
+      }
+    }
+  });
+}
+
+function disposeMaterial(material: THREE.Material) {
+  Object.keys(material).forEach((prop) => {
+    const value = (material as any)[prop];
+    if (value && typeof value.dispose === 'function') {
+      value.dispose();
+    }
+  });
+  material.dispose();
+}
+```
+
+---
+
+### Production Checklist
+- [ ] Render with `WebGPURenderer` (Three.js) or `WebGPUEngine` (Babylon.js) with fallback enabled.
+- [ ] Use KTX2 / Basis Universal compressed textures on all `.glb` assets.
+- [ ] Use Meshopt geometry compression to eliminate model loading CPU stalls.
+- [ ] Clamp `devicePixelRatio` to `Math.min(window.devicePixelRatio, 2)` to prevent 4K/Retina mobile GPU thermal throttling.
+- [ ] Use `InstancedMesh` (Three.js) or `Thin Instances` (Babylon.js) for repetitive assets (>10 meshes).
+- [ ] Implement explicit `.dispose()` cleanup in `useEffect` or component unmount hooks.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi skill domain yang relevan:
+- `senior-frontend` — Integrasi React Three Fiber (R3F) pada React 19 / Next.js 15.
+- `vue-frontend-expert` — Integrasi TresJS pada Vue 3 / Nuxt 3.
+- `svelte-sveltekit-expert` — Integrasi Threlte pada Svelte 5 (Runes).
+- `web-game-engine-expert` — Simulasi fisika (Rapier, Jolt, Havok), game loop, dan ECS.
+- `glsl-shader-expert` — Bahasa shader, compute shader WGSL, dan node TSL.
+- `webxr-ar-vr-expert` — Pengalaman WebXR VR/AR imersif.
+- `performance-web-vitals` — Meminimalkan TBT (Total Blocking Time) dan optimasi ukuran bundle.
+
+### Deskripsi
+Panduan produksi untuk membangun grafis 3D performa tinggi di browser. Mengutamakan paradigma modern **WebGPU-first** dengan fallback otomatis ke WebGL2, **Three.js (r170+) WebGPURenderer** dan **TSL (Three Shading Language)**, **Babylon.js WebGPUEngine** dengan Snapshot Rendering, serta **PlayCanvas Engine** untuk aplikasi komersial mobile yang sangat ringan dan cepat dimuat.
+
+### Kondisi Pemicu
+Aktifkan skill ini ketika pengguna:
+- Menginisialisasi *scene* WebGPU atau WebGL 3D.
+- Menggunakan `three` (`three/webgpu`), `@react-three/fiber`, `@babylonjs/core`, `playcanvas`, `@tresjs/core`, atau `@threlte/core`.
+- Menulis atau merefaktor shader ke Three Shading Language (TSL) atau WGSL.
+- Memuat dan mengoptimalkan model 3D (`.glb`, `.gltf`) menggunakan kompresi tekstur KTX2 atau Meshopt.
+- Mengimplementasikan post-processing, compute shader, atau sistem partikel pada GPU.
+- Mengatasi penurunan FPS (*frame drop*), hambatan *draw call*, atau kebocoran memori VRAM.
+
+---
+
+### Panduan Inti & Rekomendasi Mesin 3D
+
+1. **Three.js WebGPU + TSL**:
+   - Gunakan `WebGPURenderer` alih-alih `WebGLRenderer` standar.
+   - Manfaatkan TSL (*Three Shading Language*) dan *Node Materials*. Kode shader TSL ditulis secara deklaratif dalam TypeScript/JavaScript dan otomatis dikompilasi menjadi WGSL pada WebGPU dan GLSL pada WebGL2.
+
+2. **Babylon.js Snapshot Rendering**:
+   - Untuk skenario dengan ribuan mesh statis, aktifkan `engine.snapshotRendering = true` untuk merekam *command buffer* GPU sekali saja, memotong hampir 100% *overhead* CPU draw call JavaScript.
+
+3. **PlayCanvas Engine (Performa Mobile Ekstrem)**:
+   - Jika waktu muat (*initial load*) dan ukuran bundle adalah prioritas utama (misalnya iklan interaktif, 3D e-commerce configurator, game web mobile), PlayCanvas hanya memakan ~200KB gzipped dengan fitur *clustered lighting* yang sangat cepat.
+
+4. **Kompresi Tekstur GPU KTX2 (Wajib)**:
+   - Jangan menyajikan file PNG/JPG mentah di produksi. Format PNG/JPG diekspansi menjadi uncompressed RGBA di VRAM GPU (tekstur 4K memakan 64MB VRAM).
+   - Gunakan **KTX2 / Basis Universal** yang tetap terkompresi langsung di VRAM GPU (menghemat 75%-85% VRAM dan mencegah browser mobile crash).
+
+5. **Kompresi Geometri Meshopt**:
+   - Gunakan kompresi **Meshopt** (`EXT_meshopt_compression`) alih-alih Draco jika membutuhkan dekompresi super cepat di browser (hingga 10x lebih cepat dibanding Draco pada CPU mobile).
+
+6. **Pembersihan Memori Bersih (`.dispose()`)**:
+   - Browser garbage collector tidak dapat menghapus buffer GPU secara otomatis. Selalu panggil method `.dispose()` pada geometry, material, dan texture saat komponen di-unmount.