# Three.js Render Pipeline - FikoYT

## 🎬 Dual Renderer

**WebGL + CSS3D:**
```typescript
// WebGL renderer (3D)
this.sunucu = new THREE.WebGLRenderer({
  antialias: true,
  alpha: true
});

// CSS3D renderer (HTML)
this.sunucuCSS3d = new CSS3DRenderer();
this.sunucuCSS3d.domElement.style.position = 'absolute';
this.sunucuCSS3d.domElement.style["pointer-events"] = "none";
```

## 🔄 Smart Rendering

**On-demand mode:**
```typescript
markNeedsRender(): void {
  this.needsRender = true;
  if (this.renderMode === 'on-demand' && !this.animationFrameId) {
    this.ciz();
  }
}
```

**Staggered updates:**
```typescript
sun(): void {
  // Frame 1: Frustum culling
  if (frameCount % 2 === 0) {
    frustumCuller.updateFrustum(kamera);
  }

  // Frame 2: LOD updates
  if (frameCount % 3 === 0) {
    lodManager.updateLODs(kamera);
  }

  // Frame 3: CSS3D render
  if (frameCount % 2 === 0 && css3dSahne) {
    sunucuCSS3d.render(css3dSahne, kamera);
  }
}
```

## ⚡ Performance Optimizations

1. **Frame limiting:** 90 FPS max
2. **Frustum culling:** 2 frame intervals
3. **LOD switching:** 3 frame intervals
4. **Object pooling:** Memory reuse
5. **Instanced meshes:** Batch rendering

## 🎮 NgZone Integration

**Outside Angular zone:**
```typescript
ciz(): void {
  this.ngZone.runOutsideAngular(() => {
    this.sun();
    this.needsRender = false;
  });
}
```

**OnPush strategy:**
```typescript
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})
```

## 📱 Mobile Optimizations

- **Touch throttling:** 32 FPS max for raycast
- **Passive events:** Scroll performance
- **Battery API:** Adaptive quality
- **Visibility API:** Tab switching

---

2025-11-06