# Three.js Materials - FikoYT

## 🎨 Material Types

**Standard materials:**
- **MeshPhongMaterial:** Default phong shading
- **MeshLambertMaterial:** Non-shiny surfaces
- **MeshBasicMaterial:** Unlit surfaces

## 🖌️ Vertex Colors

**Required attributes:**
```typescript
// Position + Color + Alpha
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
geometry.setAttribute('alpha', new THREE.Float32BufferAttribute(alphas, 1));
```

## 🔍 Highlight Materials

**Face highlight:**
```typescript
const material = new THREE.MeshPhongMaterial({
  color: 0xFF3333,
  side: THREE.DoubleSide,
  transparent: true,
  opacity: 0.6,
  polygonOffset: true,
  depthTest: true,
  emissive: 0xFF5555
});
```

**Line highlight:**
```typescript
const lineMaterial = new LineMaterial({
  color: 0xff6600,
  linewidth: 8,
  vertexColors: true,
  depthTest: false,
  transparent: true,
  opacity: 1
});
```

## 📦 Material Pooling

**Reuse pattern:**
```typescript
// Acquire from pool
const material = materialPool.acquire();

// Configure
material.color.set(0xff0000);
material.transparent = true;
material.opacity = 0.8;

// Release for reuse
materialPool.release(material);
```

## ⚡ Optimizations

- **Vertex colors:** GPU-side processing
- **Batching:** Similar materials together
- **Disposal:** Manual cleanup required
- **Sharing:** Same material for meshes

---

2025-11-06