Web 3d Graphics Expert

Web 3D Graphics Expert (Three.js & Babylon.js)

English | Bahasa Indonesia

English

Orchestration & Integration

Connects and orchestrates with relevant domain skills like brainstorming, zero-to-prod-orchestrator, and project-context-mapper to ensure cohesive execution.

Description

Production-level guidance for developing high-performance 3D graphics in the browser. Covers the raw APIs of Three.js and Babylon.js, as well as framework-specific wrappers like React Three Fiber (R3F) for React and TresJS for Vue. Focuses on rendering performance, efficient memory management, and realistic lighting/material setups.

Trigger Conditions

Activate this skill when the user is:

• Initializing a WebGL/WebGPU 3D scene.
• Using three, @react-three/fiber, @babylonjs/core, or @tresjs/core.
• Loading 3D models (.glb, .gltf, .obj).
• Adding advanced lighting, shadows, or Post-Processing effects (Bloom, Depth of Field).
• Asking about framerate drops, memory leaks, or rendering performance in 3D apps.

Core Concepts & Framework Selection

1. React Three Fiber (R3F) vs Vanilla Three.js

When building with React, always use React Three Fiber. It manages the scene graph, object lifecycles, and requestAnimationFrame natively within the React component tree.

import { Canvas } from '@react-three/fiber'
import { OrbitControls, Environment, useGLTF } from '@react-three/drei'

export default function App() {
  const { scene } = useGLTF('/model.glb')
  return (
    <Canvas camera={{ position: [0, 2, 5] }}>
      <ambientLight intensity={0.5} />
      <directionalLight position={[10, 10, 5]} castShadow />
      <primitive object={scene} />
      <Environment preset="city" />
      <OrbitControls />
    </Canvas>
  )
}

Note: Always use @react-three/drei for common helpers (OrbitControls, Text, Environment).

2. Babylon.js vs Three.js

• Three.js: Lighter, more flexible, vast community, excellent for creative coding, landing page animations, and React/Vue integrations.
• Babylon.js: Robust, game-engine-like architecture, built-in physics, excellent for web-based games, AR/VR (WebXR), and complex interactive simulations. Fully written in TypeScript.

// Basic Babylon.js Setup
import { Engine, Scene, FreeCamera, Vector3, MeshBuilder, HemisphericLight } from '@babylonjs/core'

const canvas = document.getElementById('renderCanvas') as HTMLCanvasElement
const engine = new Engine(canvas, true)
const scene = new Scene(engine)

const camera = new FreeCamera('camera1', new Vector3(0, 5, -10), scene)
camera.setTarget(Vector3.Zero())
camera.attachControl(canvas, true)

const light = new HemisphericLight('light', new Vector3(0, 1, 0), scene)
const sphere = MeshBuilder.CreateSphere('sphere', { diameter: 2 }, scene)

engine.runRenderLoop(() => {
  scene.render()
})

3. Asset Loading & Optimization

• Format: ALWAYS use .glb or .gltf. Avoid .obj or .fbx in the browser as they are unoptimized.
• Compression: Use Draco compression (glTF-Transform or gltf-pipeline) to dramatically reduce file sizes.
• Loading: Preload models if they are critical to the first paint.

Best Practices for Performance

1. Geometry and Material Reuse: Never create new Geometries or Materials inside the render loop. Instantiate them once and reuse them. Use InstancedMesh (Three.js) or Thin Instances (Babylon.js) when rendering hundreds of identical objects.
2. Memory Management (Disposing): WebGL does not automatically garbage collect textures and geometries. When an object is removed from the scene, you MUST call .dispose() on its geometry and material. (Note: R3F handles this automatically when components unmount).
3. Shadows & Lighting: Limit the number of shadow-casting lights to 1 or 2. Use baked shadows (lightmaps) for static scenes. Use Environment maps (HDRI) instead of multiple lights for realistic reflections.
4. Post-Processing: Post-processing requires rendering the scene multiple times. Use it sparingly. Group passes together when possible.

Integration with Other Skills (MANDATORY)

This skill works best when combined with:

• senior-frontend — When integrating React Three Fiber into Next.js/React applications.
• vue-frontend-expert — When integrating TresJS into Vue 3/Nuxt 3 applications.
• performance-web-vitals — To optimize the bundle size of 3D libraries and reduce Total Blocking Time (TBT).

Referenced By Orchestrators (MANDATORY)

This skill should be referenced by the following orchestrators:

• brainstorming — Add to "UI/UX & Design Systems" or create a "3D & Graphics" category.
• zero-to-prod-orchestrator — Phase 5 (Frontend Implementation).

Bahasa Indonesia

Integrasi Orkestrasi

Terhubung dan mengorkestrasi skill domain yang relevan seperti brainstorming, zero-to-prod-orchestrator, dan project-context-mapper untuk memastikan eksekusi yang kohesif.

Deskripsi

Panduan produksi untuk pengembangan grafis 3D performa tinggi di browser. Mencakup Three.js dan Babylon.js, serta integrasi framework seperti React Three Fiber (R3F) untuk React dan TresJS untuk Vue. Fokus pada performa render, manajemen memori, dan pencahayaan realistis.

Kondisi Pemicu

Aktifkan skill ini ketika pengguna sedang:

• Menginisialisasi scene WebGL 3D.
• Menggunakan library three, @react-three/fiber, atau @babylonjs/core.
• Memuat model 3D (terutama format .glb/.gltf).
• Mengoptimalkan FPS (frame-rate) atau menangani masalah memory leak pada aplikasi 3D.

Panduan Singkat

• Pemilihan Alat: Gunakan React Three Fiber jika menggunakan React. Gunakan TresJS jika menggunakan Vue. Gunakan Babylon.js jika membuat game berbasis web yang membutuhkan mesin fisika kuat (physics engine).
• Format Aset: Selalu gunakan format .glb dengan kompresi Draco.
• Performa: Jangan membuat Geometry atau Material baru di dalam render loop (requestAnimationFrame).
• Manajemen Memori: Panggil method .dispose() pada geometry, material, dan texture yang sudah tidak digunakan di vanilla Three.js/Babylon.js untuk mencegah kebocoran memori.
• Pencahayaan: Gunakan Environment map (HDRI) untuk pencahayaan realistis yang lebih ringan diproses daripada banyak lampu directional/point. Batasi lampu yang memancarkan bayangan maksimal 1-2 saja.